/* assets/css/survivalGuide.css */
/* ../icons/LogoSvgOmbra.svg
/* Import variabili globali (se non importato nell'HTML, ma qui lo gestiamo nell'head) */
/* Reset specifico per la pagina */
body.survival-page {
  background-color: var(--color-bg-beige);
  color: var(--color-brand-brown);
  font-family: var(--font-secondary); /* Montserrat */
  overflow-x: hidden;
  position: relative;
}

/* Utility Classi Typografiche (Mapping da Tailwind) */
.font-title {
  font-family: var(--font-primary);
} /* Lexend Peta */
.font-body {
  font-family: var(--font-secondary);
} /* Montserrat */
.font-mono {
  font-family: var(--font-mono);
} /* Space Mono */

.text-brand-green {
  color: var(--color-brand-green);
}
.text-brand-brown {
  color: var(--color-brand-brown);
}
.text-beige {
  color: var(--color-bg-beige);
}

/* Helpers per SVG */
.svg-icon {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- RESET & BASE --- */
body.survival-page {
  background-color: var(--color-bg-beige); /* #e6ded1 */
  color: var(--color-brand-brown); /* #3e342b */
  font-family: var(--font-secondary); /* Montserrat */
  overflow-x: hidden;
  position: relative;
  margin: 0;
}

/* --- UTILITY TYPOGRAPHY (Mapping React) --- */
.font-title {
  font-family: var(--font-primary);
} /* Lexend Peta */
.font-body {
  font-family: var(--font-secondary);
} /* Montserrat */
.font-mono {
  font-family: var(--font-mono);
} /* Space Mono */

.text-brand-green {
  color: var(--color-brand-green);
}
.text-brand-brown {
  color: var(--color-brand-brown);
}

/* --- BACKGROUND LAYERS --- */
/* Wrapper per i livelli fissi */
.fixed-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
}

/* Texture Stardust (SOPRA tutto) */
.bg-texture {
  /* React: z-[60] opacity-[0.03] */
  z-index: 60;
  opacity: 0.03;
  background-image: url("https://www.transparenttextures.com/patterns/stardust.png");
  background-repeat: repeat;
}

/* Strisce (SOTTO tutto) */
.bg-stripes {
  /* React: z-0 opacity-20 */
  z-index: 0;
  opacity: 0.2;
}

.bg-stripes img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Container Path (Nascosto/Disattivato per ora come richiesto) */
.path-container {
  display: none;
}

/* --- HERO SECTION --- */
/* React: min-h-[90vh] flex flex-col items-center justify-center p-6 pt-24 pb-32 */
.hero-section {
  position: relative;
  z-index: 10;
  width: 100%;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.5rem 8rem;
  text-align: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* React: mb-10 (nel ParallaxLayer o wrapper logo) */
  margin-bottom: 2.5rem;
}

/* Logo Group */
/* React: relative group mb-10 w-48 md:w-64 */
.logo-group {
  position: relative;
  margin-bottom: 2.5rem;
  width: 12rem;
}

@media (min-width: 768px) {
  .logo-group {
    width: 16rem;
  }
}

/* Glow Effect Logo */
/* React: absolute inset-[-30px] bg-brand-green/5 blur-[70px] rounded-full */
.glow-effect {
  position: absolute;
  inset: -30px;
  background-color: rgba(122, 153, 57, 0.05);
  filter: blur(70px);
  border-radius: 50%;
  transition: background-color 1s;
}

.logo-group:hover .glow-effect {
  background-color: rgba(122, 153, 57, 0.1);
}

.hero-logo {
  position: relative;
  z-index: 10;
  width: 100%;
  height: auto;
  display: block;
}

/* --- HERO TYPOGRAPHY --- */

/* Pre-title: "Network Day 2026" */
/* React: font-mono text-xs md:text-sm tracking-[0.6em] uppercase opacity-40 mb-4 */
.hero-pre-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.6em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 1rem;
  color: var(--color-brand-brown);
}

@media (min-width: 768px) {
  .hero-pre-title {
    font-size: 0.875rem;
  }
}

/* Main Title: "SURVIVAL GUIDE" */
/* React: font-title text-6xl md:text-8xl font-bold leading-tight tracking-[-0.15em] */
.hero-main-title {
  font-family: var(--font-primary);
  font-size: 3.75rem;
  line-height: 1.25; /* leading-tight */
  font-weight: 700;
  letter-spacing: -0.15em;
  text-transform: uppercase;
  color: var(--color-brand-brown);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
  margin: 0;
}

