/* ============================================================
   FILE:  /css/styles.css
   DESC:  Global stylesheet for SCPOC 2026 conference website.
          Covers all pages: homepage, conference, for-participants.

   DESIGN:  Clean editorial / scientific conference aesthetic
   PALETTE: Deep navy (#0d1b3e) + sky blue (#1a7de2) + white
   FONTS:   IBM Plex Mono (display / headings) + IBM Plex Sans (body)

   TABLE OF CONTENTS:
   ─────────────────
   01. CSS Variables & Reset
   02. Navigation (.top-bar)
   03. Hero — homepage (.hero)
   04. Page Banner — subpages (.page-banner)
   05. Containers & Sections (.container, .section)
   06. Homepage — About + Topics (.about-conference-*)
   07. Homepage — Important Dates (.dates-strip, .htimeline)
   08. Homepage — Venue Intro (.venue-intro-grid, .venue-stats)
   09. Homepage — Excursion Callout (.excursion-callout)
   10. Venue Grid — for-participants (.venue-grid, .venue-photo)
   11. Gallery Grids (.gallery-grid, .gallery-item)
   12. Facilities Grid (.facilities-grid, .facility-card)
   13. Attractions Grid (.attractions-grid, .attraction-card)
   14. Excursion Section (.section--excursion, .exc-card)
   15. Conference — Vertical Timeline (.timeline)
   16. Conference — Downloads & Registration (.download-box, .coming-soon-box)
   17. Conference — Fee Table (.fee-table)
   18. Footer (.site-footer, .footer-grid)
   19. Partner Logo Carousel (.partners, .carousel-track)
   20. Lightbox (.lightbox)
   21. Responsive Breakpoints
   22. Mobile Nav Overlay
   23. Logos box
   ============================================================ */

/* Import fonts (fallback if <link> in HTML fails)
   IBM Plex Mono — display / headings (všechny řezy 100–700 + italic)
   IBM Plex Sans — body text (všechny řezy 100–700 + italic)        */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');


/* ══════════════════════════════════════
   01. CSS VARIABLES & RESET
   Global design tokens used throughout.
   Change colours/fonts here for site-wide effect.
══════════════════════════════════════ */
:root {
  /* ── Colour palette ── */
  --navy:         #0d1b3e;     /* primary dark background */
  --navy-deep:    #08102a;     /* footer background */
  --navy-mid:     #162754;     /* gradient mid-tone */
  --blue:         #1a7de2;     /* primary accent / CTA */
  --blue-hover:   #1568c5;     /* accent hover state */
  --blue-light:   #4da6ff;     /* light accent / highlights */
  --blue-pale:    #e8f3ff;     /* very light accent background */
  --white:        #ffffff;
  --off-white:    #f7f9fe;     /* section alternate background */
  --border:       #dce8fa;     /* subtle borders & dividers */
  --text:         #18253f;     /* primary body text */
  --text-mid:     #3a4a6a;     /* secondary body text */
  --text-muted:   #6677a0;     /* captions / labels */
  --amber:        #f59e0b;     /* warning accent (excursion gear) */

  /* ── Typography ── */
  --font-display: 'IBM Plex Sans', 'IBM Plex Mono', 'Courier New', monospace;  /* headings / display */
  --font-body:    'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; /* body text */

  /* ── Radii ── */
  --radius-sm:    6px;
  --radius:       12px;
  --radius-lg:    20px;

  /* ── Shadows ── */
  --shadow-sm:    0 2px 10px rgba(13,27,62,.08);
  --shadow:       0 6px 28px rgba(13,27,62,.12);
  --shadow-lg:    0 16px 56px rgba(13,27,62,.18);

  /* ── Layout ── */
  --bar-h:        64px;        /* fixed navbar height */
  --max-w:        1600px;      /* max container width */
  --gutter:       4%;          /* horizontal padding */
  --section-py:   80px;        /* vertical section padding */
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.72;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p + p { margin-top: 14px; }


/* ══════════════════════════════════════
   02. NAVIGATION — fixed top bar
   Used on: ALL pages
   Elements: .top-bar, .top-bar-brand (.brand-abbr, .brand-sep,
   .brand-full), .top-bar-nav, .btn-register, .nav-toggle

   v2.0.1 — změna barevného schématu:
     Původní:  tmavé (navy) pozadí, bílé písmo
     Aktuální: bílé pozadí, tmavě šedé písmo (#2a2a2a)
               Spodní border pro vizuální oddělovač od obsahu.
══════════════════════════════════════ */
.top-bar {
  position: fixed;
  inset-block-start: 0; left: 0; right: 0;
  height: var(--bar-h);
  background: #ffffff;                    /* bílé pozadí místo navy */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  z-index: 1000;
  border-bottom: 1px solid #e0e0e0;      /* šedý oddělovač */
}

/* ========================================================================
   BRANDING IN TOP BAR
   - Logo height restricted to 60px to fit the navbar.
   - Text using small-caps style via uppercase + font-size.
   ======================================================================== */

.top-bar-brand {
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  color: #2a2a2a;                         /* tmavě šedá místo bílé */
}

.brand-logo {
  height: 60px;
  width: auto;
  display: block;
}

.brand-text {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

/* Horní index pro "th" */
.brand-text sup {
  font-size: 8px;
  top: -0.5em;
  text-transform: lowercase;
}

/* Responzivní úprava pro mobily */
@media (max-width: 480px) {
  .brand-text { font-size: 9px; }
  .brand-logo { height: 35px; }
}

/* Brand lockup (logo text + separator + full name) */
.top-bar-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #2a2a2a;                         /* tmavě šedá místo bílé */
}

/* "SCPOC" abbreviation — modrá na bílém pozadí */
.brand-abbr {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--blue);                     /* standardní modrá místo světle modré */
}

/* Vertical separator line — tmavý na bílém pozadí */
.brand-sep {
  width: 1px;
  height: 28px;
  background: rgba(0,0,0,.18);           /* tmavý průhledný místo bílého */
}

/* Full conference name — small uppercase */
.brand-full {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: 1.55;
  opacity: .55;
  font-weight: 300;
  color: #2a2a2a;
}

/* Nav links row */
.top-bar-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14px;
  color: #2a2a2a;                         /* tmavě šedá místo bílé */
}

