/**
 * Cosmetic overrides pro články, kde nám chybí data:
 *   - articleMainImageUrl je null (CSV neměl section-image) → gradient místo šedé
 *   - articleLikes je 0 (legacy field, nepoužíváme) → skryjeme heart counter
 *   - Heart ikona je Font Awesome solid, který už ve webu není (přešli jsme na
 *     Phosphor) → schováme prázdný `<i>` element
 *
 * Tohle je TECH DEBT — viz memory `project_2themoon_admin.md`.
 * V refactoru frontendu (po stabilizaci obsahu) tohle nebudeme potřebovat.
 */

/* Default gradient pozadí pro článkové dlaždice bez obrázku */
.section-bg-img4 {
  background-color: #f3f6fb;
  background-image: linear-gradient(
    135deg,
    rgba(40, 184, 252, 0.08) 0%,
    rgba(0, 105, 217, 0.04) 100%
  );
}

/* Likes counter zobrazen — admin teď spravuje hodnotu (pole `likes` v DB).
 * Heart ikona se mapuje přes Phosphor shim (icons.min.css). */

/* Hero CTA button (kruhové tlačítko vedoucí na #calculation) — ikona vždy
 * proporcionálně 50 % šířky tlačítka, nezávisle na rozlišení/breakpointu.
 * Použity container queries: `.lb-primary` je containerem, `cqw` jednotka pak
 * udává procentní podíl šířky kontejneru. */
.lb-primary:not(.second) {
  container-type: inline-size;
}
.ul-section-primary > li.li-button .lb-primary:not(.second) > a > .div-center > i {
  font-size: 35cqw;
  line-height: 1;
}

/* Hero slider-nav ikony (Koupě / Výstavba / Rekonstrukce / Refinancování / Úvěr…) —
 * jednotný proporcionální sizing 35 % šířky `.li-icon` kontejneru přes container query.
 * Nahrazuje vendor breakpoint-specific pt hodnoty (12pt/10pt/9pt) jednou škálovatelnou
 * pravidlem. */
ul.ul-slider-nav ul.ul-slider-nav-body > li.li-icon {
  container-type: inline-size;
}
ul.ul-slider-nav ul.ul-slider-nav-body > li.li-icon > div.div-center > i {
  font-size: 35cqw;
  line-height: 1;
}

/* Sekce #about — větší vertikální mezera mezi heading textem a benefit gridem.
 * Posun přes margin-bottom na col-12 s headingem — všechny benefity v row pak
 * shiftnou rovnoměrně, layout zachovaný (předchozí pokus přes mt na první
 * benefit lámal flex row, druhý benefit zůstával nahoře). */
#about .col-6 > .div-row > .col-12:first-child {
  margin-bottom: 40px;
}
@media (max-width: 991px) {
  #about .col-6 > .div-row > .col-12:first-child { margin-bottom: 20px; }
}

/* Sekce „PROČ HYPOTÉKA OSTRAVA“ — 4 service tiles s ikonou v kruhovém `.div-circle`.
 * Sjednocuje ikonu na 35 % šířky kruhu + tvrdě centruje napříč všemi
 * úrovněmi (li-icon → outer div-center → div-circle → inner div-center → i).
 * Vendor `.div-center` má místy konfliktní rules (justify-content:end), proto
 * ho na všech relevantních úrovních forceujeme grid place-items:center. */