@media (min-width: 768px) {
  .hero-main-title {
    font-size: 6rem;
  }
}

.mobile-break {
  display: block;
}
@media (min-width: 768px) {
  .mobile-break {
    display: none;
  }
}

/* Span "Guide" */
/* React: italic text-brand-green font-light block md:inline */
.italic-highlight {
  font-family: var(--font-secondary);
  font-style: italic;
  font-weight: 300;
  color: var(--color-brand-green);
  display: block;
}

@media (min-width: 768px) {
  .italic-highlight {
    display: inline;
  }
}

/* Separator Group */
/* React: flex items-center gap-6 mt-8 mb-8 opacity-60 */
.hero-separator-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  opacity: 0.6;
}

/* Lines */
/* React: h-[1px] w-8 md:w-16 bg-brand-brown */
.sep-line {
  height: 1px;
  width: 2rem;
  background-color: var(--color-brand-brown);
}

@media (min-width: 768px) {
  .sep-line {
    width: 4rem;
  }
}

/* Edition Text */
/* React: font-title text-xl md:text-3xl leading-none tracking-tight uppercase */
.hero-edition {
  font-family: var(--font-primary);
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.025em; /* tracking-tight */
  text-transform: uppercase;
  color: var(--color-brand-brown);
  margin: 0;
}

@media (min-width: 768px) {
  .hero-edition {
    font-size: 1.875rem;
  }
}

/* Date */
/* React: font-body text-sm md:text-base opacity-40 font-semibold uppercase tracking-widest */
.hero-date {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em; /* tracking-widest */
  opacity: 0.4;
  margin: 0;
}

@media (min-width: 768px) {
  .hero-date {
    font-size: 1rem;
  }
}

/* --- SCROLL INDICATOR --- */
/* React: absolute bottom-10 left-1/2 -translate-x-1/2 ... flex flex-col gap-4 */
.scroll-indicator-wrapper {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}

/* Label */
/* React: font-title text-[9px] md:text-[10px] uppercase tracking-[0.4em] opacity-60 */
.scroll-label {
  font-family: var(--font-primary);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--color-brand-brown);
  opacity: 0.6;
  transition: opacity 0.5s;
}

@media (min-width: 768px) {
  .scroll-label {
    font-size: 10px;
  }
}

.scroll-indicator-wrapper:hover .scroll-label {
  opacity: 1;
}

/* Vertical Line Container */
/* React: relative h-16 w-[1px] bg-gradient... */
.scroll-line-container {
  position: relative;
  width: 1px;
  height: 4rem;
  /* Gradiente da trasparente a 20% opacity e di nuovo trasparente */
  background: linear-gradient(to bottom, rgba(62, 52, 43, 0), rgba(62, 52, 43, 0.2), rgba(62, 52, 43, 0));
  overflow: hidden;
}

/* The Drop Animation */
/* React: absolute top-0 left-0 w-full h-1/2 bg-gradient... animate */
.scroll-drop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, transparent, #3e342b, transparent);
  animation: scrollDrop 2s infinite ease-in-out;
}

@keyframes scrollDrop {
  0% {
    top: -100%;
  }
  100% {
    top: 100%;
  }
}

/* --- BACK BUTTON --- */
/* React: fixed bottom-10 right-10 z-[70] w-20 h-20 ... */
.back-button {
  position: fixed;
  bottom: 2.5rem;
  right: 2.5rem;
  z-index: 70;
  width: 5rem;
  height: 5rem;
  background-color: #3e342b;
  color: #e6ded1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(62, 52, 43, 0.4);
  transition: all 0.3s;
}

.back-button:hover {
  background-color: var(--color-brand-green);
  transform: scale(1.05);
}

.back-button:active {
  transform: scale(0.95);
}

.back-button svg {
  width: 2rem;
  height: 2rem;
}

/*---------------------------------*/
/* 2. --- SECTION WRAPPERS --- */
/*-----------------------------------*/

.main-style {
  overflow: clip;
  border-radius: 50px 50px 0 0;
}

