/* =========================================================
   00 — DESIGN TOKENS & GLOBAL FOUNDATION
   Colors, typography, shell width and global reset.
========================================================= */

:root {
  --charcoal: #1F1F1F;
  --terracotta: #B85C3D;
  --ivory: #F6F2EB;
  --stone: #ECE6DD;
  --warm-gray: #D9D4CD;
  --white: #fff;
  --muted: #6F6962;
  --font-display: "GFS Didot","Didot","Bodoni 72",Georgia,serif;
  --font-ui: "Inter",Arial,sans-serif;
  --shell: min(1360px,calc(100% - 96px));
  --radius: 3px;
  --transition: 240ms ease;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--charcoal);
  background: var(--ivory);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,input,select,textarea {
  font: inherit;
}

button {
  color: inherit;
}

h1,h2,h3,p {
  margin-top: 0;
}

h1,h2,h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: .98;
}

h1 {
  font-size: clamp(3.9rem,7vw,7rem);
  letter-spacing: -.045em;
}

h2 {
  font-size: clamp(2.7rem,5vw,5rem);
  letter-spacing: -.04em;
}

h3 {
  font-size: clamp(1.55rem,2.3vw,2.25rem);
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.section {
  padding: 120px 0;
}

.eyebrow {
  margin-bottom: 22px;
  color: var(--terracotta);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.eyebrow--light {
  color: var(--ivory);
}

.eyebrow--accent {
  color: #E47B58;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  left: 20px;
  top: -100px;
  background: var(--charcoal);
  color: var(--white);
  padding: 10px 16px;
}

.skip-link:focus {
  top: 20px;
}

/* =========================================================
   01 — SHARED BUTTON SYSTEM
   Primary, outline and light CTA styles used across the site.
========================================================= */

.btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  transition: all var(--transition);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--small {
  min-height: 40px;
  padding-inline: 18px;
  font-size: .7rem;
}

.btn--primary {
  background: var(--terracotta);
  color: var(--white);
}

.btn--primary:hover {
  background: #9F4A30;
}

.btn--outline {
  border-color: var(--charcoal);
  background: transparent;
}

.btn--outline:hover {
  background: var(--charcoal);
  color: var(--ivory);
}

.btn--dark-outline {
  border-color: rgba(255,255,255,.4);
  color: var(--ivory);
}

.btn--dark-outline:hover {
  background: var(--ivory);
  color: var(--charcoal);
}

.btn--light {
  background: var(--ivory);
  color: var(--charcoal);
}

/* =========================================================
   02 — SITE HEADER / NAVIGATION
   Fixed header, brand, desktop navigation and scroll state.
========================================================= */

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 36px;
  padding: 0 48px;
  border-bottom: 1px solid transparent;
  transition: all var(--transition);
}

.site-header.is-scrolled {
  min-height: 66px;
  background: rgba(246,242,235,.94);
  border-bottom-color: rgba(31,31,31,.1);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
}

/* =========================================================
   HEADER LOGO
   Two logo versions:
   - default logo
   - sticky / scrolled logo
========================================================= */

.brand {
  display: inline-flex;
  align-items: center;
}


/*
   Both logos occupy exactly the same position.
   This prevents the navigation from moving when
   the sticky header becomes active.
*/
.brand__logo-stack {
  display: grid;
  align-items: center;
}


/*
   Both images sit in the same grid cell.
*/
.brand__logo {
  grid-area: 1 / 1;

  display: block;

  width: 250px;
  height: auto;

  object-fit: contain;

  transition:
    opacity 280ms ease,
    transform 280ms ease;

  pointer-events: none;
}


/* =========================================================
   NORMAL HEADER
========================================================= */

.brand__logo--default {
  opacity: 1;
  transform: translateY(0);
}


.brand__logo--sticky {
  opacity: 0;
  transform: translateY(3px);
}


/* =========================================================
   STICKY / SCROLLED HEADER

   .is-scrolled is already added by app.js.
========================================================= */

.site-header.is-scrolled .brand__logo--default {
  opacity: 0;
  transform: translateY(-3px);
}


.site-header.is-scrolled .brand__logo--sticky {
  opacity: 1;
  transform: translateY(0);
}

.main-nav {
  display: flex;
  justify-content: center;
  gap: clamp(18px,2.4vw,38px);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.main-nav a {
  position: relative;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 1px;
  background: var(--terracotta);
  transition: right var(--transition);
}

.main-nav a:hover::after {
  right: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.language-switch {
  border: 0;
  background: transparent;
  font-size: .68rem;
  font-weight: 600;
  cursor: pointer;
}

.language-switch span {
  color: var(--warm-gray);
}

.nav-toggle {
  display: none;
}

/* =========================================================
   03 — HERO
   Above-the-fold layout, continuous motion line, hero image and CTA positioning.
========================================================= */

.hero {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  padding-top: 78px;
  background: radial-gradient(circle at 82% 35%, rgba(184, 92, 61, .09), transparent 30%), var(--ivory);
}

.lowercase {
  text-transform: lowercase;
}

.hero__grid {
  --hero-gutter: max(48px, calc((100vw - 1360px) / 2));
  width: calc(100% - var(--hero-gutter));
  min-height: calc(100svh - 78px);
  margin-left: var(--hero-gutter);
  margin-right: 0;
  display: grid;
  grid-template-columns: minmax(560px, .95fr) minmax(480px, 1.05fr);
  align-items: stretch;
}

.hero__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 26px 34px 30px 0;
}

.hero__content h1 {
  max-width: 780px;
  margin-bottom: 8px;
}

.hero__theme {
  margin-bottom: 16px;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .28em;
}

.hero__intro {
  max-width: 610px;
  margin-bottom: 18px;
  font-size: 1rem;
}

.hero__meta {
  display: grid;
  gap: 2px;
  margin-bottom: 20px;
}

.hero__meta strong {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 400;
}

.hero__meta span {
  font-size: .88rem;
}

.hero__actions {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.hero__discover {
  font-size: .78rem;
  border-bottom: 1px solid transparent;
}

.hero__discover:hover {
  border-bottom-color: var(--charcoal);
}


.hero .eyebrow {
  margin-bottom: 12px;
}

/* One continuous brand line across the complete hero.
   z-index: 1 keeps it above the image but below the text/buttons. */
.hero__motion-line {
  position: absolute;
  z-index: 1;
  inset: 78px 0 0 0;
  width: 100%;
  height: calc(100% - 78px);
  overflow: visible;
  pointer-events: none;
}

.hero__motion-line path {
  fill: none;
  stroke: var(--terracotta);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__visual {
  position: relative;
  z-index: 0;
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
}

.hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(75%) contrast(1.05);
}

.hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,var(--ivory) 0,transparent 24%);
  pointer-events: none;
}




/* =========================================================
   04 — ΣΗΜΑΝΤΙΚΕΣ ΗΜΕΡΟΜΗΝΙΕΣ + ΤΟ ΣΥΝΕΔΡΙΟ ΜΕ ΜΙΑ ΜΑΤΙΑ

   Δύο συνεχόμενες πληροφοριακές ζώνες:
   1. Σημαντικές ημερομηνίες με την καμπύλη γραμμή
      της οπτικής ταυτότητας του συνεδρίου.
   2. Βασικά αριθμητικά στοιχεία του συνεδρίου.
========================================================= */

.conference-dashboard {
  border-top: 1px solid var(--warm-gray);
  border-bottom: 1px solid var(--warm-gray);
}


/* =========================================================
   04.1 — ΚΟΙΝΗ ΔΟΜΗ ΤΩΝ ΔΥΟ ΖΩΝΩΝ
========================================================= */

.dashboard-band {
  padding: 72px 0;
}

.dashboard-band + .dashboard-band {
  border-top: 1px solid var(--warm-gray);
}

.dashboard-band--facts {
  background: var(--stone);
}


/* =========================================================
   04.2 — ΤΙΤΛΟΣ ΣΗΜΑΝΤΙΚΩΝ ΗΜΕΡΟΜΗΝΙΩΝ
========================================================= */

.section-heading--compact {
  max-width: 790px;
}

.section-heading--compact h2 {
  font-size: clamp(2.5rem, 4.5vw, 4.6rem);
  margin-bottom: 48px;
}


/* =========================================================
   04.3 — TIMELINE / ΚΑΜΠΥΛΗ ΓΡΑΜΜΗ

   Η γραμμή είναι SVG και όχι απλό CSS border.
   Έτσι αποκτά οργανική κίνηση παρόμοια με:
   - το λογότυπο
   - τη γραμμή του Hero
   - τη συνολική ταυτότητα του DANCE SCIENCE.
========================================================= */

.timeline {
  position: relative;
  width: 100%;
}


/*
   Η καμπύλη SVG καταλαμβάνει όλο το πλάτος.
   Το ύψος παραμένει σχετικά μικρό ώστε να λειτουργεί
   ως visual connector και όχι σαν αυτόνομο γραφικό.
*/
.timeline__curve {
  display: block;
  width: 100%;
  height: 70px;
  overflow: visible;
}


/*
   Βασικό styling της καμπύλης.
*/
.timeline__curve path {
  fill: none;
  stroke: var(--terracotta);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: .68;
}


/*
   Τα σημεία της timeline είναι μέρος του ίδιου SVG,
   ώστε να κάθονται ακριβώς πάνω στην καμπύλη.
*/
.timeline__curve circle {
  fill: var(--terracotta);
}


/* =========================================================
   04.4 — ΠΕΡΙΕΧΟΜΕΝΟ ΗΜΕΡΟΜΗΝΙΩΝ
========================================================= */

.timeline__items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 5px;
}

.timeline__item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-right: 28px;
}