/* Individual nav links */
.top-bar-nav a {
  opacity: .70;
  color: #2a2a2a;
  transition: opacity .2s, color .2s;
  letter-spacing: .02em;
  text-transform: uppercase
}
.top-bar-nav a:hover,
.top-bar-nav a.active { opacity: 1; color: var(--blue); }

/* "Registration" CTA button — zachovává modrý styl */
.btn-register {
  padding: 8px 22px;
  border-radius: 24px;
  background: var(--blue);
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .06em;
  opacity: 1 !important;
  transition: background .2s, box-shadow .2s, transform .15s;
  box-shadow: 0 2px 14px rgba(26,125,226,.30);
}
.btn-register:hover {
  background: var(--blue-hover);
  box-shadow: 0 4px 22px rgba(26,125,226,.45);
  transform: translateY(-1px);
}

/* Hamburger toggle — hidden on desktop, shown on mobile */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #2a2a2a;                   /* tmavě šedá místo bílé */
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
/* Open state — X shape */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ══════════════════════════════════════
   03. HERO — homepage full-viewport landing
   Used on: /index.php only
   BG image via CSS: ../img/bg/5.jpg
   Two layers: grayscale (.bw) + colour diagonal (.color-stripe)
   Dark gradient overlay via ::after pseudo-element
   Elements: .hero, .hero-bg, .hero-inner, .hero-eyebrow,
   .hero-title, .hero-meta, .hero-cta
══════════════════════════════════════ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  margin-top: var(--bar-h);
}

/* Background image — shared by both layers */
.hero-bg {
  position: absolute;
  inset: 0;
  /* background odstraněn — obrázek je nyní v <img class="hero-bg-img"> pro lepší LCP */
  background-size: cover;
  background-position: center 30%;
}

/* LCP hero obrázek — jako <img> tag místo CSS background
   fetchpriority=high zajistí okamžité načtení prohlížečem */
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
  filter: brightness(.88);
}

/* .hero-bg.bw — div zachován v HTML, brightness přesunut na <img> */
.hero-bg.bw { display: none; }

/* Layer 2: color-stripe odstraněn — není potřeba bez grayscale vrstvy */
.hero-bg.color-stripe { display: none; }

/* Dark gradient overlay (bottom-up + left-right) */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,  rgba(8,16,42,.55) 0%, rgba(8,16,42,.08) 48%, transparent 70%),
    linear-gradient(to right, rgba(8,16,42,.28) 0%, transparent 52%);
  z-index: 5;
}

/* Content container
   ≤1920px: flex sloupec — logo nahoře vlevo, pod ním texty
   >1920px: grid dvousloupcový (text vlevo / logo vpravo) — viz @media níže
   v2.1.0: responzivní layout, text-align změněn na left */
.hero-inner {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--gutter) 80px;
  color: #fff;
  text-align: left;
}

/* Small uppercase label above title */
.hero-eyebrow {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 400;
  opacity: .80;
  margin-bottom: 44px;
  text-align: left;
}

/* Main hero heading */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.22;
  max-width: 550px;
  margin-bottom: 64px;                  /* bylo 44px — větší rozestup */
  letter-spacing: -.01em;
}

.hero-title-h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.22;
  max-width: 550px;
  margin-bottom: 64px;                  /* bylo 44px — větší rozestup */
  letter-spacing: -.01em;
  opacity: .80;
}

.hero-title-h3-workshop {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.22;
  max-width: 660px;
  margin-bottom: 64px;
  letter-spacing: -.01em;
  opacity: .80;
  text-align: right;
  align-self: end;
  justify-self: end;
  padding: 35px;
}

.hero-title-h5 {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.9vw, 21px);
  font-weight: 500;
  line-height: 1.22;
  max-width: 550px;
  margin-bottom: 64px;                  /* bylo 44px — větší rozestup */
  letter-spacing: -.01em;
  opacity: .80;
}

/* Date + venue meta row */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 44px;
  margin-bottom: 64px;                  /* bylo 52px — větší rozestup */
  font-size: 15px;
}
.hero-meta-item { text-align: left; }
.hero-meta-item strong { display: block; font-size: 14px; font-weight: 500; }

/* CTA button */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  width: fit-content;            /* nepřetahuje na celou šířku flex/grid sloupce */
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  border-radius: 32px;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 22px rgba(26,125,226,.45);
  align-self: flex-start;        /* zarovnáno vlevo ve flex i gridu */
}
.hero-cta:hover {
  background: var(--blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(26,125,226,.50);
}

/* Workshop logo — ve flow hero-inner (před h1)
   ≤1920px: zobrazeno vlevo nad nadpisem konference
   >1920px: vyčleněno do pravého sloupce gridu (viz @media níže)
   v2.1.0: přesunuto z absolutní pozice do dokumentového flow */
.hero-workshop-logo {
  display: inline-block;
  align-self: flex-start;             /* zarovnání vlevo ve flex sloupci */
  margin-bottom: 36px;                /* mezera pod logem před nadpisem */
  z-index: 15;
  transition: opacity .2s, transform .2s;
}
.hero-workshop-logo img {
  height: 90px;
  width: auto;
  display: block;
  background: rgba(255, 255, 255, 0.55);   /* lehké bílé podbarvení */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius);
  /* padding: 10px 16px; */
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.30));
}
.hero-workshop-logo:hover {
  opacity: .85;
  transform: translateY(-2px);
}

/* >1920px: hero-inner jako grid — text vlevo, logo vpravo na úrovni h1 */
@media (min-width: 1280px) {
  .hero-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto auto;
    align-content: center;
    column-gap: 80px;
  }

  /* Logo: pravý sloupec, pouze row 1 (na úrovni h1), zarovnáno na střed výšky h1 */
  .hero-workshop-logo {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    margin-bottom: 0;
    padding-right: 40px;             /* větší odsazení od pravého okraje */
  }
  .hero-workshop-logo img { height: 160px; }

  /* Texty: levý sloupec */
  .hero-title              { grid-column: 1; grid-row: 1; margin-bottom: 24px; }
  .hero-title-h3           { grid-column: 1; grid-row: 2; margin-top: 21px; }
  .hero-title-h3-workshop  { grid-column: 2; grid-row: 2; align-self: start; justify-self: end; padding: 0 40px 0 0; text-align: right; max-width: 500px; margin-bottom: 0; margin-top: 24px; }
  .hero-meta               { grid-column: 1; grid-row: 3; }
  .hero-cta                { grid-column: 1; grid-row: 4; align-self: start; justify-self: start; }
}