/* Il contenitore beige scuro */
.content-wrapper-torn {
  position: relative;
  width: 100%;
  background-color: #eae8de; /* Colore sfondo sezione */
  padding-top: 8rem; /* pt-32 */
  padding-bottom: 4rem; /* pb-16 */
  border-top-left-radius: 4rem; /* rounded-t-[4rem] */
  border-top-right-radius: 4rem;
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.inner-container {
  max-width: 56rem; /* max-w-4xl */
  margin: 0 auto;
  padding: 0 1.5rem; /* px-6 */
  position: relative;
  z-index: 10;
}

/* Helper per lo scroll offset (quando clicchi i link) */
.scroll-offset {
  scroll-margin-top: 6rem; /* scroll-mt-24 */
}

/* --- TRANSITIONS (Torn/Wave/Curve) --- */
.section-transition {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4rem; /* h-16 */
  overflow: hidden;
  line-height: 0;
  z-index: 20;
  pointer-events: none;
}

@media (min-width: 768px) {
  .section-transition {
    height: 6rem; /* md:h-24 */
  }
}

.section-transition.position-top {
  top: -1px; /* Fix sub-pixel rendering */
  transform: rotate(180deg);
}

.torn-transition {
  color: var(--color-bg-beige); /* #E6DED1 - Deve matchare il body sopra */
}

.section-transition img {
  fill: currentColor; /* Permette di colorare l'SVG via CSS color */
}

/* --- INDEX SECTION --- */
.index-section {
  margin-bottom: 12rem; /* mb-48 */
}

.index-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 5rem; /* mb-20 */
}

.section-title {
  font-family: var(--font-primary);
  font-size: 3rem; /* text-5xl */
  letter-spacing: -0.1em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-brand-brown);
  margin: 0;
}

@media (min-width: 768px) {
  .section-title {
    font-size: 3.75rem; /* md:text-6xl */
  }
}

.index-line {
  flex: 1;
  height: 1rem;
  color: rgba(62, 52, 43, 0.1); /* brand-brown/10 */
}

.index-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 4rem; /* gap-x-16 */
  row-gap: 1.5rem; /* gap-y-6 */
  font-family: var(--font-secondary);
  font-size: 1.125rem; /* text-lg */
  font-weight: 500;
}

@media (min-width: 768px) {
  .index-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.index-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(62, 52, 43, 0.05);
  padding-bottom: 0.5rem;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-brand-brown);
  transition:
    color 0.3s,
    transform 0.3s;
}

.index-item:hover {
  color: var(--color-brand-green);
  transform: translateX(5px);
}

.index-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  opacity: 0.2;
}

/* --- THEME SECTION --- */
.theme-section {
  margin-bottom: 16rem; /* mb-64 */
  position: relative;
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
}

/* COMPONENTE: STICKY TITLE */
.sticky-title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3rem; /* mb-12 */
  position: relative;
  z-index: 10;
  pointer-events: none;
}

@media (min-width: 768px) {
  .sticky-title-wrapper {
    items-align: flex-start;
  }
}

.big-number {
  font-family: var(--font-primary);
  font-size: 6rem; /* text-8xl */
  position: absolute;
  top: -3rem; /* -top-12 */
  left: -3rem; /* -left-12 */
  opacity: 0.6;
  user-select: none;
  z-index: -1;
  letter-spacing: -0.05em;
}

@media (min-width: 768px) {
  .big-number {
    font-size: 10rem; /* md:text-[10rem] */
  }
}

/* Theme Dark variants (per sticky title) */
.theme-dark .big-number {
  color: #e6ded1;
  text-shadow: 2px 2px 0px rgba(62, 52, 43, 0.1);
}

.sticky-headline {
  font-family: var(--font-primary);
  font-size: 3rem; /* text-5xl */
  letter-spacing: -0.1em;
  line-height: 1;
  text-transform: uppercase;
  position: relative;
  margin: 0;
}

.theme-dark .sticky-headline {
  color: var(--color-brand-brown);
}

@media (min-width: 768px) {
  .sticky-headline {
    font-size: 3.5rem; /* md:text-7xl */
  }
}

/* COMPONENTE: GLASS PANEL */
.glass-panel {
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 1rem; /* rounded-2xl */
  padding: 2rem;
}

