/*--------------------------------------------------------
  || Settings, Variables, Properties
--------------------------------------------------------*/
:root {
  /* Typography */
  --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Montserrat', var(--font-primary);

  --color-gold: #FFE66D;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* Font Sizes */
  --fs-text-sm: 0.8rem;
  --fs-text-md: 1.1rem;
  --fs-text-lg: 1.2rem;
  --fs-text-xl: 1.4rem;
  --fs-heading-sm: 1.2rem;
  --fs-heading-md: 1.6rem;
  --fs-heading-lg: 2rem;
  --fs-heading-xl: 2.2rem;

  /* Border Radius */
  --br-sm: 5px;
  --br-md: 16px;
  --br-lg: 50px;

  /* Content Widths */
  --content-max-width: 1200px;
  --text-max-width: 800px;
  --image-max-width: 600px;
}

@media (min-width: 480px) {
  :root {
    --fs-text-sm: 0.9rem;
    --fs-text-xl: 1.5rem;
    --fs-heading-md: 1.8rem;
    --fs-heading-xl: 2.5rem;
  }
}

@media (min-width: 768px) {
  :root {
    --fs-heading-sm: 1.5rem;
    --fs-heading-md: 2rem;
    --fs-heading-lg: 2.5rem;
    --fs-heading-xl: 3rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-heading-xl: 4rem;
  }
}

/* Colors - Theme */
.theme-default {
  --color-white: #F4F3EE;
  --color-light: #BCB8B1;
  --color-mid: #8a817c;
  --color-accent: #e0afa0;
  --color-dark: #463F3A;
  --color-black: #000000;
  --color-border: #d7ba8599;
}

.theme-colosseum {
  --color-white: #f2f1eb;
  --color-light: #e1deca;
  --color-mid: #DCB18F;
  --color-accent: #70AAB8;
  --color-dark: #36353B;
  --color-black: #000000;
  --color-border: #d7ba8599;
}

.theme-jungle {
  --color-white: #FFFFFF;
  --color-light: #D9E9CF;
  --color-mid: #2A9D8F;
  --color-accent: #E9C46A;
  --color-dark: #264653;
  --color-black: #000000;
  --color-border: #87a5a2cc;
}

.theme-beach {
  --color-white: #FFFFFF;
  --color-light: #F5F1DC;
  --color-mid: #98c1d9;
  --color-accent: #e9c46a;
  --color-dark: #3d5a80;
  --color-black: #000000;
  --color-border: #7FB3D3cc;
}

.theme-mountain {
  --color-white: #FFFFFF;
  --color-light: #d1e5e7;
  --color-mid: #5B8A9C;
  --color-accent: #E67E22;
  --color-dark: #2e454d;
  --color-black: #000000;
  --color-border: #7FA8B8cc;
}

.theme-desert {
  --color-white: #fffcf9;
  --color-light: #fff5e7;
  --color-mid: #D4A574;
  --color-accent: #ff9f1c;
  --color-dark: #9d4c15;
  --color-black: #000000;
  --color-border: #D4A574cc;
}

.theme-ocean {
  --color-white: #eef2fa;
  --color-light: #cadde7;
  --color-mid: #457b9d;
  --color-accent: #e74100;
  --color-dark: #1d3557;
  --color-black: #000000;
  --color-border: #64B5F6cc;
  /*#26C6DA*/
}

.theme-forest {
  --color-white: #f3f2ef;
  --color-light: #dad7cd;
  --color-mid: #a3b18a;
  --color-accent: #dda15e;
  --color-dark: #3a5a40;
  --color-black: #000000;
  --color-border: #66BB6Acc;
}

.theme-volcano {
  --color-white: #FFFFFF;
  --color-light: #E0E0E0;
  --color-mid: #424242;
  --color-accent: #D32F2F;
  --color-dark: #212121;
  --color-black: #000000;
  --color-border: #757575cc;
}

/* || Base ------------------ */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  line-height: 1.6;
}

/*
->moved to .component.title
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
} 
*/

