/* ==========================================================================
   pages/front-page.css — sekcje wyłącznie strony głównej.

   Reszta strony głównej korzysta z komponentów współdzielonych
   (hero, karty produktu i artykułu, pas zaufania, FAQ, pasy CTA i lokalny)
   — te żyją w assets/css/components.css.
   ========================================================================== */


/* ==========================================================================
   1. „Jak możemy Ci pomóc?" — rozgałęzienie na dwie ścieżki
   --------------------------------------------------------------------------
   Dwie równorzędne karty: zakup online (afiliacja) i rozmowa z agentem (lead).
   To pierwsza decyzja, jaką podejmuje użytkownik, więc karty mają równą wagę
   wizualną i własne CTA — żadna nie jest „domyślna".
   ========================================================================== */
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
@media (max-width:760px){.help-grid{grid-template-columns:1fr}}

.help-card{
  display:flex;align-items:flex-start;gap:clamp(16px,2.2vw,22px);
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(22px,3vw,30px);
  box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.help-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:#DDD6F6}
.help-card__icon{
  flex:0 0 auto;width:56px;height:56px;border-radius:50%;
  background:var(--violet-soft);
  display:flex;align-items:center;justify-content:center;
}
.help-card__icon svg{width:28px;height:28px}
.help-card__body{flex:1 1 auto;min-width:0}
.help-card h3{font-size:clamp(17px,2vw,19px);margin:2px 0 8px;line-height:1.3}
.help-card p{font-size:14.5px;line-height:1.6;color:var(--slate);margin:0 0 18px}

@media (max-width:480px){
  .help-card{flex-direction:column}
  .help-card__icon{width:50px;height:50px}
}

.home-products-more{
  margin:clamp(22px,3vw,30px) 0 0;
  text-align:center;
}


/* ==========================================================================
   2. „Dlaczego myTriplo?" — pas czterech powodów
   --------------------------------------------------------------------------
   Jasny pas przełamujący biel strony (--mist). Cztery pozycje w rzędzie, bez
   obramowań — to nie karty do klikania, tylko argumenty do przeczytania.
   Treść bierze się z pól ACF cecha_{1..4}_* — tych samych, co w v1.
   ========================================================================== */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,36px)}
@media (max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.why-grid{grid-template-columns:1fr}}

.why-item{display:flex;align-items:flex-start;gap:14px}
.why-item__icon{
  flex:0 0 auto;width:46px;height:46px;border-radius:var(--radius-sm);
  background:var(--surface);box-shadow:var(--shadow-xs);
  display:flex;align-items:center;justify-content:center;
}
.why-item__icon svg{width:24px;height:24px}
.why-item__body{min-width:0}
.why-item h3{font-size:15.5px;margin:3px 0 5px;line-height:1.35}
.why-item p{font-size:13.5px;line-height:1.55;color:var(--slate);margin:0}

/* Stagger reveal (JS: [data-reveal-group] / [data-reveal]).
   Stan bazowy jest WIDOCZNY — animacja włącza się tylko wtedy, gdy JS doda
   .is-reveal-on, więc bez skryptu nic nie znika. */
.why-grid.is-reveal-on .why-item{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;
  transition-delay:calc(var(--d,0) * 90ms);
}
.why-grid.is-reveal-on .why-item.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .why-grid.is-reveal-on .why-item{opacity:1;transform:none;transition:none}
}


/* ==========================================================================
   3. Sekcja agenta — zdjęcie w przesuniętej ramce + korzyści
   --------------------------------------------------------------------------
   Zdjęcie ma za sobą obrys w kolorze marki przesunięty w górę i w lewo — ten
   sam zabieg co w makiecie. Obrys jest dekoracją (::before), więc nie wpływa
   na układ ani nie trafia do czytników ekranu.
   ========================================================================== */
.agent-promo{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(28px,5vw,64px);align-items:center;
}
@media (max-width:860px){
  .agent-promo{grid-template-columns:1fr;gap:clamp(28px,5vw,40px)}
}

.agent-promo__media{position:relative;isolation:isolate}
.agent-promo__frame{
  position:relative;z-index:1;
  border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-hover);
  background:var(--mist);
}
.agent-promo__frame img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;object-position:center top}
.agent-promo__media::before{
  content:"";position:absolute;z-index:0;
  inset:-14px 14px 14px -14px;
  border:2px solid var(--violet);border-radius:var(--radius-lg);
  opacity:.55;
}
/* Brak zdjęcia w ACF — zamiast pustej ramki gradient marki z ikoną agenta. */
.agent-promo__placeholder{
  aspect-ratio:4/5;background:var(--grad);
  display:flex;align-items:center;justify-content:center;
}
.agent-promo__placeholder svg{width:88px;height:88px}

.agent-promo__body h2{font-size:clamp(24px,3vw,34px);line-height:1.15;margin:0 0 16px}
.agent-promo__body>p{color:var(--slate);font-size:15.5px;line-height:1.65;margin:0 0 24px;max-width:52ch}
.agent-promo__body .check-list{margin-bottom:28px}

@media (max-width:860px){
  /* Na wąskim ekranie portret nie musi być pełnej wysokości — ograniczamy go,
     żeby treść nie uciekała poniżej pierwszego przewinięcia. */
  .agent-promo__media{max-width:380px}
  .agent-promo__frame img,
  .agent-promo__placeholder{aspect-ratio:1/1}
}