.theme-card {
  font-family: var(--font-body);
  font-size: 1.125rem; /* text-lg */
  color: rgba(62, 52, 43, 0.8);
  line-height: 1.625; /* leading-relaxed */
  max-width: 48rem; /* max-w-3xl */
  margin: 0 auto;
  text-align: center;
}

@media (min-width: 768px) {
  .theme-card {
    font-size: 1.25rem; /* md:text-xl */
  }
}

.theme-card p {
  margin-bottom: 1.5rem;
}

.theme-card p:last-child {
  margin-bottom: 0;
}

/* -----------------------------*/
/* 3. --- TIMELINE SECTION --- */
/*--------------------------------*/

.timeline-section {
  margin-bottom: 3rem; /* mb-12 */
  padding-left: 0.5rem; /* pl-2 */
}

@media (min-width: 768px) {
  .timeline-section {
    padding-left: 2rem; /* md:pl-8 */
  }
}

.timeline-list {
  display: flex;
  flex-direction: column;
}

.timeline-item {
  display: flex;
  gap: 2rem; /* gap-8 */
  position: relative;
  opacity: 1; /* Animation would handle this usually */
}

@media (min-width: 768px) {
  .timeline-item {
    gap: 3rem; /* md:gap-12 */
  }
}

/* 1. Time Column (Desktop) */
.time-col {
  width: 6rem; /* w-24 */
  flex-shrink: 0;
  text-align: right;
  padding-top: 0.25rem;
  display: none; /* Nascosto su mobile */

  font-family: var(--font-mono);
  font-size: 0.875rem; /* text-sm */
  font-weight: 700;
  color: rgba(62, 52, 43, 0.6);
  letter-spacing: 0.05em; /* tracking-wider */
  transition: color 0.3s;
}

/* Hover effect sul tempo */
.timeline-item:hover .time-col {
  color: var(--color-brand-green);
}

@media (min-width: 768px) {
  .time-col {
    display: block;
  }
}

/* 2. Marker Column (Center) */
.marker-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px; /* Larghezza fissa per allineamento */
}

/* Il cerchio esterno */
.timeline-dot {
  width: 1rem; /* w-4 */
  height: 1rem; /* h-4 */
  border-radius: 50%;
  border: 2px solid var(--color-brand-brown);
  background-color: #eae8de; /* Colore sfondo sezione */
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* Effetto hover sul cerchio: scala e diventa verde */
.timeline-item:hover .timeline-dot {
  border-color: var(--color-brand-green);
  transform: scale(1.25);
}

/* Il cerchio interno (animato via opacity) */
.dot-core {
  width: 100%;
  height: 100%;
  background-color: var(--color-brand-green);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s;
}

.timeline-item:hover .dot-core {
  opacity: 1;
}

/* La linea verticale */
.timeline-line {
  width: 2px;
  flex: 1;
  background-color: rgba(62, 52, 43, 0.1);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 99px;
  min-height: 2rem;
}

/* 3. Content Column (Right) */
.content-col {
  padding-bottom: 4rem; /* pb-16 */
  max-width: 36rem; /* max-w-xl */
}

@media (min-width: 768px) {
  .content-col {
    padding-bottom: 5rem; /* md:pb-20 */
  }
}

/* Mobile Time (mostrato solo su mobile dentro il content) */
.mobile-time {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem; /* text-xs */
  font-weight: 700;
  color: var(--color-brand-green);
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .mobile-time {
    display: none;
  }
}

.event-title {
  font-family: var(--font-title);
  font-size: 1.5rem; /* text-2xl */
  line-height: 1;
  color: var(--color-brand-brown);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  transition: transform 0.3s;
}

@media (min-width: 768px) {
  .event-title {
    font-size: 1.875rem; /* md:text-3xl */
  }
}

.timeline-item:hover .event-title {
  transform: translateX(0.5rem);
}

.event-desc {
  font-family: var(--font-body);
  font-size: 1rem; /* text-base */
  color: rgba(62, 52, 43, 0.7);
  line-height: 1.625;
}

/*-----------------------------*/
/* 4. --- DRESSCODE SECTION --- */
/*-----------------------------*/

.dresscode-section {
  position: relative;
  width: 100%;
  background-color: var(--color-brand-brown); /* #3E342B */
  color: #e6ded1;
  padding-top: 8rem; /* py-32 */
  padding-bottom: 8rem;
  /* overflow: hidden; */
  z-index: 15; /* Sopra al wrapper precedente per coprire i bordi */
}

/* Helper per le transizioni bottom */
.section-transition.position-bottom {
  bottom: -1px;
  top: auto;
  transform: none;
}

/* Grid Layout */
.dresscode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem; /* gap-12 */
  align-items: center;
}