ul.ul-services > li.li-icon {
  display: grid;
  place-items: center;
}
ul.ul-services > li.li-icon > div.div-center {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
ul.ul-services li.li-icon .div-circle {
  container-type: inline-size;
  display: grid;
  place-items: center;
}
ul.ul-services li.li-icon .div-circle > div.div-center {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
ul.ul-services li.li-icon .div-circle > div.div-center > i {
  font-size: 30cqw;
  line-height: 1;
  display: block;
  /* Phosphor glyphy mají v em-boxu mírný vertikální offset — text-align doplňuje
   * horizontální zarovnání pro inline metriku. */
  text-align: center;
}

/* Sekce #services („S čím Vám zaručeně pomůžeme?") — service cards s ikonou
 * v kruhovém `li.li-icon` (90×90 default, 70×70 mobile, abs positioned).
 * Ikona 35 % šířky kruhu napříč všemi breakpointy + grid centrování. */
ul.ul-services-card > li.li-icon {
  container-type: inline-size;
  display: grid;
  place-items: center;
}
ul.ul-services-card > li.li-icon > div.div-center {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
ul.ul-services-card > li.li-icon > div.div-center > i {
  font-size: 30cqw;
  line-height: 1;
  display: block;
  text-align: center;
}

/* Sekce „PRŮBĚH SPOLUPRÁCE / Jednoduchý proces krok za krokem" — 4 kroky timeline
 * s ikonou v `.div-circle-action.success` (70×70 kruh).
 * Vendor 13pt → cqw 35 % šířky kruhu napříč breakpointy + grid centrování. */
ul.ul-spider > li ul.ul-spider-body > li .div-circle-action {
  container-type: inline-size;
  display: grid;
  place-items: center;
}
ul.ul-spider > li ul.ul-spider-body > li .div-circle-action > div.div-center {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
ul.ul-spider > li ul.ul-spider-body > li .div-circle-action > div.div-center > i {
  font-size: 30cqw;
  line-height: 1;
  display: block;
  text-align: center;
}

/* Hero karousel obrázků (Koupě / Výstavba / Rekonstrukce / Refinancování / Úvěr) —
 * Vendor má pro `.div-home-image img` desítky responsive %-overrides, ale chybí
 * jim `max-width/max-height` constrains. U buněk se dvěma obrázky (Rekonstrukce
 * = workers.webp + house5.webp overlay) jeden z obrázků přetéká přes container
 * a vendor je pak ořeže. Vynucuju "fit-into-container" pro každou buňku. */
.div-home-image .div-home-body {
  overflow: visible;
}
.div-home-image .div-home-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* `.second` (workers overlay) — fixní bottom alignment, max výška 85 % */
.div-home-image .div-home-body img.second {
  max-height: 85%;
  max-width: 90%;
}

/* Hero na mobile — bank logos slider pinned na DNO viewport (jako na desktopu).
 * Bez tohoto override vendor `.div-home-logos{display:none}` v některých
 * breakpointech sekci skryje, nebo `bottom:0` nesedí. */
@media (max-width: 767px) {
  section.home .div-home-logos {
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    height: 60px !important;
    z-index: 5;
  }
}

/* Hero sekce — výška na mobile.
 * `100svh` (small viewport height) = stabilní hodnota viditelné plochy
 * KDYŽ JE URL BAR VIDITELNÝ (= initial state). To je přesně to, co chceme:
 * při prvním načtení webu je hero stejné jako visible viewport, takže
 * bank logos `bottom:0` jsou na dně viditelné plochy. Po scrollu se URL bar
 * skryje a viewport se zvětší, ale `svh` zůstává stejný (bez jump).
 * Vendor calc(var(--vh,1vh)*100) je fallback. */
@supports (height: 100svh) {
  section.home {
    height: 100svh !important;
  }
}

/* === REFERENCE KLIENTŮ — grid layout (Option A) ============================
 * Plně přepracovaná sekce: full-width header s rating badge, grid recenzí
 * (3 cols desktop / 2 tablet / 1 mobile), CTA tlačítko centrovaně dole. */

/* Větší vertikální mezera od předchozí sekce — vendor default `pt` 100px je málo. */
section#references.pt,
section#team.pt,
section#calculation.pt,
section#cooperation.pt,
section#services.pt,
section#info.pt {
  padding-top: 160px;
}
@media (max-width: 991px) {
  section#references.pt,
  section#team.pt,
  section#calculation.pt,
  section#cooperation.pt,
  section#services.pt,
  section#info.pt { padding-top: 100px; }
}

/* Tlačítko „Další články" v sekci #articles — větší mezera od posledního článku */
.btn-load-more {
  margin-top: 60px;
}
@media (max-width: 991px) {
  .btn-load-more { margin-top: 30px; }
}

/* Header — heading vlevo, kompaktní rating badge vpravo */
#references .references-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  width: 100%;
}
#references .references-header-text {
  flex: 1 1 auto;
  min-width: 280px;
  max-width: 600px;
  height: auto !important;
}
/* Pravý sloupec headeru: rating badge + CTA tlačítko stacked vertikálně */
#references .references-rating-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 10px;
  flex-shrink: 0;
}
#references .references-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 50px;
  font-weight: 600;
  white-space: nowrap;
}
#references .references-rating-badge .count { font-size: 11pt; opacity: 0.85; }
#references .references-rating-badge .value { font-size: 14pt; font-weight: 700; }
#references .references-rating-badge .stars { display: inline-flex; gap: 2px; }
#references .references-rating-badge .stars i { color: #FBBC04 !important; font-size: 11pt; }
#references .references-rating-badge .label { font-size: 10pt; opacity: 0.9; padding-left: 8px; border-left: 1px solid rgba(255,255,255,0.3); }

