/* ============================================================
   MINE 2027 — full-site components (NOT part of the verbatim
   landing bundle). Extends styles.css using the same tokens.
   Sections:
     1. Academic top strip          6. Accordions (+)
     2. Nav dropdowns               7. Awards / committees / bios
     3. Page hero + in-page subnav  8. Tables (fees, hotels)
     4. News cards                  9. Travel steps + FAQ
     5. Prose helpers              10. Misc / responsive
   ============================================================ */

/* ---------- 1. Academic partners strip (always visible on top) ---------- */
/* The whole top block (partner strip + header) sticks: the client asked for
   the three academic partners to be ALWAYS visible while scrolling. */
.site-top {
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-top .header { position: static; }
html { scroll-padding-top: 150px; }

/* The landing hero predates the partner strip: styles.css still pulls it up by
   80px, which was the header height before the topbar existed. The header now
   measures 94px, so 14px of white body showed through between the topbar and
   the hero image — on the home page only. Align it to the real header height,
   the same offset .page-hero already uses on the inner pages. */
.hero {
  margin-top: -94px;
  padding-top: 94px;
}

/* Conference dates carry more weight than the location line next to them. */
.hero__meta-item--date { font-size: 1.34rem; }
.hero__meta-item--date svg { width: 23px; height: 23px; }

/* Label introducing the conference theme, tighter than the section eyebrow. */
.hero__theme-label { margin-bottom: 10px; }

.topbar {
  background: var(--navy-950);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 101;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-block: 7px;
}
.topbar__label {
  color: var(--cyan-200);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.topbar__logos { display: flex; align-items: center; gap: 10px; }
.topbar__logo {
  background: var(--white);
  border-radius: 8px;
  padding: 4px 10px;
  height: 34px;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.topbar__logo img { max-height: 26px; width: auto; max-width: 120px; object-fit: contain; }
.topbar__logo:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(56, 181, 255, 0.6); }

/* ---------- 2. Nav dropdowns ---------- */
.nav__item { position: relative; }
.nav__item > a { display: inline-flex; align-items: center; gap: 6px; }
.nav__caret { width: 12px; height: 12px; opacity: 0.7; transition: transform 0.2s ease; flex: 0 0 auto; }
.nav__item:hover .nav__caret,
.nav__item:focus-within .nav__caret { transform: rotate(180deg); }

.nav__drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 230px;
  background: var(--navy-900);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
  padding: 8px;
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.nav__item:hover .nav__drop,
.nav__item:focus-within .nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__drop::before {
  /* hover bridge so the menu doesn't close crossing the gap */
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.nav__drop a {
  display: block;
  padding: 9px 13px;
  border-radius: 9px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
.nav__drop a:hover { background: rgba(56, 181, 255, 0.14); color: var(--white); }

/* Mobile drawer: group + indented sublinks */
.mobile-nav__group { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.mobile-nav__group > a { border-bottom: 0; display: block; }
.mobile-nav__sub { display: grid; padding: 0 0 10px; }
.mobile-nav__sub a {
  border-bottom: 0;
  font-size: 0.94rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  padding: 8px 10px 8px 26px;
  position: relative;
}
.mobile-nav__sub a::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--cyan-500);
  opacity: 0.6;
}

/* ---------- 3. Page hero (inner pages) + in-page subnav ---------- */
.page-hero {
  background:
    radial-gradient(1000px 420px at 85% -80px, rgba(16, 139, 233, 0.35), transparent 65%),
    linear-gradient(160deg, var(--navy-900), var(--navy-950));
  color: var(--white);
  margin-top: -94px;                /* pull under the sticky header */
  padding: 170px 0 64px;
  position: relative;
  overflow: hidden;
}
.page-hero__net { position: absolute; inset: 0; opacity: 0.35; pointer-events: none; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero__title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  max-width: 20ch;
}
.page-hero__lead {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  max-width: 66ch;
}
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.subnav a {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 9px 16px;
  border-radius: 100px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.subnav a:hover {
  background: rgba(56, 181, 255, 0.18);
  border-color: var(--cyan-500);
  transform: translateY(-2px);
}

/* ---------- 4. News ---------- */
.news { background: var(--surface); }
.news-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 380px);
  gap: 22px;
  overflow-x: auto;
  padding: 46px 4px 18px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--cyan-500) transparent;
}
.news-rail .news-card { scroll-snap-align: start; }
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 46px;
}
.news-card {
  background: var(--white);
  border: 1px solid #e9eff6;
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  display: flex;
}
.news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: var(--cyan-200); }
.news-card__link { display: flex; flex-direction: column; width: 100%; }
.news-card__media { height: 168px; flex: 0 0 auto; overflow: hidden; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.news-card:hover .news-card__media img { transform: scale(1.06); }
.news-card__media--icon {
  display: grid;
  place-items: center;
  background:
    radial-gradient(240px 140px at 80% -20%, rgba(56, 181, 255, 0.4), transparent 70%),
    linear-gradient(150deg, var(--navy-800), var(--navy-950));
}
.news-card__media--icon span {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: rgba(56, 181, 255, 0.18);
  display: grid;
  place-items: center;
  color: var(--cyan-500);
}
.news-card__media--icon svg { width: 30px; height: 30px; }
.news-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-card__date {
  color: var(--blue-600);
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.news-card__title { font-size: 1.18rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; color: var(--text); }
.news-card__excerpt { color: var(--text-muted); font-size: 0.95rem; flex: 1; }
.news-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue-600);
  font-weight: 800;
  font-size: 0.9rem;
  margin-top: 4px;
}
.news-card:hover .news-card__more svg { transform: translateX(4px); }
.news-card__more svg { transition: transform 0.2s ease; }
.news-empty { color: var(--text-muted); text-align: center; padding: 40px 0; }