/*
   Οι ημερομηνίες χρησιμοποιούν τη display γραμματοσειρά
   και το terracotta ώστε να συνδέονται με την καμπύλη.
*/
.timeline__item strong {
  font-family: var(--font-display);
  color: var(--terracotta);
  font-size: clamp(1.45rem, 2.4vw, 2.35rem);
  line-height: 1;
  font-weight: 400;
}


/*
   Η περιγραφή κάθε ημερομηνίας παραμένει μικρή
   και καθαρή για να μη συναγωνίζεται τον αριθμό.
*/
.timeline__item span {
  max-width: 175px;
  font-size: .78rem;
  line-height: 1.4;
}


/* =========================================================
   04.5 — ΤΟ ΣΥΝΕΔΡΙΟ ΜΕ ΜΙΑ ΜΑΤΙΑ
========================================================= */

.dashboard-facts {
  display: grid;
  grid-template-columns: .8fr 2.2fr;
  gap: 80px;
  align-items: center;
}

.dashboard-facts__title h2 {
  font-size: clamp(2.4rem, 4vw, 4.4rem);
  margin-bottom: 0;
}


/* =========================================================
   04.6 — ΑΡΙΘΜΗΤΙΚΑ ΣΤΟΙΧΕΙΑ
========================================================= */

.facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid var(--warm-gray);
}

.fact {
  min-height: 160px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 16px 30px;

  border-right: 1px solid var(--warm-gray);
}

.fact strong {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 5.4rem);
  line-height: .9;
  font-weight: 400;
}

.fact span {
  margin-top: 14px;
  font-size: .78rem;
}


/* =========================================================
   04.7 — TABLET
========================================================= */

@media (max-width: 900px) {

  .dashboard-facts {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .facts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .timeline__item {
    padding-right: 16px;
  }

  .timeline__item strong {
    font-size: 1.6rem;
  }

}


/* =========================================================
   04.8 — MOBILE

   Στο mobile η timeline μετατρέπεται σε κατακόρυφη ροή.
   Η καμπύλη παραμένει μέρος της ταυτότητας και δεν
   αντικαθίσταται από μια απλή ευθεία γραμμή.
========================================================= */

@media (max-width: 700px) {

  .dashboard-band {
    padding: 58px 0;
  }

  .section-heading--compact h2 {
    margin-bottom: 38px;
  }


  /* ────────────────────────────────────────────────────────
     Κρύβουμε την desktop καμπύλη
  ──────────────────────────────────────────────────────── */
  .timeline__curve {
    display: none;
  }


  /*
     Στο mobile δημιουργούμε μια λεπτή οργανική
     κατακόρυφη καμπύλη με pseudo-element.
  */
  .timeline {
    position: relative;
    padding-left: 42px;
  }

  .timeline::before {
    content: "";

    position: absolute;

    left: 7px;
    top: 8px;
    bottom: 8px;

    width: 22px;

    border-left: 2px solid var(--terracotta);

    border-radius: 50%;

    transform: skewY(-8deg);

    opacity: .65;
  }


  .timeline__items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;

    margin-top: 0;
  }


  .timeline__item {
    position: relative;
    padding-right: 0;
  }


  /*
     Mobile dots.
  */
  .timeline__item::before {
    content: "";

    position: absolute;

    left: -41px;
    top: 8px;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--terracotta);
  }


  .timeline__item strong {
    font-size: 1.8rem;
  }


  .timeline__item span {
    max-width: none;
  }


  .facts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


/* =========================================================
   04.9 — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .facts-grid {
    grid-template-columns: 1fr;
  }

  .fact {
    min-height: 130px;
  }

}

/* =========================================================
   05 — SHARED SECTION HEADING LAYOUTS
   Reusable split heading pattern for content sections.
========================================================= */

.section-heading--split {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 54px;
}

.section-heading--split h2 {
  margin-bottom: 0;
}

.section-heading--split>p {
  margin: 0;
  max-width: 440px;
}

/* =========================================================
   06 — THEMATIC AREAS

   Interactive thematic cards.

   Interaction:
   - Hover / focus / active reveals the description.
   - The reveal uses the conference terracotta colour.
   - The upper edge is one smooth curved shape.
   - Description text is centered both horizontally
     and vertically inside the curved reveal.
========================================================= */


/* =========================================================
   06.1 — THEMATIC AREAS GRID
========================================================= */

.interactive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  border-top: 1px solid var(--warm-gray);
  border-left: 1px solid var(--warm-gray);
}


/* =========================================================
   06.2 — INDIVIDUAL CARD
========================================================= */

.interactive-card {
  min-height: 310px;

  position: relative;
  overflow: hidden;

  padding: 34px;

  border-right: 1px solid var(--warm-gray);
  border-bottom: 1px solid var(--warm-gray);

  cursor: pointer;

  background: var(--ivory);

  transition:
    background 280ms ease,
    color 280ms ease,
    transform 280ms ease;
}


/* Very subtle lift on interaction */
.interactive-card:hover,
.interactive-card:focus,
.interactive-card.is-active {
  transform: translateY(-3px);
}


/* =========================================================
   06.3 — FINAL / WIDE CARD
========================================================= */

.interactive-card--wide {
  grid-column: span 3;
  min-height: 250px;
}


/* =========================================================
   06.4 — CARD NUMBER
========================================================= */

.interactive-card__number {
  display: block;

  margin-bottom: 34px;

  color: var(--terracotta);

  font-family: var(--font-display);
  font-size: 2.8rem;
  line-height: 1;
}


/* =========================================================
   06.5 — CARD TITLE
========================================================= */

.interactive-card h3 {
  position: relative;
  z-index: 2;

  margin-bottom: 18px;

  transition:
    color 280ms ease,
    transform 280ms ease;
}


/* =========================================================
   06.6 — SHORT SUMMARY
========================================================= */

.interactive-card__summary {
  position: relative;
  z-index: 2;

  margin: 0;

  color: var(--muted);

  font-size: .78rem;

  transition:
    opacity 220ms ease,
    transform 220ms ease;
}


/* =========================================================
   06.7 — SMOOTH CURVED DESCRIPTION REVEAL

   One continuous curved terracotta shape.
   The text is centered horizontally and vertically.
========================================================= */

.interactive-card__reveal {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  min-height: 58%;

  /*
     Flex centers the description inside the shape.
  */
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 72px 38px 28px;

  color: var(--ivory);
  background: var(--terracotta);

  /*
     One smooth curved silhouette.
  */
  clip-path: ellipse(
    82% 68%
    at 56% 100%
  );

  /*
     Hidden below the card by default.
  */
  transform: translateY(102%);

  transition:
    transform 420ms cubic-bezier(.22, .72, .28, 1);

  z-index: 4;
}


/* =========================================================
   06.8 — DESCRIPTION TEXT
========================================================= */

.interactive-card__reveal p {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 88%;

  margin: 0;

  text-align: center;

  font-size: .88rem;
  line-height: 1.6;

  color: var(--ivory);
}


/* =========================================================
   06.9 — SUBTLE CURVED DETAIL

   A very soft internal line echoes the wider
   conference visual language.
========================================================= */

.interactive-card__reveal::before {
  content: "";

  position: absolute;

  width: 76%;
  height: 60px;

  top: 34px;
  left: 12%;

  border-top: 1px solid rgba(255,255,255,.22);

  border-radius: 50%;

  transform: rotate(-4deg);

  pointer-events: none;
}


/* =========================================================
   06.10 — ACTIVE / HOVER / FOCUS STATE
========================================================= */

.interactive-card:hover .interactive-card__reveal,
.interactive-card:focus .interactive-card__reveal,
.interactive-card.is-active .interactive-card__reveal {
  transform: translateY(0);
}


/*
   Hide the short summary while the detailed
   description is visible.
*/
.interactive-card:hover .interactive-card__summary,
.interactive-card:focus .interactive-card__summary,
.interactive-card.is-active .interactive-card__summary {
  opacity: 0;
  transform: translateY(6px);
}


/*
   Small title movement to make the reveal
   feel more integrated.
*/
.interactive-card:hover h3,
.interactive-card:focus h3,
.interactive-card.is-active h3 {
  transform: translateY(-3px);
}


/* =========================================================
   06.11 — TABLET
========================================================= */

@media (max-width: 1000px) {

  .interactive-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .interactive-card--wide {
    grid-column: span 2;
  }

}


/* =========================================================
   06.12 — MOBILE
========================================================= */

@media (max-width: 700px) {

  .interactive-grid {
    grid-template-columns: 1fr;
  }

  .interactive-card,
  .interactive-card--wide {
    grid-column: span 1;
    min-height: 280px;
  }

  .interactive-card__reveal {
    min-height: 62%;

    padding: 70px 28px 24px;

    clip-path: ellipse(
      92% 72%
      at 58% 100%
    );
  }

  .interactive-card__reveal p {
    max-width: 92%;
    font-size: .84rem;
  }

}

/* =========================================================
   07 — ΠΡΟΣΚΛΗΣΗ ΥΠΟΒΟΛΗΣ ΠΕΡΙΛΗΨΕΩΝ

   Σκούρα ενότητα υψηλής αντίθεσης.

   Η φωτογραφία λειτουργεί ως background visual και όχι
   ως ξεχωριστή στήλη. Με αυτόν τον τρόπο:
   - δεν επηρεάζει το grid
   - δεν παραμορφώνει το layout
   - παραμένει ατμοσφαιρική
   - το κείμενο διατηρεί υψηλή αναγνωσιμότητα

   Η καμπύλη terracotta συνεχίζει την οπτική ταυτότητα
   του λογοτύπου, του Hero και του timeline.
========================================================= */


.abstracts {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  color: var(--ivory);
  background: var(--charcoal);
}


/* =========================================================
   07.1 — BACKGROUND IMAGE

   Unsplash placeholder:
   Σύγχρονος χορός / κίνηση.

   Η φωτογραφία καλύπτει περισσότερο τη δεξιά πλευρά,
   χωρίς να συμμετέχει στο layout του περιεχομένου.
========================================================= */