/* Mobile — kompaktnější badge: schovat popisek a zmenšit padding/gap, jinak
 * by se přetahoval přes okraj obrazovky. */
@media (max-width: 575px) {
  #references .references-rating-badge {
    padding: 12px 16px;
    gap: 8px;
    font-size: 10pt;
  }
  #references .references-rating-badge .label { display: none; }
  #references .references-rating-badge .stars i { font-size: 10pt; }
}

/* Reviews grid */
#references .reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 60px;
  margin-bottom: 60px;
}
@media (max-width: 1199px) {
  #references .reviews-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 768px) {
  #references .reviews-grid { grid-template-columns: 1fr; }
}

/* Review karta */
#references .review-card {
  background-color: #f5f5f5;
  border-radius: 24px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
}
#references .review-card::before {
  content: "\e660"; /* ph-quotes-fill ozdobné */
  font-family: "Phosphor-Fill";
  position: absolute;
  top: 18px;
  right: 24px;
  font-size: 32pt;
  color: #e8e8e8;
  pointer-events: none;
}
#references .review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
body.dark #references .review-card {
  background-color: var(--background-color2);
}
#references .review-card .review-text {
  font-size: 11pt;
  line-height: 1.55;
  color: var(--font-color);
  font-weight: 500;
  margin: 0;
  /* Posun pod dekorativní ❝ ikonu v pravém horním rohu, ať se text nekryje. */
  padding-top: 36px;
  /* Limit délky textu na 7 řádků s elipsou. Bez `flex: 1` aby `scrollHeight`
   * vs `clientHeight` měřilo jen obsah a detekce overflow byla spolehlivá. */
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#references .review-card .review-footer {
  /* Pinnuje footer ke dnu karty (bez `flex: 1` na textu by se přilepil k textu) */
  margin-top: auto;
}
/* Expanded state — kliknutím "Číst celé" se line-clamp zruší a text se ukáže celý */
#references .review-card.expanded .review-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
/* Toggle button "Číst celé" / "Sbalit" — defaultně skrytý, JS přidá `.show`
 * pokud text reálně přetéká (scrollHeight > clientHeight). */
#references .review-card .review-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0;
  margin-top: -8px;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 10pt;
  cursor: pointer;
  text-align: left;
  align-self: flex-start;
  transition: color .2s ease;
}
#references .review-card .review-toggle.show { display: inline-block; }
#references .review-card .review-toggle:hover { color: #009bcb; }
#references .review-card .review-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
body.dark #references .review-card .review-footer { border-top-color: rgba(255,255,255,0.1); }
#references .review-card .review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
#references .review-card .review-avatar img { height: 16px; }
#references .review-card .review-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#references .review-card .review-name {
  margin: 0;
  font-weight: 600;
  color: var(--color-primary);
  font-size: 11pt;
}
#references .review-card .review-stars { display: inline-flex; align-items: center; gap: 6px; font-size: 9pt; }
#references .review-card .review-rating { font-weight: 700; color: var(--font-color); }
#references .review-card .review-stars i { color: #FBBC04 !important; font-size: 9pt; }

/* Skeleton placeholder než dorazí data */
#references .review-skeleton {
  min-height: 240px;
  background:
    linear-gradient(90deg, transparent, rgba(0,0,0,0.04), transparent) 0 0 / 200% 100%,
    #f5f5f5;
  animation: review-skeleton-shimmer 1.4s infinite linear;
}
#references .review-skeleton::before { content: none; }
@keyframes review-skeleton-shimmer { 0% { background-position: -200% 0, 0 0; } 100% { background-position: 200% 0, 0 0; } }

#references .reviews-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 12pt;
  color: var(--font-color);
  opacity: 0.7;
  padding: 40px 0;
}