/* Single post article */
.page-hero--article { padding-bottom: 48px; }
.article__date--hero {
  color: var(--cyan-200) !important;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.article { padding: 56px 0 90px; }
.article__inner { max-width: 780px; margin-inline: auto; }
.article__date {
  color: var(--blue-600);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.article__title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 12px 0 26px; letter-spacing: -0.02em; }
.article__thumb { border-radius: var(--radius-card); overflow: hidden; margin-bottom: 30px; box-shadow: var(--shadow-card); }
.article__body p { margin: 0 0 18px; color: var(--text); font-size: 1.05rem; }
.article__body a { color: var(--blue-600); font-weight: 700; }
.article__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  color: var(--blue-600);
  font-weight: 800;
}

/* ---------- 5. Prose helpers (long-form sections) ---------- */
.prose { max-width: 78ch; }
.prose p { margin: 0 0 16px; color: var(--text-muted); font-size: 1.02rem; }
.prose p strong, .prose b { color: var(--text); }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; color: var(--text-muted); }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--blue-600); font-weight: 700; }
.prose h4 { font-size: 1.1rem; margin: 26px 0 10px; }

.section--alt { background: var(--surface); }
.section--blue { background: var(--surface-blue); }

/* "More details" expandable prose */
.expand { margin-top: 26px; }
.expand > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 800;
  color: var(--navy-950);
  background: var(--yellow-500);
  padding: 13px 24px;
  border-radius: var(--radius-btn);
  box-shadow: 0 12px 28px -12px rgba(255, 210, 0, 0.85);
  transition: transform 0.18s ease, background 0.2s ease;
  user-select: none;
}
.expand > summary::-webkit-details-marker { display: none; }
.expand > summary:hover { background: var(--yellow-400); transform: translateY(-2px); }
.expand > summary .chev { transition: transform 0.25s ease; }
.expand[open] > summary .chev { transform: rotate(180deg); }
.expand__panel { padding-top: 26px; }
.expand[open] > summary { background: var(--surface-blue); color: var(--blue-600); box-shadow: none; }
.theme .expand[open] > summary { background: rgba(56, 181, 255, 0.14); color: var(--cyan-200); }
.theme .expand__panel p { color: rgba(255, 255, 255, 0.82); }

/* ---------- 6. Accordions ---------- */
.acc {
  background: var(--white);
  border: 1px solid #e9eff6;
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.acc[open] { box-shadow: var(--shadow-card); border-color: var(--cyan-200); }

/* Track la cui scheda è un PDF: stessa scatola dell'accordion, ma è un link
   diretto al download invece di un pannello che si apre. */
.acc--doc {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
}
a.acc--doc:hover { background: var(--surface-blue); border-color: var(--cyan-200); box-shadow: var(--shadow-card); }
.acc__doc-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--surface-blue);
  color: var(--blue-600);
  display: grid;
  place-items: center;
}
.acc__doc-icon svg { width: 17px; height: 17px; }
a.acc--doc:hover .acc__doc-icon { background: var(--blue-600); color: var(--white); }
/* Track annunciata ma senza scheda: presente in elenco, non cliccabile. */
.acc--pending { color: var(--text-muted); }
.acc--pending small { display: block; font-weight: 600; font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }

/* Introduce l'elenco delle track, sotto il titolo del gruppo. */
.tracks-intro { color: var(--text-muted); margin: -6px 0 18px; max-width: 70ch; }
.acc > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  cursor: pointer;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text);
  user-select: none;
  transition: background 0.2s ease;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { background: var(--surface-blue); }
.acc__plus {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--surface-blue);
  color: var(--blue-600);
  position: relative;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.acc__plus::before,
.acc__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2.4px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.acc__plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.25s ease; }
.acc[open] .acc__plus { background: var(--blue-600); color: var(--white); }
.acc[open] .acc__plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc__panel { padding: 4px 24px 24px 66px; }
.acc__panel p { margin: 0 0 14px; color: var(--text-muted); font-size: 0.99rem; }
.acc__panel p:last-child { margin-bottom: 0; }
.acc__panel ul, .acc__panel ol { color: var(--text-muted); padding-left: 20px; margin: 0 0 14px; }
.acc__panel li { margin-bottom: 6px; }
.acc__panel a { color: var(--blue-600); font-weight: 700; }
.acc__panel h4 { margin: 20px 0 8px; font-size: 1.02rem; }
.acc__chairs { margin-top: 16px; background: var(--surface-blue); border-radius: 12px; padding: 16px 18px; }
.acc__chairs b { color: var(--blue-600); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.acc__chairs ul { margin: 8px 0 0; padding-left: 18px; color: var(--text); }

/* Accordion group heading */
.acc-group { margin-top: 40px; }
.acc-group__title {
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.acc-group__title::after { content: ""; flex: 1; height: 1px; background: #e3ebf4; }

.tracks-empty {
  display: flex;
  gap: 18px;
  align-items: center;
  background: var(--surface-blue);
  border: 1px dashed var(--cyan-500);
  border-radius: 18px;
  padding: 26px 30px;
}
.tracks-empty__icon {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border-radius: 13px;
  background: rgba(16, 139, 233, 0.12);
  display: grid;
  place-items: center;
  color: var(--blue-600);
}
.tracks-empty__icon svg { width: 25px; height: 25px; }
.tracks-empty b { color: var(--navy-900); }
.tracks-empty p { color: var(--text-muted); font-size: 0.98rem; margin-top: 4px; }
.tracks-empty a { color: var(--blue-600); font-weight: 700; }

/* Topics grid (About → Topics & Tracks) */
.topics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 34px;
}
.topic {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid #e9eff6;
  border-radius: 13px;
  padding: 14px 18px;
  font-weight: 700;
  color: var(--text);
  font-size: 0.97rem;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.topic:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--cyan-200); }
.topic__dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--blue-600), var(--cyan-500));
}

/* ---------- 7. Awards / committees / bios ---------- */
.awards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.award {
  background: var(--white);
  border: 1px solid #e9eff6;
  border-radius: var(--radius-card);
  padding: 26px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.award:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--cyan-200); }
/* The flagship award sits first in the grid but is otherwise an ordinary card:
   the trophy icon alone marks it as the most prestigious one. */

/* Word and LaTeX templates: two peers that must read as distinct without
   borrowing the yellow reserved for the primary calls to action. */
