/* ==========================================================================
   Studio Tanes — základní proměnné a reset
   ========================================================================== */
:root {
  --navy: #16305c;
  --navy-dark: #0e2044;
  --navy-darker: #0a1830;
  --pink: #ef3d82;
  --pink-dark: #d81f68;
  --bg: #f6f7fb;
  --white: #ffffff;
  --text: #212b45;
  --text-muted: #5b6472;
  --border: #e5e8f0;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(20, 30, 70, 0.08);
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

ul { list-style: none; margin: 0; padding: 0; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 .5em;
}

p { margin: 0 0 1em; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

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

.btn-pink {
  background: var(--pink);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(239, 61, 130, 0.35);
}
.btn-pink:hover { background: var(--pink-dark); }

.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.6);
}
.btn-outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

.btn-outline-navy {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
  padding: 12px 22px;
}
.btn-outline-navy:hover { background: var(--navy); color: var(--white); }

.btn-nav { flex-shrink: 0; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  box-shadow: 0 2px 18px rgba(0,0,0,0.15);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  color: var(--white);
  font-family: var(--font-heading);
}

.logo-top {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  opacity: 0.85;
}

.logo-bottom {
  font-size: 1.15rem;
  font-weight: 700;
}

.main-nav { flex: 1; }

.main-nav ul {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

.main-nav a {
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--white);
  border-color: var(--pink);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--white);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-dark) 100%);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  padding: 0;
}

.hero-text {
  color: var(--white);
  padding: 60px 24px 60px 0;
}

.eyebrow {
  color: var(--pink);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 14px;
}

.hero-text h1 {
  color: var(--white);
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  margin-bottom: 20px;
}

.hero-tags {
  color: var(--white);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 14px;
}