@media (min-width: 768px) {
  .dresscode-grid {
    grid-template-columns: 1fr 1fr; /* 2 colonne su desktop */
  }

  /* Allineamento testo a sinistra su desktop, centro su mobile */
  .text-col {
    text-align: left;
  }
}

/* Theme Light Variants (per titolo su sfondo scuro) */
.theme-light .big-number {
  color: rgba(255, 255, 255, 0.1);
  text-shadow: none;
}

.theme-light .sticky-headline {
  color: #e6ded1;
}

/* Content Styling */
.dresscode-content {
  padding-top: 1rem;
}

.dresscode-main-title {
  font-family: var(--font-primary);
  font-size: 2.25rem; /* text-4xl */
  letter-spacing: -0.1em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-brand-green);
  margin-bottom: 1.5rem;
  font-weight: 400;
}

@media (min-width: 768px) {
  .dresscode-main-title {
    font-size: 3rem; /* md:text-5xl */
  }
}

.dresscode-desc {
  font-family: var(--font-body);
  font-size: 1.125rem; /* text-lg */
  color: rgba(230, 222, 209, 0.8); /* #E6DED1 / 80% */
  line-height: 1.625;
}

/* Image Styling */
.dresscode-image-wrapper {
  position: relative;
  border-radius: 1.5rem; /* rounded-3xl */
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); /* shadow-2xl */
  border: 4px solid rgba(255, 255, 255, 0.1);
  aspect-ratio: 4 / 3;
  transition: transform 0.3s;
}

.dresscode-image-wrapper:hover {
  transform: scale(1.02);
}

.dresscode-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*--------------------------------------*/
/* 5. --- LOCATION & ARRIVARE WRAPPER --- */
/*--------------------------------------*/

.location-wrapper {
  background-color: #e6ded1; /* Beige chiaro */
  padding-top: 8rem; /* pt-32 */
  padding-bottom: 8rem; /* pb-32 */
  position: relative;
  width: 100%;
}

/* --- LOCATION SECTION --- */
.location-section {
  margin-bottom: 12rem; /* space-y-48 (approx) */
}

.location-name {
  font-family: var(--font-title);
  font-size: 1.875rem; /* text-3xl */
  letter-spacing: -0.1em;
  color: var(--color-brand-green);
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 2rem;
  padding-left: 0.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  .location-name {
    font-size: 3rem; /* md:text-5xl */
  }
}

.location-card {
  position: relative;
  border-radius: 2.5rem; /* rounded-[2.5rem] */
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
  height: 400px;
  width: 100%;
}

.location-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.location-address-tag {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  padding: 0.5rem 1rem;
  border-radius: 9999px; /* rounded-full */
  font-family: var(--font-mono);
  font-size: 0.625rem; /* text-[10px] */
  text-transform: uppercase;
  letter-spacing: 0.1em; /* tracking-widest */
  color: var(--color-brand-brown);
}

/* --- TRANSPORT SECTION --- */
.transport-section {
  position: relative;
}

/* Container lista */
.transport-list {
  display: flex;
  flex-direction: column;
  gap: 3rem; /* space-y-12 */
  max-width: 64rem; /* max-w-5xl */
  margin: 0 auto;
  transform: translateY(3rem);
  padding-left: 1rem;
  border-left: 2px solid rgba(62, 52, 43, 0.1); /* border-l-2 */
}

/* Card Trasporto */
.transport-card {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 1.5rem;
  border-radius: 1rem; /* rounded-2xl */
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  align-items: center;
}

@media (min-width: 768px) {
  .transport-card {
    flex-direction: row;
    padding: 1.5rem;
  }
}

/* Icon Box */
.transport-icon-box {
  width: fit-content;
  /* height: 5rem; */
  aspect-ratio: 4/4;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eae8de; /* brand-beige */
  border-radius: 9999px; /* rounded-full */
  padding: 1rem;
  color: var(--color-brand-brown);
}

/* Content */
.transport-content {
  width: 100%;
  text-align: center;
}