@media (max-width: 600px) {
  .hero-workshop-logo img { height: 64px; padding: 7px 12px; }
}

/* ≤1279px: hero-title-h3-workshop se zobrazí pod logo (flow layout)
   text-align reset na left, padding reset
   Pořadí: h1 → ON WAVE → logo → JOINT WORKSHOP → meta → cta */
@media (max-width: 1279px) {
  .hero-title-h3-workshop {
    order: 3;
    align-self: auto;
    justify-self: auto;
    text-align: left;
    padding: 0;
    max-width: 660px;
    margin-bottom: 24px;
    margin-top: 0;
  }
  .hero-workshop-logo {
    order: 2;
    margin-bottom: 16px;
  }
  .hero-title    { order: 0; }
  .hero-title-h3 { order: 1; margin-top: 0; }
  .hero-meta     { order: 4; }
  .hero-cta      { order: 5; }
}


/* ══════════════════════════════════════
   04. PAGE BANNER — subpage header images
   Used on: /conference/, /for-participants/
   Background image set via inline style on each page.
   Elements: .page-banner, .page-banner-bg, .page-banner-overlay,
   .page-banner-inner, .page-banner-label, .page-banner-title,
   .banner-scroll-hint
══════════════════════════════════════ */
.page-banner {
  position: relative;
  height: 300px;
  margin-top: var(--bar-h);
  overflow: hidden;
}

/* Background photo — slow zoom on hover */
.page-banner-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 40%;
  transition: transform 8s ease-out;
}
.page-banner:hover .page-banner-bg { transform: scale(1.04); }

/* Dark gradient overlay with decorative light-beam stripe */
.page-banner-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    110deg,
    rgba(8,16,42,.82) 0%,
    rgba(8,16,42,.50) 52%,
    rgba(8,16,42,.15) 100%
  );
}
/* Decorative diagonal blue beam */
.page-banner-overlay::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    118deg,
    transparent 30%,
    rgba(26,125,226,.14) 36%,
    transparent 44%
  );
}

/* Text content — bottom-aligned */
.page-banner-inner {
  position: relative; z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--gutter) 44px;
  color: #fff;
}

/* Small uppercase label */
.page-banner-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .22em;
  opacity: .60;
  margin-bottom: 10px;
  font-weight: 300;
}

/* Page heading */
.page-banner-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Scroll-down arrow hint */
.banner-scroll-hint {
  position: absolute;
  bottom: 24px;
  right: var(--gutter);
  color: rgba(255,255,255,.50);
  font-size: 22px;
  transition: color .2s, transform .2s;
  z-index: 10;
}
.banner-scroll-hint:hover { color: #fff; transform: translateY(3px); }


/* ══════════════════════════════════════
   05. CONTAINERS & SECTIONS
   Reusable layout primitives.
   .container — centred max-width wrapper
   .section   — standard vertical-padded block
   .section--light / --white / --navy — background variants
   .section-header, .section-tag, .section-title, .section-lead
══════════════════════════════════════ */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-py);
}

/* Section background variants */
.section--light   { background: var(--off-white); }
.section--white   { background: var(--white); }
.section--navy    { background: var(--navy); }

/* Section header block (tag + title) */
.section-header {
  margin-bottom: 48px;
}
.section-header--light { /* placeholder for dark-bg header styles */ }

/* Small uppercase coloured tag above title */
.section-tag {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 10px;
}
.section-tag--light { color: var(--blue-light); }

/* Section title — large display font */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}
.section-title--light { color: #fff; }

/* Section lead paragraph */
.section-lead {
  font-size: 19px;
  line-height: 1.75;
  color: var(--text-mid);
  max-width: 860px;
  margin-bottom: 48px;
}


/* ══════════════════════════════════════
   06. HOMEPAGE — ABOUT + TOPICS (merged section)
   Used on: /index.php — #about
   Layout: 1/2 (About text) | 1/2 (Topics in 2 cols)
   Both halves have equal h2.section-title headings.
   The right half splits into two 1/4 columns
   because .topics-grid uses repeat(2, 1fr) inside it.
   ─────────────────────────────────────
   .about-conference-grid  → main 2-col grid (1fr 1fr)
   .about-conference-left  → left wrapper (h2 + text)
   .about-conference-text  → description paragraphs
   .about-conference-right → right wrapper (h2 + topics)
   .topics-grid            → 2-col grid of topic items
   .topic-item             → single topic cell
   .topic-num              → "01"-"12" number label
   .topic-text             → topic name text
══════════════════════════════════════ */

/* Main two-column grid: left half + right half */
.about-conference-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* Left column wrapper */
.about-conference-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Description paragraphs */
.about-conference-text p {
  color: var(--text-mid);
  font-size: 17px;
}

/* Right column wrapper */
.about-conference-right {
  display: flex;
  flex-direction: column;
}

/* h2 titles inside the About+Topics grid — consistent bottom spacing */
.about-conference-left > .section-title,
.about-conference-right > .section-title {
  margin-bottom: 8px;
}

/* Topics grid — table layout pro konzistentní border-bottom
   display:table zarovná buňky v řádku na stejnou výšku →
   linka vždy na správném místě bez ohledu na délku textu     */
.topics-grid {
  display: table;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Řádek tabulky — obaluje vždy dvě .topic-item */
.topics-grid-row {
  display: table-row;
}

/* Single topic cell */
.topic-item {
  display: table-cell;
  width: 50%;
  padding: 14px 16px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--white);
  transition: background .2s;
  vertical-align: middle;
}
.topic-item:hover { background: var(--blue-pale); }

/* Pravá buňka — bez border-right */
.topics-grid-row .topic-item:last-child { border-right: none; }
/* Poslední řádek — bez border-bottom */
.topics-grid-row:last-child .topic-item { border-bottom: none; }

/* Topic number — small faded blue label */
.topic-num {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  opacity: .5;
  padding-right: 14px;              /* náhrada za gap (table-cell nemá gap) */
  white-space: nowrap;
}

/* Topic name text */
.topic-text {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.45;
}

/* (Legacy) about-formats — bullet list inside highlight */
.about-formats {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.about-format-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,.70);
}
.about-format-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-light);
  flex-shrink: 0;
}


