/* ==========================================================================
   Home. Hero-ul „două uși" vine din conceptul A, restul paginii coboară din
   același sistem: negru, un accent roz, fotografie monocromă, mult aer.
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);isolation:isolate;overflow:hidden}
.hero > *{min-width:0}

.doors{position:relative;display:grid;grid-template-rows:auto auto auto;min-height:0}
.door{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:44svh;min-width:0}
.door img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06);
  transition:transform 1.2s var(--ease),opacity 1.2s var(--ease),filter .7s var(--ease);
}
.door.org img{object-position:60% 30%}
.door.talent img{object-position:50% 35%}
/* gradientul ține textul lizibil pe orice cadru, deschis sau închis */
.door::after{
  content:"";position:absolute;inset:0;pointer-events:none;background:
    linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 26%,rgba(0,0,0,0) 55%),
    linear-gradient(180deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,0) 40%);
}
/* cusătura roz: singura culoare peste fotografii */
.seam{
  position:static;height:var(--seam);background:var(--pink);z-index:3;
  transform-origin:left;pointer-events:none;
}

.door-label{position:relative;z-index:2;padding:0 var(--gutter) clamp(22px,3.6vw,54px)}
/* ambele întrebări pe două rânduri: cu 14ch stânga cădea pe trei, iar blocurile
   porneau de la înălțimi diferite și ușile păreau dezechilibrate.
   ⚠ `ch` nu e de încredere pe un condensat cu majuscule: măsoară lățimea lui
   „0", nu a literelor mari. Lățimea se dă în em, raportat la font.
   ⚠ Fără `text-wrap:balance`: acela egalizează rândurile, deci ținea stânga pe
   trei rânduri chiar când încăpea pe două. */
.door-label h2{font-size:clamp(26px,2.9vw,46px);max-width:min(100%,8.7em)}
.door-label .link-arrow{margin-top:clamp(14px,1.6vw,22px)}

.hero-head{
  position:static;z-index:4;
  /* distanța față de bara fixă se calculează din înălțimea ei, nu se ghicește:
     coborârea barei lăsase 4px la 991px */
  padding:calc(var(--mast-h) + clamp(20px,4svh,40px)) var(--gutter) clamp(18px,3svh,28px);
}
.hero-head h1{max-width:22ch}
.hero-head .strap{
  margin-top:clamp(14px,1.6vw,22px);color:var(--pink);
  font-size:clamp(13px,1.15vw,17px);letter-spacing:.26em;text-transform:uppercase;font-weight:600;
  text-shadow:0 1px 18px rgba(0,0,0,.9);
}

/* --- Core Proposition ---------------------------------------------------- */
.prop h2{max-width:24ch}
.prop .cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--stack);margin-top:clamp(26px,3vw,48px)}

/* --- Specialists in Sport ------------------------------------------------ */
.spec .frame{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.4vw,40px)}
.spec .frame h2{max-width:22ch}
.spec .frame .prose{margin-top:var(--stack)}
/* banda panoramică ține formatul imaginii: lățime plină, înălțime fixată */
.band{position:relative;overflow:hidden;margin-top:var(--section-y)}
.band img{width:100%;height:clamp(320px,86vw,420px);object-fit:cover;filter:grayscale(1) contrast(1.06)}
.band-line{position:absolute;left:0;right:0;bottom:0;height:var(--seam);background:var(--pink)}
/* citatul stă în spațiul negativ al imaginii, care e negru pur; pe cadre mici
   imaginea nu mai are gol, deci citatul trece deasupra ei */
.band-quote{padding:clamp(20px,3vw,40px) var(--gutter) clamp(22px,5vw,34px)}
.band-quote p{font-size:var(--d3);max-width:11em}

.section.spec{padding-bottom:0}

/* --- How We Help --------------------------------------------------------- */
.help-grid{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:1px;background:var(--rule);margin-top:clamp(28px,3.4vw,48px);
}
.help-item{background:var(--ink);padding:clamp(24px,2.6vw,40px) clamp(20px,2.2vw,32px);min-width:0}
.help-item .num{
  font-family:var(--display);font-weight:800;font-size:clamp(46px,4.4vw,68px);
  color:var(--pink);line-height:.86;display:block;
  margin-bottom:clamp(16px,1.8vw,26px);padding-bottom:clamp(12px,1.4vw,18px);
  border-bottom:1px solid var(--rule);
}
.help-item h3{font-size:var(--d4);max-width:16ch}
.help-foot{margin-top:clamp(24px,3vw,40px)}