.hero-desc {
  color: rgba(255,255,255,0.75);
  max-width: 46ch;
  margin-bottom: 30px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-media {
  height: 100%;
  min-height: 340px;
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Benefits
   ========================================================================== */
.benefits {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 40px 0;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.benefit {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.benefit svg {
  width: 34px;
  height: 34px;
  color: var(--pink);
  flex-shrink: 0;
  margin-top: 2px;
}

.benefit h3 {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.benefit p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0;
}

/* ==========================================================================
   Section basics
   ========================================================================== */
.section { padding: 80px 0; background: var(--white); }
.section-alt { background: var(--bg); }

.section-title {
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  position: relative;
  margin-bottom: 50px;
}

.section-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: var(--pink);
  margin: 16px auto 0;
  border-radius: 2px;
}

.section-title-left { text-align: left; }
.section-title-left::after { margin: 16px 0 0; }

/* ==========================================================================
   Lekce cards
   ========================================================================== */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(20,30,70,0.14);
}

.card-media { aspect-ratio: 4 / 3; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card-media img { transform: scale(1.06); }

.card-body { padding: 24px 24px 26px; }

.card-body h3 { font-size: 1.3rem; margin-bottom: 10px; }

.card-body p {
  color: var(--text-muted);
  font-size: 0.94rem;
  margin-bottom: 16px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pink);
  font-weight: 700;
  font-size: 0.9rem;
}
.link-arrow svg { transition: transform .2s ease; }
.link-arrow:hover svg { transform: translateX(4px); }

/* Pill CTA button used at the bottom of an event card (instead of a plain text link) */
.card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  border-radius: 999px;
  border: 2px solid var(--border);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.9rem;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.card-cta svg { transition: transform .2s ease; }
.card-cta:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.card-cta:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Events carousel (homepage "Nadcházející akce") — compact horizontally
   scrollable cards, as opposed to the full static .cards-grid used on
   /akce and event "Další akce".
   ========================================================================== */
.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}

/* Keeps the title truly centered (like every other section) while pinning
   the arrow controls to the right edge, via a symmetric 3-column grid. */
.section-header-row-center {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 50px;
}
.section-header-row-center .section-title { grid-column: 2; margin-bottom: 0; }
.section-header-row-center .carousel-arrows { grid-column: 3; justify-self: end; }

@media (max-width: 640px) {
  .section-header-row-center { grid-template-columns: 1fr auto; }
  .section-header-row-center .section-title { grid-column: 1; text-align: left; }
  .section-header-row-center .section-title::after { margin: 16px 0 0; }
  .section-header-row-center .carousel-arrows { grid-column: 2; }
}

.section-header-row .section-title { margin-bottom: 0; }

.carousel-arrows { display: flex; gap: 10px; flex-shrink: 0; }

.carousel-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.carousel-arrow:hover:not(:disabled) { background: var(--navy); color: var(--white); border-color: var(--navy); }
.carousel-arrow:disabled { opacity: .35; cursor: default; }

/* Plain, non-scrolling wrapper — bleeds .cards-carousel's padding out so its
   resting position still lines up with .container's edge instead of
   shifting content inward by the padding amount. Must match
   .cards-carousel's own left/right padding below exactly (currently 44px),
   or the alignment/clip math breaks again. */
.carousel-bleed { margin: 0 -44px; }

.cards-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* .cards-carousel needs overflow-x: auto to scroll, which forces the browser
     to also clip overflow-y (it can't leave one axis "visible" while the
     other isn't) — the regular .card:hover lift (translateY(-6px)) + widened
     box-shadow (0 18px 40px) then needs enough padding here to fully clear
     that clip box on every side, or it gets hard-cut. The shadow's actual
     reach from the card edge is ~28px above, ~52px below (18px offset ±
     40px blur, adjusted for the 6px lift) and ~40px left/right (blur only,
     offset-x is 0) — padding has to beat that reach or part of the shadow
     still gets clipped even though there's technically "some" room (this
     bit the left/right sides first: 20px of buffer looked fine on the left
     because the neighboring card's own un-hovered shadow filled in the gap
     visually, but the same 20px cut the right side visibly short with no
     neighbor there to blend with — the shadow just wasn't fully out of the
     clip box on the side it should be, and hover shadow was clipped on any
     side once cards or blur wide enough moved a hovered card without a
     neighbor next to it). 30px/54px top/bottom double as breathing room
     before the "Všechny akce" button below; 44px left/right (matching
     .carousel-bleed's -44px) keeps the row inset from .container's own
     edge for the same reason. */
  padding: 30px 44px 54px;
  /* Gotcha: scroll-snap-align: start (below) treats plain padding as
     something to snap PAST, not an inset to rest at — with mandatory snap,
     the browser permanently forced scrollLeft to the padding amount on
     load, visibly shifting the whole row off .container's edge even though
     nothing scrolled the track (confirmed: it rejected a manual
     `el.scrollLeft = 0` too). scroll-padding is the property actually meant
     to tell the snap algorithm about this inset — matching it to the
     padding above makes scrollLeft: 0 a valid/kept snap position again. */
  scroll-padding-left: 44px;
  scroll-padding-right: 44px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cards-carousel::-webkit-scrollbar { display: none; }

.cards-carousel .card {
  scroll-snap-align: start;
  /* Exactly 3 full-width cards per row (like .cards-grid), not a narrower
     fixed size that leaves the row half-empty — a 4th+ card just scrolls
     into view instead of shrinking everything to fit. */
  flex: 0 0 clamp(240px, calc((100% - 48px) / 3), 420px);
}

.cards-carousel .card-media { aspect-ratio: 16 / 11; }
.cards-carousel .card-body { padding: 20px 20px 22px; }
.cards-carousel .card-body h3 { font-size: 1.15rem; }

@media (max-width: 640px) {
  .cards-carousel .card { flex-basis: 78vw; }
}

/* ==========================================================================
   Ceník
   ========================================================================== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 40px;
}

.price-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 24px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}

.price-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(20,30,70,0.14);
}

.price-amount {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--pink);
  margin-bottom: 8px;
}

.price-label { font-size: 1.05rem; margin-bottom: 6px; }

.price-note {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0;
}

.pricing-accepted {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
}

.pricing-accepted svg { color: var(--pink); flex-shrink: 0; }

.pricing-accepted-label { font-weight: 700; color: var(--navy); }

.voucher-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.voucher-badge {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.pricing-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.pricing-note svg { flex-shrink: 0; margin-top: 2px; color: var(--pink); }
.pricing-note p { margin: 0; }
.pricing-note a { color: var(--pink); font-weight: 700; text-decoration: underline; }

/* ==========================================================================
   O studiu
   ========================================================================== */
.o-studiu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.o-studiu-text p { color: var(--text-muted); }

.o-studiu-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.o-studiu-media img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Galerie
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.gallery-item {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: zoom-in;
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(22, 48, 92, 0);
  transition: background .25s ease;
}
.gallery-item:hover::after { background: rgba(22, 48, 92, 0.15); }

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.gallery-item:hover img { transform: scale(1.08); }

.gallery-cta { text-align: center; margin-top: 40px; }

.file-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}

/* ==========================================================================
   Lektoři
   ========================================================================== */
.lektori-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  text-align: center;
}

.lektor-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px 20px;
  box-shadow: var(--shadow);
}

.lektor-avatar {
  width: 88px;
  height: 88px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #eef1f8;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
}

.lektor-avatar svg { width: 42px; height: 42px; }
.lektor-avatar img { width: 100%; height: 100%; object-fit: cover; }