@media (min-width: 768px) {
  .transport-content {
    text-align: left;
  }
}

.transport-title {
  font-family: var(--font-title);
  font-size: 1.25rem; /* text-xl */
  font-weight: 700;
  letter-spacing: -0.025em; /* tracking-tight */
  color: var(--color-brand-green);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.transport-details {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem; /* text-base */
  color: var(--color-brand-brown);
  opacity: 0.8;
}

@media (min-width: 768px) {
  .transport-details {
    font-size: 1.125rem; /* md:text-lg */
  }
}

.transport-details li {
  margin-bottom: 0.5rem;
  line-height: 1.625;
}

/*--------------------------------*/
/* 6. --- FOOD & DRINKS SECTION --- */
/*--------------------------------*/

.food-section {
  position: relative;
  width: 100%;
  background-color: #f0eee6; /* Grigio/Beige molto chiaro */
  padding-top: 8rem; /* py-32 */
  padding-bottom: 8rem;
  overflow: visible; /* Per permettere l'effetto hill */
}

/* Griglia 2 Colonne */
.food-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem; /* gap-16 */
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .food-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.category-title {
  font-family: var(--font-title);
  font-size: 2.25rem; /* text-4xl */
  text-transform: uppercase;
  margin-bottom: 2rem;
  margin-left: 1rem;
}

.food-col {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* space-y-8 */
}

/* --- PLACE CARD COMPONENT --- */
.place-card {
  display: flex;
  align-items: center;
  gap: 1.5rem; /* gap-6 */
  padding: 1rem; /* p-4 */
  border-radius: 0.75rem; /* rounded-xl */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* shadow-sm */
  transition: all 0.3s;
  cursor: pointer;
}

.place-card:hover {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
}

/* Variante LIGHT (Mangiare) */
.place-card.light {
  background-color: white;
}
.place-card.light:hover {
  transform: translateX(10px); /* Sposta a destra */
}

/* Variante DARK (Bere) */
.place-card.dark {
  background-color: var(--color-brand-brown); /* #3E342B */
  color: #e6ded1;
}
.place-card.dark:hover {
  transform: translateX(-10px); /* Sposta a sinistra */
}

/* Immagine */
.place-img-wrapper {
  width: 6rem; /* w-24 */
  height: 6rem; /* h-24 */
  border-radius: 0.5rem; /* rounded-lg */
  overflow: hidden;
  flex-shrink: 0;
}

.place-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.place-card:hover .place-img {
  transform: scale(1.1); /* Zoom effetto */
}

/* Testi */
.place-name {
  font-family: var(--font-title);
  font-size: 1.25rem; /* text-xl */
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  color: var(--color-brand-brown);
}

.place-card.dark .place-name {
  /* Sovrascritto da classi utility nel HTML, ma base qui */
  color: var(--color-brand-green);
}

.place-desc {
  font-family: var(--font-body);
  font-size: 0.875rem; /* text-sm */
  opacity: 0.7;
  margin: 0;
  line-height: 1.4;
}

/*----------------------------*/
/* 7. --- SLEEPING SECTION --- */
/*----------------------------*/

.sleeping-section {
  background-color: #e6ded1; /* Beige Standard */
  padding-top: 8rem;
  padding-bottom: 8rem;
  position: relative;
  width: 100%;
}

.sleeping-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) {
  .sleeping-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.container_hotel {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
}

.hotel-card {
  position: relative;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.hotel-card:hover {
  transform: translateY(-10px); /* whileHover={{ y: -10 }} */
}

/* -----------------------------------
   STILE BASE DELLA PILLOLA
----------------------------------- */
/* --- Stili Base della Pillola --- */
.neon-pill {
  top: -10px;
  left: -10px;
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem; /* rounded-xl */
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 1.5px solid;
  position: absolute;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  transition: all 0.3s ease;
  z-index: 1;

  /* Effetto vetro */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Effetto di ingrandimento agganciato all'hover della card padre */
.hotel-card.group:hover .neon-pill {
  transform: scale(1.05);
}

/* --- Effetto Glare (Riflesso interno) --- */
.pill-glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, rgba(255, 255, 255, 0.05), transparent);
  pointer-events: none;
}

/* --- Icona SVG --- */
.pill-icon {
  width: 0.875rem; /* 14px */
  height: 0.875rem;
  filter: drop-shadow(0 0 5px currentColor);
}

/* --- Varianti di Colore (Neon) --- */

/* 1. Parcheggio OK */
.pill-available {
  border-color: rgba(122, 255, 57, 0.8);
  box-shadow:
    0 0 15px rgba(122, 255, 57, 0.4),
    inset 0 0 5px rgba(122, 255, 57, 0.4);
  text-shadow: 0 0 8px #bfff00;
}

/* 2. Informarsi */
.pill-check {
  border-color: rgba(255, 184, 0, 0.8);
  box-shadow:
    0 0 15px rgba(255, 184, 0, 0.4),
    inset 0 0 5px rgba(255, 184, 0, 0.4);
  text-shadow: 0 0 8px #ffd700;
}

/* 3. No Parcheggio */
.pill-none {
  border-color: rgba(255, 51, 102, 0.8);
  box-shadow:
    0 0 15px rgba(255, 51, 102, 0.4),
    inset 0 0 5px rgba(255, 51, 102, 0.4);
  text-shadow: 0 0 8px #ff3366;
}

.hotel-img-wrapper {
  aspect-ratio: 4 / 5; /* aspect-[4/5] */
  border-radius: 1.5rem; /* rounded-3xl */
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* shadow-lg */
  margin-bottom: 1rem;
}

.hotel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.hotel-card:hover .hotel-img {
  transform: scale(1.05);
}

.hotel-name {
  font-family: var(--font-title);
  font-size: 1.25rem; /* text-xl */
  text-align: center;
  text-transform: uppercase;
  color: var(--color-brand-brown);
  margin-top: 1rem;
}

/* --- SIGHTSEEING SECTION --- */
.sightseeing-section {
  background-color: #eae8de; /* Beige Scuro */
  padding-top: 8rem;
  padding-bottom: 8rem;
  position: relative;
  width: 100%;
}

.sightseeing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem; /* gap-6 */
}

