/* ── Odvetvové landing pages (marketing-pre-*.html) ─────────────────────────
   Doplnok k project_page.css: H2/H3 hierarchia v .pd_text, zoznamy problémov,
   služby, postup spolupráce, prípadové štúdie, čísla, FAQ a CTA pás.
   Iba premenné tém (moodswitch.js): --White / --Black sú sémantické,
   --Purple-box, --Pill-bg a odtiene --pm-line / --pm-muted z project_page.css. */

main{
  /* čitateľnejší sekundárny text ako --pm-muted (aj v bielom mood-e) */
  --ind-text: color-mix(in srgb, var(--White) 76%, transparent);
  --ind-ease: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ── H1 — štýl .project_name, menší, aby sa dlhé kľúčové slovo zmestilo ──── */
.project_name.ind_title{
  margin-bottom: 0;
  font-size: clamp(48px, 8vw, 150px);
}

/* ── Nadpisy sekcií: H2 v .pd_text vyzerá ako pôvodný h4 (číslo + nadpis) ── */
/* main.css dáva h2 display font Lemon — tu vraciame FoundersGrotesk ako pri h4.
   grid-row cez 2 riadky: obsah .ind_body nadväzuje hneď pod úvodný odsek */
.pd_text > h2{
  grid-column: 1;
  grid-row: 2 / span 2;
  max-width: 14ch;
  margin: 0;
  font-family: 'FoundersGrotesk', sans-serif;
  font-size: clamp(26px, 2.5vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  font-feature-settings: normal;
  text-transform: uppercase;
}
.pd_text > h2::before{
  counter-increment: pd-section;
  content: counter(pd-section, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--pm-muted);
}
/* p.pd_lead namiesto h5 — rovnaký vzhľad, správna hierarchia */
p.pd_lead{ color: var(--White); }

/* Obsah pod úvodným odsekom — v pravom stĺpci mriežky .pd_text */
.ind_body{
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  margin-top: clamp(28px, 3vw, 48px);
}

/* Inline odkaz v texte — akcent témy */
.ind_body p a,
.ind_cta__more a{
  color: var(--Pill-bg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* ── Zoznam problémov (2 stĺpce, linka hore) ───────────────────────────── */
.ind_list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 48px);
  list-style: none;
}
.ind_list li{
  padding: 22px 0 26px;
  border-top: 1px solid var(--pm-line);
}
.ind_list h3,
.ind_rows h3{
  margin: 0 0 8px;
  font-size: clamp(18px, 1.35vw, 23px);
  font-weight: 500;
  line-height: 1.25;
}
.ind_list p,
.ind_rows p{
  font-size: clamp(15px, 0.9rem + 0.2vw, 18px);
  line-height: 1.55;
  color: var(--ind-text);
}

/* ── Kanály — riadky: názov vľavo, popis vpravo ────────────────────────── */
.ind_rows{ list-style: none; }
.ind_rows li{
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: 8px clamp(20px, 3vw, 48px);
  padding: 22px 0;
  border-top: 1px solid var(--pm-line);
}
.ind_rows li:last-child{ border-bottom: 1px solid var(--pm-line); }
.ind_rows h3{ margin: 0; }

/* ── Služby — karty s odkazmi na podstránky služieb ────────────────────── */
.ind_services{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  padding: 0 var(--pd-gutter);
  list-style: none;
}
.ind_service{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 2.4vw, 38px);
  border: 1px solid var(--pm-line);
  border-radius: 12px;
  background: var(--Purple-box);
  transition: background-color 300ms ease;
}
.ind_service:hover{ background: var(--Purple-box-hover); }
.ind_service h3{
  margin: 0;
  font-size: clamp(20px, 1.6vw, 28px);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
}
.ind_service p{
  flex: 1;
  font-size: clamp(15px, 0.9rem + 0.2vw, 18px);
  line-height: 1.55;
  color: var(--ind-text);
}
.ind_service__links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

/* Textový odkaz so šípkou (služby, prípadové štúdie) */
.ind_link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--pm-line);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--White);
  transition: border-color 300ms ease;
}
.ind_link::after{
  content: "→";
  transition: transform 600ms var(--ind-ease);
}
.ind_link:hover{ border-color: var(--White); }
.ind_link:hover::after{ transform: translateX(4px); }