.lektor-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.lektor-card .lektor-role { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 10px; font-weight: 500; }
.lektor-card p { color: var(--text-muted); font-size: 0.9rem; margin: 0; }

/* ==========================================================================
   Reference
   ========================================================================== */
.testimonials-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.testimonial {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 26px;
  margin: 0;
}

.quote-mark {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  color: var(--pink);
  line-height: 1;
  margin-bottom: 6px;
}

.testimonial blockquote {
  margin: 0 0 18px;
  color: var(--text);
  font-size: 0.96rem;
}

.testimonial figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.88rem;
}

.testimonial-name { font-weight: 700; color: var(--navy); }
.stars { color: var(--pink); letter-spacing: 2px; }

.testimonial-dots {
  display: none;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: #cfd5e4;
  cursor: pointer;
  padding: 0;
}

.dot.active { background: var(--pink); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--navy-darker);
  color: rgba(255,255,255,0.8);
  padding: 64px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand p { margin: 16px 0 18px; font-size: 0.9rem; }

.socials { display: flex; gap: 12px; }

.socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background .2s ease, border-color .2s ease;
}

.socials a:hover { background: var(--pink); border-color: var(--pink); }

.footer-col h4 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.footer-col ul li { margin-bottom: 10px; }
.footer-col a:hover { color: var(--white); }

.footer-col address { font-style: normal; margin-bottom: 12px; font-size: 0.9rem; }
.footer-col p { font-size: 0.9rem; margin-bottom: 8px; }

.footer-bottom {
  padding: 22px 0;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
  .main-nav { display: none; }
  .btn-nav { display: none; }
  .nav-toggle { display: flex; }

  .site-header.nav-open .main-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy-dark);
    box-shadow: 0 12px 24px rgba(0,0,0,0.25);
  }

  .site-header.nav-open .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 24px 24px;
  }

  .site-header.nav-open .main-nav a {
    display: block;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .site-header.nav-open .btn-nav {
    display: inline-flex;
    margin: 0 24px 20px;
  }

  .hero-inner { grid-template-columns: 1fr; }
  .hero-text { padding: 44px 0 36px; order: 1; }
  .hero-media { order: 2; min-height: 280px; }

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

  .o-studiu-grid { grid-template-columns: 1fr; gap: 32px; }
  .o-studiu-media { order: -1; }

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

  .lektori-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }

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

@media (max-width: 680px) {
  .container { padding: 0 20px; }
  .section { padding: 60px 0; }

  .benefits-grid { grid-template-columns: 1fr; gap: 22px; }

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

  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-accepted { justify-content: flex-start; }
  .voucher-badges { justify-content: flex-start; }

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

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

  .testimonials-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 18px;
    margin: 0 -20px;
    padding: 0 20px 6px;
    -webkit-overflow-scrolling: touch;
  }

  .testimonial {
    flex: 0 0 88%;
    scroll-snap-align: center;
  }

  .testimonial-dots { display: flex; }

  .footer-grid { grid-template-columns: 1fr; text-align: left; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }

  .contact-form-wrap { padding: 28px 20px; }
  .contact-form .form-row { grid-template-columns: 1fr; gap: 0; }
}

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

/* ==========================================================================
   Inner pages (News, Events, Pages, Scheduler) — shared layout bits
   ========================================================================== */
.page-header {
  background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  color: var(--white);
  padding: 64px 0 48px;
  text-align: center;
}

.page-header h1 {
  color: var(--white);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 10px;
}

.page-header p {
  color: rgba(255,255,255,0.75);
  max-width: 640px;
  margin: 0 auto;
}

.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pink);
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 24px;
}
.breadcrumb-link:hover { color: var(--pink-dark); }

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 24px;
}
.meta-row span { display: inline-flex; align-items: center; gap: 6px; }

.article-cover {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 32px;
}

.event-body-image {
  display: block;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0 auto 32px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.article-content { max-width: 760px; margin: 0 auto; }
.article-content h2, .article-content h3 { font-family: var(--font-heading); margin: 1.6em 0 .6em; }
.article-content p { color: var(--text); line-height: 1.75; margin-bottom: 1.2em; }
.article-content img { max-width: 100%; border-radius: 10px; margin: 1.2em 0; }
.article-content a { color: var(--pink); }
.article-content ul, .article-content ol { padding-left: 1.4em; margin-bottom: 1.2em; }

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 0;
}

/* Event/trip badge (icon + free text) overlaid on the card image */
.event-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(22, 48, 92, 0.85);
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  box-shadow: 0 8px 20px rgba(20,30,70,0.2);
}
.event-badge svg { flex-shrink: 0; }
.card-media { position: relative; }

.event-subtitle {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: -6px 0 14px;
}

