/* ==========================================================================
   SECTIUNEA - A -
   ========================================================================== */

/* Container Principale */
.spadesign__a--container {
    margin: 0 auto;
    padding: 40px 64px;
    background-color: var(--color-background-soft);
    border-top: 0.5px solid var(--color-divider-dark);
    border-bottom: 0.5px solid var(--color-divider-dark);
}

/* Intestazione */
.spadesign__a--header {
    text-align: center;
    margin-bottom: 50px;
}

.spadesign__a--title {
    font-family: var(--font-serif);
    font-size: var(--title-h2);
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 10px;
}

.spadesign__a--subtitle {
    font-family: var(--font-serif);
    font-size: var(--title-h2);
    font-weight: 300;
    color: var(--color-accent);
    font-style: italic;
    margin: 0;
}

/* Griglia dei Contenuti */
.spadesign__a--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Singola Card */
.spadesign__a--card {
    background-color: var(--color-background-light);
    border: 1px solid var(--color-divider-dark);
    padding: 40px 50px;
    border-radius: 4px;
    min-height: 150px;
}

.js .spadesign__a--card {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 2s ease, transform 2s ease;
    transition-delay: calc(var(--index, 0) * 400ms);
}

.js .spadesign__a--card.vizibil {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .js .spadesign__a--card {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

.spadesign__a--card-title {
    font-family: var(--font-serif);
    font-size: var(--title-h5);
    color: var(--color-text);
    font-weight: 200;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 500;
}

.spadesign__a--card-text {
    font-family: var(--font-sans);
    font-size: var(--text);
    color: var(--color-text);
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   SECTIUNEA - B -
   ========================================================================== */

/* Container Principal */
.spadesign__b--container {
    margin: 0 auto;
    padding: 30px 64px;
    background-color: var(--color-background-light);
    border-bottom: 0.5px solid var(--color-divider-dark);
}

/* Titlu */
.spadesign__b--header {
    margin-bottom: 30px;
}

.spadesign__b--title {
    font-family: var(--font-sans);
    font-size: var(--label);
    color: var(--color-accent);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
}

/* Flexbox Timeline (Aranjare orizontală pe desktop) */
.spadesign__b--timeline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
}

/* Pasul Individual */
.spadesign__b--step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

/* ---------- Scroll animation ---------- */
.js .spadesign__b--step,
.js .spadesign__b--arrow {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s ease, transform 1s ease;
    transition-delay: calc(var(--index, 0) * 300ms);
}

.js .spadesign__b--step.vizibil,
.js .spadesign__b--arrow.vizibil {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .js .spadesign__b--step,
    .js .spadesign__b--arrow {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

.spadesign__b--step-number {
    font-family: var(--font-sans);
    font-size: var(--title-h4);
    color: var(--color-accent);
    font-weight: 200;
    margin-bottom: 15px;
    font-weight: 400;
}

.spadesign__b--step-text {
    font-family: var(--font-sans);
    font-size: var(--text);
    color: var(--color-text);
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

/* Săgețile dintre pași */
.spadesign__b--arrow {
    font-size: 3rem;
    color: var(--color-accent);
    padding-top: 5px;
    user-select: none;
}

/* ==========================================================================
   SECTIUNEA - C - Radare si rezultat
   ========================================================================== */

/* Container Principal */
.spadesign__c--container {
    margin: 0 auto;
    padding: 40px 64px;
    background-color: var(--color-background-soft);
}

/* Titlu Secțiune */
.spadesign__c--header {
    margin-bottom: 30px;
}

.spadesign__c--title {
    font-family: var(--font-sans);
    font-size: var(--label);
    color: var(--color-accent);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}

/* Structura de tip Galerie / Comparate Alăturată */


.spadesign__c--rows-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* Acesta este spațiul vertical dintre cele două rânduri */
}

/* Ne asigurăm că galeriile rămân flex */
.spadesign__c--gallery {
    display: flex;
    align-items: stretch;
    position: relative;
    gap: 30px;
    /* Acesta este spațiul orizontal dintre carduri */
}

/* Fiecare bloc de imagine + text */
.spadesign__c--item {
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.35s ease;
}

.spadesign__c--item:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    /* am eliminat transform: translateY(-4px) */
}

/* Container pentru imagine (asigură proporții corecte) */
.spadesign__c--image-wrapper {
    position: relative;
    /* Esențial pentru poziționarea absolută a textului */
    width: 100%;
    aspect-ratio: 21 / 9;
    overflow: hidden;
}

.spadesign__c--image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

.spadesign__c--item:hover .spadesign__c--image {
    transform: scale(1.06);
}

/* Textul de sub imagini */
.spadesign__c--label {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    color: var(--color-dirty-white);
    /* Alb pentru contrast */
    font-family: var(--font-sans);
    font-size: var(--label);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    z-index: 5;
    /* Asigură vizibilitatea deasupra imaginii */

    /* Opțional: adaugă un fundal semi-transparent dacă textul nu e lizibil */
    background: rgba(0, 0, 0, 0.3);
    padding: 5px 10px;
    transition: background-color 0.35s ease;
}

.spadesign__c--item:hover .spadesign__c--label {
    background: rgba(0, 0, 0, 0.55);
}

/* Elementul central cu săgeata */
.spadesign__c--divider {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background-color: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.spadesign__c--arrow-icon {
    color: var(--color-accent);
    display: block;
}

/* ==========================================================================
   SECTIUNEA D — 
   ========================================================================== */

.spadesign__d--container {
    display: flex;
    width: 100%;
    background-color: var(--color-background-soft);
    box-sizing: border-box;
    overflow: hidden;
    gap: 30px;
    /* adaugă asta */
}

/* Cele două coloane 50/50 */
.spadesign__d--column {
    flex: 1;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* Imaginea ca pseudo-element — NU acoperă textul */
.spadesign__d--column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: auto 100%;
    z-index: 0;
}

/* STÂNGA: Vaza lipită complet de marginea din STÂNGA + fade spre centru */
.spadesign__d--column-left::before {
    left: 0;
    right: auto;
    background-position: left bottom;
    background-image: url('../images/pages/spa-design/livrabile-orientative.jpg');
    width: 50%;

    /* Fade de la stânga (vizibil) spre dreapta (transparent) */
    -webkit-mask-image: linear-gradient(to right, black 0%, black 25%, transparent 65%);
    mask-image: linear-gradient(to right, black 0%, black 25%, transparent 65%);
}

/* DREAPTA: Prosoapele lipite complet de marginea din DREAPTA + fade spre centru */
.spadesign__d--column-right::before {
    left: auto;
    /* Anulează alinierea la stânga */
    right: 0;
    /* MODIFICAT: Lipește pseudo-elementul de marginea DREAPTĂ */

    background-position: right bottom;
    /* MODIFICAT: Forțează elementul grafic (prosoapele) să stea în dreapta-jos */
    background-image: url('../images/pages/spa-design/ecosistem-de-experti.jpg');
    width: 50%;

    /* MODIFICAT: Fade de la dreapta (vizibil) spre stânga (transparent) */
    -webkit-mask-image: linear-gradient(to left, black 0%, black 25%, transparent 65%);
    mask-image: linear-gradient(to left, black 0%, black 25%, transparent 65%);
}

/* Conținutul textului — DEASUPRA imaginii */
.spadesign__d--content {
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Padding-uri: spațiu pentru imagini + spațiu central */
.spadesign__d--column-left {
    padding-left: 220px;
    padding-right: 50px;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: var(--color-background-light);
}

.spadesign__d--column-right {
    padding-left: 50px;
    padding-right: 220px;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: var(--color-background-light);
}

/* Tipografie */
.spadesign__d--label {
    font-family: var(--font-sans);
    font-size: var(--label);
    color: var(--color-accent);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 20px 0;
}

.spadesign__d--title {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--title-h3);
    color: var(--color-text);
    font-weight: 400;
    margin: 0 0 22px 0;
    line-height: 1.2;
}

/* Grid liste pe două coloane */
.spadesign__d--lists-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

.spadesign__d--list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.spadesign__d--list-item {
    font-family: var(--font-sans);
    font-size: var(--text);
    color: var(--color-text);
    font-weight: 500;
    margin-bottom: 13px;
    position: relative;
    padding-left: 16px;
    line-height: 1.45;
}

.spadesign__d--list-item::before {
    content: "✔";
    color: var(--color-accent);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2rem;
}

.spadesign__d--text {
    font-family: var(--font-sans);
    font-size: var(--text);
    color: var(--color-text);
    color: var(--color-text);
    font-weight: 500;
    line-height: 1.7;
    margin: 0 0 18px 0;
}

.spadesign__d--text:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   SECTIUNEA - E - (DOCUMENTAȚIE & RESURSE)
   ========================================================================== */
.spadesign__e--container {
    width: 100%;
    padding: 30px 64px;
    padding-bottom: 0;
    background-color: var(--color-background-soft);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.spadesign__e--title {
    font-family: var(--font-sans, sans-serif);
    font-size: var(--label, 0.85rem);
    color: var(--color-accent, #de5220);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}

/* Wrapper-ul principal care aliniază gridul de text cu imaginea din dreapta */
.spadesign__e--wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 40px;
}

/* Grid-ul flexibil cu cele 5 coloane */
.spadesign__e--grid {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: flex-start;

}

/* Coloană Individuală */
.spadesign__e--column {
    flex: 1;
    text-align: center;
    padding: 0 15px;
    box-sizing: border-box;
    position: relative;
}

/* Liniile verticale despărțitoare dintre coloane */
.spadesign__e--column:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 45px;
    /* Înălțimea liniei discrete */
    background-color: rgba(0, 0, 0, 0.08);
}

/* Titlurile mici de coloană (ex: DATA SHEETS) */
.spadesign__e--col-title {
    font-family: var(--font-sans);
    font-size: var(--text);
    color: var(--color-text);
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-top: 0;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Textul explicativ de sub titlurile de coloană */
.spadesign__e--col-text {
    font-family: var(--font-sans);
    font-size: var(--text);
    color: var(--color-text);
    font-weight: 500;
    letter-spacing: 0.05em;
    margin: 0;
    line-height: 1.4;
}

/* Zona din dreapta destinată imaginii cu planșe tehnice */
.spadesign__e--graphics {
    width: 240px;
    /* Lățimea optimă pentru planșele înclinate */
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
}

.spadesign__e--img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   SECTIUNEA - F - (CALL TO ACTION BAR)
   ========================================================================== */

.spadesign__f--container {
    background-color: var(--color-accent);
    padding: 40px 64px;
    box-sizing: border-box;
}

/* Alinierea celor 3 elemente principale pe orizontală */
.spadesign__f--wrapper {
    display: flex;
    align-items: center;
    /* MODIFICAT: Centrează perfect pe verticală toate cele 3 blocuri */
    justify-content: space-between;
    max-width: 1300px;
    margin: 0 auto;
    gap: 30px;
}

/* 1. Zona de Text (Stânga) */
.spadesign__f--content {
    flex: 1.2;
}

.spadesign__f--title {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--title-h2);
    line-height: 1.3;
    color: #ffffff;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 12px;
}

.spadesign__f--subtitle {
    font-family: var(--font-sans);
    font-size: var(--text-normal);
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-weight: 400;
}

/* 2. Butonul (Centru - adus mai spre dreapta) */
.spadesign__f--action {
    flex: initial;
    /* MODIFICAT: Îi tăiem flexibilitatea forțată ca să poată sta mai aproape de email */
    display: flex;
    justify-content: center;
}

.spadesign__f--button {
    background: transparent;
    border: 2px solid white;
    color: white;
    padding: clamp(12px, 1vw, 15px) clamp(20px, 2vw, 30px);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 1.2rem;
    letter-spacing: 0.12em;
    font-weight: 600;
    display: flex;
    align-items: center;
    text-align: center;
    white-space: nowrap;
    margin-bottom: 0;
    text-transform: uppercase;
    gap: 0.6rem;
    transition: color 0.3s ease;
}

/* Efect de hover pe buton */
.spadesign__f--button:hover {
    background: white;
    color: var(--color-accent);
}

.spadesign__f--arrow {
    flex-shrink: 0;
    stroke: currentColor;
    transition: transform 0.3s ease;
}

.spadesign__f--button:hover .spadesign__f--arrow {
    transform: translateX(4px);
}

/* 3. Email-ul (Dreapta - adus lângă buton) */
.spadesign__f--contact {
    flex: initial;
    display: flex;
    justify-content: flex-start;
    margin-left: 20px;
}

.spadesign__f--email {
    font-family: var(--font-sans);
    color: #ffffff;
    text-decoration: none;
    font-size: var(--text-normal);
    font-weight: 400;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.spadesign__f--email:hover {
    opacity: 0.8;
}