/*
 * Cursa Speranței — stilul paginii de eveniment.
 *
 * Reproduce identitatea grafică din materialele campaniei: poster sportiv retro,
 * geometric, pe trei culori. Pagina se construiește în Elementor, dar aspectul stă
 * aici: secțiunile primesc clasele de mai jos din câmpul „CSS Classes” al
 * Elementorului, iar imaginile de fundal sunt referite relativ față de acest
 * fișier, ca template-ul importat să nu depindă de domeniu sau de numele
 * directorului temei.
 *
 * Culorile sunt luate direct din coverele primite de la client.
 */

:root {
    --cursa-portocaliu: #d33706;
    --cursa-crem: #efe9db;
    --cursa-albastru: #053ad4;
    --cursa-inchis: #2a1206;
}

/* ---------------------------------------------------------------------------
 * Tipografie comună
 * ------------------------------------------------------------------------- */

/* Ancorăm tipografia pe `.cursa-sectiune`, clasa pusă pe fiecare secțiune a
   paginii, nu pe o clasă de <body>: setările de pagină din Elementor nu au un
   câmp pentru clase, deci o clasă globală nu ar ajunge niciodată în HTML. */

.cursa-sectiune {
    color: var(--cursa-inchis);
}

.cursa-sectiune h1,
.cursa-sectiune h2,
.cursa-sectiune h3,
.cursa-titlu {
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 0.95;
}

.cursa-sectiune h1,
.cursa-titlu--mare {
    font-size: clamp(2.5rem, 9vw, 6rem);
}

.cursa-sectiune h2 {
    font-size: clamp(1.75rem, 5.5vw, 3.5rem);
}

/* Fraza-cheie, scoasă în evidență ca pe afiș. */
.cursa-slogan {
    font-size: clamp(1.15rem, 3vw, 1.75rem);
    font-weight: 700;
    font-style: italic;
    color: var(--cursa-portocaliu);
}

.cursa-lead {
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    line-height: 1.6;
    max-width: 62ch;
}

/* Accent albastru, cum apare „O ȘANSĂ ÎN PLUS” pe cover. */
.cursa-accent {
    color: var(--cursa-albastru);
}

/* ---------------------------------------------------------------------------
 * Bandă cu dungi de pistă — separatorul grafic al paginii
 * ------------------------------------------------------------------------- */

.cursa-pista {
    height: 14px;
    background: repeating-linear-gradient(
        90deg,
        var(--cursa-portocaliu) 0,
        var(--cursa-portocaliu) 46px,
        var(--cursa-crem) 46px,
        var(--cursa-crem) 50px
    );
}

/* Tabla de șah din colțul coverelor. */
.cursa-sah {
    height: 48px;
    background-image:
        linear-gradient(45deg, var(--cursa-portocaliu) 25%, transparent 25%, transparent 75%, var(--cursa-portocaliu) 75%),
        linear-gradient(45deg, var(--cursa-portocaliu) 25%, transparent 25%, transparent 75%, var(--cursa-portocaliu) 75%);
    background-size: 48px 48px;
    background-position: 0 0, 24px 24px;
    background-color: var(--cursa-crem);
}

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------- */

/* Fundalul hero-ului e crem plat: logo-ul campaniei stă acum ca imagine în
   Elementor, nu ca fundal decupat, ca să nu se mai suprapună cu titlul și să nu
   se mai taie pe ecrane înguste. */
.cursa-hero {
    position: relative;
    background-color: var(--cursa-crem);
    min-height: min(78vh, 680px);
}