/* --- Our Approach -------------------------------------------------------- */
.approach .frame{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,56px)}

/* --- încheierea ---------------------------------------------------------- */
.close .big{
  font-size:clamp(20px,2.1vw,30px);line-height:1.4;font-weight:400;max-width:44ch;
}
.close .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3vw,44px);align-items:center}

/* ==========================================================================
   Praguri
   ========================================================================== */
/* (pragul 576 avea aici un max-width în `ch` care suprascria regula de bază;
   scos, lățimea se dă acum o singură dată, în em) */
@media (min-width:768px){
  .help-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band{display:grid}
  .band > *{grid-area:1/1}
  /* Spațiul negru al imaginii e la stânga, deci acolo stă citatul. Între el și
     subiectul fotografiei rămâneau peste 500px de negru la 1440, iar cele două
     nu se citeau ca un singur bloc (observat de Anca). Textul crește și o linie
     roz face puntea, în loc să mutăm citatul din grila paginii. */
  .band-quote{
    align-self:center;justify-self:start;max-width:52%;
    padding:0 var(--gutter) 0 max(var(--gutter),calc((100vw - var(--shell)) / 2 + var(--gutter)));
    z-index:2;
  }
  .band-quote p{font-size:clamp(34px,3.9vw,62px);max-width:12em}
  /* linia depășește lățimea citatului și înaintează în spațiul negru, până
     aproape de zona luminoasă a fotografiei: ea e puntea, nu mutarea textului */
  .band-quote p::after{
    content:"";display:block;height:var(--seam);background:var(--pink);
    width:min(126%,66vw);margin-top:clamp(20px,2.2vw,34px);
  }
  .approach .frame{grid-template-columns:auto minmax(0,1fr)}
  .spec .frame{grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,3vw,64px)}
}
@media (min-width:992px){
  /* ușile trec una lângă alta și se deschid la hover */
  .doors{display:flex;position:absolute;inset:0}
  .door{flex:1 1 0;min-height:0;transition:flex-grow .7s var(--ease)}
  .door.org img{object-position:60% 40%}
  .door.talent img{object-position:50% 40%}
  .doors:hover .door:not(:hover) img{filter:grayscale(1) contrast(1.06) brightness(.6)}
  .door:hover{flex-grow:1.35}
  .door:hover img{transform:scale(1.02)}
  .door.talent .door-label{margin-left:auto;text-align:right}
  .door.talent .door-label h2{margin-left:auto}
  .door.talent .door-label .link-arrow{margin-left:auto}

  .seam{
    position:absolute;top:0;bottom:0;left:50%;width:var(--seam);height:auto;
    margin-left:calc(var(--seam) / -2);transform-origin:top;
    transition:left .7s var(--ease);
  }
  .anim .seam{transform:scaleY(0)}
  .anim.go .seam{animation-name:drawY}
  .doors:has(.org:hover) .seam{left:57.4%}
  .doors:has(.talent:hover) .seam{left:42.6%}

  .hero-head{
    position:absolute;left:0;right:0;
    top:calc(var(--mast-h) + clamp(16px,5svh,64px));
    text-align:center;pointer-events:none;padding-top:0;
  }
  .hero-head h1{max-width:none;text-shadow:0 2px 40px rgba(0,0,0,.6)}
  .hero-head h1 span{display:block}
  .prop .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,3.4vw,64px)}
}
@media (min-width:1200px){
  .help-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Sub-linia din hero când poartă mesajul, nu doar semnătura.
   ⚠ Lecția din 06.09: am mutat propoziția care explică afacerea în locul unei
   semnături scurte și i-am lăsat stilul de 16px. Rolul se schimbase, scara nu.
   Pe o copertă de revistă subtitlul e de trei-patru ori mai mic decât titlul,
   nu de opt. */
.hero-head .strap--lead{
  font-size:clamp(18px,2.3vw,34px);
  letter-spacing:.01em;
  text-transform:none;
  font-weight:500;
  line-height:1.15;
  /* 22em lăsa 8px marjă la 1440 și rândul se rupea cu un cuvânt orfan */
  max-width:24em;
  margin-inline:auto;
}