@media (min-width: 768px) {
  .sightseeing-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Sightseeing Card */
.sight-card {
  position: relative;
  border-radius: 1.5rem; /* rounded-3xl */
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); /* shadow-xl */
  aspect-ratio: 16 / 9; /* aspect-video */
  display: block; /* per il link */
  transition: transform 0.3s;
}

.sight-card:hover {
  transform: scale(0.99); /* whileHover={{ scale: 0.99 }} */
}

/* Full Width item (Piazza Garibaldi) */
@media (min-width: 768px) {
  .sight-card.full-width {
    grid-column: span 2;
    aspect-ratio: 21 / 9;
  }
}

.sight-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

.sight-card:hover .sight-img {
  transform: scale(1.05);
}

.sight-overlay {
  position: absolute;
  inset: 0;
  /* Gradient: from-black/80 via-transparent to-transparent (Bottom to Top) */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 60%);
  pointer-events: none;
}

.sight-content {
  position: absolute;
  bottom: 2rem; /* bottom-8 */
  left: 2rem; /* left-8 */
  z-index: 10;
}

.sight-name {
  font-family: var(--font-title);
  font-size: 1.5rem; /* text-2xl */
  color: white;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.sight-desc {
  font-family: var(--font-body);
  font-size: 0.875rem; /* text-sm */
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/*---------------------------------------*/
/* 7. --- ESSENTIALS & CONTACT WRAPPER --- */
/*---------------------------------------*/

.essentials-wrapper {
  background-color: #e6ded1; /* Beige classico */
  padding-top: 10rem; /* pt-40 */
  padding-bottom: 5rem; /* pb-20 */
  overflow: hidden;
  position: relative;
}

.relative-z10 {
  position: relative;
  z-index: 10;
}

/* --- ESSENTIALS SECTION --- */
.essentials-header {
  margin-bottom: 5rem; /* mb-20 */
  text-align: center;
}

@media (min-width: 768px) {
  .essentials-header {
    text-align: left;
  }
}

.essentials-subtitle {
  font-family: var(--font-mono);
  font-size: 0.75rem; /* text-xs */
  text-transform: uppercase;
  letter-spacing: 0.4em; /* tracking-[0.4em] */
  color: rgba(62, 52, 43, 0.4);
  margin-top: -1.5rem; /* -mt-6 */
  margin-left: 0.25rem;
}

.essentials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem; /* gap-6 */
}

@media (min-width: 768px) {
  .essentials-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .essentials-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Essential Card */
.essential-card {
  position: relative;
  background-color: #f9f7f2; /* Carta chiara */
  padding: 2rem; /* p-8 */
  border-radius: 0.25rem; /* rounded-sm */
  box-shadow: 0 10px 30px rgba(62, 52, 43, 0.08);
  border: 1px solid rgba(62, 52, 43, 0.1);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Spring effect */
}

.essential-card:hover {
  transform: translateY(-8px) rotate(-1deg);
}

.card-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("https://www.transparenttextures.com/patterns/cream-paper.png");
}

/* Check Icon (top-right) */
.check-icon {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid rgba(62, 52, 43, 0.2);
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-icon svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-brand-green);
  opacity: 0;
  transition: opacity 0.5s 0.2s; /* delay */
}