/* ══════════════════════════════════════
   07. HOMEPAGE — IMPORTANT DATES
   Used on: /index.php — #dates
   Navy strip with horizontal timeline (5 milestones).
   Elements: .dates-strip, .htimeline-wrap, .htimeline-line,
   .htimeline, .htl-item, .htl-dot, .htl-top, .htl-bottom,
   .htl-date, .htl-label, .htl-item.highlight
══════════════════════════════════════ */

/* Dark navy full-width strip */
.dates-strip {
  padding-block: var(--section-py);
  background: var(--navy);
  padding-inline: 0;
}
/* Nadpis v containeru — zarovnán stejně jako ostatní sekce */
.dates-strip .container {
  max-width: none;
  padding-inline: var(--gutter);
}
.dates-strip .section-tag { display: block; }

/* Fixed-height wrapper — full width, vlastní padding stejný jako container */
.htimeline-wrap {
  position: relative;
  height: 280px;
  margin-top: 48px;
  padding-inline: var(--gutter);      /* stejný okraj jako .container */
}

/* Horizontal centre line (gradient fade at edges) */
.htimeline-line {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(77,166,255,.38) 4%,
    rgba(77,166,255,.38) 96%,
    transparent 100%
  );
}

/* 6-column grid for timeline items */
.htimeline {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: 100%;
  position: relative;
  z-index: 1;
}

/* Individual timeline item — 3-row grid: top | dot | bottom */
.htl-item {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  position: relative;
  cursor: default;
}

/* Tick line above dot */
.htl-item::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(50% - 10px - 24px);
  width: 1px;
  height: 24px;
  background: rgba(77,166,255,.30);
  transform: translateX(-50%);
}
/* Tick line below dot */
.htl-item::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(50% + 10px);
  width: 1px;
  height: 24px;
  background: rgba(77,166,255,.30);
  transform: translateX(-50%);
}

/* Top cell (above dot) */
.htl-top {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 10px;
  padding-inline: 8px;
  text-align: center;
  width: 100%;
}

/* Centre dot */
.htl-dot {
  grid-row: 2;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, rgba(160,210,255,.55) 0%, var(--navy-mid) 60%);
  border: 2.5px solid rgba(77,166,255,.60);
  box-shadow: 0 0 0 5px rgba(77,166,255,.10);
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
/* Dot hover — enlarge with glow */
.htl-item:hover .htl-dot {
  transform: scale(1.45);
  box-shadow: 0 0 0 8px rgba(77,166,255,.18), 0 0 22px rgba(77,166,255,.45);
}
/* Highlighted dot (conference date) — larger + brighter */
.htl-item.highlight .htl-dot {
  width: 26px;
  height: 26px;
  background: radial-gradient(circle at 33% 30%, rgba(120,195,255,.85) 0%, var(--blue) 58%);
  border: 2px solid var(--blue-light);
  box-shadow: 0 0 0 6px rgba(26,125,226,.22), 0 0 26px rgba(26,125,226,.55);
}
.htl-item.highlight:hover .htl-dot {
  transform: scale(1.3);
}

/* Bottom cell (below dot) */
.htl-bottom {
  grid-row: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 10px;
  padding-inline: 8px;
  text-align: center;
  width: 100%;
}

/* Date text — bold white */
.htl-date {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  line-height: 1.15;
  letter-spacing: -.01em;
  white-space: nowrap;
}
/* Highlighted date — blue with glow */
.htl-item.highlight .htl-date {
  font-size: 22px;
  color: var(--blue-light);
  text-shadow: 0 0 20px rgba(77,166,255,.50);
}

/* Label text — smaller, faded */
.htl-label {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,.48);
  margin-top: 4px;
}
.htl-item.highlight .htl-label {
  color: rgba(255,255,255,.80);
  font-weight: 600;
}


/* ══════════════════════════════════════
   08. HOMEPAGE — VENUE INTRO
   Used on: /index.php — #venue
   Two-column layout: text left, stat cards right.
   Plus facilities strip and photo gallery below.
   Elements: .venue-intro-grid, .venue-text, .venue-stats,
   .venue-stat, .venue-stat-label, .venue-stat-value,
   .venue-facilities-strip, .venue-facilities-label,
   .venue-facility-tag, .fac-emoji
══════════════════════════════════════ */

/* (Legacy) about-grid and about-text for older markup */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: start;
}
.about-text p { color: var(--text-mid); font-size: 17px; }

/* (Legacy) topics-list — old bullet-style list */
.topics-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.topics-list li {
  padding: 11px 0 11px 26px;
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.45;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.topics-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
  opacity: .6;
}

/* Venue intro grid — text + stats */
.venue-intro-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;              /* text vycentrován vůči výšce foto */
  margin-bottom: 56px;
}

.venue-text p { color: var(--text-mid); font-size: 17px; }

/* 2×2 stat cards */
.venue-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}

.venue-stat {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.venue-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.venue-stat-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
}

/* Dark rounded bar with facility pill tags */
.venue-facilities-strip {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.venue-facilities-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 600;
  color: rgba(255,255,255,.40);
  margin-right: 8px;
  flex-shrink: 0;
}
.venue-facility-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  font-size: 14px;
  color: rgba(255,255,255,.80);
  font-weight: 500;
  transition: background .2s;
}
.venue-facility-tag:hover { background: rgba(255,255,255,.13); }
.venue-facility-tag .fac-emoji { font-size: 16px; }

/* ── Venue hero photo — dekorativní ořez s odznakem ──
   .venue-hero-photo   — flex wrapper
   .venue-photo-frame  — relativní kontejner, ořez + stín
   img                 — foto s hover zoomem
   .venue-photo-badge  — průhledný odznak vlevo dole
   .vpb-name / .vpb-loc — řádky odznaku
*/
.venue-hero-photo {
  display: flex;
  align-items: flex-start;
}

.venue-photo-frame {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.venue-photo-frame img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: center 60%;
  display: block;
  transition: transform .6s ease;
}
.venue-photo-frame:hover img { transform: scale(1.04); }

/* Odznak vlevo dole — tmavý glassmorphism pill */
.venue-photo-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(8, 16, 42, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vpb-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
}
.vpb-loc {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  letter-spacing: .04em;
}

/* ── Venue hero photo — dekorativní ořez s odznakem ──
   Použito na homepage ve venue sekci vedle textu.
   .venue-hero-photo    — wrapper, zarovná foto do gridu
   .venue-photo-frame   — relativní kontejner pro ořez + odznak
   img                  — samotný obrázek s clip-path ořezem
   .venue-photo-badge   — překryvný odznak vlevo dole (název + město)
   .vpb-name / .vpb-loc — řádky odznaku
*/
.venue-hero-photo {
  display: flex;
  align-items: flex-start;
}