.btn--solid-blue { background: var(--blue-600); color: var(--white); }
.btn--solid-blue:hover { background: #0d78c9; transform: translateY(-2px); }

.btn--outline-navy { background: transparent; color: var(--navy-900); border-color: var(--navy-900); }
.btn--outline-navy:hover { background: var(--navy-900); color: var(--white); transform: translateY(-2px); }

/* ---------- Buttons announced before the file exists ---------- */
/* Same footprint as the live button so nothing moves when the PDF lands. */
.btn--soon {
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
  cursor: default;
  opacity: 0.72;
  pointer-events: none;
}
.btn--soon .btn__soon {
  font-size: 0.78em;
  font-weight: 700;
  opacity: 0.85;
}

/* Special issue: struttura semplificata e ripetibile, una card per rivista.
   Colonna singola — il pannello laterale del disegno originale conteneva dati
   che il cliente non vuole più dover compilare per ogni nuova rivista. */
.pub__list { display: grid; gap: 20px; }
.pub__card--simple { grid-template-columns: 1fr; }
.pub__si { color: rgba(255, 255, 255, 0.85); font-size: 1.02rem; line-height: 1.65; margin-top: 10px; max-width: 62ch; }
.pub__si b { color: var(--white); }
.pub__si--more { margin-top: 18px; }
.pub__si--more a { color: var(--cyan-500); font-weight: 700; }
.pub__si--more a:hover { color: var(--yellow-400); }

/* Lead-in shared by every Special Issue card, one notch quieter than the lead. */
.pub__intro {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.7;
}

/* Continues the centred section header, one notch quieter than .section-lead. */
.awards__intro {
  max-width: 68ch;
  margin: 16px auto 0;
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.7;
}
.award__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--surface-blue);
  color: var(--blue-600);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.award--top .award__icon { background: rgba(255, 210, 0, 0.16); color: var(--yellow-500); }
.award__icon svg { width: 23px; height: 23px; }
.award h3 { font-size: 1.14rem; font-weight: 800; margin-bottom: 8px; }
.award p { color: var(--text-muted); font-size: 0.95rem; }

/* Read-bio affordance on person cards */
.person--bio { cursor: pointer; position: relative; }
.person__bio-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  color: var(--blue-600);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-blue);
  border: 0;
  border-radius: 100px;
  padding: 7px 14px;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.person--bio:hover .person__bio-btn { background: var(--blue-600); color: var(--white); transform: translateY(-1px); }

/* Riga in più sulla scheda di un keynote speaker: il titolo dello speech. */
.person__speech {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e9eff6;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.person__speech b { color: var(--text); }

/* Bio dialog */
.bio-dialog {
  border: 0;
  border-radius: var(--radius-card);
  max-width: min(680px, calc(100vw - 40px));
  width: 100%;
  padding: 0;
  box-shadow: var(--shadow-lift);
  background: var(--white);
}
.bio-dialog::backdrop { background: rgba(4, 16, 34, 0.65); backdrop-filter: blur(3px); }
.bio-dialog__head {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 28px 30px 20px;
  background: linear-gradient(150deg, var(--navy-900), var(--navy-950));
  color: var(--white);
}
.bio-dialog__photo {
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(56, 181, 255, 0.4);
}
.bio-dialog__photo img { width: 100%; height: 100%; object-fit: cover; }
.bio-dialog__head h3 { font-size: 1.3rem; font-weight: 800; }
.bio-dialog__head .role { color: var(--cyan-500); font-weight: 800; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 5px; }
.bio-dialog__head .aff { color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; margin-top: 4px; }
.bio-dialog__body { padding: 24px 30px 30px; max-height: min(52vh, 460px); overflow: auto; }
.bio-dialog__body p { color: var(--text-muted); font-size: 0.98rem; margin: 0 0 14px; }
.bio-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-size: 1.1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}
.bio-dialog__close:hover { background: rgba(255, 255, 255, 0.22); }

/* Committee name lists */
.committee {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 30px;
}
.committee .member {
  background: var(--white);
  border: 1px solid #e9eff6;
  border-radius: 14px;
  padding: 16px 20px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.committee .member:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--cyan-200); }
.member__name { font-weight: 800; color: var(--text); font-size: 1rem; }
.member__aff { color: var(--text-muted); font-size: 0.86rem; margin-top: 4px; line-height: 1.35; }
.member__country { color: var(--blue-600); font-weight: 700; font-size: 0.8rem; margin-top: 5px; }

