/* Homepage-specific */

.hero { padding: var(--space-12) 0 var(--space-8); }
.hero .grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-6);
  align-items: center;
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero h1 { font-size: 48px; margin: var(--space-2) 0 var(--space-3); }
.hero p.lead {
  font-size: 18px;
  color: var(--color-slate);
  max-width: 480px;
  margin-bottom: 0;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.tag {
  background: var(--color-fog);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 6px 12px;
  color: var(--color-ink);
}

.photo-frame {
  position: relative;
  border: 1px solid var(--color-line);
  aspect-ratio: 3 / 4;
  background: var(--color-fog);
}

.photo-crop { width: 100%; height: 100%; overflow: hidden; }
.photo-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.badge-ring {
  position: absolute;
  bottom: -24px;
  left: -48px;
  width: 192px;
  height: auto;
  display: block;
}

.stats {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

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

.stats .cell {
  padding: var(--space-4) var(--space-3);
  border-left: 1px solid var(--color-line);
}

.stats .cell:first-child { border-left: none; }

.stats .value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
}

.stats .label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin-top: 4px;
}

.home-section { padding: var(--space-12) 0; }
.home-section + .home-section { border-top: 1px solid var(--color-line); }
.home-section h2 { font-size: 40px; margin: var(--space-2) 0 var(--space-3); }
.contact-aside h2 { margin: 0 0 var(--space-3); }
.home-section .contact-aside .eyebrow + h2 { margin-top: var(--space-2); }
.home-section .section-lead {
  font-size: 18px;
  color: var(--color-slate);
  max-width: 620px;
}

.dif-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.dif-card {
  border: 1px solid var(--color-line);
  padding: var(--space-4);
}

.dif-card h3 { margin-bottom: var(--space-2); }
.dif-card p { color: var(--color-slate); font-size: 15px; }
.dif-more { margin-top: var(--space-6); }

.logo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-8);
  row-gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  min-height: calc(40px + 2 * var(--space-2));
  min-width: 0; /* ať široká SVG (UNA VIDA atd.) nerozbijí mřížku */
  text-decoration: none;
  color: inherit;
}

.logo-strip img {
  max-height: 40px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.65;
  transition: filter var(--transition-hover), opacity var(--transition-hover);
}

.logo-cell:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* Opticky lehčí loga — zvětšit, ať sedí k ostatním */
.logo-strip img.logo--lg {
  max-height: 56px;
}

.logo-strip img.logo--xl {
  max-height: 72px;
}

.logo-strip img.logo--sm {
  max-height: 28px;
}

/* Široké wordmarky — ať nepřerostou buňku */
.logo-strip img.logo--wide {
  max-width: min(100%, 160px);
}

.logo-strip img.logo--lg.logo--wide {
  max-width: min(100%, 200px);
}

.logo-strip img.logo--xl.logo--wide {
  max-width: min(100%, 240px);
}

/* EyeTowers: plný černý blok, opticky zmenšit */
.logo-strip img.logo--eyetowers {
  max-height: 32px;
}

/* Miller: světlé logo — stmavit, ať se neztrácí */
.logo-strip img.logo--miller {
  filter: grayscale(1) brightness(0.45);
}

.logo-cell:hover img.logo--miller {
  filter: grayscale(0) brightness(0.45);
}

.logo-cell--placeholder {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: var(--text-caption-line);
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-slate);
  background: var(--color-fog);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .logo-strip img {
    transition: none;
  }
}

.ref-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.ref-card {
  background: var(--color-fog);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ref-metric {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  color: var(--color-brand);
}

.ref-quote { font-size: 16px; color: var(--color-ink); }

.ref-client {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin-top: auto;
}

/* Výjimka z radius:0 — kulatý portrét u citace */
.ref-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.case-teaser {
  max-width: 640px;
}

.case-teaser .eyebrow + h2 {
  margin-top: var(--space-3);
}

.case-teaser h2 {
  margin-bottom: var(--space-2);
}

.case-teaser p {
  color: var(--color-slate);
  margin-bottom: var(--space-3);
}

.ref-sectors {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: var(--text-caption-line);
  letter-spacing: var(--text-caption-tracking);
  text-transform: uppercase;
  color: var(--color-slate);
  margin-top: var(--space-3);
}

.page-hero-body .dif-more {
  margin-top: var(--space-4);
}

/* Po page-hero hned obsah — bez prázdného bloku */
.section--after-hero {
  padding-top: var(--space-4);
}

.section--after-hero .logo-strip {
  margin-top: 0;
  border-top: none; /* oddělovač už řeší page-hero */
}

.price-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.price-card {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
}

.price-card h3 { margin-bottom: var(--space-1); }

.price-card .price {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  margin: var(--space-2) 0;
}

.price-card p {
  color: var(--color-slate);
  font-size: 15px;
  margin-bottom: var(--space-3);
}

.price-card .link-arrow { margin-top: auto; font-size: 15px; }

@media (max-width: 900px) {
  .dif-cards, .price-cards { grid-template-columns: 1fr; }
  .ref-cards { grid-template-columns: 1fr; }
  .logo-strip {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-4);
    row-gap: var(--space-3);
  }
  .logo-cell {
    padding: var(--space-2) var(--space-2);
  }
  /* 8 log = 4×2, Algorithmics (9.) schovat kvůli souměrnosti */
  .logo-strip > .logo-cell:last-child {
    display: none;
  }
  /* Na užším layoutu zmenšit největší loga, ať drží rytmus */
  .logo-strip img.logo--xl {
    max-height: 48px;
  }
  .logo-strip img.logo--xl.logo--wide {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .hero { padding: var(--space-4) 0 var(--space-6); }
  .hero .grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Děti hero-left se stanou přímými položkami gridu → jiné pořadí na mobilu */
  .hero-left { display: contents; }
  .hero-copy { order: 1; }
  .hero .photo-frame { order: 2; }
  .hero-actions { order: 3; }

  .hero h1 { font-size: 36px; }

  /* Menší foto + prostor po stranách, ať badge nepřeteče viewport */
  .photo-frame {
    width: min(260px, calc(100% - 80px));
    margin: 0 auto var(--space-4);
  }

  .badge-ring {
    width: 120px;
    left: -36px;
    bottom: -14px;
  }

  .home-section { padding: var(--space-8) 0; }
  .home-section h2 { font-size: 28px; }

  /* Stats zůstávají ve 3 sloupcích, jen menší typografie */
  .stats .cell {
    padding: var(--space-3) var(--space-1);
    text-align: center;
  }

  .stats .value { font-size: 16px; line-height: 1.25; }
  .stats .label { font-size: 11px; }
}