/*
 * Site — front-page styles.
 *
 * Loaded on is_front_page() via `site-page-front-page` handle
 * in theme/inc/60-enqueue.php. Template: front-page.php.
 *
 * Contents:
 *   – Hero carousel (.hero-carousel, .hc-slide, .hc-image, .hc-content, .hc-arrows, .hc-progress)
 *   – Statement (Krédo) block
 *   – News strip (.news-section, .news-grid, .news-card)
 *   – Mobile + tablet overrides
 */

/* ─── Hero carousel ───────────────────────────────────── */
.hero-carousel {
  position: relative; width: 100%; height: 100vh; min-height: 640px; max-height: 920px;
  overflow: hidden; background: var(--bg); cursor: pointer;
}
.hc-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.1s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.hc-slide.active { opacity: 1; pointer-events: auto; }

.hc-image {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--g1, oklch(0.32 0.10 305)) 0%, var(--g2, oklch(0.14 0.04 280)) 100%);
  transform: scale(1.05);
  transition: transform 8s cubic-bezier(.2,.6,.3,1);
}
.hc-slide.active .hc-image { transform: scale(1); }
.hc-image::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 30% 30%, rgba(255,255,255,0.10), transparent 70%);
}
.hc-image::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, transparent 25%, transparent 55%, rgba(10,10,10,0.85) 100%),
    linear-gradient(90deg, rgba(10,10,10,0.55) 0%, transparent 35%);
}
.hc-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 12px; color: rgba(255,255,255,0.35);
  pointer-events: none;
}
.hc-ph .n { font-size: calc(34px * var(--read-scale)); font-weight: 500; letter-spacing: -0.02em; color: rgba(255,255,255,0.5); }
.hc-content {
  position: absolute; left: 0; right: 0; bottom: 0;
  /* Bottom padding is fluid (scales with viewport) but never drops below
     120px, so the headline always clears the 36+56=92px arrow row. */
  padding: 0 var(--gutter) max(calc(96px * var(--scale)), 120px);
  display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: end;
}
/* Headline takes at most 3/4 of the page width — grows on wide screens,
   stays readable on narrow ones, never crowds the right edge. */
/* Max-width 1100px sjednoceno s .detail-hero .content — h1 se v hero
   carouselu zalamuje na stejném bodu jako titulek na detail-stránce
   projektu. */
.hc-content .left { display: flex; flex-direction: column; gap: 22px; max-width: 1100px; }
.hc-content h1 {
  /* Linear scale (no vw component) so the headline grows in step with body
     text rather than outrunning it on wide screens. 101 × 0.9 ≈ 91px @1440
     (matches the previous clamped value), 121px @1920, 162px @2560. */
  font-size: calc(101px * var(--scale)); line-height: 0.92; letter-spacing: -0.04em;
  font-weight: 500; color: var(--ink); text-wrap: balance;
}
.hc-arrows {
  position: absolute; left: 0; right: 0; bottom: 36px;
  display: flex; justify-content: space-between; padding: 0 var(--gutter);
  pointer-events: none; z-index: 5;
}
.hc-arrow {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  color: var(--ink); display: flex; align-items: center; justify-content: center;
  font-size: calc(22px * var(--read-scale)); cursor: pointer; pointer-events: auto;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background .2s, border-color .2s, transform .2s;
}
.hc-arrow:hover { background: rgba(255,255,255,0.10); border-color: var(--accent); color: var(--accent); }
.hc-arrow.prev:hover { transform: translateX(-3px); }
.hc-arrow.next:hover { transform: translateX(3px); }
.hc-progress {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: grid; height: 3px; z-index: 5;
}
.hc-progress .seg {
  position: relative; background: rgba(255,255,255,0.10); overflow: hidden; cursor: pointer;
}
.hc-progress .seg::after {
  content: ''; position: absolute; inset: 0;
  background: var(--accent); transform: scaleX(0); transform-origin: left center;
  transition: transform .2s;
}
.hc-progress .seg.done::after { transform: scaleX(1); }
.hc-progress .seg.active::after { transform: scaleX(var(--p, 0)); transition: none; }
.hc-progress .seg:hover { background: rgba(255,255,255,0.18); }

/* ─── Statement (Krédo) ─────────────────────────── */
.statement {
  padding: calc(80px * var(--scale)) var(--gutter); text-align: center;
  border-bottom: 1px solid var(--rule);
  position: relative; overflow: hidden;
}
.statement::before {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 70%; height: 200%;
  background: radial-gradient(closest-side, oklch(0.40 0.20 305 / 0.10), transparent 70%);
  pointer-events: none;
}
.statement p {
  position: relative;
  /* Linear scale — 86 × 0.9 ≈ 77px @1440 (matches previous clamped value),
     103px @1920, 138px @2560. */
  font-size: calc(86px * var(--scale)); line-height: 1.05; letter-spacing: -0.035em;
  font-weight: 400; text-wrap: balance; max-width: 1200px; margin: 0 auto;
}
.statement p em { color: var(--accent); font-style: italic; font-weight: 500; }