/* „Zobrazit další recenze" — stejný styl jako „Další články" (.btn-load-more):
 * solid modrý pill 250×50, bílý text, primary color → tmavší modrá na hover. */
#references .reviews-load-more {
  width: 250px;
  height: 50px;
  margin-top: 0;
  margin-bottom: 30px;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 10pt;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color .4s linear;
}
#references .reviews-load-more:hover {
  background-color: #009bcb;
}
#references .reviews-load-more[hidden] { display: none; }
@media (max-width: 991px) {
  #references .reviews-load-more { width: 100%; }
}

/* Fade-in animace pro nově načtené review karty */
@keyframes review-card-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
#references .review-card-fade-in {
  animation: review-card-fade-in .4s ease-out both;
}

/* CTA tlačítko — kompaktní pill ve stylu rating badge, zelená = akce */
#references .reviews-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  background-color: #2b3;
  color: #fff;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .4s linear, transform .3s ease;
}
#references .reviews-cta:hover { background-color: #1b9528; transform: translateY(-2px); }
#references .reviews-cta i { color: #fff; font-size: 11pt; }
#references .reviews-cta .reviews-cta-text { display: inline-flex; align-items: center; }
#references .reviews-cta .reviews-cta-text .primary { font-size: 11pt; font-weight: 600; }
/* Subtitle "Děkujeme" schovaná pro kompaktní look — match rating badge */
#references .reviews-cta .reviews-cta-text .secondary { display: none; }

/* Tlačítko „Další články" — vendor `.btn-load-more` neměl hover efekt; doplňuji
 * stejný pattern jako ostatní tlačítka (background transition + tmavší modrá). */
.btn-load-more {
  transition: background-color .4s linear;
}
.btn-load-more:hover {
  background-color: #009bcb;
}

/* Form select dropdown caret (Co Vás čeká? / Schůzka). Vendor `.select-with-icon::after`
 * volal Font Awesome 6 Pro (`\f0d7`), ale FA Pro v projektu není — proto čtverec.
 * Přepínám na Phosphor-Light caret-down. Rotace `.open::after` (180°) je zachovaná
 * z vendor pravidel a vizuálně z dolů → nahoru caret. */
.select-with-icon::after {
  content: "\e136" !important; /* ph-caret-down */
  font-family: "Phosphor-Light" !important;
  font-weight: normal !important;
  font-size: 14pt;
  right: 25px;
}

/* Form select — sjednocuju vzhled s textovými inputy (.input-box .input-1):
 * 80px výška, 20px radius, 2px border #eee, fonty 14pt/600.
 * Vendor preload.min.css mělo malý 5px radius a tenký 1px border — nesedí. */
.input-box .select-with-icon select.input-1 {
  height: 80px !important;
  border-radius: 20px !important;
  border: 2px solid #eee !important;
  background-color: #fff !important;
  padding: 13px 47px !important;
  font-size: 14pt !important;
  font-weight: 600 !important;
  color: var(--font-color);
}
body.dark .input-box .select-with-icon select.input-1 {
  color: #fff;
  border: 2px solid #fff !important;
  background-color: var(--background-color2) !important;
}

/* Info tooltip (otazníčky vedle tabů a další) — vendor stylovala neutrální
 * šedou `#b9b9b9`, přepisuju na primární modrou ať sedí s brandem.
 * `api-bridge.css` se načítá PŘED `primary.min.css`, takže při stejné specificitě
 * vendor vyhrává — proto `!important` na barvy. */
.tooltip .tooltip-text {
  background-color: var(--color-primary) !important;
}
.tooltip .tooltip-text::after {
  border-color: var(--color-primary) transparent transparent transparent !important;
}
.tooltip.left .tooltip-text::after {
  border-color: transparent transparent transparent var(--color-primary) !important;
}
.tooltip.right .tooltip-text::after {
  border-color: transparent var(--color-primary) transparent transparent !important;
}

/* HYPOTEČNÍ KALKULAČKA tabs na mobile — vendor stackuje col-4 → col-md-12 (full
 * width pod sebou) ale nepřidává mezi ně mezeru. Decentní gap 12px. */
@media (max-width: 991px) {
  .calculator-tabs .div-row > .col-4 + .col-4 {
    margin-top: 12px;
  }
}