.abstracts::before {
  content: "";

  position: absolute;
  z-index: -2;

  top: 0;
  right: 0;
  bottom: 0;

  width: 48%;

  background-image:
    url("https://images.unsplash.com/photo-1773707985107-59000794594b?auto=format&fit=crop&w=1600&q=85");

  background-size: cover;

  /*
     Μετακινήστε το δεύτερο ποσοστό εάν χρειάζεται
     διαφορετικό crop στο πρόσωπο / σώμα.
  */
  background-position: center 38%;

  background-repeat: no-repeat;

  filter:
    grayscale(100%)
    contrast(1.08);

  opacity: .78;

  transform: scale(1.02);
}


/* =========================================================
   07.2 — IMAGE OVERLAY / GRADIENT

   Το gradient ενώνει ομαλά τη φωτογραφία με το charcoal
   background αντί να δημιουργεί εμφανές "κουτί".
========================================================= */

.abstracts::after {
  content: "";

  position: absolute;
  z-index: -1;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      var(--charcoal) 0%,
      var(--charcoal) 38%,
      rgba(31,31,31,.96) 48%,
      rgba(31,31,31,.82) 63%,
      rgba(31,31,31,.48) 100%
    );
}


/* =========================================================
   07.3 — CONTENT GRID
========================================================= */

.abstracts__grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(260px, .65fr);

  gap: clamp(60px, 7vw, 110px);

  align-items: end;
}


/* =========================================================
   07.4 — MAIN CONTENT
========================================================= */

.abstracts__content {
  position: relative;
  z-index: 3;

  max-width: 800px;
}


.abstracts h2 {
  max-width: 920px;

  margin-bottom: 28px;
}


.abstracts__intro {
  max-width: 650px;

  margin-bottom: 0;

  color: rgba(246,242,235,.78);

  font-size: 1rem;
  line-height: 1.65;
}


/* =========================================================
   07.5 — ACTION BUTTONS
========================================================= */

.abstracts__actions {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 34px;

  /*
     Τα κουμπιά πρέπει να βρίσκονται πάνω από
     τη διακοσμητική καμπύλη.
  */
  position: relative;
  z-index: 5;
}


/* =========================================================
   07.6 — SUBMISSION INFORMATION
========================================================= */

.abstracts__meta {
  position: relative;
  z-index: 3;

  margin: 0;

  border-left:
    1px solid rgba(246,242,235,.28);

  /*
     Ελαφρύ σκοτείνιασμα πίσω από τα metadata
     ώστε να παραμένουν καθαρά πάνω στη φωτογραφία.
  */
  background:
    rgba(31,31,31,.20);

  backdrop-filter: blur(2px);
}


.abstracts__meta div {
  padding:
    22px
    20px
    22px
    32px;

  border-bottom:
    1px solid rgba(246,242,235,.15);
}


.abstracts__meta div:first-child {
  border-top:
    1px solid rgba(246,242,235,.15);
}


.abstracts__meta dt {
  margin-bottom: 5px;

  color: rgba(246,242,235,.65);

  font-size: .75rem;
}


.abstracts__meta dd {
  margin: 0;

  color: #E47B58;

  font-family: var(--font-display);

  font-size: clamp(1.25rem, 1.7vw, 1.8rem);

  line-height: 1.15;
}


/* =========================================================
   07.7 — TERRACOTTA CURVE

   Η καμπύλη περνά χαμηλά μέσα από την ενότητα
   και λειτουργεί ως συνέχεια της βασικής ταυτότητας.
========================================================= */

.abstracts__curve {
  position: absolute;
  z-index: 1;

  width: 720px;
  height: 250px;

  right: -170px;
  bottom: -145px;

  border: 3px solid #E47B58;

  border-color:
    #E47B58
    transparent
    transparent
    transparent;

  border-radius: 50%;

  transform: rotate(-7deg);

  pointer-events: none;

  opacity: .9;
}


/* =========================================================
   07.8 — TABLET
========================================================= */

@media (max-width: 1000px) {

  .abstracts::before {
    width: 58%;
    opacity: .60;
  }


  .abstracts::after {
    background:
      linear-gradient(
        90deg,
        var(--charcoal) 0%,
        var(--charcoal) 38%,
        rgba(31,31,31,.94) 58%,
        rgba(31,31,31,.62) 100%
      );
  }


  .abstracts__grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(230px, .5fr);

    gap: 50px;
  }

}


/* =========================================================
   07.9 — MOBILE
========================================================= */

@media (max-width: 700px) {

  .abstracts__grid {
    grid-template-columns: 1fr;

    gap: 48px;
  }


  /*
     Στο κινητό η εικόνα γίνεται πιο διακριτική
     και λειτουργεί περισσότερο ως texture.
  */
  .abstracts::before {
    width: 100%;

    left: 0;

    background-position: 68% center;

    opacity: .32;
  }


  .abstracts::after {
    background:
      linear-gradient(
        180deg,
        rgba(31,31,31,.98) 0%,
        rgba(31,31,31,.92) 53%,
        rgba(31,31,31,.74) 100%
      );
  }


  .abstracts__meta {
    max-width: 100%;

    border-left: 0;

    border-top:
      1px solid rgba(246,242,235,.28);

    backdrop-filter: none;
  }


  .abstracts__meta div {
    padding:
      20px
      0;
  }


  .abstracts__actions {
    display: grid;
    grid-template-columns: 1fr;
  }


  .abstracts__curve {
    width: 520px;
    height: 190px;

    right: -300px;
    bottom: -115px;
  }

}

/* =========================================================
   08 — ROUND TABLES
   Expandable editorial rows.
========================================================= */

.round-table-list {
  border-top: 1px solid var(--warm-gray);
}

.round-table {
  display: grid;
  grid-template-columns: 90px 1fr;
  padding: 28px 0;
  border-bottom: 1px solid var(--warm-gray);
  cursor: pointer;
}

.round-table>span {
  color: var(--terracotta);
  font-family: var(--font-display);
  font-size: 2.6rem;
}

.round-table h3 {
  margin-bottom: 8px;
}

.round-table__meta {
  margin: 0;
  color: var(--muted);
  font-size: .78rem;
}

.round-table__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease,margin-top 300ms ease;
}

.round-table__reveal p {
  overflow: hidden;
  margin: 0;
  max-width: 820px;
}

.round-table.is-active .round-table__reveal,.round-table:hover .round-table__reveal,.round-table:focus .round-table__reveal {
  grid-template-rows: 1fr;
  margin-top: 16px;
}

/* =========================================================
   09 — PROGRAMME PLACEHOLDER
   Temporary content until the committee provides the final programme.
========================================================= */

.programme {
  background: var(--stone);
}

.programme__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}

.programme__placeholder {
  border-top: 1px solid var(--charcoal);
  padding-top: 30px;
}

.programme__request {
  display: grid;
  gap: 4px;
  padding: 22px 0;
  margin: 30px 0;
  border-top: 1px solid var(--warm-gray);
  border-bottom: 1px solid var(--warm-gray);
  font-size: .78rem;
}

.programme__request strong {
  color: var(--terracotta);
}

.text-link {
  font-size: .78rem;
  font-weight: 700;
}

.is-disabled {
  opacity: .45;
  pointer-events: none;
}

/* =========================================================
   10 — ΕΓΓΡΑΦΕΣ

   Ενότητα υψηλής οπτικής έμφασης για:
   - κόστος συμμετοχής
   - προθεσμία εγγραφών
   - βασικό CTA

   Η φωτογραφία βρίσκεται στο background και καλύπτεται
   από terracotta overlay ώστε να παραμένει πλήρως
   ενταγμένη στην ταυτότητα του DANCE SCIENCE.
========================================================= */


/* =========================================================
   10.1 — ΒΑΣΙΚΗ ΕΝΟΤΗΤΑ
========================================================= */

.registration {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  color: var(--ivory);
  background: var(--terracotta);
}


/* =========================================================
   10.2 — BACKGROUND IMAGE

   Unsplash placeholder σχετικό με συνέδριο / κοινό.

   Η εικόνα καλύπτει ολόκληρη την ενότητα.
========================================================= */

.registration::before {
  content: "";

  position: absolute;
  z-index: -3;

  inset: 0;

  background-image:
    url("https://images.unsplash.com/photo-1505373877841-8d25f7d46678?auto=format&fit=crop&w=2000&q=85");

  background-size: cover;
  background-position: center 52%;
  background-repeat: no-repeat;

  /*
     Μικρή επεξεργασία ώστε η εικόνα να λειτουργεί
     περισσότερο ως texture και λιγότερο ως φωτογραφία.
  */
  filter:
    grayscale(55%)
    contrast(1.05);

  transform: scale(1.02);
}


/* =========================================================
   10.3 — TERRACOTTA IMAGE OVERLAY

   Το βασικό χρώμα της ενότητας παραμένει terracotta.
   Η εικόνα διακρίνεται από κάτω χωρίς να επηρεάζει
   την αναγνωσιμότητα του περιεχομένου.
========================================================= */

.registration::after {
  content: "";

  position: absolute;
  z-index: -2;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(184, 92, 61, .98) 0%,
      rgba(184, 92, 61, .94) 42%,
      rgba(184, 92, 61, .86) 72%,
      rgba(184, 92, 61, .78) 100%
    );
}


/* =========================================================
   10.4 — LARGE BACKGROUND "DS"

   Διακριτικό branding πάνω από τη φωτογραφία αλλά
   κάτω από το πραγματικό περιεχόμενο.
========================================================= */

.registration__mark {
  position: absolute;
  z-index: -1;

  right: -35px;
  top: -85px;

  color: rgba(255,255,255,.07);

  font-family: var(--font-display);
  font-size: clamp(18rem, 32vw, 30rem);

  line-height: 1;

  pointer-events: none;
  user-select: none;
}