/* ---------- 8. Tables ---------- */
.table-wrap {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid #e9eff6;
  box-shadow: 0 12px 30px -22px rgba(8, 43, 92, 0.4);
  margin-top: 30px;
  background: var(--white);
}
.mine-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.mine-table th {
  background: var(--navy-900);
  color: var(--white);
  text-align: left;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 15px 20px;
  white-space: nowrap;
}
.mine-table th small { display: block; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--cyan-200); margin-top: 2px; }
.mine-table td { padding: 15px 20px; border-top: 1px solid #edf2f8; color: var(--text); font-size: 0.98rem; vertical-align: top; }
.mine-table tr:nth-child(even) td { background: var(--surface); }
.mine-table .price { font-weight: 900; color: var(--navy-900); white-space: nowrap; }
.mine-table .hi td { background: var(--surface-blue); }
.mine-table a { color: var(--blue-600); font-weight: 700; word-break: break-word; }
.table-note { color: var(--text-muted); font-size: 0.88rem; margin-top: 12px; }

/* ---------- 9. Travel steps + FAQ + hotel ---------- */
.steps { margin-top: 44px; display: grid; gap: 18px; }
.step {
  display: flex;
  gap: 22px;
  background: var(--white);
  border: 1px solid #e9eff6;
  border-radius: var(--radius-card);
  padding: 26px 28px;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--cyan-200); }
.step__num {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--blue-600);
  color: var(--blue-600);
  font-weight: 900;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 20px -8px rgba(16, 139, 233, 0.5);
}
.step h3 { font-size: 1.16rem; font-weight: 800; margin-bottom: 8px; }
.step p { color: var(--text-muted); font-size: 0.98rem; margin-bottom: 10px; }
.step ul { color: var(--text-muted); padding-left: 20px; margin: 0 0 10px; }
.step li { margin-bottom: 5px; }
.step a { color: var(--blue-600); font-weight: 700; }
.step__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.step__chip {
  background: var(--surface-blue);
  color: var(--blue-600);
  font-weight: 800;
  font-size: 0.8rem;
  padding: 6px 12px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.step__chip svg { width: 14px; height: 14px; }

.route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  background: linear-gradient(150deg, var(--navy-900), var(--navy-950));
  color: var(--white);
  border-radius: var(--radius-card);
  padding: 28px 30px;
  margin-top: 38px;
  box-shadow: var(--shadow-lift);
}
.route__stop { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.02rem; }
.route__stop svg { width: 22px; height: 22px; color: var(--cyan-500); }
.route__leg {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cyan-200);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0 8px;
}
.route__leg::before,
.route__leg::after { content: ""; width: 26px; height: 2px; background: rgba(140, 208, 245, 0.5); border-radius: 2px; }

/* Official hotel highlight */
.hotel {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--white);
  border: 1px solid #e9eff6;
  box-shadow: var(--shadow-lift);
  margin-top: 40px;
}
.hotel__media { position: relative; min-height: 300px; }
.hotel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hotel__badge {
  position: absolute;
  left: 18px;
  top: 18px;
  background: var(--yellow-500);
  color: var(--navy-950);
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 9px;
  box-shadow: 0 10px 24px -10px rgba(255, 210, 0, 0.9);
}
.hotel__body { padding: clamp(26px, 3.6vw, 44px); }
.hotel__stars { color: var(--yellow-500); letter-spacing: 3px; font-size: 1.05rem; }
.hotel__body h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 900; margin: 8px 0 12px; }
.hotel__body p { color: var(--text-muted); margin-bottom: 12px; }
.hotel__rate {
  background: var(--surface-blue);
  border-left: 3px solid var(--blue-600);
  border-radius: 0 12px 12px 0;
  padding: 14px 18px;
  color: var(--navy-900);
  font-weight: 700;
  font-size: 0.95rem;
  margin: 18px 0;
}
.hotel__facts { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.hotel__facts li { display: flex; gap: 10px; font-size: 0.94rem; color: var(--text); }
.hotel__facts b { min-width: 84px; color: var(--text-muted); font-weight: 700; }
.hotel__facts a { color: var(--blue-600); font-weight: 700; }

/* Lipari mini gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 210px;
  gap: 14px;
  margin-top: 40px;
}
.gallery figure {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px -22px rgba(8, 43, 92, 0.45);
}
.gallery figure:first-child { grid-row: span 2; grid-column: span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.gallery figure:hover img { transform: scale(1.05); }

/* Important travel callout ("queste informazioni sono davvero importanti") */
.callout-important {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: rgba(255, 210, 0, 0.1);
  border: 1px solid rgba(255, 210, 0, 0.55);
  border-left: 4px solid var(--yellow-500);
  border-radius: 0 14px 14px 0;
  padding: 18px 20px;
  margin: 14px 0;
}
.callout-important__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--yellow-500);
  color: var(--navy-950);
  display: grid;
  place-items: center;
}
.callout-important__icon svg { width: 22px; height: 22px; }
.callout-important p { color: var(--text); font-size: 0.98rem; margin: 0 0 10px; }
.callout-important p:last-child { margin-bottom: 0; }
.callout-important strong { color: var(--navy-900); }