/* Desktop — vizuální mezera mezi taby. Vendor `.col-4` cols jsou těsně vedle
 * sebe; přidám horizontal padding na vnitřní `.div-center` ať se buttons (full
 * width) opticky oddělí. */
@media (min-width: 992px) {
  .calculator-tabs .div-row > .col-4 > .div-center {
    padding: 0 8px;
  }
}

/* HYPOTEČNÍ KALKULAČKA — tab buttons (Výpočet splátky / Refinancovat / Maximální úvěr).
 * Vendor styloval pouze active variantu (modrý pill), neaktivní tab byl prostý
 * text bez vizuální afordance. Doplňuji:
 *   - neaktivní: světle šedý pill (vidíš že je klikatelné)
 *   - hover na neaktivní: tmavší šedá
 *   - hover na aktivní: tmavší modrá (match jiným tlačítkům)
 *   - šířka 100 % kontejneru → stejná mezera mezi taby napříč různými šířkami textu */
.tab-button {
  border-radius: 25px;
  transition: background-color .3s linear, color .3s linear;
  width: 100%;
}
.tab-button:not(.active) {
  background-color: #f0f0f0;
}
.tab-button:not(.active):hover {
  background-color: #ddd;
}
.tab-button.active:hover {
  background-color: #009bcb;
}
body.dark .tab-button:not(.active) {
  background-color: var(--background-color4);
}

/* Filter pills nad seznamem článků (Bydlení od A do Z, Na co si dát pozor…) —
 * vendor neměl hover state. Doplňuji konzistentně:
 *   - non-active: světle šedá `#eee` → tmavší `#ddd` na hover
 *   - active: var(--color-primary) → `#009bcb` na hover (match ostatním btn) */
ul.ul-article-type > li {
  transition: background-color .4s linear, color .4s linear;
}
ul.ul-article-type > li:hover {
  background-color: #ddd;
}
ul.ul-article-type > li.active:hover {
  background-color: #009bcb;
}

/* Calculate modal popup CTA tlačítko (Zjistit přesnou nabídku / Spočítat úsporu /
 * Zjistit lepší řešení / Zjistit kolik získám) — pulzace stejná jako konzultace
 * (vendor `@keyframes pulse4`, zelená box-shadow). */
.div-modal.calculate .modal-content .div-button {
  animation: pulse4 2s infinite;
}

/* Calculate modal popup („Spočítat splátku" výsledek) — kruhový header avatar
 * `.div-modal-body` (150×150 desktop / 100×100 mobile). Ikona kalkulačky uvnitř
 * 35 % šířky kruhu napříč breakpointy + grid centrování. */
.div-modal.calculate .div-modal-body {
  container-type: inline-size;
  display: grid;
  place-items: center;
}
.div-modal.calculate .div-modal-body > div.div-center {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.div-modal.calculate .div-modal-body > div.div-center > i {
  font-size: 35cqw;
  line-height: 1;
  display: block;
  text-align: center;
}

/* Article tile detail button (kruh vpravo dole na každé článkové dlaždici) —
 * 80×80 default / 70×70 medium / 60×60 small / 50×50 smaller. Ikona 35 % šířky
 * kruhu napříč všemi breakpointy + grid centrování. */
.div-panel-article ul.ul-article-text > li.li-button-detail {
  container-type: inline-size;
  display: grid;
  place-items: center;
}
.div-panel-article ul.ul-article-text > li.li-button-detail > a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.div-panel-article ul.ul-article-text > li.li-button-detail > a > div.div-center {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.div-panel-article ul.ul-article-text > li.li-button-detail > a > div.div-center > i {
  font-size: 35cqw;
  line-height: 1;
  display: block;
  text-align: center;
}

/* HYPOTEČNÍ KALKULAČKA — tlačítko „Spočítat splátku" (pill 250×50px).
 * Ikona inline s textem — 35 % výšky tlačítka přes `cqh` jednotku.
 * Flex centrování zarovná ikonu vertikálně na střed textu (line-height nestačí). */
.div-panel-info-footer a.button {
  container-type: size;
}
.div-panel-info-footer a.button > div.div-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
}
.div-panel-info-footer a.button > div.div-center > i {
  font-size: 35cqh;
  line-height: 1;
}