.event-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 8px;
}
.event-meta-row svg { flex-shrink: 0; color: var(--pink); }
.event-meta-row.price { font-weight: 700; }

/* Weekly schedule table */
.schedule-table-wrap { overflow-x: auto; }
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-width: 720px;
}
.schedule-table th {
  background: var(--navy);
  color: #fff;
  padding: 14px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.schedule-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.schedule-table tr:last-child td { border-bottom: none; }
.schedule-day { font-weight: 600; color: var(--navy); white-space: nowrap; }
.schedule-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.schedule-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

.pagination-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}

/* ==========================================================================
   Contact form
   ========================================================================== */
.section-lead {
  text-align: center;
  color: var(--text-muted);
  max-width: 520px;
  margin: -28px auto 40px;
}

.contact-form-wrap {
  max-width: 640px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.contact-form .form-field {
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
  font-size: 0.92rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  transition: border-color .15s, box-shadow .15s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(239, 61, 130, 0.15);
  background: var(--white);
}

.contact-form textarea { resize: vertical; }

.contact-form button[type="submit"] {
  width: 100%;
  justify-content: center;
  border: none;
  cursor: pointer;
}

.form-alert {
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 0.92rem;
}

.form-alert-success { background: #e5f7ec; color: #197a44; }
.form-alert-danger { background: #fde8ee; color: #b4123f; }
.form-alert-warning { background: #fff4e0; color: #93590a; }
.form-alert-info { background: #e7edfb; color: var(--navy); }

/* ==========================================================================
   Contact page (Page/contact.latte)
   ========================================================================== */
.contact-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: #e7edfb;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-bottom: 18px;
}

.section-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pink);
}

.contact-page-info h1 { font-size: clamp(1.9rem, 3vw, 2.5rem); }

.contact-page-lead { color: var(--text-muted); max-width: 44ch; }

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 32px;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-info-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #e7edfb;
  color: var(--navy);
}

.contact-info-label {
  display: block;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.contact-info-item strong { font-weight: 600; }
.contact-info-item a:hover { color: var(--pink); }

.contact-page-form.contact-form-wrap { margin: 0; max-width: none; }

@media (max-width: 900px) {
  .contact-page-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ==========================================================================
   Akce — detail-ext (alternativní layout, 2026-09-13, ve zkoušce vedle detail.latte)
   ========================================================================== */
.event-hero {
  position: relative;
  min-height: 380px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

.event-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--navy);
  opacity: 0.5;
}

.event-hero-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 60px 0 36px;
  background: linear-gradient(180deg, rgba(10,24,48,0) 0%, rgba(10,24,48,0.55) 45%, rgba(10,24,48,0.92) 100%);
}

.event-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.event-hero-overlay h1 {
  color: var(--white);
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: 0 0 8px;
}

.event-hero-subtitle {
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
  margin: 0;
}

.event-detail-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: start;
}

.event-lead {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1.2em;
}

.event-info-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  position: sticky;
  top: 100px;
}

.event-info-price {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  color: var(--navy);
  margin-bottom: 18px;
}

.event-info-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 8px;
}

.event-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text);
}

.event-info-list svg {
  flex-shrink: 0;
  color: var(--pink);
  margin-top: 2px;
}

.event-info-extra {
  padding-top: 16px;
  margin-bottom: 16px;
  border-top: 1px solid var(--border);
}

.event-info-extra h4 {
  font-size: 0.85rem;
  color: var(--navy);
  margin-bottom: 6px;
}

.event-info-extra p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 0;
}

.event-info-actions {
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.event-info-card .btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
}
.event-info-card .btn:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .event-detail-layout { grid-template-columns: 1fr; gap: 32px; }
  .event-info-card { position: static; }
}

/* ==========================================================================
   Events detail — alternative layout (/akce/<slug>/alt)
   ========================================================================== */
.event-alt-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin-bottom: 28px;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.event-alt-banner a { color: var(--pink); font-weight: 700; }

.event-quickfacts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 760px;
  margin: 28px auto 36px;
}

.event-quickfact {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.event-quickfact-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--white);
  color: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.event-quickfact-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.event-quickfact-value {
  font-weight: 700;
  color: var(--navy);
  font-size: 0.95rem;
  line-height: 1.35;
}

.event-checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 760px;
  margin: 40px auto;
}

.event-checklist-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
}

.event-checklist-card h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  margin-bottom: 14px;
}

.event-checklist-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.event-checklist-card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text);
}

.event-checklist-card svg { flex-shrink: 0; margin-top: 3px; }
.event-checklist-card.is-included svg { color: #1a9c5f; }
.event-checklist-card.is-excluded svg { color: #d64545; }

@media (max-width: 560px) {
  .event-quickfacts { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .event-checklist-grid { grid-template-columns: 1fr; }
}