/* FAQ */
.faq { margin-top: 30px; }

/* ---------- 10. Misc / shared CTA / responsive ---------- */
.partner-note {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 28px 32px;
  margin: 46px auto 0;
  max-width: 860px;
  text-align: left;
  color: rgba(255, 255, 255, 0.85);
}
.partner-note h3 { color: var(--white); font-size: 1.3rem; margin-bottom: 10px; }
.partner-note p { font-size: 0.99rem; margin-bottom: 10px; }
.partner-note a { color: var(--cyan-500); font-weight: 800; }

/* Light variant — sits on the surface-blue partners section */
.partner-note--light {
  background: var(--white);
  border: 1px solid #e9eff6;
  box-shadow: 0 12px 30px -22px rgba(8, 43, 92, 0.4);
  color: var(--text-muted);
}
.partner-note--light h3 { color: var(--navy-900); }
.partner-note--light b { color: var(--text); }
.partner-note--light a { color: var(--blue-600); }

.reg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.reg-card {
  background: var(--white);
  border: 1px solid #e9eff6;
  border-radius: var(--radius-card);
  padding: 28px 30px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.reg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.reg-card .tl-date { margin-bottom: 14px; }
.reg-card h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 6px; }
.reg-card p { color: var(--text-muted); font-size: 0.95rem; }

.coming-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--surface-blue);
  color: var(--blue-600);
  font-weight: 800;
  font-size: 0.9rem;
  padding: 12px 20px;
  border-radius: var(--radius-btn);
  border: 1px dashed var(--cyan-500);
}
.coming-pill svg { width: 17px; height: 17px; }

/* Partner grid variants (home groups) */
.partners__grid--3 { grid-template-columns: repeat(3, 1fr); margin-top: 0; }

/* Footer additions */
.footer__grid--4 { grid-template-columns: 1.3fr 1fr 0.9fr 1fr; }
.footer__h5-gap { margin-top: 22px !important; }
.footer__social { display: flex; gap: 10px; margin-top: 4px; }
.footer__social a {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.85);
  padding: 0;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.footer__social a:hover { background: rgba(56, 181, 255, 0.2); color: var(--white); transform: translateY(-2px); }
.footer__social svg { width: 19px; height: 19px; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer__legal a { color: rgba(255, 255, 255, 0.7); }
.footer__legal a:hover { color: var(--cyan-500); }

@media (max-width: 1080px) {
  .topbar__label { display: none; }
  .topbar__inner { justify-content: center; }
  .footer__grid--4 { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 860px) {
  .news-grid { grid-template-columns: 1fr; }
  .awards { grid-template-columns: 1fr; }
  .committee { grid-template-columns: repeat(2, 1fr); }
  .topics { grid-template-columns: 1fr; }
  .hotel { grid-template-columns: 1fr; }
  .hotel__media { min-height: 240px; }
  .reg-cards { grid-template-columns: 1fr; }
  .gallery { grid-auto-rows: 160px; }
  .acc__panel { padding-left: 24px; }
  .page-hero { padding-top: 150px; }
}
@media (max-width: 560px) {
  .committee { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; }
  .gallery figure:first-child { grid-column: span 2; }
  .route { flex-direction: column; }
  .route__leg { transform: rotate(90deg); padding: 10px 0; }
  .step { flex-direction: column; }
  .topbar__logo { height: 30px; padding: 3px 8px; }
  .topbar__logo img { max-height: 22px; max-width: 90px; }
  .footer__grid--4 { grid-template-columns: 1fr; }
  /* long button labels (e.g. the CFP doc button) must wrap, not overflow */
  .btn { white-space: normal; max-width: 100%; }
}
/* Mobile drawer: the design's panel is a fixed, viewport-tall column with no
   overflow - fine for the landing's 5 links, not for the full site (9 sections
   with their sublinks = ~1750px of content). The drawer opens with the body
   scroll locked, so anything past the fold was simply unreachable: it has to
   scroll on its own. The bottom padding clears the iOS home indicator. */
.mobile-nav {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
.mobile-nav > * { flex: 0 0 auto; }