/* ==========================================================================
   HOMEPAGE BOTTOM — v12 Production CSS
   All sections below the main video grid: Just Added + Blog split,
   Prefix: .hb-  (homepage bottom)
   ========================================================================== */


/* ==========================================================================
   BLOCK LAYOUT
   ========================================================================== */

.hb-section { padding: var(--sp-4, 16px) 0; }
.hb-section + .hb-section { border-top: none; }

/* Spodní blok pod paginací — vlastní pozadí, vizuálně oddělený pás (full-bleed, obsah centruje .body-pad).
   Warm --bg-surface — sladěno v rámci warm-grey auditu 2026-07-09 (celá šedá škála převedena na teplou osu). */
.hb-bottom {
  background: var(--bg-surface, #121212);
  margin-top: 30px;
}
/* Scroll fady uvnitř pásu ladí s jeho pozadím (globál v theme.css používá --bg-base) */
.hb-bottom .scroll-fade.left  { background: linear-gradient(to right, var(--bg-surface, #121212) 0%, transparent 100%); }
.hb-bottom .scroll-fade.right { background: linear-gradient(to left,  var(--bg-surface, #121212) 0%, transparent 100%); }

/* Spodní sekce = stejný jazyk jako horní raily (Hot/Shorts): plain sekce bez panelového
   pozadí a hairline linek; oddělení nese H2 subhead (.shorts-subhead z v12-sections.css)
   + konzistentní vertikální rytmus (30 base / 25 tier — jako .hot-section/.for-you-section). */
.hb-section.hb-alt {
  margin: 0;
  padding: 30px 0 0;
  scroll-margin-top: 100px;
}
@media (max-width: 1549.98px) {
  .hb-section.hb-alt { padding-top: 25px; }
}
/* Telefon: 28 — vizuální mezera sekcí sjednocena na 28 (Jan 2026-07-10; raily nad hb sekcemi končí hranou
   thumbů/tlačítka → padding = celá mezera). Blok až ZA ≤1549 (obě media platí <600). */
@media (max-width: 599.98px) {
  .hb-section.hb-alt { padding-top: var(--sect-gap-m); }
}


/* ==========================================================================
   NEWEST CAROUSEL + LATEST ARTICLES (Style 1) — nahrazuje starý .hb-split
   ========================================================================== */

/* Newest = "Now Trending" strip — dědí .hot-scroll / .hot-card / .scroll-btn z v12-sections.css,
   napojeno přes initScrollSystem('.hb-newest-scroll-wrap') v header.js. Žádné lokální styly netřeba.
   Nadpisy sekcí = .shorts-subhead + h2.shorts-subhead-label (sdílený komponent z v12-sections.css). */

.hb-newest-scroll-wrap {
  padding: 0px 0 6px;
}

/* Newest karty = šířka sloupce hlavního gridu (líc s mřížkou nad sekcí):
   ≥1550 ⅙ · 1250–1549 ⅕ · 1000–1249 ¼ · 900–999 ⅓ — stejný vzorec jako Hot rail (v12-sections.css).
   <900 zůstává base flex 0 0 250px z .hot-card (mobilní scroll pás). */
@media (min-width: 1550px) {
  .hb-newest-scroll-wrap .hot-card { flex-basis: calc((100% - 5 * 8px) / 6); }
}
@media (min-width: 1250px) and (max-width: 1549.98px) {
  .hb-newest-scroll-wrap .hot-card { flex-basis: calc((100% - 4 * 8px) / 5); }
}
@media (min-width: 1000px) and (max-width: 1249.98px) {
  .hb-newest-scroll-wrap .hot-card { flex-basis: calc((100% - 3 * 8px) / 4); }
}
@media (min-width: 600px) and (max-width: 999.98px) {
  .hb-newest-scroll-wrap .hot-card { flex-basis: calc((100% - 2 * 8px) / 3); }  /* 768→600 (2026-07-10) — lícuje se 3sloupcovým gridem */
}

/* Latest Articles — editorial karta B (čistá fotka, text pod ní). Headline list var. C zkoušen
   a VRÁCEN 2026-07-12 (Janovi se živě nelíbil). Šipky + fade dodává initScrollSystem (header.js). */
.hb-blog-scroll {
  display: flex;
  gap: var(--sp-2); /* 8 — blog karty jsou širší/vzdušnější než video raily (ty mají --gap-scroll 6) */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 0 0 6px;   /* konzistentní se spodním paddingem .hb-nf-row / .hb-tag-pills */
}
.hb-blog-scroll::-webkit-scrollbar { display: none; }
.hb-blog-card {
  position: relative;
  display: flex;              /* fotka (media) nahoře + textové tělo dole — editorial karta, mockup 2026-07-12_magazine-spodek.html var. B */
  flex-direction: column;
  flex: 0 0 460px;
  scroll-snap-align: start;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--bg-elevated);   /* tělo s textem = zvednutá plocha (mockup B); placeholder fotky nese media */
  text-decoration: none;
  color: inherit;
}
/* cinematic ring nad vším (jako video/shorts karty) */
.hb-blog-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: var(--kot-ring-inset);
  pointer-events: none;
}
/* Media = čistá fotka + chipy (editorial B: gradient a text z fotky pryč — titulek žije pod ní) */
.hb-blog-card-media {
  position: relative;
  aspect-ratio: 1.9 / 1;      /* široký filmový formát (předloha „Featured stories") */
  background: var(--kot-gradient-card);   /* placeholder než se fotka načte */
  overflow: hidden;           /* hover zoom imgu se ořezává na fotce — bez toho přetékal do titulku (Jan 2026-07-12) */
}
.hb-blog-card-img { position: absolute; inset: 0; }
.hb-blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;  /* horní část (rámuje obličeje), % drží cover bez černého pruhu */
  display: block;
}
/* Hover (desktop): lehký zoom obrázku — zpětná vazba karty bez traileru (Jan 2026-07-08);
   zoom ořezává overflow:hidden na .hb-blog-card-media (fix 2026-07-12: přetékal do titulku),
   0.1s = limit webu pro transitions */
@media (hover: hover) {
  .hb-blog-card-img img { transition: transform 0.1s; }
  .hb-blog-card:hover .hb-blog-card-img img { transform: scale(1.05); }
}
/* Chipy „Article" + čas čtení — NAHOŘE vlevo přes fotku; z-2 pod ringem (z-3, pointer-events none).
   Mobil <600 ukazuje jen Article (čas čtení se stěhuje do meta řádku pod titulkem — mockup B). */
.hb-blog-card-chips {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
}
/* solid jazyk jako duration pilulka (audit #26) */
.hb-blog-card-badge,
.hb-blog-card-rt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-sm, 6px);   /* = thumb badges (žádné pill kapsle — ladí se zbytkem karet) */
  background: rgba(0,0,0,0.85);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary); /* #e8e8e8 → e3 (P7 2026-07-11): sjednocení světlých šedých na token */
  white-space: nowrap;
}
/* Textové tělo POD fotkou (editorial B, mockup 2026-07-12): titulek + meta řádek. */
.hb-blog-card-body {
  padding: 11px 13px 12px;
}
.hb-blog-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.35em);   /* rezerva 2 řádků → meta řádek lícuje napříč kartami railu */
}
/* Meta řádek: vlevo čas čtení (mobil) / datum (desktop), vpravo „Read post ›" jako textová akce.
   Není to samostatný odkaz — klik nese celá karta (jeden <a>). */
