/* ==========================================================================
   atrium.cz — Výpis „10 kroků k domu ATRIUM" (fáze 2)
   Předloha: https://atrium-marketing.lovable.app/10-kroku-k-domu-atrium
   Rozměry změřené v předloze, barvy z design systému HP (hp-redesign.css).

   Stránka jede na legacy „časové ose" (styly.css .casova_osa_*). Tenhle soubor
   ji přebíjí; scoped na .atr-kr-strana → jinde na webu se nic nemění.
   Šablonu používá jen modul 5 / kategorie 1 (system/vypis.php).
   ========================================================================== */

/* --- Hlavička stránky --------------------------------------------------- */
/* Stejná rodina jako rozcestníky (rozcestnik.css) — eyebrow + H1 60/75 + perex 18/29. */

.atr-kr-strana .obsah_vypis_10kroku_horni{
  background:#f4f7fb;
  padding:40px 0 24px;
}

.atr-kr-eyebrow{
  font-size:12px;
  font-weight:800;
  letter-spacing:2.4px;
  line-height:16px;
  text-transform:uppercase;
  color:var(--atr-blue-l);
  text-align:center;
  margin-bottom:8px;
}

.atr-kr-strana .h1_casova_osa{
  font-size:60px;
  line-height:75px;
  font-weight:800;
  color:var(--atr-ink);
}

.atr-kr-strana .blok_text_nad_clanky,
.atr-kr-strana .blok_text_nad_clanky p{
  font-size:18px;
  line-height:29px;
  color:var(--atr-muted);
}

.atr-kr-strana .blok_text_nad_clanky{
  max-width:832px;
  margin:16px auto 0;
}

/* --- Sekce osy ----------------------------------------------------------- */
/* Hlavička i osa leží na jednom světle modrém pruhu (jako v předloze). */

.atr-kr-strana .obsah_in_vypis_10kroku{
  background:#f4f7fb;
  padding:24px 0 64px;
}

.atr-kr-strana .obsah_in_vypis_10kroku .blok_sirky_webu{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 40px;
  box-sizing:border-box;
}

.atr-kr-strana .blok_casova_osa{
  position:relative;
  margin-bottom:0;
}

/* svislá osa — plná linka 2px (legacy měl tečkovanou) */
.atr-kr-strana .cara_casova_osa{
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:0;
  border-left:2px solid #b9cee1;
}

/* --- Položka + číslo ----------------------------------------------------- */
/* Karty se střídají vlevo/vpravo a překrývají se (legacy -180px), takže osa
   nemá dlouhé prázdné úseky. Šířka poloviny = calc(50% - 16px) jako předloha. */

.atr-kr-strana .polozka_casova_osa{
  display:block;
  width:calc(50% - 16px);
  padding:0;
  margin:-176px 0 0;
}

.atr-kr-strana .casova_osa_prvni{
  margin-top:0;
}

.atr-kr-strana .casova_osa_l{ float:left; }
.atr-kr-strana .casova_osa_p{ float:right; }

/* číslo kroku — 36px kolečko na ose, prstenec v barvě pozadí ho z ní „vyřízne" */
.atr-kr-strana .kruh_casova_osa{
  top:50%;
  width:36px;
  height:36px;
  line-height:36px;
  font-size:12px;
  font-weight:800;
  border-radius:50%;
  background-color:#006CB0;
  box-shadow:0 0 0 4px #f4f7fb,0 4px 14px rgba(0,108,176,.35);
}

.atr-kr-strana .casova_osa_l .kruh_casova_osa{ right:-34px; margin-top:-18px; }
.atr-kr-strana .casova_osa_p .kruh_casova_osa{ left:-34px;  margin-top:-18px; }

/* vodorovná spojnice kolečka s kartou — předloha ji nemá */
.atr-kr-strana .cara_cislo_casova_osa{ display:none; }

/* --- Karta --------------------------------------------------------------- */

/* globální a:hover podtrhává (default.css) — na kartě to nechceme */
.atr-kr-strana .polozka_casova_osa a,
.atr-kr-strana .polozka_casova_osa a:hover{
  text-decoration:none;
}

.atr-kr-strana .polozka_casova_osa_in{
  overflow:hidden;
  border-radius:8px;
  box-shadow:0 1px 2px rgba(15,40,80,.06);
  transition:transform .3s var(--atr-ease),box-shadow .3s var(--atr-ease);
}

.atr-kr-strana .polozka_casova_osa:hover .polozka_casova_osa_in{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(15,40,80,.14);
}

/* Výšku fotky dopočítával JS (pomocný span + inline height) — poměr 16:9 umí CSS. */
.atr-kr-strana .pomer_fotek_casova_osa{ display:none; }

.atr-kr-strana .obr_casova_osa{
  aspect-ratio:16/9;
}

.atr-kr-strana .obr_casova_osa_in{
  height:100% !important;        /* přebít inline height z JS */
  line-height:0 !important;
  background-color:#e8eef5;
}

