/* ============================================================
   iTech Media — Plasarea iconurilor lângă titluri
   ------------------------------------------------------------
   Regula casei: iconul stă ÎN DREPTUL titlului, pe aceeași linie cu
   el, optic centrat pe PRIMA linie a titlului. Niciodată deasupra,
   niciodată dedesubt, și niciodată centrat pe blocul întreg când
   titlul se rupe pe două rânduri.

   Cum se implementează fără să turtim iconul:
   cutia de aliniere (`.ico-align`) e SEPARATĂ de icon și nu-i impune
   nicio dimensiune. Îi oferă doar înălțimea unei linii de titlu și îl
   centrează în ea. Iconul își păstrează width/height proprii și poate
   depăși simetric cutia — de aceea pare centrat pe prima linie chiar
   când e mai înalt decât ea.

   `calc(font-size * line-height)` în loc de `1lh`: merge în toate
   browserele și, mai important, se calculează în contextul corect
   chiar dacă cutia e un frate al titlului, nu un copil al lui.
   ============================================================ */

.ico-align {
    /* Înălțimea unei linii. Fiecare contextul o suprascrie cu metrica
       titlului de lângă care stă. */
    --itm-line: calc(1.0625rem * 1.75);

    display: grid;
    align-items: start;
    justify-items: center;
    width: max-content;
    flex-shrink: 0;
    height: var(--itm-line);
}

/* CENTRAREA, și de ce nu merge „normal".

   Iconul e aproape întotdeauna MAI ÎNALT decât linia lângă care stă:
   un medalion de 64px lângă o linie de 44px. Asta înseamnă spațiu liber
   NEGATIV, iar în acest caz TOATE mecanismele de centrare din CSS se
   opresc: `align-items:center` se comportă ca `start` (regula „safe",
   ca să nu taie conținut), `place-content:center` centrează pista, nu
   elementul, iar marginile `auto` se rezolvă la zero. Măsurat pe toate
   trei: 10px, -10px, -10px. Niciuna nu nimerește linia.

   Soluția nu depinde de niciun mecanism de aliniere: iconul urcă cu
   jumătate din PROPRIA înălțime (procentele din `translate` se referă
   la propria dimensiune) și coboară cu jumătate de linie. Rezultatul
   e centrul iconului exact pe centrul primei linii, indiferent cât de
   mare e iconul. Măsurat: 0px.

   Folosim `translate`, nu `transform`, ca să nu ocupăm proprietatea de
   care depind efectele de survolare ale medalioanelor. */
.ico-align > * {
    translate: 0 calc(-50% + var(--itm-line) / 2);
}

/* ------------------------------------------------------------
   1. HERO-UL PAGINILOR DE SERVICIU (toate cele 27)
   Iconul de 64px stătea ca bloc deasupra titlului, la 20px distanță.
   ------------------------------------------------------------ */
.rd-detail-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 1rem;

    /* O SINGURĂ sursă de adevăr pentru metrica titlului, folosită și de
       titlu, și de cutia de aliniere. Altfel cele două se despart tăcut.

       Valorile vin din stilul inline care era pe h1 în servicii.php și
       care era INVALID: `clamp(1.7rem,2.6vw+.6rem,2.4rem)` — CSS cere
       spații în jurul lui `+` într-o expresie matematică. Browserul îl
       respingea, deci titlul cădea pe scara mai mică din .rd-h-section.
       Aici e scris corect, deci titlul are în sfârșit dimensiunea
       intenționată. */
    --rd-detail-fs: clamp(1.7rem, 2.6vw + 0.6rem, 2.4rem);
    --rd-detail-lh: 1.15;
}
.rd-detail-title {
    font-size: var(--rd-detail-fs);
    line-height: var(--rd-detail-lh);
    margin: 0;
    min-width: 0;   /* altfel titlul lung nu se poate rupe în flex */
}
.rd-detail-head > .ico-align {
    --itm-line: calc(var(--rd-detail-fs) * var(--rd-detail-lh));
}

/* Iconul se oprește la înălțimea unei linii de titlu, în loc să depășească
   simetric cutia cu cei 64px ai lui. Folosește exact metrica de mai sus, deci
   cele două nu se pot desincroniza. Glifa și raza păstrează proporțiile pe care
   le aveau în cutia de 64px: 40%, respectiv 25% din latură. */
.rd-detail-head .rd-detail-icon {
    width: calc(var(--rd-detail-fs) * var(--rd-detail-lh));
    height: calc(var(--rd-detail-fs) * var(--rd-detail-lh));
    border-radius: calc(var(--rd-detail-fs) * var(--rd-detail-lh) * 0.25);
    font-size: calc(var(--rd-detail-fs) * var(--rd-detail-lh) * 0.4);
}

@media (max-width: 575.98px) {
    /* Gap-ul rămâne mai mic pe ecran îngust. Dimensiunea iconului nu mai are
       nevoie de override: derivă din metrica titlului, care scade oricum. */
    .rd-detail-head { gap: 12px; }
}

/* ------------------------------------------------------------
   2. CARDURILE DE FINDER („Spune-ne care e provocarea ta")
   Cardul e flex-column, deci iconul cădea deasupra întrebării.
   Le punem pe același rând, iconul centrat pe prima linie.
   ------------------------------------------------------------ */
.rd-finder-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.rd-finder-head > .ico-align {
    --itm-line: calc(1.05rem * 1.3);   /* .rd-finder-q: 1.05rem / 1.3 */
}
.rd-finder-head > .rd-finder-q {
    margin: 0;
    min-width: 0;
}

/* Medalionul de 52px era de 2,4x inaltimea liniei de titlu (~21,8px) si dadea
   impresia ca iconul e subiectul cardului, nu intrebarea. Il derivam din aceeasi
   metrica: 1,65 linii. Depaseste simetric cutia .ico-align, deci ramane centrat
   pe prima linie, dar nu mai striveste titlul. Sub ~30px glifele Font Awesome
   devin ilizibile la 14px, de aceea nu coboram mai jos. */
.rd-finder-head > .ico-align > .rd-finder-ic {
    width: calc(var(--itm-line) * 1.65);
    height: calc(var(--itm-line) * 1.65);
    border-radius: calc(var(--itm-line) * 0.45);
    font-size: calc(var(--itm-line) * 0.72);
}

/* ------------------------------------------------------------
   VERIFICARE: iconurile nu au voie să fie turtite.
   Medalioanele sunt pătrate cu colțuri rotunjite, deci width trebuie
   să rămână egal cu height. Nu punem niciodată width + height +
   aspect-ratio pe același element: câștigă dimensiunile, iar forma
   se deformează.
   ------------------------------------------------------------ */
.rd-detail-icon,
.rd-finder-ic {
    aspect-ratio: auto;   /* dimensiunile explicite rămân sursa de adevăr */
}