.venue-photo-frame {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.venue-photo-frame img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: center 60%;
  display: block;
  transition: transform .6s ease;
}
.venue-photo-frame:hover img { transform: scale(1.04); }

/* Odznak vlevo dole — tmavý průhledný pill */
.venue-photo-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(8, 16, 42, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vpb-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
}
.vpb-loc {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  letter-spacing: .04em;
}


/* ══════════════════════════════════════
   09. HOMEPAGE — EXCURSION CALLOUT
   Used on: /index.php — #excursion
   Blue gradient box with mountain icon + text.
   Elements: .excursion-callout, .excursion-callout-icon,
   .excursion-callout-text
══════════════════════════════════════ */
.excursion-callout {
  background: linear-gradient(135deg, var(--blue) 0%, #1a5bc0 100%);
  border-radius: var(--radius-lg);
  padding: 36px 44px;
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 16px;
}
.excursion-callout-icon {
  font-size: 48px;
  flex-shrink: 0;
}
.excursion-callout-text h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.excursion-callout-text p {
  font-size: 16px;
  color: rgba(255,255,255,.78);
  line-height: 1.55;
}


/* ══════════════════════════════════════
   10. VENUE GRID — for-participants page
   Used on: /for-participants/ — #venue
   Two-column: text + photo.
   Elements: .venue-grid, .venue-text, .venue-photo
══════════════════════════════════════ */
.venue-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 56px;
}

.venue-photo img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}


/* ══════════════════════════════════════
   11. GALLERY GRIDS — reusable photo grids
   Used on: /index.php (venue), /for-participants/ (venue + landscape)
   Variants: .gallery-grid--4 (4 cols), --3 (3 cols), --2 (2 cols)
   Elements: .gallery-grid, .gallery-item, figcaption
══════════════════════════════════════ */
.gallery-grid {
  display: grid;
  gap: 12px;
  margin-top: 0;
}
.gallery-grid--4 { grid-template-columns: repeat(4, 1fr); }
.gallery-grid--3 { grid-template-columns: repeat(3, 1fr); }
.gallery-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* Single gallery item — rounded, hover zoom */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--border);
}
.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94);
}
.gallery-item:hover img { transform: scale(1.06); }

/* Caption overlay — visible on hover only */
.gallery-item figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px 14px 12px;
  background: linear-gradient(to top, rgba(8,16,42,.75) 0%, transparent 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s, transform .3s;
}
.gallery-item:hover figcaption { opacity: 1; transform: translateY(0); }


/* ══════════════════════════════════════
   12. FACILITIES GRID — icon cards on dark bg
   Used on: /for-participants/ — #facilities
   4-column grid of emoji icon + label cards.
   Elements: .facilities-grid, .facility-card, .fac-icon
══════════════════════════════════════ */
.facilities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.facility-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 36px 20px;
  background: rgba(255,255,255,.04);
  transition: background .2s;
  text-align: center;
  cursor: default;
}
.facility-card:hover { background: rgba(255,255,255,.09); }

.fac-icon {
  font-size: 32px;
  line-height: 1;
  filter: grayscale(.2);
}
.facility-card span {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  letter-spacing: .04em;
  text-transform: uppercase;
}


/* ══════════════════════════════════════
   13. ATTRACTIONS GRID — info cards
   Used on: /for-participants/ — #attractions
   4-column card grid with hover lift effect.
   Elements: .attractions-grid, .attraction-card,
   .attraction-img, .attraction-body
══════════════════════════════════════ */
.attractions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.attraction-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s, transform .25s;
}
.attraction-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.attraction-img {
  overflow: hidden;
  height: 180px;
  background: var(--border);
}
.attraction-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.attraction-card:hover .attraction-img img { transform: scale(1.07); }

.attraction-body { padding: 20px 22px 24px; }
.attraction-body h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.attraction-body p { font-size: 16px; color: var(--text-muted); line-height: 1.55; }


/* ══════════════════════════════════════
   14. EXCURSION SECTION — full-bleed photo layout
   Used on: /for-participants/ — #excursion
   Full-width background photo with dark overlay.
   Two-column content: text left, info cards right.
   Elements: .section--excursion, .excursion-photo,
   .excursion-overlay, .excursion-inner, .excursion-badge,
   .excursion-title, .excursion-cols, .excursion-text,
   .excursion-cards, .exc-card, .exc-card--warn,
   .exc-card-label, .exc-card-value
══════════════════════════════════════ */
.section--excursion {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 560px;
}

/* Absolute background photo */
.excursion-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 35%;
}

/* Dark left-heavy gradient overlay */
.excursion-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(8,16,42,.95) 0%, rgba(8,16,42,.75) 55%, rgba(8,16,42,.35) 100%);
}

/* Content positioned over the photo */
.excursion-inner {
  position: relative; z-index: 10;
  padding-block: var(--section-py);
  color: #fff;
}

/* Date pill badge */
.excursion-badge {
  display: inline-block;
  padding: 5px 16px;
  background: var(--blue);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* Section title — "em" for blue accent word */
.excursion-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 40px;
  letter-spacing: -.01em;
}
.excursion-title em { color: var(--blue-light); font-style: normal; }

/* Two-column layout: text + cards */
.excursion-cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: start;
}

.excursion-text p {
  font-size: 18px;
  line-height: 1.75;
  color: rgba(255,255,255,.82);
}

/* 2×2 info card grid */
.excursion-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Individual info card — glassmorphism style */
.exc-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 18px 20px;
  backdrop-filter: blur(6px);
  transition: background .2s;
}
.exc-card:hover { background: rgba(255,255,255,.13); }
/* Warning variant (amber border for essential gear) */
.exc-card--warn { border-color: rgba(245,158,11,.40); background: rgba(245,158,11,.08); }

.exc-card-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 6px;
}
.exc-card--warn .exc-card-label { color: var(--amber); }

.exc-card-value {
  font-size: 15px;
  color: rgba(255,255,255,.85);
  line-height: 1.45;
}