/* =========================================================
   10.5 — HEADER
========================================================= */

.registration__header {
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: space-between;
  align-items: end;

  gap: 80px;

  margin-bottom: 52px;
}


.registration__header h2 {
  max-width: 800px;

  margin-bottom: 0;
}


/* =========================================================
   10.6 — ΠΡΟΘΕΣΜΙΑ
========================================================= */

.registration__deadline {
  display: grid;
  gap: 7px;

  text-align: right;

  padding-left: 34px;

  border-left:
    1px solid rgba(255,255,255,.38);
}


.registration__deadline span {
  font-size: .76rem;

  color:
    rgba(255,255,255,.80);
}


.registration__deadline strong {
  font-family: var(--font-display);

  font-size: clamp(1.8rem, 2.5vw, 2.5rem);
  font-weight: 400;

  line-height: 1.05;
}


/* =========================================================
   10.7 — PRICING GRID

   Μόνο δύο κατηγορίες:
   - Φοιτητές
   - Μη φοιτητές
========================================================= */

.pricing-grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  border-top:
    1px solid rgba(255,255,255,.42);

  border-left:
    1px solid rgba(255,255,255,.42);

  /*
     Ελαφρύ transparent layer αυξάνει την αντίθεση
     με τη φωτογραφία χωρίς να δημιουργεί solid boxes.
  */
  background:
    rgba(120, 50, 31, .10);

  backdrop-filter:
    blur(2px);
}


/* =========================================================
   10.8 — PRICE CARD
========================================================= */

.price-card {
  min-height: 270px;

  padding: 32px 36px;

  border-right:
    1px solid rgba(255,255,255,.42);

  border-bottom:
    1px solid rgba(255,255,255,.42);
}


.price-card > p {
  margin-bottom: 0;

  font-size: .72rem;
  font-weight: 700;

  letter-spacing: .14em;
}


/* =========================================================
   10.9 — ΤΙΜΕΣ
========================================================= */

.price-card__prices {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  margin-top: 46px;
}


/* Διαχωριστική γραμμή μεταξύ πρόωρης και κανονικής εγγραφής */
.price-card__prices > div + div {
  padding-left: 34px;

  border-left:
    1px solid rgba(255,255,255,.38);
}


.price-card__prices strong {
  display: block;

  font-family: var(--font-display);

  font-size:
    clamp(3.7rem, 5.5vw, 5.3rem);

  font-weight: 400;

  line-height: .95;
}


.price-card__prices sup {
  position: relative;

  top: -.15em;

  margin-right: 3px;

  font-size: 1.7rem;
}


.price-card__prices span {
  display: block;

  margin-top: 14px;

  color:
    rgba(255,255,255,.78);

  font-size: .76rem;
}


/* =========================================================
   10.10 — FOOTER / CTA AREA
========================================================= */

.registration__footer {
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 50px;

  margin-top: 34px;
}


.registration__footer p {
  max-width: 650px;

  margin: 0;

  color:
    rgba(255,255,255,.84);

  font-size: .9rem;
  line-height: 1.6;
}


/* =========================================================
   10.11 — CTA BUTTON

   Μικρή ενίσχυση του λευκού button μέσα στο
   terracotta περιβάλλον.
========================================================= */

.registration .btn--light {
  min-width: 190px;

  background: var(--ivory);
  color: var(--charcoal);

  border-color: var(--ivory);
}


.registration .btn--light:hover {
  background: var(--charcoal);
  color: var(--ivory);

  border-color: var(--charcoal);
}


/* =========================================================
   10.12 — TABLET
========================================================= */

@media (max-width: 900px) {

  .registration__header {
    gap: 45px;
  }


  .registration::after {
    background:
      rgba(184, 92, 61, .91);
  }


  .price-card {
    padding:
      30px
      26px;
  }


  .price-card__prices > div + div {
    padding-left: 24px;
  }

}


/* =========================================================
   10.13 — MOBILE
========================================================= */

@media (max-width: 700px) {

  /*
     Στο mobile η φωτογραφία γίνεται πιο διακριτική
     για καλύτερη αναγνωσιμότητα.
  */
  .registration::before {
    background-position: 62% center;

    filter:
      grayscale(70%)
      contrast(1.08);
  }


  .registration::after {
    background:
      rgba(184, 92, 61, .93);
  }


  /* Header σε κάθετη διάταξη */
  .registration__header {
    display: grid;

    grid-template-columns: 1fr;

    align-items: start;

    gap: 32px;

    margin-bottom: 40px;
  }


  .registration__deadline {
    text-align: left;

    padding:
      18px
      0
      0;

    border-left: 0;

    border-top:
      1px solid rgba(255,255,255,.38);
  }


  /* Οι δύο κατηγορίες μπαίνουν η μία κάτω από την άλλη */
  .pricing-grid {
    grid-template-columns: 1fr;
  }


  .price-card {
    min-height: 240px;
  }


  .registration__footer {
    display: grid;

    grid-template-columns: 1fr;

    align-items: start;

    gap: 28px;
  }


  .registration .btn--light {
    width: 100%;
  }

}


/* =========================================================
   10.14 — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .price-card__prices {
    grid-template-columns: 1fr;

    gap: 26px;
  }


  .price-card__prices > div + div {
    padding:
      24px
      0
      0;

    border-left: 0;

    border-top:
      1px solid rgba(255,255,255,.38);
  }


  .price-card {
    min-height: auto;

    padding:
      30px
      26px;
  }


  .registration__mark {
    font-size: 16rem;

    right: -80px;
    top: -30px;
  }

}

/* =========================================================
   11 — ΧΩΡΟΣ ΔΙΕΞΑΓΩΓΗΣ + ΘΕΣΣΑΛΟΝΙΚΗ

   Full-width editorial section.

   Structure:
   50% venue image
   50% venue information

   The entire section deliberately breaks out of the site's
   normal .shell container so the photograph can extend
   completely to the left edge of the viewport.
========================================================= */


/* =========================================================
   11.1 — SECTION
========================================================= */

.destination {
  position: relative;

  /*
     Overrides the generic .section vertical padding.
     The internal content controls its own spacing.
  */
  padding: 0;

  overflow: hidden;

  background: var(--ivory);
}


/* =========================================================
   11.2 — FULL-WIDTH TWO COLUMN ROW
========================================================= */

.destination__row {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  min-height: 760px;
}


/* =========================================================
   11.3 — LEFT COLUMN / VENUE IMAGE
========================================================= */

.destination__image {
  position: relative;

  min-height: 760px;

  overflow: hidden;

  background: var(--charcoal);
}


.destination__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  /*
     Adjust this value if your selected hotel image
     needs a slightly different focal point.
  */
  object-position: center center;

  transition:
    transform 900ms cubic-bezier(.22,.72,.28,1);
}


/*
   Very restrained image movement.
*/
.destination__image:hover img {
  transform: scale(1.025);
}


/*
   Soft tonal treatment so the photograph fits
   the conference identity better.
*/
.destination__image::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(31,31,31,.10),
      transparent 45%,
      rgba(184,92,61,.08)
    );

  pointer-events: none;
}


/* =========================================================
   11.4 — RIGHT COLUMN / INFORMATION PANEL
========================================================= */

.destination__content {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    clamp(70px, 7vw, 120px)
    clamp(55px, 7vw, 110px);

  overflow: hidden;
}


/* =========================================================
   11.5 — BRAND CURVE

   A restrained fragment of the conference curve
   appears behind the information panel.
========================================================= */

.destination__curve {
  position: absolute;

  width: 620px;
  height: 230px;

  right: -280px;
  top: 45px;

  border:
    2px solid var(--terracotta);

  border-color:
    var(--terracotta)
    transparent
    transparent
    transparent;

  border-radius: 50%;

  transform: rotate(-13deg);

  opacity: .35;

  pointer-events: none;
}


/* =========================================================
   11.6 — VENUE HEADING
========================================================= */

.destination__content > .eyebrow {
  position: relative;
  z-index: 2;

  margin-bottom: 20px;
}


.destination__content h2 {
  position: relative;
  z-index: 2;

  max-width: 650px;

  margin-bottom: 30px;

  font-size:
    clamp(3.6rem, 6vw, 6.5rem);
}


/* =========================================================
   11.7 — INTRODUCTION
========================================================= */

.destination__lead {
  position: relative;
  z-index: 2;

  max-width: 650px;

  margin-bottom: 40px;

  color: var(--muted);

  font-size: 1rem;
  line-height: 1.7;
}


/* =========================================================
   11.8 — VENUE INFORMATION
========================================================= */

.destination__details {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  margin-bottom: 36px;

  border-top:
    1px solid var(--warm-gray);

  border-bottom:
    1px solid var(--warm-gray);
}


.destination__detail {
  min-height: 105px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    18px
    20px
    18px
    0;
}


.destination__detail + .destination__detail {
  padding-left: 24px;

  border-left:
    1px solid var(--warm-gray);
}


.destination__detail span {
  margin-bottom: 7px;

  color: var(--terracotta);

  font-size: .63rem;
  font-weight: 700;

  letter-spacing: .13em;
}


.destination__detail strong {
  font-family: var(--font-display);

  font-size: 1rem;
  font-weight: 400;

  line-height: 1.35;
}


/* =========================================================
   11.9 — GOOGLE MAPS + HOTEL BUTTONS
========================================================= */

.destination__actions {
  position: relative;
  z-index: 2;

  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-bottom: 65px;
}


/* =========================================================
   11.10 — CITY RESOURCES AREA
========================================================= */

.destination__city-resources {
  position: relative;
  z-index: 2;

  padding-top: 38px;

  border-top:
    1px solid var(--charcoal);
}