.link-reset {
  /* display: inherit; */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/*--------------------------------------------------------
  || Element Properties
--------------------------------------------------------*/
/* Spacing */
.spacing-none {
  margin-top: 0;
  --property-spacing: 0px;
}

.spacing-sm {
  margin-top: var(--space-sm);
  --property-spacing: var(--space-sm);
}

.spacing-md {
  margin-top: var(--space-md);
  --property-spacing: var(--space-md);
}

.spacing-lg {
  margin-top: var(--space-lg);
  --property-spacing: var(--space-lg);
}

/* Alignment */
.align-left {
  text-align: left;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

/* Background Color */
.bg-color-none {
  background-color: transparent;
  box-shadow: none !important;
  --property-bg-color: transparent;
}

.bg-color-white {
  background-color: var(--color-white);
  --property-bg-color: var(--color-white);
}

.bg-color-light {
  background-color: var(--color-light);
  --property-bg-color: var(--color-light);
}

.bg-color-mid {
  background-color: var(--color-mid);
  --property-bg-color: var(--color-mid);
}

.bg-color-accent {
  background-color: var(--color-accent);
  --property-bg-color: var(--color-accent);
}

.bg-color-dark {
  background-color: var(--color-dark);
  --property-bg-color: var(--color-dark);
}

.bg-color-black {
  background-color: var(--color-black);
  --property-bg-color: var(--color-black);
}

/* Text Color */
.text-color-white {
  color: var(--color-white);
}

.text-color-light {
  color: var(--color-light);
}

.text-color-mid {
  color: var(--color-mid);
}

.text-color-accent {
  color: var(--color-accent);
}

.text-color-dark {
  color: var(--color-dark);
}

.text-color-black {
  color: var(--color-black);
}

/* Auto Text Color */
:root {
  --auto-color-white: var(--color-white);
  --auto-color-light: var(--color-light);
  --auto-color-mid: var(--color-mid);
  --auto-color-accent: var(--color-accent);
  --auto-color-dark: var(--color-dark);
  --auto-color-black: var(--color-black);
}

.bg-color-white,
.bg-color-light {
  --auto-color-white: var(--color-mid);
  --auto-color-light: var(--color-dark);
  --auto-color-mid: var(--color-mid);
  --auto-color-accent: var(--color-accent);
  --auto-color-dark: var(--color-dark);
}

.bg-color-mid {
  --auto-color-white: var(--color-white);
  --auto-color-light: var(--color-light);
  --auto-color-mid: var(--color-accent);
  --auto-color-accent: var(--color-accent);
  --auto-color-dark: var(--color-dark);
}

.bg-color-accent {
  --auto-color-white: var(--color-white);
  --auto-color-light: var(--color-light);
  --auto-color-mid: var(--color-mid);
  --auto-color-accent: var(--color-mid);
  --auto-color-dark: var(--color-dark);
}

.bg-color-dark {
  --auto-color-white: var(--color-white);
  --auto-color-light: var(--color-light);
  --auto-color-mid: var(--color-accent);
  --auto-color-accent: var(--color-accent);
  --auto-color-dark: var(--color-mid);
}

/* Font Size */
.font-size-sm {
  font-size: var(--fs-text-sm);
}

.font-size-md {
  font-size: var(--fs-text-md);
}

.font-size-lg {
  font-size: var(--fs-text-lg);
}

.font-size-xl {
  font-size: var(--fs-text-xl);
}

/* Width */
.width-fill {
  width: 100%;
}

.width-fit {
  width: fit-content;
}

/*  Shapes */
.shape-none {
  border-radius: var(--br-md) !important;
}

.shape-round {
  border-radius: var(--br-lg) !important;
}

.shape-square {
  aspect-ratio: 1/1;
  border-radius: var(--br-md) !important;
}

.shape-circle {
  aspect-ratio: 1/1;
  border-radius: 50% !important;
}

/*--------------------------------------------------------
  || Sections
--------------------------------------------------------*/
.section {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Section ------------------ */
.section.base {
  padding: var(--space-xl) var(--space-md);
}

.section.base:has(>img) {
  position: relative;
  min-height: 100vh;
  background-color: transparent;
}

.section.base>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
  z-index: -1;
  pointer-events: none;
}

/* Nav ------------------ */
.section.navbar {
  /* position: fixed; */
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  /* border-bottom: 1px solid var(--color-border); */
  z-index: 100;
  backdrop-filter: blur(10px);
}

.section.navbar>nav {
  display: grid;
  grid-template-areas: "brand slot";
  grid-template-columns: auto auto;
  justify-content: space-between;
  column-gap: var(--space-md);
  width: 100%;
  max-width: var(--content-max-width);
}

.section.navbar .nav-brand {
  grid-area: brand;
  display: flex;
  align-items: center;
}

.section.navbar .nav-brand img {
  height: 40px;
  object-fit: cover;
  border-radius: 2px;
  vertical-align: middle;
}

.section.navbar .nav-brand h2 {
  color: var(--auto-color-dark);
}

.section.navbar>nav>.slot {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  grid-area: slot;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.section.navbar .nav-hamburger {
  display: none;
  background-color: #ffffffcc;
  border: 1px solid var(--color-border);
  border-radius: var(--br-sm);
  padding: 8px;
  cursor: pointer;
  touch-action: none;
  color: #757778;
}

.section.navbar .nav-hamburger svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Hamburger Mode */
.section.navbar nav.hamburger {
  grid-template-areas: "brand hamburger" "slot slot";
}

.section.navbar nav.hamburger .nav-hamburger {
  margin-left: auto;
  display: block;
  grid-area: hamburger;
}

.section.navbar>nav.hamburger>.slot {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.section.navbar>nav.hamburger>.slot>:first-child {
  margin-top: var(--space-md);
}

.section.navbar>nav.hamburger>.slot>:last-child {
  margin-bottom: var(--space-md);
}

.section.navbar>nav.hamburger>.slot.open {
  max-height: 500px;
}

@media (min-width: 768px) {
  .section.navbar .nav-brand img {
    height: 44px;
  }
}

/* Footer ------------------ */
.section.footer {
  flex-direction: column;
  border-top: 1px solid var(--color-border);
  position: relative;
}

.section.footer .footer-content {
  max-width: var(--content-max-width);
  width: 100%;
  padding: var(--space-xl) var(--space-md) var(--space-sm);
  color: var(--auto-color-white);

  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "brand" "contact" "nav" "connect" "legal";
  grid-template-rows: auto auto auto auto auto;
  justify-items: center;
  gap: var(--space-lg);
}

.section.footer .footer-content h4 {
  margin-bottom: var(--space-xs);
  color: var(--auto-color-accent);
  font-size: var(--fs-text-lg);
}

.section.footer .footer-content a:hover svg {
  transform: scale(1.05);
}

/* Content */
.section.footer .footer-contact,
.section.footer .footer-brand,
.section.footer .footer-nav,
.section.footer .footer-connect {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.section.footer .footer-contact {
  grid-area: contact;
}

.section.footer .footer-brand {
  grid-area: brand;
}

.section.footer .footer-nav {
  grid-area: nav;
}

.section.footer .footer-connect {
  grid-area: connect;
}

/* Contact */
.section.footer .contact-item {
  display: flex;
  gap: var(--space-md);
  text-align: left;
  align-self: flex-start;
}

.section.footer .contact-item svg {
  width: 24px;
  height: 24px;
}

/* Brand */
.section.footer .footer-brand img {
  height: 128px;
  border-radius: var(--br-sm);
}

.section.footer .footer-brand h4 {
  font-size: var(--fs-heading-md);
}

.section.footer .footer-brand p {
  font-size: var(--fs-text-md);
}

/* Connect */
.section.footer .footer-connect svg {
  width: 32px;
  margin: 0px 6px;
  transition: transform 0.2s ease;
}

/* Legal */
.section.footer .footer-legal {
  grid-area: legal;
  border-top: 1px solid var(--color-border);
  width: 100%;
  text-align: center;
}

.section.footer .footer-legal>:not(.footer-copyright) {
  color: #808080;
  padding: var(--space-xs);
  font-size: var(--fs-text-sm);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.section.footer .footer-legal .footer-copyright,
.section.footer .footer-legal .footer-powered {
  padding-top: var(--space-md);
}

.section.footer .footer-legal a {
  color: #808080;
}

.section.footer .footer-legal>a {
  text-decoration: none;
}

@media (min-width: 768px) {
  .section.footer .footer-content {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "contact contact contact" "brand nav connect" "legal legal legal";
    grid-template-rows: auto auto auto;
  }

  .section.footer .footer-contact {
    margin-bottom: var(--space-lg);
    width: 100%;
  }

  .section.footer .footer-contact,
  .section.footer .footer-brand,
  .section.footer .footer-nav,
  .section.footer .footer-connect {
    text-align: left;
    align-items: flex-start;
  }
}

/*--------------------------------------------------------
  || Layouts
--------------------------------------------------------*/
.layout {
  border-radius: var(--br-md);
}

.slot {
  width: 100%;
  max-width: var(--content-max-width);
  height: 100%;
}

/* Split ------------------ */
.layout.split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.layout.split>.slot {
  flex: 1 1 160px;
}

.section-slot>.layout.split>.slot {
  flex: 1 1 480px;
}

@media (min-width: 480px) {
  .section-slot>.layout.split {
    gap: var(--space-lg);
  }
}

/* Triple ------------------ */
.layout.triple {
  container-type: inline-size;
  container-name: layout-triple;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
}

.layout.triple>.slot {
  flex: 1 1 160px;
  max-width: 100%;
}

@container layout-triple (min-width: calc(160px * 2 + 1rem)) {
  .layout.triple>.slot {
    max-width: 50%;
  }
}

.section-slot>.layout.triple {
  gap: var(--space-md);
}

.section-slot>.layout.triple>.slot {
  flex: 1 1 300px;
  max-width: 100%;
}

@container layout-triple (min-width: calc(300px * 2 + 2rem)) {
  .section-slot>.layout.triple>.slot {
    max-width: 50%;
  }
}

/* Grid ------------------ */
.layout.grid>.slot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-auto-rows: max-content;
  justify-items: center;
  align-items: center;
  gap: var(--space-sm);
}

.section-slot>.layout.grid>.slot {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-md);
}

/* Sequence ------------------ */
.layout.sequence {
  --padding-top: var(--property-spacing);
  --cricle-size: 40px;
  position: relative;
  padding: var(--padding-top) var(--space-md) var(--space-md) 64px;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: calc(var(--text-max-width) * 1.2);
  counter-increment: sequence;
}

.layout.sequence::before {
  content: counter(sequence);
  position: absolute;
  left: 10px;
  top: var(--padding-top);
  width: var(--cricle-size);
  height: var(--cricle-size);
  z-index: 2;
  background: var(--auto-color-mid);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.layout.sequence::after {
  content: '';
  position: absolute;
  left: 29px;
  top: 0;
  bottom: 0;
  width: 2px;
  z-index: 1;
  background: var(--auto-color-mid);
}

/* First */
.layout.sequence:not(.layout.sequence + .layout.sequence) {
  --padding-top: var(--space-sm);
  margin-top: var(--property-spacing);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  counter-reset: sequence;
}

.layout.sequence:not(.layout.sequence + .layout.sequence)::after {
  top: calc(var(--padding-top) + var(--cricle-size) / 2);
}

/* Middle */
.layout.sequence+.layout.sequence:has(+ .layout.sequence) {
  border-radius: 0;
}

/* Last */
.layout.sequence:not(:has(+ .layout.sequence)) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.layout.sequence:not(:has(+ .layout.sequence))::after {
  bottom: calc(100% - var(--property-spacing) - var(--cricle-size) / 2);
}

/* .layout.sequence+ :not(.layout.sequence)::before {
  counter-reset: sequence;
} */

.layout.sequence>.slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 10px;
}

/* Expand ------------------ */
.layout.expand {
  position: relative;
  max-width: var(--text-max-width);
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-xs) var(--space-sm) 0;

  display: grid;
  grid-template-rows: max-content 0fr;
  /* transition: grid-template-rows 4s ease; */
}

.layout.expand.alternative-style-active,
.layout.expand:has(.alternative-style-active) {
  grid-template-rows: max-content 1fr;
}

.layout.expand>.slot:nth-child(2) {
  min-height: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  /* transition: padding-bottom 4s ease; */
}

.layout.expand.alternative-style-active>.slot:nth-child(2),
.layout.expand:has(.alternative-style-active)>.slot:nth-child(2) {
  padding-bottom: var(--space-sm);
  overflow: visible;
}

.layout.expand>.slot:nth-child(1) {
  position: relative;
  scroll-margin-top: 10vh;
  padding: 0 var(--space-sm) var(--space-xs) 0;
  cursor: pointer;
}

.layout.expand>.slot:nth-child(1)::after {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translateY(-100%) rotate(45deg);
  content: '×';
  font-size: var(--fs-text-xl);
  color: var(--auto-color-dark);
  line-height: 0.5;
  transition: transform 0.3s ease;
}

.layout.expand.alternative-style-active .slot:nth-child(1)::after,
.layout.expand:has(.alternative-style-active) .slot:nth-child(1)::after {
  transform: translateY(-100%) rotate(0deg);
}

/* Panel ------------------ */
.layout.panel {
  border-radius: var(--br-md);
  box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.1);
  padding: var(--space-md);
  max-width: calc(var(--text-max-width) * 1.2);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}

.section-slot>.layout.panel {
  padding: var(--space-lg);
}

/* Button ------------------ */
.layout.button {
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
}

.layout.button .slot {
  display: block;
  padding: var(--space-sm) var(--space-md);
  transition: transform 0.3s ease;
}

.layout.button:hover {
  transform: scale(1.01);
}

/* Carousel ------------------ */
.layout.carousel {
  position: relative;
}

.layout.carousel>.slot {
  display: flex;
  align-items: center;
  padding: var(--space-md) 10%;
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  transition: transform 0.3s ease;
}

.layout.carousel>.slot>* {
  flex: 1 0 auto;
  width: var(--carousel-item-width, auto);
  min-width: 300px;
  scroll-snap-align: var(--snap-align, center);
  scroll-margin: var(--snap-margin, 0);
}

.layout.carousel .carousel-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
}

.layout.carousel .carousel-nav button {
  background: none;
  border-radius: var(--br-sm);
  color: var(--auto-color-mid);
  font-size: var(--fs-heading-lg);
  border: none;
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.layout.carousel .carousel-nav svg {
  width: 24px;
  height: 24px;
}

.layout.carousel .carousel-nav-back svg {
  transform: rotate(180deg);
}

.layout.carousel .carousel-nav button:hover {
  transform: scale(1.04) translateY(-2px);
}

.layout.carousel .carousel-nav button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/*--------------------------------------------------------
  || Components
--------------------------------------------------------*/
.component {
  border-radius: var(--br-md);
  min-width: 60px;
  /* overflow-wrap: anywhere; */
  word-break: break-word;
}

/* Text Components */
.component .text-content {
  display: block;
  outline: none;
}

/* Title Component ------------------ */
.component.title {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
}

.component.title.font-size-sm {
  font-size: var(--fs-heading-sm);
}

.component.title.font-size-md {
  font-size: var(--fs-heading-md);
}

.component.title.font-size-lg {
  font-size: var(--fs-heading-lg);
}

.component.title.font-size-xl {
  font-size: var(--fs-heading-xl);
}

/* Image Component ------------------ */
.component.image {
  max-width: var(--image-max-width);
  margin-left: auto;
  margin-right: auto;
}

.component.image img {
  display: block;
  object-fit: cover;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  aspect-ratio: 3/2;
}

/* Button Component ------------------ */
.component.button {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.component.button:hover {
  transform: scale(1.01);
}

/* Activity Component ------------------ */
.component.activity {
  border-radius: var(--br-md);
  box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.1);
  margin-left: auto;
  margin-right: auto;
  max-width: 400px;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease;
}

.component.activity:hover {
  transform: scale(1.01);
}

.component.activity .activity-image-container {
  position: relative;
  border-radius: var(--br-md) var(--br-md) 0 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.component.activity .activity-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.component.activity .activity-description {
  position: absolute;
  bottom: 0;
  transform: translateY(100%);
  padding: var(--space-sm) var(--space-md);
  /* border-radius: var(--br-md) var(--br-md) 0 0; */
  background-color: rgba(from var(--property-bg-color) r g b / 0.7);
  color: var(--auto-color-dark);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  will-change: transform;
  transition: transform 0.4s ease 0.2s;
}

.component.activity .activity-toggle {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  transform: translateY(-100%);
  border-radius: 50% 50% 0 0;
  background-color: var(--property-bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
  transition: background-color 0.2s ease;
}

.component.activity .activity-toggle input {
  position: absolute;
  bottom: 0;
  opacity: 0;
}

.component.activity .activity-toggle svg {
  width: 48px;
  height: 48px;
  transform: rotate(-90deg);
  padding: var(--space-xs);
  color: var(--color-light);
  transition: transform 0.4s ease;
}

.component.activity.bg-color-light .activity-toggle svg {
  /* Auto Text Color Override*/
  color: var(--color-white);
}

.component.activity .activity-content {
  padding: var(--space-md);
  color: var(--auto-color-dark);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.component.activity .activity-link {
  font-weight: 500;
  color: var(--auto-color-mid);
  margin-top: auto;
}

.component.activity:hover .activity-link {
  text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {

  .component.activity:hover .activity-description,
  .component.activity.alternative-style-active .activity-description {
    transform: translateY(0);
  }

  .component.activity .activity-toggle {
    display: none;
  }
}

@media (hover: none),
(pointer: coarse) {
  .component.activity .activity-description {
    border-radius: 0;
    padding-top: 0;
    transition: transform 0.4s ease;
  }

  .component.activity .activity-content {
    padding-top: var(--space-sm);
  }

  .component.activity:has(.activity-toggle input:checked) .activity-description,
  .component.activity.alternative-style-active .activity-description {
    transform: translateY(0);
  }

  .component.activity:has(.activity-toggle input:checked) .activity-toggle svg,
  .component.activity.alternative-style-active .activity-toggle svg {
    transform: rotate(90deg);
  }

  .component.activity:has(.activity-toggle input:checked) .activity-toggle,
  .component.activity.alternative-style-active .activity-toggle {
    background-color: rgba(from var(--property-bg-color) r g b / 0.7);
  }
}

/* Guide Component ------------------ */
.component.guide {
  border-radius: var(--br-md);
  box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.1);
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-md);
  max-width: 400px;
  text-align: center;
  transition: transform 0.3s ease;
}

.component.guide .guide-image {
  width: 50%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
  margin: 0 auto var(--space-sm);
}

.component.guide .guide-name {
  font-size: var(--fs-heading-sm);
  color: var(--auto-color-dark);
  margin-bottom: var(--space-xs);
}

.component.guide .guide-role {
  font-size: var(--fs-text-md);
  color: var(--auto-color-mid);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}


.component.guide .guide-bio-toggle {
  position: relative;
  cursor: pointer;
}

.component.guide .guide-bio-toggle input {
  position: absolute;
  opacity: 0;
}

.component.guide .guide-bio {
  font-size: var(--fs-text-md);
  color: var(--auto-color-dark);
  --line-clamp: 2;
}

.component.guide.alternative-style-active .guide-bio,
.component.guide .guide-bio-toggle:has(input:checked) .guide-bio {
  --line-clamp: 5;
}