/* ── Postup spolupráce — 4 kroky s veľkým číslom ───────────────────────── */
.ind_steps{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px clamp(20px, 2.4vw, 40px);
  width: 100%;
  padding: 0 var(--pd-gutter);
  list-style: none;
  counter-reset: ind-step;
}
.ind_step{
  counter-increment: ind-step;
  padding-top: 22px;
  border-top: 1px solid var(--pm-line);
}
.ind_step::before{
  content: counter(ind-step, decimal-leading-zero);
  display: block;
  margin-bottom: 18px;
  font-family: 'Lemon', 'FoundersGrotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 3.6vw, 64px);
  line-height: 1;
  color: var(--Pill-bg);
}
.ind_step h3{
  margin: 0 0 10px;
  font-size: clamp(18px, 1.35vw, 23px);
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
}
.ind_step p{
  font-size: clamp(15px, 0.9rem + 0.2vw, 18px);
  line-height: 1.55;
  color: var(--ind-text);
}

/* ── Prípadové štúdie — karta (široká alebo v mriežke) ─────────────────── */
.ind_cases{
  display: grid;
  grid-template-columns: repeat(var(--ind-cols, 3), minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  padding: 0 var(--pd-gutter);
  margin-bottom: 14px;
}
.ind_case{
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--pm-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--Purple-box);
}
.ind_case__media{
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--Client-purple);
}
.ind_case__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ind-ease);
}
.ind_case:hover .ind_case__media img{ transform: scale(1.04); }
.ind_case__body{
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(24px, 2.6vw, 44px);
}
.ind_case__title{
  margin: 0;
  font-family: 'Lemon', 'FoundersGrotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(24px, 2.2vw, 40px);
  line-height: 0.95;
  text-transform: uppercase;
}
.ind_case__body p:not(.pd_eyebrow){
  flex: 1;
  font-size: clamp(15px, 0.9rem + 0.25vw, 19px);
  line-height: 1.55;
  color: var(--ind-text);
}
.ind_case .project_meta__tags li{ font-size: 13px; }

/* Široká karta — obrázok vľavo, text vpravo */
.ind_cases--wide{ --ind-cols: 1; }
.ind_cases--wide .ind_case{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.ind_cases--wide .ind_case__media{ aspect-ratio: auto; min-height: 100%; }
.ind_cases--wide .ind_case__body{ justify-content: center; }
.ind_cases--wide .ind_case__title{ font-size: clamp(28px, 3vw, 54px); }
.ind_cases--two{ --ind-cols: 2; }

/* ── Čísla agentúry (rovnaké ako na domovskej stránke) ─────────────────── */
.ind_stats{
  width: 100%;
  padding: clamp(72px, 12vh, 150px) var(--pd-gutter) 0;
}
.ind_stats__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px clamp(20px, 2.4vw, 40px);
  margin-top: 20px;
  list-style: none;
}
.ind_stats__grid li{
  padding-top: 20px;
  border-top: 1px solid var(--pm-line);
}
.ind_stats__val{
  display: block;
  font-family: 'Lemon', 'FoundersGrotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 4.6vw, 84px);
  line-height: 0.95;
  color: var(--White);
}
.ind_stats__label{
  display: block;
  margin-top: 12px;
  font-size: clamp(15px, 0.9rem + 0.2vw, 18px);
  line-height: 1.4;
  color: var(--ind-text);
}