.atr-kr-strana .obr_casova_osa img{
  transition:transform .7s var(--atr-ease);
}

.atr-kr-strana .polozka_casova_osa:hover .obr_casova_osa_in img{
  transform:scale(1.05);
}

/* textová část — modrá linka je nahoře (legacy ji měl svisle u kraje karty) */
.atr-kr-strana .polozka_casova_osa_in_obsah{
  padding:24px;
  border-top:2px solid #006CB0;
}

.atr-kr-strana .casova_osa_l .polozka_casova_osa_in_obsah{
  text-align:right;
  border-right:0;
}

.atr-kr-strana .casova_osa_p .polozka_casova_osa_in_obsah{
  text-align:left;
  border-left:0;
}

.atr-kr-strana .nazev_casova_osa{
  font-size:20px;
  line-height:28px;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--atr-ink);
  margin:0;
}

.atr-kr-strana .obal_p_casova_osa,
.atr-kr-strana .obal_p_casova_osa p{
  font-size:14px;
  line-height:23px;
  font-weight:600;
  color:#5A7A96;
}

.atr-kr-strana .obal_p_casova_osa{
  margin-top:12px;
}

/* --- „Zjistit více" ------------------------------------------------------ */
/* Šipka míří od karty k okraji: u levých karet doleva, u pravých doprava. */

.atr-kr-vice{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:16px;
  font-size:12px;
  line-height:16px;
  font-weight:800;
  letter-spacing:1.68px;
  text-transform:uppercase;
  color:#006CB0;
}

.atr-kr-vice::after{
  content:"";
  width:16px;
  height:16px;
  flex:0 0 auto;
  background:currentColor;
  transition:transform .3s var(--atr-ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.atr-kr-strana .casova_osa_l .atr-kr-vice{ flex-direction:row-reverse; }
.atr-kr-strana .casova_osa_l .atr-kr-vice::after{ transform:rotate(180deg); }

.atr-kr-strana .casova_osa_l .polozka_casova_osa:hover .atr-kr-vice::after,
.atr-kr-strana .casova_osa_l:hover .atr-kr-vice::after{ transform:rotate(180deg) translateX(4px); }
.atr-kr-strana .casova_osa_p:hover .atr-kr-vice::after{ transform:translateX(4px); }

/* --- CTA pod osou -------------------------------------------------------- */

.atr-kr-cta{
  clear:both;
  text-align:center;
  padding-top:40px;
}

.atr-kr-cta .atr-btn{
  height:52px;
  padding:0 32px;
  text-transform:uppercase;
}

/* --- Responzivita -------------------------------------------------------- */
/* Do 860 px (legacy breakpoint osy) se osa přesune doleva a karty pod sebe. */

@media only screen and (max-width:1100px){
  .atr-kr-strana .h1_casova_osa{ font-size:44px; line-height:54px; }
  .atr-kr-strana .polozka_casova_osa{ margin-top:-120px; }
}

@media only screen and (max-width:860px){
  .atr-kr-strana .obsah_in_vypis_10kroku .blok_sirky_webu{ padding:0 20px; }

  .atr-kr-strana .cara_casova_osa{
    left:19px;
    transform:none;
  }

  .atr-kr-strana .polozka_casova_osa{
    float:none !important;
    width:auto;
    margin:0 0 24px 56px;
    text-align:left;
  }

  .atr-kr-strana .casova_osa_prvni{ margin-top:0; }

  .atr-kr-strana .kruh_casova_osa{
    position:absolute !important;
    top:16px;
    left:-55px !important;
    right:auto !important;
    display:block;
    margin:0;
  }

  .atr-kr-strana .polozka_casova_osa_in_obsah{
    text-align:left !important;
    padding:20px;
  }

  .atr-kr-strana .casova_osa_l .atr-kr-vice{ flex-direction:row; }
  .atr-kr-strana .casova_osa_l .atr-kr-vice::after{ transform:none; }
  .atr-kr-strana .casova_osa_l:hover .atr-kr-vice::after{ transform:translateX(4px); }
}

@media only screen and (max-width:600px){
  .atr-kr-strana .h1_casova_osa{ font-size:34px; line-height:42px; }
  .atr-kr-strana .obsah_vypis_10kroku_horni{ padding:24px 0 16px; }
  .atr-kr-strana .blok_text_nad_clanky,
  .atr-kr-strana .blok_text_nad_clanky p{ font-size:16px; line-height:26px; }
}

@media (prefers-reduced-motion:reduce){
  .atr-kr-strana .polozka_casova_osa_in,
  .atr-kr-strana .obr_casova_osa img,
  .atr-kr-vice::after{ transition:none; }
  .atr-kr-strana .polozka_casova_osa:hover .polozka_casova_osa_in{ transform:none; }
  .atr-kr-strana .polozka_casova_osa:hover .obr_casova_osa_in img{ transform:none; }
}