/* ─── News strip ─────────────────────────────────── */
.news-section { padding: 0 var(--gutter) calc(60px * var(--scale)); }
.news-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 24px;
}
.news-card { display: flex; flex-direction: column; gap: 16px; cursor: pointer; }
.news-card .img-wrap {
  position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 8px;
  background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%);
}
.news-card .img-wrap::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 30% 30%, rgba(255,255,255,0.06), transparent 70%);
}
.news-card .img-wrap::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55) 100%);
}
.news-card .meta { display: flex; flex-direction: column; gap: 12px; }
.news-card .meta-top { display: inline-flex; align-items: center; gap: 14px; }
.news-card .meta-top .d { font-size: calc(14px * var(--read-scale)); color: var(--ink-dim); letter-spacing: 0.02em; }
.news-card .meta-top .tag {
  padding: 4px 10px; border: 1px solid var(--rule-2); border-radius: 999px;
  color: var(--accent); font-weight: 500; font-size: calc(12.5px * var(--read-scale)); letter-spacing: 0.02em;
}
.news-card h4 {
  font-size: calc(20px * var(--read-scale)); font-weight: 500; line-height: 1.3; letter-spacing: -0.015em;
  transition: color .2s;
}
.news-card:hover h4 { color: var(--accent); }

/* ─── Mobile (≤768px) ───────────────────────────────────── */
@media (max-width: 768px) {
  .hero-carousel { height: 70vh; min-height: 480px; max-height: 720px; }
  .hc-content {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 var(--gutter) 80px;
  }
  .hc-content .left { gap: 14px; max-width: 100%; }
  .hc-content h1 {
    /* Sjednoceno s .detail-hero h1 mobile. */
    font-size: clamp(36px, 10vw, 52px);
    line-height: 0.9;
  }
  .hc-arrows { bottom: 24px; }
  .hc-arrow {
    width: 44px; height: 44px;
    font-size: 18px;
  }
  .statement { padding: 60px var(--gutter); }
  .statement p {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.1;
  }
  .news-section { padding: 0 var(--gutter) 48px; }
  .news-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .news-card h4 { font-size: clamp(18px, 5vw, 22px); }
}

/* ─── Tablet (769–1024px) — news strip drops from 3 → 2 cols so the
   news cards stay readable at intermediate widths. */
@media (min-width: 769px) and (max-width: 1024px) {
  .news-grid { grid-template-columns: 1fr 1fr; }
}

/* v1.4.1→1.4.2 — Motto na úvodní stránce zmenšeno o 50 %
   (PC 86 → 43 px, mobil clamp(28–40) → clamp(14–20)). */
.statement p {
  font-size: calc(43px * var(--scale));
  line-height: 1.15;
  letter-spacing: -0.025em;
  max-width: 900px;
}
@media (max-width: 768px) {
  .statement p { font-size: clamp(16px, 4.4vw, 20px); line-height: 1.25; letter-spacing: -0.015em; }
}

/* ═══ v1.5.0 — Jednotná typografie (motto beze změny) ═══ */
.hc-content h1 { font-size: 81px; }
@media (max-width: 768px) { .hc-content h1 { font-size: clamp(29px, 8vw, 42px); } }
.news-card .meta-top .d,
.news-card .meta-top .tag { font-size: var(--fs-label); }

/* v1.5.3 — Motto na mobilu +50 % (clamp 16–20 px → 24–30 px), CZ i EN. */
@media (max-width: 768px) {
  .statement p { font-size: clamp(24px, 6.6vw, 30px); line-height: 1.2; }
}

/* ═══ v1.6.4 — Nejnovější aktuality: pevně 4 z databáze, zobrazení podle zařízení ═══
   Full HD (≥1800): 4 vedle sebe · PC: 3 · tablet (769–1024): 2 · mobil: 2 pod sebou.
   Bez posouvání šipkami. */
.news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.news-grid > .news-card:nth-child(n+4) { display: none; }
@media (min-width: 1800px) {
  .news-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .news-grid > .news-card:nth-child(4) { display: flex; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-grid > .news-card:nth-child(n+3) { display: none; }
}
@media (max-width: 768px) {
  .news-grid { grid-template-columns: minmax(0, 1fr); }
  .news-grid > .news-card:nth-child(n+3) { display: none; }
}