/* ══════════════════════════════════════
   15. CONFERENCE — VERTICAL TIMELINE
   Used on: /conference/ — #dates
   Left-aligned dot-and-line timeline.
   Elements: .timeline, .timeline-item, .timeline-dot,
   .timeline-date, .timeline-desc
══════════════════════════════════════ */
.timeline {
  max-width: 680px;
  padding-left: 12px;
}

/* 3-column row: dot | date | description */
.timeline-item {
  display: grid;
  grid-template-columns: 16px 210px 1fr;
  gap: 0 24px;
  margin-bottom: 36px;
  position: relative;
  align-items: center;              /* tečka + texty vodorovně vycentrovány */
}

/* Timeline dot */
.timeline-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--border);
  border: 3px solid var(--off-white);
  box-shadow: 0 0 0 2px var(--border);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: transform .2s, box-shadow .2s;
}
.timeline-item:hover .timeline-dot {
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(26,125,226,.20);
}

/* Highlighted dot (conference date) — modrá + záře */
.timeline-item.highlight .timeline-dot {
  width: 20px; height: 20px;
  background: var(--blue);
  border-color: var(--off-white);
  box-shadow: 0 0 0 3px var(--blue), 0 0 16px rgba(26,125,226,.35);
  margin-left: -2px;                /* kompenzace širší tečky v gridu */
}

/* Connecting vertical line between dots */
.timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 7px; top: 20px;
  width: 2px;
  height: calc(100% + 14px);
  background: linear-gradient(to bottom, var(--border) 0%, var(--border) 100%);
  z-index: 0;
}

/* Date column */
.timeline-date {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}
.timeline-item.highlight .timeline-date {
  color: var(--blue);
  font-size: 16px;
}

/* Description column */
.timeline-desc {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.45;
}
.timeline-item.highlight .timeline-desc {
  color: var(--text);
  font-weight: 600;
}


/* ══════════════════════════════════════
   16. CONFERENCE — DOWNLOADS & REGISTRATION
   Used on: /conference/ — #abstract, #registration
   Elements: .download-box, .download-icon, .download-info,
   .download-title, .download-sub, .download-btn, .coming-soon-box
══════════════════════════════════════ */

/* File download box — blue-pale background */
.download-box {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--blue-pale);
  border: 1px solid #c0dcf8;
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-top: 24px;
}
.download-icon { font-size: 30px; flex-shrink: 0; }
.download-info { flex: 1; }
.download-title { font-weight: 700; font-size: 15px; color: var(--navy); }
.download-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* Download pill button */
.download-btn {
  padding: 9px 22px;
  background: var(--blue);
  color: #fff;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .2s;
}
.download-btn:hover { background: var(--blue-hover); }
.download-btn.disabled { background: #b0c4e0; cursor: default; }

/* Dashed placeholder box */
.coming-soon-box {
  margin-top: 20px;
  padding: 22px 28px;
  background: var(--off-white);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}


/* ══════════════════════════════════════
   17. CONFERENCE — FEE TABLE
   Used on: /conference/ — #fee
   Responsive pricing table.
   Elements: .fee-table-wrap, .fee-table, .fee-tag,
   .fee-note, .price, .price.early
══════════════════════════════════════ */
.fee-table-wrap { overflow-x: auto; margin-top: 28px; }

.fee-table {
  width: 100%;
  max-width: 720px;
  border-collapse: collapse;
  font-size: 16px;
}

/* Table header — navy background */
.fee-table th {
  background: var(--navy);
  color: #fff;
  padding: 14px 22px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
}

/* Table cells */
.fee-table td {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  background: var(--white);
}
.fee-table tr:last-child td { border-bottom: none; }
.fee-table tr:hover td { background: var(--blue-pale); }

.fee-note { font-size: 11px; color: var(--text-muted); }
.price { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--navy); }
.price.early { color: var(--blue); }

/* "Early-bird" tag pill inside table header */
.fee-tag {
  display: inline-flex;
  align-items: center;
  background: var(--blue-pale);
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 4px;
}


/* ══════════════════════════════════════
   18. FOOTER — site-wide footer
   Used on: ALL pages
   4-column grid on desktop, stacks on mobile.
   Elements: .site-footer, .footer-grid, .footer-col,
   .footer-brand-col, .footer-brand, .footer-links-col,
   .footer-bottom
══════════════════════════════════════ */

/* Info bottom row (legacy — kept for compatibility) */
.info-bottom {
  background: var(--off-white);
  padding: 44px var(--gutter);
  border-top: 1px solid var(--border);
}
.info-row {
  max-width: var(--max-w);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  font-size: 14px;
  color: var(--text-mid);
}
.info-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--navy);
  margin-bottom: 10px;
}
.info-bottom a { color: var(--blue); }
.info-bottom a:hover { text-decoration: underline; }

/* Main footer */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,.55);
  padding-top: 60px;
}

/* 4-column grid */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Brand text */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.footer-brand .brand-logo {
  height: 48px;
  width: auto;
  flex-shrink: 0;
}
.footer-brand-text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.55;
  color: rgba(255,255,255,.75);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.footer-brand-text sup {
  font-size: 8px;
  vertical-align: super;
}
.footer-col p { font-size: 15px; line-height: 1.65; }

/* Column headings */
.footer-col h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.35);
  margin-bottom: 14px;
}

/* Navigation links column */
.footer-links-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-links-col a {
  font-size: 15px;
  color: rgba(255,255,255,.55);
  transition: color .2s;
}
.footer-links-col a:hover { color: var(--blue-light); }

.footer-col a { color: var(--blue-light); }
.footer-col a:hover { text-decoration: underline; }

/* Copyright bar */
.footer-bottom {
  text-align: center;
  font-size: 12px;
  padding: 18px 0;
  color: rgba(255,255,255,.28);
}


/* ══════════════════════════════════════
   19. PARTNER LOGO CAROUSEL
   Used on: ALL pages
   Infinite horizontal scroll via CSS @keyframes.
   Logos are duplicated in HTML for seamless looping.
   Elements: .partners, .partners-label, .carousel-track-wrap,
   .carousel-track, .carousel-logo, .carousel-logo-text
══════════════════════════════════════ */
.partners {
  background: var(--off-white);
  padding-block: 48px;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.partners-label {
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 28px;
}

/* Masked overflow container (faded edges) */
.carousel-track-wrap {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

/* Scrolling track — pauses on hover */
.carousel-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: logoScroll 30s linear infinite;
}
.carousel-track:hover { animation-play-state: paused; }

@keyframes logoScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Individual logo slot */
.carousel-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 52px;
  height: 64px;
  flex-shrink: 0;
  filter: grayscale(1) opacity(.55);
  transition: filter .3s;
}
.carousel-logo:hover { filter: grayscale(0) opacity(1); }