.hb-blog-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.hb-blog-card-read {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-primary);
  font-weight: 500;
}
.hb-blog-card-read svg { flex-shrink: 0; }
/* Breakpoint obsah meta řádku (mockup B): mobil rt / desktop datum; rt chip na fotce jen desktop */
.hb-blog-card-foot-date { display: none; }
@media (min-width: 600px) {
  .hb-blog-card-foot-rt { display: none; }
  .hb-blog-card-foot-date { display: inline; }
  /* Desktop zhutnění (Jan 2026-07-12: karta 313px byla 2× vyšší než video karty) — titulek 1 řádek
     (jako starý overlay desktop) + širší filmový crop → karta ~261px. Mobil drží 1.9:1 + 2 řádky. */
  .hb-blog-card-media { aspect-ratio: 2.2 / 1; }
  .hb-blog-card-title { -webkit-line-clamp: 1; min-height: 0; }
}
@media (max-width: 599.98px) {
  .hb-blog-card-chips .hb-blog-card-rt { display: none; }
}
@media (hover: hover) {
  .hb-blog-card:hover .hb-blog-card-read { color: #fff; }
}
/* Šířky karet po tierech — sleduje žebřík gridu (menší tier = menší karta) */
@media (min-width: 1250px) and (max-width: 1549.98px) {
  .hb-blog-card { flex-basis: 420px; }
}
@media (min-width: 1000px) and (max-width: 1249.98px) {
  .hb-blog-card { flex-basis: 390px; }
}
@media (min-width: 768px) and (max-width: 999.98px) {
  .hb-blog-card { flex-basis: 360px; }
}
@media (max-width: 767.98px) {
  .hb-blog-card { flex-basis: 340px; }
  .hb-blog-card-title { font-size: 15px; }
}
/* Telefon <600 (Jan 2026-07-10): center snap railů (mandatory) — proximity+start nebylo znát,
   při scrollu vždy zaklapne karta na střed (jednotné se shorts railem, v12-sections.css).
   Blog karta 340→300: menší + symetrický peek (~35 px po stranách na 390px viewportu). */
@media (max-width: 599.98px) {
  .hb-blog-scroll,
  .hb-newest-scroll { scroll-snap-type: x mandatory; }
  .hb-blog-card { flex-basis: 300px; scroll-snap-align: center; }
  .hb-newest-scroll .hot-card { scroll-snap-align: center; }
}
/* ==========================================================================
   EXPLORE — Tag Pills (reuses header .new-actor-pill — identické se strip pilly)
   ========================================================================== */

/* Tag pilly = tentýž komponent jako header strip (.new-actor-pill, viz header.css) — žádný vlastní pill styl. */
.hb-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 6px;
}