.destination__resources-header {
  display: grid;

  grid-template-columns:
    .65fr
    1.35fr;

  gap: 30px;

  align-items: start;

  margin-bottom: 26px;
}


.destination__resources-header .eyebrow {
  margin: 4px 0 0;
}


.destination__resources-header h3 {
  margin: 0;

  font-size:
    clamp(1.7rem, 2.5vw, 2.6rem);

  line-height: 1.06;
}


/* =========================================================
   11.11 — USEFUL LINK ROWS
========================================================= */

.destination__resource-list {
  border-top:
    1px solid var(--warm-gray);
}


.destination__resource {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 30px;

  min-height: 92px;

  padding:
    18px
    6px;

  border-bottom:
    1px solid var(--warm-gray);

  transition:
    padding 260ms ease,
    background 260ms ease;
}


.destination__resource > div {
  display: grid;

  grid-template-columns:
    38px
    minmax(0,1fr);

  column-gap: 14px;
  row-gap: 4px;

  align-items: baseline;
}


.destination__resource > div > span {
  grid-row:
    1 / 3;

  color: var(--terracotta);

  font-family: var(--font-display);

  font-size: 1.4rem;
}


.destination__resource strong {
  font-family: var(--font-display);

  font-size: 1.15rem;
  font-weight: 400;
}


.destination__resource small {
  color: var(--muted);

  font-size: .7rem;
}


.destination__resource-arrow {
  color: var(--terracotta);

  font-size: 1.1rem;

  transition:
    transform 260ms ease;
}


/* Hover */
.destination__resource:hover {
  padding-left: 14px;
  padding-right: 14px;

  background:
    rgba(184,92,61,.055);
}


.destination__resource:hover
.destination__resource-arrow {
  transform:
    translate(3px,-3px);
}


/* =========================================================
   11.12 — LARGE TABLET
========================================================= */

@media (max-width: 1050px) {

  .destination__row {
    grid-template-columns:
      .9fr
      1.1fr;
  }


  .destination__content {
    padding:
      70px
      48px;
  }


  .destination__details {
    grid-template-columns: 1fr;
  }


  .destination__detail {
    min-height: 82px;
  }


  .destination__detail + .destination__detail {
    padding-left: 0;

    border-left: 0;

    border-top:
      1px solid var(--warm-gray);
  }

}


/* =========================================================
   11.13 — MOBILE

   On mobile the image becomes the first full-width block,
   with the venue information underneath.
========================================================= */

@media (max-width: 760px) {

  .destination__row {
    display: grid;

    grid-template-columns: 1fr;

    min-height: 0;
  }


  .destination__image {
    min-height: 430px;
  }


  .destination__content {
    padding:
      68px
      24px;
  }


  .destination__content h2 {
    font-size:
      clamp(3.3rem, 15vw, 5rem);
  }


  .destination__actions {
    display: grid;

    grid-template-columns: 1fr;
  }


  .destination__actions .btn {
    width: 100%;
  }


  .destination__resources-header {
    grid-template-columns: 1fr;

    gap: 10px;
  }


  .destination__resource {
    min-height: 100px;
  }

}


/* =========================================================
   11.14 — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .destination__image {
    min-height: 340px;
  }


  .destination__content {
    padding:
      58px
      20px;
  }


  .destination__resource > div {
    grid-template-columns:
      30px
      minmax(0,1fr);
  }


  .destination__resource small {
    line-height: 1.4;
  }

}

/* =========================================================
   12 — ΕΠΙΤΡΟΠΕΣ ΣΥΝΕΔΡΙΟΥ

   Full-width section split into two equal panels:

   LEFT
   Επιστημονική Επιτροπή

   RIGHT
   Οργανωτική Επιτροπή

   Each panel contains:
   - committee title
   - member count
   - introductory copy
   - one primary featured member
   - two secondary members
   - link to the complete committee
========================================================= */


/* =========================================================
   12.1 — SECTION
========================================================= */

.community {
  position: relative;

  width: 100%;

  padding: 0;

  overflow: hidden;

  background: var(--ivory);
}


/* =========================================================
   12.2 — FULL-WIDTH TWO COLUMN ROW
========================================================= */

.community__row {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  width: 100%;
}


/* =========================================================
   12.3 — COMMITTEE PANEL
========================================================= */

.community__panel {
  position: relative;

  min-width: 0;

  padding:
    clamp(75px, 7vw, 120px)
    clamp(45px, 5vw, 85px);

  overflow: hidden;
}


/*
   Scientific Committee:
   main ivory background.
*/
.community__panel--scientific {
  background: var(--ivory);
}


/*
   Organising Committee:
   slightly warmer background to differentiate
   the two sides without breaking the identity.
*/
.community__panel--organising {
  background: var(--stone);

  border-left:
    1px solid var(--warm-gray);
}


/* =========================================================
   12.4 — INTERNAL CONTENT WIDTH

   Prevents the content from becoming excessively wide
   on very large screens.
========================================================= */

.community__panel-inner {
  width: 100%;

  max-width: 720px;

  margin-inline: auto;
}


/* =========================================================
   12.5 — PANEL HEADER
========================================================= */

.community__header {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  gap: 40px;

  margin-bottom: 30px;
}


.community__header h2 {
  max-width: 560px;

  margin-bottom: 0;

  font-size:
    clamp(2.8rem, 4.2vw, 4.8rem);
}


/* =========================================================
   12.6 — MEMBER COUNT
========================================================= */

.community__count {
  flex: 0 0 auto;

  display: flex;
  flex-direction: column;

  align-items: flex-end;

  padding-left: 24px;

  border-left:
    1px solid var(--warm-gray);
}


.community__count strong {
  font-family: var(--font-display);

  font-size:
    clamp(3.8rem, 5vw, 5.7rem);

  font-weight: 400;

  line-height: .85;
}


.community__count span {
  margin-top: 10px;

  color: var(--muted);

  font-size: .72rem;
}


/* =========================================================
   12.7 — INTRODUCTION
========================================================= */

.community__intro {
  max-width: 600px;

  margin-bottom: 42px;

  color: var(--muted);

  font-size: .9rem;
  line-height: 1.7;
}


/* =========================================================
   12.8 — PRIMARY FEATURED MEMBER
========================================================= */

.community__featured-member {
  margin-bottom: 18px;

  border-bottom:
    1px solid var(--warm-gray);
}


/* =========================================================
   12.9 — PRIMARY MEMBER IMAGE
========================================================= */

.community__featured-image {
  position: relative;

  height: clamp(300px, 29vw, 430px);

  overflow: hidden;

  background: var(--warm-gray);
}


.community__featured-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  /*
     Keeps the temporary stock imagery closer to
     the editorial conference identity.
  */
  filter:
    grayscale(78%)
    contrast(1.04);

  transition:
    transform 700ms cubic-bezier(.22,.72,.28,1),
    filter 400ms ease;
}


.community__featured-member:hover
.community__featured-image img {
  transform: scale(1.025);

  filter:
    grayscale(45%)
    contrast(1.04);
}


/* =========================================================
   12.10 — PLACEHOLDER LABEL

   Makes it explicit during development that these are
   not actual photographs of committee members.
   Remove when real portraits are supplied.
========================================================= */

.community__image-label {
  position: absolute;

  left: 14px;
  bottom: 14px;

  padding:
    7px
    10px;

  color: var(--ivory);

  background:
    rgba(31,31,31,.72);

  font-size: .56rem;
  font-weight: 700;

  letter-spacing: .12em;

  backdrop-filter:
    blur(7px);
}


/* =========================================================
   12.11 — PRIMARY MEMBER INFORMATION
========================================================= */

.community__featured-info {
  display: grid;

  grid-template-columns:
    52px
    minmax(0,1fr);

  gap: 20px;

  padding:
    23px
    0
    27px;
}


.community__member-index {
  color: var(--terracotta);

  font-family: var(--font-display);

  font-size: 1.6rem;
}


.community__featured-info h3 {
  margin-bottom: 5px;

  font-size:
    clamp(1.65rem, 2.3vw, 2.3rem);
}


.community__featured-info p {
  margin: 0;

  color: var(--muted);

  font-size: .72rem;
}


/* =========================================================
   12.12 — TWO SECONDARY MEMBERS
========================================================= */

.community__members {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 18px;

  margin-bottom: 34px;
}


/* =========================================================
   12.13 — SECONDARY MEMBER CARD
========================================================= */

.community__member {
  min-width: 0;
}


/* =========================================================
   12.14 — SECONDARY MEMBER IMAGE
========================================================= */

.community__member-image {
  height: 220px;

  margin-bottom: 17px;

  overflow: hidden;

  background: var(--warm-gray);
}


.community__member-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  filter:
    grayscale(82%)
    contrast(1.03);

  transition:
    transform 600ms ease,
    filter 350ms ease;
}


.community__member:hover
.community__member-image img {
  transform:
    scale(1.03);

  filter:
    grayscale(50%)
    contrast(1.03);
}


/* =========================================================
   12.15 — SECONDARY MEMBER INFORMATION
========================================================= */

.community__member
.community__member-index {
  display: block;

  margin-bottom: 8px;

  font-size: 1.15rem;
}


.community__member h3 {
  margin-bottom: 5px;

  font-size:
    clamp(1.3rem, 1.7vw, 1.7rem);

  line-height: 1.08;
}


.community__member p {
  margin: 0;

  color: var(--muted);

  font-size: .68rem;
}


/* =========================================================
   12.16 — FULL COMMITTEE LINK
========================================================= */

.community__link {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 30px;

  min-height: 64px;

  padding:
    18px
    4px;

  border-top:
    1px solid var(--charcoal);

  border-bottom:
    1px solid var(--charcoal);

  font-size: .68rem;
  font-weight: 700;

  letter-spacing: .06em;

  transition:
    padding 260ms ease,
    color 260ms ease,
    background 260ms ease;
}