.carousel-logo img {
  height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Text fallback badge (used when no logo image) */
.carousel-logo-text {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-mid);
  letter-spacing: .04em;
  white-space: nowrap;
  padding: 10px 24px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
}

/* (Legacy) logos-row — static logo display */
.logos-row {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 36px;
  align-items: center;
}
.logo-placeholder {
  padding: 13px 26px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--white);
}


/* ══════════════════════════════════════
   20. LIGHTBOX — full-screen image overlay
   Used on: /index.php, /for-participants/
   Opened via JS on gallery-item click.
   Elements: .lightbox, .lightbox.open, .lightbox-close
══════════════════════════════════════ */
.lightbox {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.94);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}
.lightbox.open { display: flex; }

.lightbox img {
  max-width: 88vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 80px rgba(0,0,0,.6);
}

.lightbox p {
  color: rgba(255,255,255,.55);
  font-size: 13px;
  text-align: center;
}

/* Close button */
.lightbox-close {
  position: absolute;
  top: 18px; right: 24px;
  background: none;
  border: none;
  color: rgba(255,255,255,.60);
  font-size: 38px;
  cursor: pointer;
  line-height: 1;
  transition: color .2s, transform .2s;
}
.lightbox-close:hover { color: #fff; transform: scale(1.15); }


/* ══════════════════════════════════════
   21. RESPONSIVE BREAKPOINTS
   Three tiers: ≤1100px, ≤900px, ≤600px
══════════════════════════════════════ */

/* ── ≤ 1100px — tablets / narrow desktops ── */
@media (max-width: 1100px) {
  .attractions-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ── ≤ 1600px — kompaktnější nav pro střední rozlišení ── */
@media (max-width: 1600px) {
  .top-bar-nav { gap: 18px; font-size: 12px; }
  .btn-register { padding: 7px 16px; font-size: 11px !important; }
}

/* ── ≤ 1440px — hamburger menu ── */
@media (max-width: 1440px) {
  .top-bar-nav { display: none; }
  .nav-toggle { display: flex; }
}

/* ── ≤ 900px — small tablets / large phones ── */
@media (max-width: 900px) {
  :root { --gutter: 5%; --section-py: 60px; }
  .top-bar { padding: 0 var(--gutter); }
  .hero-title { font-size: clamp(22px, 5vw, 32px); }
  .page-banner { height: 230px; }
  .about-grid,
  .about-conference-grid,
  .venue-grid,
  .venue-intro-grid,
  .excursion-cols { grid-template-columns: 1fr; gap: 32px; }
  .topics-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .facilities-grid { grid-template-columns: repeat(4, 1fr); }
  .topics-list { grid-template-columns: 1fr; }
  .timeline-item { grid-template-columns: 16px 160px 1fr; }
  .info-row { grid-template-columns: 1fr 1fr; }
  .excursion-cards { grid-template-columns: 1fr; }
  .excursion-callout { flex-direction: column; text-align: center; }
}

/* ── ≤ 1900px — horizontální osa → vertikální ── */
@media (max-width: 1900px) {

  /* Wrapper: výška auto, osa se rozvine do sloupce */
  .htimeline-wrap {
    height: auto;
    margin-top: 32px;
    max-width: 640px;          /* omezí šířku na čitelný sloupec */
  }
  .htimeline-line { display: none; }

  /* Flex sloupec místo gridu */
  .htimeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-columns: none;
  }

  /* Každá položka: 2 sloupce (tečka | texty), 2 řádky (datum | popis) */
  .htl-item {
    display: grid;
    grid-template-columns: 24px 1fr;
    grid-template-rows: auto auto;
    column-gap: 18px;
    row-gap: 2px;
    align-items: start;
    justify-items: start;
    padding-bottom: 28px;
    position: relative;
    cursor: default;
  }

  /* Vertikální spojovací čára mezi tečkami */
  .htl-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 11px; top: 24px;
    width: 2px;
    height: calc(100% - 14px);
    background: rgba(77,166,255,.25);
    transform: none;
  }
  .htl-item::after { display: none; }
  .htl-item:last-child::before { display: none; }

  /* Tečka — col 1, row 1+2, zarovnána na střed řádku s datem */
  .htl-dot {
    grid-column: 1;
    grid-row: 1 / 3;
    justify-self: center;
    align-self: start;
    margin-top: 3px;
  }

  /* Datum — col 2, row 1 */
  .htl-top {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: 0;
    min-height: auto;
    width: 100%;
  }
  .htl-top .htl-date {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255,255,255,.90);
    white-space: nowrap;
    line-height: 1.3;
    letter-spacing: -.01em;
  }

  /* Popis — col 2, row 2 */
  .htl-bottom {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: 0;
    min-height: auto;
    width: 100%;
  }
  .htl-bottom .htl-label {
    font-size: 13px;
    color: rgba(255,255,255,.50);
    line-height: 1.45;
  }

  /* Highlight — modré datum, světlejší popis, tučně */
  .htl-item.highlight .htl-top .htl-date {
    color: var(--blue-light);
  }
  .htl-item.highlight .htl-bottom .htl-label {
    color: rgba(255,255,255,.82);
    font-weight: 600;
  }
}


@media (max-width: 600px) {
  :root { --section-py: 48px; }
  .brand-full { display: none; }
  .brand-sep { display: none; }
  .page-banner { height: 190px; }
  .page-banner-title { font-size: 26px; }
  .gallery-grid--4,
  .gallery-grid--3 { grid-template-columns: 1fr; }
  .topics-grid { grid-template-columns: 1fr; }
  .topic-item { border-right: none !important; }
  /* při 1 sloupci — přepnout table na block layout */
  .topics-grid { display: block; }
  .topics-grid-row { display: block; }
  .topic-item {
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--border);
  }
  .topics-grid-row:last-child .topic-item:last-child { border-bottom: none; }
  .attractions-grid { grid-template-columns: 1fr; }
  .facilities-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .info-row { grid-template-columns: 1fr; gap: 24px; }
  .timeline-item { grid-template-columns: 16px 1fr; }
  .timeline-date { grid-column: 2; }
  .timeline-desc { grid-column: 2; }
  .excursion-title { font-size: 26px; }
  .venue-facilities-strip { flex-direction: column; align-items: flex-start; }
  .venue-stats { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════
   22. MOBILE NAV OVERLAY
   Shown when .nav-open is toggled via JS.
   Full-width dropdown below the fixed top bar.

   v2.0.1 — bílé pozadí, tmavě šedé písmo
            odpovídá změně top-bar barevného schématu.
══════════════════════════════════════ */
.top-bar-nav.nav-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--bar-h); left: 0; right: 0;
  background: #ffffff;
  color: #2a2a2a;
  padding: 24px var(--gutter) 36px;
  gap: 20px;
  font-size: 16px;
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  z-index: 999;
}