.cursa-hero__meta {
    display: inline-block;
    padding: 10px 18px;
    background: var(--cursa-portocaliu);
    color: var(--cursa-crem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: clamp(0.85rem, 2vw, 1.05rem);
}

.cursa-hero__organizatori {
    font-size: 0.95rem;
    opacity: 0.8;
}

/* ---------------------------------------------------------------------------
 * Secțiuni de conținut
 * ------------------------------------------------------------------------- */

.cursa-sectiune {
    padding-block: clamp(48px, 8vw, 96px);
}

/* Banda portocalie plină, pentru „O ANTICURSĂ”. */
.cursa-banda {
    background: var(--cursa-portocaliu);
    color: var(--cursa-crem);
}

.cursa-banda h2,
.cursa-banda h3 {
    color: var(--cursa-crem);
}

.cursa-banda .cursa-slogan {
    color: var(--cursa-crem);
}

/* Citat mare, tip declarație de pe afiș. */
.cursa-declaratie {
    margin: 0;
    padding-left: 22px;
    border-left: 8px solid var(--cursa-albastru);
    font-size: clamp(1.25rem, 3.5vw, 2rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.15;
}

/* ---------------------------------------------------------------------------
 * Fotografii
 * ------------------------------------------------------------------------- */

.cursa-foto img,
.cursa-foto > div > img {
    display: block;
    width: 100%;
    height: auto;
}

/* Chenarul gros, ca decupajele de pe afiș. */
.cursa-foto--incadrata img {
    border: 6px solid var(--cursa-portocaliu);
}

/* Grupul de trei fotografii. Aranjarea în coloane o face Elementor; aici doar
   uniformizăm înălțimea, pentru că pozele primite au rapoarte diferite —
   una e peisaj, celelalte portret. */
.cursa-galerie img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * Zona de înscriere
 * ------------------------------------------------------------------------- */

.cursa-inscriere {
    background: var(--cursa-crem);
    scroll-margin-top: 100px;
}

/* Clasa stă pe coloana Elementor. Lățimea o dă secțiunea prin „content width”,
   așa că aici nu impunem max-width — s-ar bate cu layout-ul de coloane. */
.cursa-inscriere__cutie {
    padding: clamp(24px, 4vw, 40px);
    background: #fff;
    border: 3px solid var(--cursa-portocaliu);
}

/* Nota „o înscriere = un participant”, ca să nu apară discuții la start. */
.cursa-nota {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--cursa-crem);
    border-left: 6px solid var(--cursa-albastru);
    font-size: 0.95rem;
}

/* ---------------------------------------------------------------------------
 * Butonul principal
 * ------------------------------------------------------------------------- */

.cursa-buton .elementor-button,
a.cursa-buton {
    display: inline-block;
    padding: 18px 34px;
    background: var(--cursa-portocaliu);
    color: var(--cursa-crem);
    border: 0;
    border-radius: 0;
    font-size: clamp(1rem, 2.4vw, 1.25rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.cursa-buton .elementor-button:hover,
a.cursa-buton:hover,
.cursa-buton .elementor-button:focus-visible,
a.cursa-buton:focus-visible {
    background: var(--cursa-albastru);
    color: #fff;
    transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
 * Închiderea paginii
 * ------------------------------------------------------------------------- */

.cursa-final {
    background-color: var(--cursa-portocaliu);
    background-image: url("../img/cursa/cover-final.webp");
    background-size: cover;
    background-position: center;
    min-height: min(60vh, 520px);
}

.cursa-final__mesaj {
    display: inline-block;
    padding: 16px 22px;
    background: var(--cursa-crem);
    font-size: clamp(1.15rem, 3vw, 1.9rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.15;
}

/* ---------------------------------------------------------------------------
 * Blocul de pe prima pagină
 * ------------------------------------------------------------------------- */

.cursa-promo {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 48px);
    align-items: center;
    padding: clamp(28px, 5vw, 56px);
    background: var(--cursa-crem);
    border: 3px solid var(--cursa-portocaliu);
}

.cursa-promo__vizual {
    background-image: url("../img/cursa/hero.webp");
    background-size: cover;
    background-position: center;
    min-height: 220px;
}

.cursa-promo h2 {
    margin-top: 0;
}

@media (max-width: 767px) {
    .cursa-promo {
        grid-template-columns: 1fr;
    }

    /* Pe mobil vizualul trece deasupra textului: butonul rămâne aproape de deget. */
    .cursa-promo__vizual {
        order: -1;
        min-height: 160px;
    }
}

/* ---------------------------------------------------------------------------
 * Kit-ul de participare
 *
 * Lista se scrie ca listă normală într-un widget Text Editor, iar clasa
 * `cursa-kit` pusă pe widget transformă buline în casete bifate. Am ales varianta
 * asta în locul widget-ului Icon List ca textul să rămână editabil dintr-un singur
 * loc, fără să umble nimeni prin selectoare de iconuri.
 * ------------------------------------------------------------------------- */

/* Fraza care introduce lista trebuie să aibă aceeași dimensiune ca itemii.
   Fără regula asta rămânea la corpul implicit al temei și ieșea mai mică decât
   lista pe care o anunță. */
.cursa-kit p {
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    line-height: 1.45;
    margin-bottom: 18px;
}

.cursa-kit ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cursa-kit li {
    position: relative;
    padding-left: 44px;
    margin-bottom: 14px;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    line-height: 1.45;
}

.cursa-kit li:last-child {
    margin-bottom: 0;
}

/* Caseta. */
.cursa-kit li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 26px;
    height: 26px;
    border: 3px solid var(--cursa-portocaliu);
    background: #fff;
}

/* Bifa, desenată din două laturi de chenar rotite — fără font de iconuri. */
.cursa-kit li::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 0.28em;
    width: 8px;
    height: 15px;
    border-right: 3px solid var(--cursa-portocaliu);
    border-bottom: 3px solid var(--cursa-portocaliu);
    transform: rotate(45deg);
}

/* ---------------------------------------------------------------------------
 * Social media, la finalul paginii
 * ------------------------------------------------------------------------- */

/* Fără fundal propriu: secțiunea rămâne pe albul paginii. Deasupra ei stă
   înscrierea, care e crem, iar dedesubt banda cu careuri — pe alb, trecerea se
   citește singură, fără linie despărțitoare. Dacă e nevoie de altă culoare, se
   pune din Elementor, fără să se bată cu o regulă de aici. */

/* Selectorul e dublu intenționat: `.cursa-sectiune h2` are specificitate (0,1,1)
   și ar bate o clasă simplă, impunând corpul mare de titlu de secțiune. Așa,
   titlul poate rămâne `h2`, corect ierarhic, fără să fie nevoie să-l coborâm la
   `h3` doar ca să arate cum trebuie. */
.cursa-sectiune .cursa-social__titlu,
.cursa-social__titlu {
    font-size: clamp(1.25rem, 3.2vw, 2rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.15;
    margin-bottom: 18px;
}

/* Iconurile din widget-ul „Social Icons”: pătrate, în paleta campaniei, nu în
   culorile implicite ale rețelelor. */
.cursa-social .elementor-social-icon {
    background-color: var(--cursa-portocaliu);
    border-radius: 0;
    width: 54px;
    height: 54px;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.cursa-social .elementor-social-icon i,
.cursa-social .elementor-social-icon svg {
    color: var(--cursa-crem);
    fill: var(--cursa-crem);
    font-size: 24px;
}

.cursa-social .elementor-social-icon:hover,
.cursa-social .elementor-social-icon:focus-visible {
    background-color: var(--cursa-albastru);
    transform: translateY(-2px);
}

/* Numele conturilor, scrise lângă iconuri. */
.cursa-social__cont {
    font-weight: 700;
    letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
    .cursa-social .elementor-social-icon {
        transition: none;
    }

    .cursa-social .elementor-social-icon:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------------------------
 * Lizibilitate pe fundal portocaliu
 *
 * Portocaliul campaniei e o culoare medie: textul închis dă 3,64:1 pe el, iar
 * cremul 4,02:1 — amândouă sub pragul WCAG AA de 4,5:1 pentru text normal. Albul
 * dă 4,86:1 și trece. Titlurile pot rămâne crem, fiind text mare, unde pragul e 3:1.
 * ------------------------------------------------------------------------- */

.cursa-banda .cursa-lead,
.cursa-banda p,
.cursa-final .cursa-lead,
.cursa-final .cursa-hero__organizatori,
.cursa-final p {
    color: #fff;
}

/* Rândul cu organizatorii era estompat, ceea ce cobora și mai mult contrastul. */
.cursa-final .cursa-hero__organizatori {
    opacity: 1;
}

/* Dar albul singur nu era de ajuns: linia traversează zona deschisă a ilustrației
   — mâna crem — unde alb pe crem înseamnă contrast aproape nul. Ce nimerește în
   spatele ei se schimbă cu lățimea ecranului, pentru că fundalul e decupat
   `cover`, deci nu se poate rezolva alegând o culoare.
   
   Primește propriul fond, ca mesajul de deasupra: lizibilitatea nu mai depinde de
   imagine. Un voal peste toată secțiunea n-ar fi ajuns — ca albul să treacă pragul
   peste zonele deschise ar fi fost nevoie de o opacitate atât de mare încât
   ilustrația ar fi dispărut. */
.cursa-final .cursa-hero__organizatori p {
    display: inline-block;
    margin: 0;
    padding: 8px 16px;
    background: var(--cursa-crem);
    color: var(--cursa-inchis);
}

/* Mesajul de închidere stă pe propriul fundal crem: rămâne pe culoarea închisă,
   unde are 14,6:1. */
.cursa-final .cursa-final__mesaj {
    color: var(--cursa-inchis);
}

/* Butonul portocaliu devenea invizibil pe fundalul portocaliu — arăta ca text
   simplu, nu ca buton. Albastrul din paletă dă 8,2:1 și se distinge fără dubiu. */
.cursa-banda .cursa-buton .elementor-button,
.cursa-banda a.cursa-buton,
.cursa-final .cursa-buton .elementor-button,
.cursa-final a.cursa-buton {
    background: var(--cursa-albastru);
    color: #fff;
}

.cursa-banda .cursa-buton .elementor-button:hover,
.cursa-banda a.cursa-buton:hover,
.cursa-final .cursa-buton .elementor-button:hover,
.cursa-final a.cursa-buton:hover,
.cursa-banda .cursa-buton .elementor-button:focus-visible,
.cursa-final .cursa-buton .elementor-button:focus-visible {
    background: var(--cursa-crem);
    color: var(--cursa-portocaliu);
}

/* ---------------------------------------------------------------------------
 * Corecții de layout peste Elementor
 *
 * Stau aici, nu în șablonul importabil, pentru că pagina e deja construită pe
 * site: o modificare a șablonului n-ar ajunge la ea. Generatorul produce aceleași
 * valori pentru un import viitor.
 * ------------------------------------------------------------------------- */

/* Conținutul secțiunilor se întindea pe toată lățimea ferestrei. Pe un ecran lat,
   rândurile deveneau foarte lungi și textul ajungea lipit de marginea paginii.
   Fundalurile rămân din margine în margine — se mărginește doar conținutul.

   Selectorii sunt intenționat lungi. Woodmart pune clasa `wd-negative-gap` pe
   secțiunile Elementor și declară:

       .elementor-section.wd-negative-gap > .elementor-container { margin: …negativ }
       .elementor-section-boxed.wd-negative-gap .elementor-container { max-width: none }

   Ambele au trei clase. Cu doi selectori simpli, regulile de aici erau anulate:
   lățimea rămânea nelimitată, iar marja negativă împingea conținutul spre stânga
   în loc să-l centreze. */
.elementor-section.wd-negative-gap.cursa-sectiune > .elementor-container,
.elementor-section.wd-negative-gap.cursa-galerie > .elementor-container,
.cursa-sectiune > .elementor-container,
.cursa-galerie > .elementor-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero-ul și închiderea au text centrat și puțin conținut: la 1200px rândurile
   ar fi rămas prea lungi pentru cât de mare e corpul de literă. */
.elementor-section.wd-negative-gap.cursa-hero > .elementor-container,
.elementor-section.wd-negative-gap.cursa-final > .elementor-container,
.cursa-hero > .elementor-container,
.cursa-final > .elementor-container {
    max-width: 980px;
}

/* Coloanele porneau toate de sus, așa că lângă o fotografie înaltă textul rămânea
   agățat în colț, cu un gol dedesubt. */
.cursa-sectiune > .elementor-container,
.cursa-galerie > .elementor-container {
    align-items: center;
}

/* Elementor lasă implicit 10px între coloane — prea puțin când una e text și
   cealaltă fotografie: se ating. Nu folosim `gap`, pentru că lățimile coloanelor
   sunt procentuale și suma ar depăși containerul. */
.cursa-sectiune .elementor-column > .elementor-element-populated,
.cursa-galerie .elementor-column > .elementor-element-populated {
    padding-inline: clamp(10px, 2.2vw, 30px);
}

@media (max-width: 767px) {
    /* Stivuite pe mobil, coloanele au nevoie de separare pe verticală, nu pe
       orizontală. */
    .cursa-sectiune .elementor-column + .elementor-column > .elementor-element-populated {
        padding-top: 28px;
    }

    .cursa-sectiune > .elementor-container,
    .cursa-galerie > .elementor-container {
        align-items: stretch;
    }
}

/* ---------------------------------------------------------------------------
 * Suprascriere defensivă pentru butonul de înscriere
 *
 * PROVIZORIU. De șters când se repară cauza în Elementor.
 *
 * Pe mobil, o setare de tipografie de link pusă pe un element părinte generează:
 *
 *   @media (max-width: 767px) {
 *     .elementor-12323 .elementor-element.elementor-element-28da640b a {
 *       display: inline !important; color: #d33706 !important; … }
 *   }
 *
 * Selectorul prinde orice <a> dinăuntru, deci și butonul. `display: inline` îi
 * prăbușește cutia: fundalul rămâne o fâșie îngustă, iar textul se revarsă peste
 * ea. Regula are specificitate (0,3,1) și `!important` pe fiecare proprietate,
 * așa că nu poate fi întoarsă decât cu specificitate mai mare și tot cu
 * `!important`.
 *
 * Cauza reală e că setarea stă pe secțiune sau pe coloană, în loc să stea pe
 * widget-ul de text căruia îi era destinată — cel cu link-urile de Instagram și
 * Facebook. Când se mută acolo, blocul acesta devine inutil.
 *
 * Cât timp există, orice ajustare per-dispozitiv făcută din Elementor pe buton
 * va fi ignorată.
 * ------------------------------------------------------------------------- */

.elementor-element.elementor-widget.cursa-buton a.elementor-button {
    display: inline-block !important;
    color: var(--cursa-crem) !important;
    font-size: clamp(1rem, 2.4vw, 1.25rem) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}

/* În secțiunile portocalii butonul e albastru cu text alb, pentru contrast.
   Specificitate încă mai mare, ca să treacă peste regula de mai sus. */
.cursa-banda .elementor-element.elementor-widget.cursa-buton a.elementor-button,
.cursa-final .elementor-element.elementor-widget.cursa-buton a.elementor-button {
    color: #fff !important;
}

/* ---------------------------------------------------------------------------
 * Preferințe de accesibilitate
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .cursa-buton .elementor-button,
    a.cursa-buton {
        transition: none;
    }

    .cursa-buton .elementor-button:hover,
    a.cursa-buton:hover {
        transform: none;
    }
}