.community__link > span:last-child {
  color: var(--terracotta);

  font-family: var(--font-display);

  font-size: 1.5rem;

  transition:
    transform 260ms ease;
}


/* Hover */
.community__link:hover {
  padding-left: 14px;
  padding-right: 14px;

  color: var(--ivory);

  background:
    var(--charcoal);
}


.community__link:hover
> span:last-child {
  transform:
    translateX(4px);
}


/* =========================================================
   12.17 — TABLET
========================================================= */

@media (max-width: 1050px) {

  .community__panel {
    padding:
      70px
      38px;
  }


  .community__header {
    gap: 24px;
  }


  .community__featured-image {
    height: 340px;
  }


  .community__member-image {
    height: 190px;
  }

}


/* =========================================================
   12.18 — MOBILE

   Committees become stacked full-width panels.
========================================================= */

@media (max-width: 780px) {

  .community__row {
    grid-template-columns: 1fr;
  }


  .community__panel {
    padding:
      68px
      24px;
  }


  .community__panel--organising {
    border-left: 0;

    border-top:
      1px solid var(--warm-gray);
  }


  .community__header {
    align-items: flex-end;
  }


  .community__featured-image {
    height:
      clamp(300px, 80vw, 440px);
  }


  .community__member-image {
    height:
      240px;
  }

}


/* =========================================================
   12.19 — SMALL MOBILE
========================================================= */

@media (max-width: 520px) {

  .community__header {
    display: grid;

    grid-template-columns: 1fr;

    gap: 25px;
  }


  .community__count {
    align-items: flex-start;

    padding:
      18px
      0
      0;

    border-left: 0;

    border-top:
      1px solid var(--warm-gray);
  }


  /*
     Secondary members are also stacked on very small screens.
  */
  .community__members {
    grid-template-columns: 1fr;
  }


  .community__member-image {
    height: 300px;
  }


  .community__featured-info {
    grid-template-columns:
      40px
      minmax(0,1fr);
  }

}

/* =========================================================
   13 — ΕΘΕΛΟΝΤΕΣ + ΦΟΡΕΙΣ / ΣΥΝΕΡΓΑΤΕΣ

   Δύο ισότιμες στήλες:

   ΑΡΙΣΤΕΡΑ
   - φωτογραφία
   - πρόσκληση εθελοντών
   - CTA

   ΔΕΞΙΑ
   - τίτλος
   - σύντομη εισαγωγή
   - 4 λογότυπα φορέων / συνεργατών
========================================================= */


/* =========================================================
   13.1 — TWO-COLUMN GRID
========================================================= */

.participation-support__grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  border:
    1px solid var(--warm-gray);
}


/* =========================================================
   13.2 — VOLUNTEERS PANEL
========================================================= */

.volunteers {
  position: relative;

  min-height: 620px;

  overflow: hidden;

  color: var(--ivory);

  background: var(--charcoal);
}


/* Background image */
.volunteers > img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  filter:
    grayscale(75%)
    brightness(.62)
    contrast(1.05);

  transition:
    transform 900ms cubic-bezier(.22,.72,.28,1);
}


/* Very subtle zoom */
.volunteers:hover > img {
  transform: scale(1.025);
}


/* =========================================================
   13.3 — DARK IMAGE OVERLAY
========================================================= */

.volunteers::after {
  content: "";

  position: absolute;

  z-index: 1;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(31,31,31,.96) 0%,
      rgba(31,31,31,.87) 42%,
      rgba(31,31,31,.48) 72%,
      rgba(31,31,31,.23) 100%
    );

  pointer-events: none;
}


/* =========================================================
   13.4 — VOLUNTEER CONTENT
========================================================= */

.volunteers__content {
  position: relative;

  z-index: 2;

  width: min(500px, calc(100% - 100px));

  padding:
    64px
    0
    64px
    50px;
}


.volunteers__content h2 {
  margin-bottom: 24px;

  font-size:
    clamp(3rem, 4.8vw, 5rem);
}


.volunteers__content p:not(.eyebrow) {
  max-width: 420px;

  color:
    rgba(246,242,235,.84);

  line-height: 1.7;
}


/* Secondary explanatory text */
.volunteers__secondary {
  margin-top: 18px;
  margin-bottom: 30px;

  font-size: .82rem;
}


/* =========================================================
   13.5 — SUPPORT PANEL
========================================================= */

.support {
  display: flex;
  flex-direction: column;

  justify-content: center;

  padding:
    clamp(55px, 5vw, 85px);

  background:
    var(--ivory);
}


.support h2 {
  max-width: 580px;

  margin-bottom: 22px;

  font-size:
    clamp(2.8rem, 4.3vw, 4.8rem);
}


/* =========================================================
   13.6 — SUPPORT INTRODUCTION
========================================================= */

.support__intro {
  max-width: 560px;

  margin-bottom: 44px;

  color: var(--muted);

  font-size: .88rem;
  line-height: 1.7;
}


/* =========================================================
   13.7 — LOGO GRID
========================================================= */

.support__logos {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  border-top:
    1px solid var(--warm-gray);

  border-left:
    1px solid var(--warm-gray);
}


/* =========================================================
   13.8 — INDIVIDUAL LOGO
========================================================= */

.support-logo {
  min-height: 190px;

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  gap: 18px;

  padding:
    28px
    22px;

  text-align: center;

  border-right:
    1px solid var(--warm-gray);

  border-bottom:
    1px solid var(--warm-gray);

  transition:
    background 260ms ease,
    transform 260ms ease;
}


/* Logo image */
.support-logo img {
  width: auto;

  max-width: 150px;
  max-height: 82px;

  object-fit: contain;

  /*
     Keeps logos visually balanced even when
     their original dimensions differ.
  */
  filter:
    grayscale(100%);

  opacity: .82;

  transition:
    filter 260ms ease,
    opacity 260ms ease,
    transform 260ms ease;
}


/* Organisation name */
.support-logo span {
  max-width: 210px;

  color: var(--muted);

  font-size: .67rem;
  line-height: 1.4;
}


/* =========================================================
   13.9 — LOGO HOVER
========================================================= */

.support-logo:hover {
  background:
    rgba(184,92,61,.055);
}


.support-logo:hover img {
  filter:
    grayscale(0);

  opacity: 1;

  transform:
    translateY(-3px);
}


/* =========================================================
   13.10 — OPTIONAL TERRACOTTA LINE

   Small identity detail appearing at the bottom
   of each logo cell on hover.
========================================================= */

.support-logo {
  position: relative;
}


.support-logo::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -1px;

  width: 0;
  height: 2px;

  background:
    var(--terracotta);

  transform:
    translateX(-50%);

  transition:
    width 300ms ease;
}


.support-logo:hover::after {
  width: 55%;
}


/* =========================================================
   13.11 — TABLET
========================================================= */

@media (max-width: 1000px) {

  .participation-support__grid {
    grid-template-columns:
      1fr;
  }


  .volunteers {
    min-height: 560px;
  }


  .support {
    padding:
      70px
      48px;
  }


  .support__logos {
    max-width: 760px;
  }

}


/* =========================================================
   13.12 — MOBILE
========================================================= */

@media (max-width: 700px) {

  .participation-support {
    padding:
      70px
      0;
  }


  .participation-support__grid {
    width: 100%;

    border-left: 0;
    border-right: 0;
  }


  .volunteers {
    min-height: 560px;
  }


  .volunteers__content {
    width:
      calc(100% - 48px);

    padding:
      55px
      0
      55px
      24px;
  }


  .volunteers::after {
    background:
      linear-gradient(
        90deg,
        rgba(31,31,31,.95),
        rgba(31,31,31,.50)
      );
  }


  .support {
    padding:
      65px
      24px;
  }


  .support__logos {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }


  .support-logo {
    min-height: 160px;

    padding:
      24px
      16px;
  }


  .support-logo img {
    max-width: 120px;
    max-height: 68px;
  }

}


/* =========================================================
   13.13 — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  /*
     Logos become one per row when screen width
     becomes too small.
  */
  .support__logos {
    grid-template-columns: 1fr;
  }


  .support-logo {
    min-height: 145px;
  }


  .support-logo img {
    max-width: 145px;
    max-height: 72px;
  }

}

/* =========================================================
   14 — NEWS SLIDER
   Card slider controlled by app.js.
========================================================= */

.news {
  overflow: hidden;
}

.section-heading--news {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 50px;
}

.section-heading--news h2 {
  margin-bottom: 0;
}

.slider-controls {
  display: flex;
  gap: 8px;
}

.slider-controls button {
  width: 48px;
  height: 48px;
  border: 1px solid var(--charcoal);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition);
}

.slider-controls button:hover {
  background: var(--charcoal);
  color: var(--ivory);
}

.news-slider {
  overflow: hidden;
}

.news-track {
  display: flex;
  gap: 24px;
  transition: transform 450ms cubic-bezier(.22,.75,.25,1);
  will-change: transform;
}

.news-card {
  flex: 0 0 calc((100% - 48px)/3);
  min-width: 0;
}

.news-card__image {
  aspect-ratio: 16/10;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--stone);
}

.news-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.35);
  transition: transform 500ms ease;
}

.news-card:hover img {
  transform: scale(1.035);
}

.news-card time {
  display: block;
  margin-bottom: 12px;
  color: var(--terracotta);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
}

.news-card h3 {
  margin-bottom: 12px;
  font-size: 2rem;
}

.news-card p {
  color: var(--muted);
  font-size: .86rem;
}

.news-card a>span {
  font-size: .75rem;
  font-weight: 600;
}