/* ── FAQ — natívne <details>, bez JS ───────────────────────────────────── */
.ind_faq{ list-style: none; }
.ind_faq__item{ border-top: 1px solid var(--pm-line); }
.ind_faq__item:last-child{ border-bottom: 1px solid var(--pm-line); }
.ind_faq__item summary{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
}
.ind_faq__item summary::-webkit-details-marker{ display: none; }
.ind_faq__item h3{
  margin: 0;
  font-size: clamp(18px, 1.35vw, 24px);
  font-weight: 500;
  line-height: 1.3;
}
/* plus → mínus */
.ind_faq__icon{
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}
.ind_faq__icon::before,
.ind_faq__icon::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--White);
  transition: transform 600ms var(--ind-ease);
}
.ind_faq__icon::after{ transform: rotate(90deg); }
.ind_faq__item[open] .ind_faq__icon::after{ transform: rotate(0deg); }
.ind_faq__answer{ padding: 0 42px 26px 0; }
.ind_faq__answer p{
  max-width: 62ch;
  font-size: clamp(15px, 0.9rem + 0.25vw, 19px);
  line-height: 1.6;
  color: var(--ind-text);
}

/* ── CTA pás ───────────────────────────────────────────────────────────── */
.ind_cta{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 32px clamp(32px, 5vw, 96px);
  align-items: end;
  margin: clamp(72px, 12vh, 150px) var(--pd-gutter) 0;
  padding: clamp(36px, 5.5vw, 96px);
  border: 1px solid var(--pm-line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--Pill-bg) 22%, transparent), transparent 55%),
    var(--Purple-box);
}
.ind_cta h2{
  margin: 0;
  font-family: 'Lemon', 'FoundersGrotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(38px, 5.2vw, 96px);
  line-height: 0.92;
  text-transform: uppercase;
}
.ind_cta__side{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.ind_cta__side > p:first-child{
  font-size: clamp(17px, 1rem + 0.35vw, 22px);
  line-height: 1.5;
}
.ind_cta__more{
  font-size: 15px;
  line-height: 1.6;
  color: var(--ind-text);
}
.ind_btn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 30px 16px;
  border-radius: 999px;
  background: var(--White);
  color: var(--Black);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 600ms var(--ind-ease);
}
.ind_btn::after{
  content: "→";
  transition: transform 600ms var(--ind-ease);
}
.ind_btn:hover{ transform: translateY(-2px); }
.ind_btn:hover::after{ transform: translateX(4px); }

.ind_link:focus-visible,
.ind_btn:focus-visible,
.ind_faq__item summary:focus-visible{
  outline: 2px solid var(--Pill-bg);
  outline-offset: 4px;
}

/* ── Responzivita ──────────────────────────────────────────────────────── */
@media (max-width: 1100px){
  .ind_services,
  .ind_cases:not(.ind_cases--wide){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind_steps,
  .ind_stats__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind_cta{ grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px){
  .project_name.ind_title{ font-size: clamp(32px, 10vw, 72px); }
  .pd_text > h2,
  .ind_body{ grid-column: 1; grid-row: auto; }
  .pd_text > h2{ max-width: none; }
  .ind_body{ margin-top: 8px; }
  .ind_list,
  .ind_services,
  .ind_steps,
  .ind_cases:not(.ind_cases--wide){ grid-template-columns: minmax(0, 1fr); }
  .ind_rows li{ grid-template-columns: minmax(0, 1fr); }
  .ind_cases--wide .ind_case{ grid-template-columns: minmax(0, 1fr); }
  .ind_cases--wide .ind_case__media{ aspect-ratio: 16 / 10; min-height: 0; }
  .ind_steps{ gap: 28px; }
  .ind_faq__answer{ padding-right: 0; }
}

@media (prefers-reduced-motion: reduce){
  .ind_link::after,
  .ind_btn,
  .ind_btn::after,
  .ind_case__media img,
  .ind_faq__icon::before,
  .ind_faq__icon::after{ transition: none; }
}