/* ══════════════════════════════════════
   23. PARTNERS SECTION — Static Grid Layout
   Replaces carousel for better focus on main partners.
   Grid: 3 columns desktop, 1 column mobile.
══════════════════════════════════════ */
.partners-section {
  padding: 5px 0;
  background-color: var(--white);
}

.partners-label {
  text-align: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 40px;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

.partner-box {
  border-radius: 12px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-logo {
  max-width: 100%;
  max-height: 150px;
  width: auto;
  height: auto;
}

.partner-box:hover .partner-logo {
  filter: grayscale(0%);
  opacity: 1;
}

/* Popisek pod logy — vycentrován vůči celému bloku partnerů */
.partners-note {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 24px;
  font-style: italic;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 992px) {
  .partner-box { padding: 30px; height: 150px; }
}

@media (max-width: 768px) {
  .partners-grid { grid-template-columns: 1fr; max-width: 400px; }
}


/* ══════════════════════════════════════
   24. COMING SOON PAGE
   Used on: /coming-soon.php
   Centrovaný obsah s ikonou, nadpisem, datem a odkazem zpět.
   Elements: .coming-soon-page, .csoon-inner, .csoon-icon,
   .csoon-title, .csoon-lead, .csoon-date-badge,
   .csoon-date-label, .csoon-date-value, .csoon-back
══════════════════════════════════════ */
.coming-soon-page {
  min-height: calc(100vh - var(--bar-h) - 300px - 200px); /* viewport - nav - banner - footer */
  display: flex;
  align-items: center;
}

/* Centrovaný vnitřní blok */
.csoon-inner {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  padding-block: 32px;
}

/* Velká ikona */
.csoon-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 28px;
  opacity: .85;
}

/* Hlavní nadpis */
.csoon-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.02em;
  margin-bottom: 20px;
  line-height: 1.15;
}

/* Popis */
.csoon-lead {
  font-size: 17px;
  color: var(--text-mid);
  line-height: 1.75;
  margin-bottom: 40px;
}

/* Datum badge — pill s datem konference */
.csoon-date-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  background: var(--blue-pale);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 32px;
  margin-bottom: 44px;
}
.csoon-date-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--blue);
}
.csoon-date-value {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .01em;
}

/* Zpět odkaz */
.csoon-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 30px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .05em;
  border-radius: 32px;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 18px rgba(26,125,226,.35);
}
.csoon-back:hover {
  background: var(--blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(26,125,226,.45);
}

/* ══════════════════════════════════════
   25. COMMITTEE PAGE — Scientific Committee
   Used on: /committee/index.php
   Elements: .sc-section, .sc-header, .sc-grid,
             .sc-table, .sc-name, .sc-affil,
             .sc-country, .sc-chair-badge
══════════════════════════════════════ */

/* Dvousloupcový grid pro dvě tabulky vedle sebe */
.sc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  align-items: start;
}

/* Tabulka — napodobuje čistý seznam s jemnými oddělovači */
.sc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.sc-table tr {
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.sc-table tr:last-child { border-bottom: none; }
.sc-table tr:hover { background: var(--blue-pale); }

.sc-table td {
  padding: 11px 10px 11px 0;
  vertical-align: middle;
  line-height: 1.45;
}

/* První buňka — jméno + affiliace */
.sc-table td:first-child {
  padding-right: 40px;
  width: 75%;
}

/* Druhá buňka — vlajka + stát */
.sc-table td:last-child {
  padding-left: 8px;
  white-space: nowrap;
  width: 25%;
}

/* Jméno člena */
.sc-name {
  font-weight: 600;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 14px;
  /* margin-right: 6px; */
}

/* Badge "chair" */
.sc-chair-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--blue);
  background: var(--blue-pale);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 7px;
  vertical-align: middle;
  line-height: 1.7;
  white-space: nowrap;
}

/* Instituce — inline za jménem, oddělena čárkou */
.sc-affil {
  color: var(--text-mid);
  font-size: 13px;
}

/* Stát — pravá buňka, zkrácený label */
.sc-country {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Emoji vlajka vedle názvu země */
.sc-flag {
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
  font-style: normal;
}

/* Responsive: pod 900 px — jeden sloupec */
@media (max-width: 900px) {
  .sc-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .sc-table:first-child tr:last-child {
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 600px) {
  .sc-table td:first-child { min-width: unset; }
  .sc-table { font-size: 13px; }
  .sc-name  { font-size: 13px; }
  .sc-affil { font-size: 12px; }
}


/* ══════════════════════════════════════
   26. COMMITTEE PAGE — Organization Committee
   Used on: /committee/index.php
   Elements: .oc-section, .oc-header, .oc-cards,
             .oc-card, .oc-card-initials, .oc-card-name
══════════════════════════════════════ */

/* Čtveřice boxů vedle sebe */
.oc-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Jednotlivý box — čistý, s hover efektem */
.oc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 36px 24px 32px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--navy);
  transition: border-color .2s, transform .2s, box-shadow .2s;
  cursor: pointer;
}
.oc-card:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/* Logo organizující instituce */
.oc-card-logo {
  width: auto;
  height: 64px;
  max-width: 160px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  transition: transform .2s, opacity .2s;
}
.oc-card:hover .oc-card-logo {
  transform: scale(1.04);
  opacity: .88;
}

/* Jméno */
.oc-card-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  color: var(--navy);
}

/* Responsive */
@media (max-width: 900px) {
  .oc-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .oc-cards { grid-template-columns: 1fr 1fr; gap: 14px; }
  .oc-card  { padding: 24px 16px; }
  .oc-card-initials { width: 56px; height: 56px; font-size: 18px; }
  .oc-card-name { font-size: 14px; }
}