/* HOMESHORT1 — krátky domov (8 blokov) + stránky /studio a /studio/pricing. Len rozloženie, farby = tokeny (tokens.css). */

/* ── Písmo: nadpisy = --font-display (FONTSYS1: systémové písmo, tokens.css; predtým Bricolage — FONTFIX1/HOMESHORT1). */
.hero__claim, .end h2, .hub__top h1 { font-family: var(--font-display); }

/* ── rytmus krátkeho domova: menšie medzery medzi blokmi (8 blokov, 1 obrazovka = 1 myšlienka) */
.home--short .sec, .home--short .sec + .sec:not(.on-dark) { padding: calc(var(--section) * .42) 0; }
/* atribút height="…" obrázka inak prebije aspect-ratio v home.css (obrázok bol vysoký ako originál) */
.home--short :is(.ref, .fam__img, .end__img, .hdoor__img) img { height: auto; }

/* ── dvere domova: 4 obrázkové karty */
/* HOMEFIX1: „Kde začneš“ — karty ako .tier (paper, linka, r-card), nadpis + 1 veta + tlačidlo so slovesom; celá karta klikateľná cez ::after */
.hdoors .sec-head { margin-bottom: 20px; }
.hdoors__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .hdoors__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .hdoors__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
/* FLICKER1 (owner 12. 10.: „občas flickering“): karta sa pri hoveri dvíha o 3 px. (1) Orezanie obrázka je na .hdoor__img, nie na karte,
 *   aby pás pod zdvihnutou kartou (::before) zostal pod myšou — inak kurzor pri spodnom okraji kartu striedavo púšťal a chytal.
 *   (2) Tlačidlo v karte sa samo nedvíha: transform na .gg-btn by z neho spravil obal pre ::after (klik cez celú kartu) → ::after sa
 *   zmrští na tlačidlo, myš nad kartou ho pustí, transform zmizne, ::after znova cez kartu… = tlačidlo blikalo tmavé/svetlé. */
.hdoor { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-card); background: var(--paper); border: 1px solid var(--line); transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast), border-color var(--t-fast); }
.hdoor:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--leaf); }
.hdoor:hover::before { content: ""; position: absolute; left: -1px; right: -1px; top: 100%; height: 4px; }
.hdoor__img { display: block; overflow: hidden; background: var(--line); border-top-left-radius: inherit; border-top-right-radius: inherit; }
.hdoor__img img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hdoor__t { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.hdoor__t h3 { margin: 0; font-size: 19px; letter-spacing: -.01em; line-height: 1.25; }
.hdoor__t p { margin: 0 0 8px; color: var(--muted); font-size: var(--fs-small); line-height: 1.45; flex: 1; }
.hdoor__go { align-self: flex-start; }
.hdoor__go::after { content: ""; position: absolute; inset: 0; }
.hdoor .hdoor__go:hover, .hdoor .hdoor__go:active { transform: none; }
@media (max-width: 639px) {
  .hdoor { grid-template-columns: 36% 1fr; grid-template-rows: none; }
  .hdoor__img { border-top-right-radius: 0; border-bottom-left-radius: inherit; }
  .hdoor__img img { height: 100% !important; aspect-ratio: auto; min-height: 150px; }
  .hdoor__t { padding: 12px 14px 14px; gap: 4px; }
  .hdoor__t h3 { font-size: 17px; }
  .hdoor__t p { margin-bottom: 6px; }
}

/* ── obchod: odkazy pod rodinou produktov; na telefóne karty vodorovne (rail) */
.fam__links { margin-top: 28px; }
@media (max-width: 699px) {
  .family .fam { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--page-pad)); padding: 0 var(--page-pad) 8px; scroll-padding-inline: var(--page-pad); scrollbar-width: thin; }
  .family .fam__c { scroll-snap-align: start; }
  .refs .refs__rail { grid-auto-columns: 70%; }
  .refs .ref img { aspect-ratio: 1 / 1; }
}

/* ── realizácie a záver: nižšie fotky */
@media (min-width: 1100px) { .home--short .ref img { height: clamp(240px, 20vw, 300px); } }
.home--short .end__img img { aspect-ratio: 4 / 3; max-height: 420px; }
.home--short .cfg__art { min-height: 0; }

/* ── HOMEFIX1: náznak cenníka Studia (domov) — karty v štýle .tier, Free tmavá (Ihličie + zrno) ako na /studio/pricing */
.hpr__grid { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .hpr__grid { grid-template-columns: repeat(3, 1fr); } }
.hpr__c { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 18px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; align-content: start; }
.hpr__c h3 { font-size: 18px; margin: 0; }
.hpr__c--free { background: var(--grain-layer), var(--soil); border-color: var(--soil); color: var(--on-dark-muted); }
.hpr__c--free :where(h3, b) { color: var(--on-dark); }
.hpr__p { margin: 0; display: grid; justify-items: end; text-align: right; }
.hpr__p .num { font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.hpr__c--free .hpr__p .num { color: var(--sun); }
.hpr__p small { color: var(--muted); font-size: 12px; }
.hpr__c--free .hpr__p small { color: var(--on-dark-muted); }
.hpr__kr { grid-column: 1 / -1; margin: 0; display: grid; gap: 2px; font-size: var(--fs-small); }

/* ── FAQ: odkazy „ďalšie otázky" pod nadpisom */
.faq__h .gg-link { justify-self: start; }

/* ── /studio a /studio/pricing: hlavička stránky je plná (nie nad hero) */
.studio__top h1 { max-width: var(--mw-disp-20); }
.studio__top .sec-head { margin-bottom: 24px; }
/* WEBSTYLE2: cenník = obsahová stránka → mierka --fs-h1 / 760 (dve mierky H1: display = landing, h1 = obsah) */
.studio .pricing.hub__top h1 { font-size: var(--fs-h1); letter-spacing: var(--track-display); line-height: var(--lh-display); font-weight: var(--w-display); }
.how__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .how__steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .how__steps { grid-template-columns: repeat(4, 1fr); } }
.tlsec .tl { margin-top: 0; }
.tl__h { font-size: var(--fs-h3); margin-bottom: 8px !important; }
.tl__lead { margin: 0 0 24px !important; }
.views--all .view { margin-bottom: clamp(28px, 4vw, 48px); }
.featsec .feats { margin-top: 0; }