.essential-card:hover .check-icon svg {
  opacity: 1;
}

/* Icon (Main) */
.essential-icon-box {
  width: 5rem; /* w-20 */
  height: 5rem; /* h-20 */
  color: var(--color-brand-green);
  margin-bottom: 1.5rem;
}

.essential-title {
  font-family: var(--font-title);
  font-size: 1.5rem; /* text-2xl */
  color: var(--color-brand-brown);
  text-transform: uppercase;
  letter-spacing: -0.05em; /* tracking-tighter */
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(62, 52, 43, 0.1);
  padding-bottom: 0.5rem;
}

.essential-desc {
  font-family: var(--font-body);
  font-size: 0.875rem; /* text-sm */
  color: rgba(62, 52, 43, 0.7);
  line-height: 1.625;
  margin-bottom: 1.5rem;
  font-style: italic;
}

/* Stats Footer */
.essential-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  border-top: 1px solid rgba(62, 52, 43, 0.05);
  padding-top: 1rem;
}

.stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em; /* tracking-widest */
  color: rgba(62, 52, 43, 0.4);
  margin-bottom: 0.25rem;
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: rgba(62, 52, 43, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em; /* tracking-wider */
}

.status-ok {
  color: var(--color-brand-green);
}

/* --- CONTACT SECTION --- */
.contact-section {
  margin-top: 16rem; /* mt-64 */
  padding-bottom: 3rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem; /* gap-16 */
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contact-img-wrapper {
  width: 16rem; /* w-64 */
  height: 16rem; /* h-64 */
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); /* shadow-xl */
  margin-bottom: 1.5rem;
  border: 8px solid white;
  position: relative;
}

.contact-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.7s;
}

.contact-card:hover .contact-img {
  filter: grayscale(0%);
}

.contact-name {
  font-family: var(--font-title);
  font-size: 1.875rem; /* text-3xl */
  letter-spacing: -0.025em; /* tracking-tight */
  color: var(--color-brand-brown);
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.contact-role {
  font-family: var(--font-mono);
  font-size: 0.75rem; /* text-xs */
  text-transform: uppercase;
  letter-spacing: 0.1em; /* tracking-widest */
  opacity: 0.6;
  margin-bottom: 1rem;
}

.contact-email {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-brand-green);
  text-decoration: none;
  transition: text-decoration 0.2s;
}

.contact-email:hover {
  text-decoration: underline;
}

/* --- FIX RENDERING MAC OS CHROME --- */

/* 1. Spegniamo l'effetto vetro (blur) SOLO dove causa il crash, 
      sostituendolo con sfondi quasi opachi per mantenere la leggibilità */

.navbar, 
.neon-pill,
.glass-panel,
.location-address-tag {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Compensiamo la navbar sfuocata con un colore quasi solido quando scrolli */
.navbar.scrolled {
  background-color: rgba(230, 222, 209, 0.95) !important; 
}

/* Le pillole degli hotel diventano più scure per leggere bene il testo */
.neon-pill {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

/* 2. Disattiviamo le ombre killer per la GPU e le sostituiamo con bordi eleganti */

.content-wrapper-torn {
  box-shadow: none !important;
  border-top: 1px solid rgba(62, 52, 43, 0.1); /* Dà comunque stacco dal fondo */
}

.dresscode-image-wrapper,
.location-card {
  box-shadow: none !important;
  border: 1px solid rgba(62, 52, 43, 0.15); /* Definisce i bordi senza affaticare la GPU */
}