/* =========================================================
   15 — ΤΕΛΙΚΟ CTA

   Τελική ενότητα μετατροπής πριν από το footer.

   Χρησιμοποιεί:
   - φωτογραφία σύγχρονου χορού ως background
   - ισχυρό charcoal overlay
   - terracotta καμπύλη
   - δύο βασικά CTA
========================================================= */


/* =========================================================
   15.1 — SECTION
========================================================= */

.decision-strip {
  position: relative;

  overflow: hidden;
  isolation: isolate;

  padding:
    clamp(80px, 8vw, 125px)
    0;

  color: var(--ivory);

  background: var(--charcoal);
}


/* =========================================================
   15.2 — BACKGROUND IMAGE
========================================================= */

.decision-strip::before {
  content: "";

  position: absolute;

  z-index: -3;

  inset: 0;

  background-image:
    url("media/final-cta-dance.png");

  background-size: cover;

  /*
     Keeps the dancer mainly toward the right side
     so the heading remains visually clean.
  */
  background-position:
    65% 45%;

  background-repeat: no-repeat;

  filter:
    grayscale(100%)
    contrast(1.12);

  transform:
    scale(1.02);
}


/* =========================================================
   15.3 — DARK OVERLAY

   Stronger on the left, where the text sits,
   slightly lighter toward the image focal point.
========================================================= */

.decision-strip::after {
  content: "";

  position: absolute;

  z-index: -2;

  inset: 0;

  background:
    linear-gradient(
      90deg,

      rgba(31,31,31,.98) 0%,

      rgba(31,31,31,.95) 35%,

      rgba(31,31,31,.78) 64%,

      rgba(31,31,31,.60) 100%
    );
}


/* =========================================================
   15.4 — INTERNAL GRID
========================================================= */

.decision-strip__grid {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: end;

  gap:
    clamp(50px, 8vw, 120px);
}


/* =========================================================
   15.5 — CONTENT
========================================================= */

.decision-strip__content {
  position: relative;

  z-index: 3;

  max-width: 850px;
}


.decision-strip h2 {
  max-width: 760px;

  margin-bottom: 18px;

  font-size:
    clamp(3.2rem, 5.5vw, 6rem);

  line-height: .95;
}


/* =========================================================
   15.6 — DATE / VENUE
========================================================= */

.decision-strip__meta {
  margin: 0;

  color:
    rgba(246,242,235,.78);

  font-size: .88rem;

  letter-spacing: .02em;
}


/* =========================================================
   15.7 — CTA BUTTONS
========================================================= */

.decision-strip__actions {
  position: relative;

  z-index: 5;

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 12px;
}


/* =========================================================
   15.8 — TERRACOTTA BRAND CURVE
========================================================= */

.decision-strip__curve {
  position: absolute;

  z-index: 1;

  width: 760px;
  height: 270px;

  left: -300px;
  bottom: -175px;

  border:
    3px solid var(--terracotta);

  border-color:
    var(--terracotta)
    transparent
    transparent
    transparent;

  border-radius: 50%;

  transform:
    rotate(16deg);

  opacity: .9;

  pointer-events: none;
}


/* =========================================================
   15.9 — SUBTLE IMAGE ACCENT

   Adds a slight terracotta atmosphere to the right side
   without making the entire image orange.
========================================================= */

.decision-strip__content::after {
  content: "";

  position: absolute;

  width: 580px;
  height: 580px;

  left: 105%;
  top: 50%;

  transform:
    translateY(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(184,92,61,.16),
      transparent 68%
    );

  pointer-events: none;
}


/* =========================================================
   15.10 — TABLET
========================================================= */

@media (max-width: 950px) {

  .decision-strip__grid {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 38px;
  }


  .decision-strip__actions {
    justify-content: flex-start;
  }


  .decision-strip::before {
    background-position:
      70% center;
  }


  .decision-strip::after {
    background:
      linear-gradient(
        90deg,

        rgba(31,31,31,.97) 0%,

        rgba(31,31,31,.92) 48%,

        rgba(31,31,31,.67) 100%
      );
  }

}


/* =========================================================
   15.11 — MOBILE
========================================================= */

@media (max-width: 700px) {

  .decision-strip {
    padding:
      78px
      0;
  }


  /*
     Image becomes more atmospheric and less dominant.
  */
  .decision-strip::before {
    background-position:
      67% center;

    filter:
      grayscale(100%)
      contrast(1.10);
  }


  .decision-strip::after {
    background:
      rgba(31,31,31,.82);
  }


  .decision-strip h2 {
    font-size:
      clamp(3rem, 13vw, 4.5rem);
  }


  .decision-strip__actions {
    display: grid;

    grid-template-columns: 1fr;

    width: 100%;
  }


  .decision-strip__actions .btn {
    width: 100%;
  }


  .decision-strip__curve {
    width: 520px;
    height: 200px;

    left: -320px;
    bottom: -130px;
  }

}

/* =========================================================
   16 — FOOTER

   Main website footer:
   - Conference identity
   - Navigation
   - Contact
   - Social media
   - Legal links
   - Language switch
========================================================= */


/* =========================================================
   16.1 — FOOTER WRAPPER
========================================================= */

.site-footer {
  padding:
    76px
    0
    24px;

  color: var(--charcoal);

  background:
    var(--ivory);

  border-top:
    1px solid var(--warm-gray);
}


/* =========================================================
   16.2 — MAIN FOOTER GRID
========================================================= */

.footer-grid {
  display: grid;

  grid-template-columns:
    minmax(250px, 1.45fr)
    repeat(4, minmax(120px, .72fr));

  gap:
    clamp(32px, 4vw, 58px);

  align-items: start;

  padding-bottom: 58px;
}


/* =========================================================
   16.3 — BRAND COLUMN
========================================================= */

.footer-brand {
  max-width: 320px;
}


/* Footer logo link */
.footer-brand__logo {
  display: inline-block;

  margin-bottom: 24px;
}


/* Footer logo image */
.footer-brand__logo img {
  display: block;

  width: 190px;
  height: auto;

  object-fit: contain;

  transition:
    opacity 240ms ease,
    transform 240ms ease;
}


/* Logo hover */
.footer-brand__logo:hover img {
  opacity: .76;

  transform:
    translateY(-2px);
}


/* Conference title */
.footer-brand__title {
  margin:
    0
    0
    12px;

  font-family:
    var(--font-display);

  font-size: 1.12rem;

  line-height: 1.35;
}


/* Date / venue information */
.footer-brand__meta {
  margin: 0;

  color:
    var(--muted);

  font-size: .74rem;

  line-height: 1.65;
}


/* =========================================================
   16.4 — FOOTER COLUMNS
========================================================= */

.footer-column {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 10px;

  min-width: 0;

  font-size: .75rem;
}


/* Column heading */
.footer-column > strong {
  position: relative;

  margin-bottom: 14px;

  color:
    var(--charcoal);

  font-size: .72rem;

  font-weight: 700;

  letter-spacing: .07em;
}


/* Small terracotta underline */
.footer-column > strong::after {
  content: "";

  display: block;

  width: 22px;
  height: 1px;

  margin-top: 9px;

  background:
    var(--terracotta);
}


/* =========================================================
   16.5 — STANDARD FOOTER LINKS
========================================================= */

.footer-column > a:not(.footer-social__link) {
  position: relative;

  display: inline-block;

  max-width: 100%;

  color:
    var(--muted);

  line-height: 1.5;

  transition:
    color 220ms ease,
    transform 220ms ease;
}


/* Animated underline */
.footer-column > a:not(.footer-social__link)::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -3px;

  width: 0;
  height: 1px;

  background:
    var(--terracotta);

  transition:
    width 240ms ease;
}


/* Hover */
.footer-column > a:not(.footer-social__link):hover {
  color:
    var(--charcoal);

  transform:
    translateX(3px);
}


.footer-column > a:not(.footer-social__link):hover::after {
  width: 100%;
}


/* =========================================================
   16.6 — EMAIL
========================================================= */

.footer-email {
  overflow-wrap: anywhere;
}


/* =========================================================
   16.7 — SOCIAL MEDIA
========================================================= */

.footer-social {
  display: flex;

  flex-direction: row !important;

  align-items: center;

  gap: 9px !important;

  margin-top: 15px;
}


/* Individual icon */
.footer-social__link {
  width: 39px;
  height: 39px;

  flex: 0 0 39px;

  display: grid;

  place-items: center;

  color:
    var(--charcoal);

  border:
    1px solid var(--warm-gray);

  border-radius: 50%;

  transition:
    color 240ms ease,
    background 240ms ease,
    border-color 240ms ease,
    transform 240ms ease;
}


/* SVG */
.footer-social__link svg {
  display: block;

  width: 15px;
  height: 15px;
}


/* Facebook + LinkedIn */
.footer-social__link:not([aria-label="Instagram"]) svg {
  fill: currentColor;
  stroke: none;
}


/* Instagram */
.footer-social__link[aria-label="Instagram"] svg {
  fill: none;

  stroke: currentColor;

  stroke-width: 1.5;
}


/* Instagram small dot */
.footer-social__link[aria-label="Instagram"] .instagram-dot {
  fill: currentColor;
  stroke: none;
}


/* Social hover */
.footer-social__link:hover {
  color:
    var(--ivory);

  background:
    var(--terracotta);

  border-color:
    var(--terracotta);

  transform:
    translateY(-3px);
}


/* =========================================================
   16.8 — FOOTER BOTTOM
========================================================= */

.footer-bottom {
  display: grid;

  grid-template-columns:
    1fr
    auto
    auto;

  align-items: center;

  gap: 28px;

  padding-top: 22px;

  color:
    var(--muted);

  border-top:
    1px solid var(--warm-gray);

  font-size: .65rem;
}


/* =========================================================
   16.9 — LEGAL LINKS
========================================================= */

.footer-legal {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 20px;
}


.footer-legal a {
  position: relative;

  transition:
    color 220ms ease;
}


