/* ==========================================================
   TENIS ARENA
   HERO BREADCRUMB — UNIFIED EDITORIAL RHYTHM

   Contract:
   breadcrumb
        ↓ 34px
   eyebrow
        ↓
   title
   ========================================================== */

.ta-hero-breadcrumb {
    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    width: auto;

    /*
     * Important:
     * breadcrumb-ul este acum copilul hero-copy,
     * deci NU mai are top positioning propriu.
     */
    margin: 0 0 34px !important;
    padding: 0 !important;

    gap: 7px;

    color: rgba(246, 240, 228, .58);

    font-family: inherit;
    font-size: .50rem !important;
    font-weight: 500 !important;
    line-height: 1.15 !important;

    letter-spacing: .12em !important;
    text-transform: uppercase;
}

.ta-hero-breadcrumb a {
    color: rgba(246, 240, 228, .58) !important;
    text-decoration: none;
    font-weight: 500 !important;
}

.ta-hero-breadcrumb a:hover {
    color: var(--ta-ivory) !important;
}

.ta-hero-breadcrumb span {
    color: rgba(246, 240, 228, .56) !important;
    font-weight: 500 !important;
}

/*
 * Separatorul rămâne foarte discret.
 */
.ta-hero-breadcrumb span:not([aria-current="page"]) {
    color: rgba(199, 165, 82, .72) !important;
}

.ta-hero-breadcrumb [aria-current="page"] {
    color: rgba(246, 240, 228, .62) !important;
}

/*
 * Dacă eyebrow-ul paginii avea propriul margin-top,
 * îl neutralizăm. Astfel distanța de 34px este reală,
 * nu 34px + încă o margine locală.
 */
.ta-hero-breadcrumb + [class*="eyebrow"] {
    margin-top: 0 !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1023px) {

    .ta-hero-breadcrumb {
        margin-bottom: 30px !important;

        font-size: .49rem !important;
        letter-spacing: .11em !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

    .ta-hero-breadcrumb {
        margin-bottom: 24px !important;

        gap: 6px;

        font-size: .47rem !important;
        letter-spacing: .10em !important;
    }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 390px) {

    .ta-hero-breadcrumb {
        margin-bottom: 22px !important;
        font-size: .45rem !important;
    }

}


/* ==========================================================
   TENIS ARENA
   COURTS HERO — FINAL BREADCRUMB VERTICAL ALIGNMENT

   Hero-ul Terenuri are o compoziție mai înaltă decât celelalte.
   Îi oferim puțin spațiu sus fără a modifica ritmul intern:
   breadcrumb -> eyebrow -> title -> copy -> CTA.
   ========================================================== */

@media (min-width: 1024px) {

    .ta-courts-hero {
        min-height: 390px;
    }

    .ta-courts-hero-copy {
        padding-top: 18px;
    }

}


/*
 * Laptopuri / desktop mai înguste.
 */
@media (min-width: 1024px) and (max-width: 1365px) {

    .ta-courts-hero-copy {
        padding-top: 14px;
    }

}