/* ==========================================================================
   EXPLORE — Actress List (.hb-ai-*)
   ========================================================================== */

.hb-ai-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
  padding: 0 0 6px;   /* konzistentní se spodním paddingem .hb-nf-row / .hb-blog-scroll / .hb-tag-pills */
}
/* Mobil ≤767.98 (Jan 2026-07-10): 18 položek = moc dlouhý pruh → TOP 8 (telefon <600 = 1 sloupec × 8,
   zóna 600–767 = 2 sloupce × 4 řádky — sudý počet vychází beze zbytku). Zbytek vede „All pornstars"
   (.section-more <600, v zóně 600–767 view-all v subheadu). display:none = lazy obrázky se nestáhnou. */
@media (max-width: 767.98px) {
  .hb-ai-list .hb-ai-item:nth-child(n+9) { display: none; }
}

.hb-ai-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  background: var(--bg-item); /* P8 tokenizace */
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-md, 8px);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.hb-ai-item .hb-ai-rank {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim, #555555);
  min-width: 24px;
  text-align: center;
  flex-shrink: 0;
}
/* Medal ranks — jen barevné odlišení (menší, ne bold jako zbytek) */
.hb-ai-item:nth-child(1) .hb-ai-rank { color: var(--gold, #ffd700); }
.hb-ai-item:nth-child(2) .hb-ai-rank { color: var(--silver, #c0c0c0); }
.hb-ai-item:nth-child(3) .hb-ai-rank { color: var(--bronze, #cd7f32); }

.hb-ai-item .hb-ai-ava-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid transparent;
}
/* Vycentrovaný iniciál — podklad pod fotem; prosvítá když foto chybí / se nenačte. */
.hb-ai-item .hb-ai-initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a); /* #2a2a2a/#1a1a1a → warm */
  color: var(--text-secondary, #999999);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}
/* Foto navrch iniciálu (z-index); object-fit + zoom na obličej. onerror ho schová → iniciál. */
.hb-ai-item .hb-ai-ava {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  transform: scale(1.5);
  transform-origin: 50% 15%;
}

.hb-ai-item .hb-ai-info {
  flex: 1;
  min-width: 0;
}

.hb-ai-item .hb-ai-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #e3e3e3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hb-ai-item .hb-ai-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted, #8a8a8a);
  margin-top: 2px;
}
.hb-ai-item .hb-ai-meta span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.hb-ai-item .hb-ai-meta i { font-size: 10px; }

.hb-ai-item .hb-ai-rating {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
  line-height: 2;
}
.hb-ai-rating.great { background: rgba(76,175,80,0.15);  color: #4caf50; }
.hb-ai-rating.good  { background: rgba(139,195,74,0.15); color: #8bc34a; }
.hb-ai-rating.ok    { background: rgba(255,193,7,0.15);  color: #ffc107; }
.hb-ai-rating.poor  { background: rgba(255,87,34,0.15);  color: #ff5722; }

@media (hover: hover) {
  /* Hover = jen zesvětlení, bez animace (žádná transition/transform/shadow).
     Pozor: původní rgba(255,255,255,0.06) NAHRADILO solid #181818 skoro identickou
     barvou → hover byl neviditelný (Janův nález 2026-07-09); solid krok jako search input. */
  .hb-ai-item:hover {
    background: #1f1f1f; /* #1f1f1f → warm; drží +7 krok nad #181818 */
    border-color: rgba(255,255,255,0.1);
  }
  .hb-ai-item:hover .hb-ai-name { color: #fff; }
}


/* ==========================================================================
   FOOTER BLOCK — Ads + SEO Text (.hb-footer-block)
   ========================================================================== */

.hb-footer-block #after-boxes-ver2 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 0;
  height: auto;
  overflow: hidden;
  background: none;
}
.hb-footer-block #after-box-1,
.hb-footer-block #after-box-2,
.hb-footer-block #after-box-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  background: var(--border-subtle);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md, 8px);
  width: 312px;
  height: 262px;
  overflow: hidden;
}
.hb-footer-block #after-box-1 > *,
.hb-footer-block #after-box-2 > *,
.hb-footer-block #after-box-3 > * {
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}
.hb-footer-block #after-box-1 iframe,
.hb-footer-block #after-box-2 iframe,
.hb-footer-block #after-box-3 iframe,
.hb-footer-block #after-box-1 img,
.hb-footer-block #after-box-2 img,
.hb-footer-block #after-box-3 img {
  border-radius: var(--radius-md, 8px);
}

/* --- Footer links (inside footer block) --- */
.hb-footer-links {
  text-align: center;
  padding: 40px 0 8px;   /* velké horní odsazení — links jsou vizuálně oddělená tečka stránky */
  border-top: 1px solid var(--bg-chip);   /* oddělovací linka — mobil i desktop; stejný odstín jako chip výplň, viditelná na surface pásu (P8) */
}
.hb-footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hb-footer-links ul li {
  display: inline-flex;
  align-items: center;
}
/* Odkazy jako chip buttony (Jan 2026-07-12) — „trust chip" jazyk z mockupu F5:
   chip výplň + hairline jako pilly, ale RADIUS 6 (hranatější) + menší/tišší text,
   aby nesplývaly s mrakem tag pilulek přímo nad footerem (radius 999, 13px, #ddd).
   (Tečkové oddělovače nahrazeny chipy; bonus: tap plocha 17→30px.) */
.hb-footer-links ul li a {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-chip);
  border: 1px solid var(--border-hairline);
  color: var(--text-muted, #8a8a8a);
  text-decoration: none;
  font-size: 12px;
}
/* Hover: okamžitá změna, bez transition/animace */
@media (hover: hover) {
  .hb-footer-links ul li a:hover { color: var(--text-primary, #e3e3e3); background: var(--bg-hover); }
}
/* Vycentrované logo mezi chip odkazy a copyrightem (Jan 2026-07-12 — pozice nad odkazy
   zkoušena a vrácena; velikost doladěna 25→48→36/32: větší než header, menší než „billboard").
   Pevná výška + aspect-ratio z atributů = rezervace před načtením (CLS pattern). */
.hb-footer-logo {
  display: flex;
  justify-content: center;
  margin: 22px 0 10px;
}
.hb-footer-logo-img {
  height: 36px;   /* plná barva (Jan 2026-07-12): „křiklavost" řešila už redukce 48→36; grayscale watermark zkoušen a vrácen —
                     peak-end (poslední vjem = značka v plné identitě) + symetrie s barevným logem v headeru */
  width: auto;
}
@media (max-width: 599.98px) {
  .hb-footer-logo-img { height: 32px; }
}

.hb-footer-copy {
  color: var(--text-dim, #555555);
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* Hide default footer on homepage */
/* .home #wrapper-footer display:none → nahrazeno PHP podmínkou ve footer.php (audit 2026-07-10 SEO: duplicitní footer menu se na homepage už nerendruje do DOM) */

.hb-seo-text {
  padding: 10px 14px;
  color: var(--text-muted, #8a8a8a);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.3px;
  text-align: left;
  margin-bottom: 20px;
}
.hb-seo-text p {
  margin: 0 0 12px;
  padding: 0;
  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}
.hb-seo-text p:last-child { margin-bottom: 0; }
.hb-seo-text a {
  color: var(--text-body, #cccccc);
  text-decoration: none;
  border-bottom: 1px solid var(--border-medium);
  transition: color 0.1s, border-color 0.1s;
}
@media (hover: hover) {
  .hb-seo-text a:hover {
    color: var(--text-primary); /* #eee → e3 (P7 2026-07-11): sjednocení světlých šedých na token */
    border-color: rgba(255,255,255,0.3);
  }
}
.hb-seo-text strong,
.hb-seo-text b {
  color: var(--text-body, #cccccc);
  font-weight: 600;
}
.hb-seo-text h2,
.hb-seo-text h3 {
  color: var(--text-primary, #e3e3e3);
  font-size: 15px;
  font-weight: 600;
  margin: 16px 0 8px;
}
.hb-seo-text h2:first-child,
.hb-seo-text h3:first-child { margin-top: 0; }


/* ==========================================================================
   RESPONSIVE — Mobile (max-width: 767.98px)
   ========================================================================== */

/* Telefon (≤599.98) — úzký gutter spodních sekcí.
   (Rule `.hb-alt { padding: 18px 0; margin: 12px 0 }` SMAZÁNO 2026-07-10 — bylo MRTVÉ: base
   `.hb-section.hb-alt` (2 třídy) ho specificitou vždy přebil, na mobilu reálně platilo base 30.
   Telefonní rytmus teď řeší blok „≤1549 → 25" u base pravidla.) */
@media (max-width: 599.98px) {
  /* Body-pad override on phone */
  .hb-section .container-lg,
  .hb-footer-block .container-lg {
    padding-left: 6px;
    padding-right: 6px;
  }
}

@media (max-width: 767.98px) {

  /* Actress list — minmax(0,1fr), NE čisté 1fr: implicitní minimum auto = min-content
     itemu (~297px nowrap obsahu) a na <300px viewportu track přetekl stránku doprava (2026-07-09) */
  .hb-ai-list { grid-template-columns: minmax(0, 1fr); }

  /* Footer block (ads + SEO) */
  .hb-footer-block #after-boxes-ver2 {
    padding: 6px 0;
    gap: 10px;
  }
  .hb-footer-block #after-box-1,
  .hb-footer-block #after-box-2,
  .hb-footer-block #after-box-3 {
    width: 100%;
    max-width: 312px;
    height: auto;
    min-height: 120px;
  }
  .hb-seo-text {
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.6;
  }
}