/* Underline */
.footer-legal a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -4px;

  width: 0;
  height: 1px;

  background:
    var(--terracotta);

  transition:
    width 240ms ease;
}


.footer-legal a:hover {
  color:
    var(--charcoal);
}


.footer-legal a:hover::after {
  width: 100%;
}


/* =========================================================
   16.10 — LANGUAGE SWITCH
========================================================= */

.footer-language {
  display: flex;

  align-items: center;

  gap: 6px;
}


.footer-language a {
  transition:
    color 220ms ease;
}


.footer-language a:hover {
  color:
    var(--terracotta);
}


.footer-language a.is-active {
  color:
    var(--terracotta);

  font-weight: 700;
}


/* =========================================================
   16.11 — TABLET
========================================================= */

@media (max-width: 1050px) {

  .footer-grid {
    grid-template-columns:
      1.3fr
      1fr
      1fr;

    row-gap: 48px;
  }


  .footer-brand {
    grid-row:
      span 2;
  }


  .footer-bottom {
    grid-template-columns:
      1fr
      auto;
  }


  .footer-language {
    grid-column:
      1 / -1;
  }

}


/* =========================================================
   16.12 — MOBILE
========================================================= */

@media (max-width: 700px) {

  .site-footer {
    padding:
      62px
      0
      24px;
  }


  .footer-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      42px
      28px;
  }


  /* Brand spans full width */
  .footer-brand {
    grid-column:
      1 / -1;

    grid-row: auto;

    max-width: 100%;

    padding-bottom: 28px;

    border-bottom:
      1px solid var(--warm-gray);
  }


  .footer-brand__logo img {
    width: 165px;
  }


  /* Contact spans full width */
  .footer-contact {
    grid-column:
      1 / -1;

    padding-top: 6px;
  }


  .footer-bottom {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 17px;
  }

}


/* =========================================================
   16.13 — SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .footer-grid {
    grid-template-columns:
      1fr;
  }


  .footer-brand,
  .footer-contact {
    grid-column: auto;
  }


  .footer-column {
    padding-bottom: 25px;

    border-bottom:
      1px solid var(--warm-gray);
  }


  .footer-social__link {
    width: 42px;
    height: 42px;

    flex-basis: 42px;
  }


  .footer-legal {
    flex-direction: column;

    align-items: flex-start;

    gap: 10px;
  }

}


/* =========================================================
   MOBILE PERSISTENT CTA BAR

   IMPORTANT:
   Hidden everywhere by default.
   Your mobile media query will show it.
========================================================= */

.mobile-actions {
  display: none;
}

/* =========================================================
   17 — RESPONSIVE: TABLET / SMALL DESKTOP
   Layout adjustments below 1100px.
========================================================= */

@media (max-width:1100px) {
  :root {
    --shell: min(100% - 48px,1000px);
  }

  .site-header {
    padding-inline: 24px;
  }

  .main-nav {
    display: none;
    position: fixed;
    inset: 66px 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 18px 24px 28px;
    background: var(--ivory);
    border-bottom: 1px solid var(--warm-gray);
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav a {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid var(--warm-gray);
  }

  .nav-toggle {
    width: 40px;
    height: 40px;
    display: grid;
    gap: 4px;
    align-content: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    order: 2;
  }

  .nav-toggle span:not(.sr-only) {
    width: 19px;
    height: 1px;
    background: var(--charcoal);
  }

  .header-actions {
    margin-left: auto;
  }
  .hero__grid {
    --hero-gutter: 24px;
    width: calc(100% - var(--hero-gutter));
    margin-left: var(--hero-gutter);
    grid-template-columns: minmax(500px, 1fr) minmax(390px, .8fr);
  }

  .interactive-grid {
    grid-template-columns: repeat(2,1fr);
  }

  .interactive-card--wide {
    grid-column: span 2;
  }

  .pricing-grid {
    grid-template-columns: 1fr 1fr;
  }

  .price-card--invited {
    grid-column: span 2;
    min-height: 160px;
  }

  .community__grid {
    grid-template-columns: 1fr 1fr;
  }

  .community__cta {
    grid-column: span 2;
  }

  .participation-support__grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

/* =========================================================
   18 — RESPONSIVE: MOBILE
   Single-column layouts, mobile navigation and persistent CTA bar.
========================================================= */

@media (max-width:780px) {
  :root {
    --shell: calc(100% - 40px);
  }

  .section {
    padding: 82px 0;
  }

  .site-header {
    min-height: 66px;
    grid-template-columns: auto 1fr auto;
  }

  .brand__wordmark,.language-switch,.header-actions .btn {
    display: none;
  }
  .hero {
    min-height: auto;
    padding-top: 66px;
  }
  .hero__grid {
    --hero-gutter: 0px;
    width: 100%;
    min-height: auto;
    margin: 0;
    grid-template-columns: 1fr;
  }
  .hero__content {
    padding: 30px 20px 34px;
  }

  .hero__theme {
    letter-spacing: .15em;
  }

  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero__visual {
    min-height: 470px;
  }

  .hero__visual::after {
    background: linear-gradient(180deg,var(--ivory),transparent 28%);
  }

  .hero__motion-line {
    inset: 66px 0 0 0;
    height: calc(100% - 66px);
    opacity: .75;
  }


  .timeline {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-left: 24px;
  }

  .timeline__line {
    top: 0;
    bottom: 0;
    left: 4px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .timeline__item {
    padding: 0;
  }

  .timeline__dot {
    top: 10px;
    left: -24px;
  }

  .dashboard-facts,.section-heading--split,.abstracts__grid,.programme__grid,.destination__header,.community__grid {
    grid-template-columns: 1fr;
  }

  .facts-grid {
    grid-template-columns: 1fr 1fr;
  }

  .section-heading--split {
    align-items: start;
    margin-bottom: 36px;
  }

  .interactive-grid {
    grid-template-columns: 1fr;
  }

  .interactive-card--wide {
    grid-column: span 1;
  }

  .interactive-card {
    min-height: 280px;
  }

  .abstracts__meta {
    border-left: 0;
    border-top: 1px solid rgba(246,242,235,.25);
  }

  .abstracts__meta div {
    padding-left: 0;
  }

  .round-table {
    grid-template-columns: 64px 1fr;
  }

  .registration__header,.registration__footer {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .registration__deadline {
    text-align: left;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .price-card--invited {
    grid-column: span 1;
  }

  .destination__header>p {
    text-align: left;
  }

  .destination__media {
    grid-template-columns: 1fr;
  }

  .destination figure {
    min-height: 390px;
  }

  .destination__links {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .community__cta {
    grid-column: span 1;
  }

  .volunteers {
    min-height: 540px;
  }

  .support {
    padding: 36px 24px;
  }

  .news-card {
    flex-basis: 82%;
  }

  .decision-strip__grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: span 2;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .mobile-actions {
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--charcoal);
  }

  .mobile-actions a {
    min-height: 54px;
    display: grid;
    place-items: center;
    color: var(--ivory);
    font-size: .72rem;
    font-weight: 700;
    border-right: 1px solid rgba(255,255,255,.2);
  }

  body {
    padding-bottom: 54px;
  }
}

/* =========================================================
   19 — RESPONSIVE: SMALL MOBILE
   Additional compact-screen adjustments.
========================================================= */

@media (max-width:520px) {
  :root {
    --shell: calc(100% - 32px);
  }

  h1 {
    font-size: clamp(3.2rem,16vw,4.5rem);
  }

  h2 {
    font-size: clamp(2.5rem,12vw,3.7rem);
  }

  .facts-grid,.community__numbers,.footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    grid-column: span 1;
  }

  .price-card__prices {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .price-card__prices>div+div {
    padding-left: 0;
    padding-top: 24px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.35);
  }
}

/* =========================================================
   20 — ACCESSIBILITY: REDUCED MOTION
   Disables non-essential animation when requested by the user device.
========================================================= */

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }

  *,*::before,*::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}



@media (max-width: 1100px) {
  .abstracts__grid {
    grid-template-columns: 1fr .55fr;
  }

  .abstracts__image {
    grid-column: 1 / -1;
    margin: 20px 0 -120px;
    min-height: 300px;
  }

  .abstracts__image::after {
    background: linear-gradient(180deg, var(--charcoal) 0%, transparent 30%);
  }

  .programme__grid {
    grid-template-columns: 1fr 1fr;
  }

  .programme__visual {
    grid-column: 1 / -1;
    min-height: 280px;
    margin: 20px 0 -120px;
  }

  .community__grid {
    grid-template-columns: 1fr 1fr;
  }

  .community__visual {
    grid-column: 1 / 2;
  }

  .community__cta {
    grid-column: 2 / 3;
  }

  .decision-strip__grid {
    grid-template-columns: 1fr auto;
  }

  .decision-strip__visual {
    grid-column: 1 / -1;
    min-height: 220px;
    margin: 24px 0 -72px;
  }
}

@media (max-width: 780px) {
  .abstracts__grid,
  .programme__grid,
  .community__grid,
  .decision-strip__grid {
    grid-template-columns: 1fr;
  }

  .abstracts__image,
  .programme__visual,
  .decision-strip__visual {
    grid-column: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .abstracts__image {
    margin-bottom: -82px;
  }

  .programme__visual {
    margin-bottom: -82px;
  }

  .destination__media {
    grid-template-columns: 1fr;
  }

  .destination__city-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .destination__city-grid figure {
    height: 170px;
  }

  .community__visual,
  .community__cta {
    grid-column: auto;
  }

  .community__visual {
    height: 300px;
  }

  .decision-strip__visual {
    margin-bottom: -72px;
  }
}

@media (max-width: 520px) {
  .destination__city-grid {
    grid-template-columns: 1fr;
  }

  .destination__city-grid figure {
    height: 220px;
  }
}