/*
 * Component: homepage hero.
 *
 * Values sampled from production (transportershop.ge) at 1600px:
 *   hero block .elementor-element-7802  1560 x 680  -> aspect ~2.294
 *   overline  MarkGeo 16 / 800, white
 *   title     60 / 900, line-height 60, white   (production declares Bebas but
 *             the copy is Georgian and falls back to sans; MarkGeo is the
 *             theme's Georgian DISPLAY face and renders it correctly)
 *   badge     rgba(0,0,0,.3), radius 8, padding 16, bottom-right
 *             -> production hides it on tablet & mobile (elementor-hidden-*)
 *   content inset ~48px from the left and bottom
 */

.tr-hero {
    position: relative;
    /* Full-bleed: span the ENTIRE viewport width, escaping both .tr-main's 5px
       inset and the 1560 container (project directive — deliberately NOT
       production's contained/rounded hero). The negative-margin breakout is
       measured from the parent content box, so it cancels whatever inline
       padding the parent carries. */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    aspect-ratio: 1560 / 680;
    max-height: 680px;
    overflow: hidden;
    isolation: isolate;
    /* Slight rounding, bottom corners only (spec) — top stays flush to header. */
    border-radius: 0 0 18px 18px;
}

.tr-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bottom-left scrim so the white type stays legible over any slide image. */
.tr-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.20) 42%,
        rgba(0, 0, 0, 0) 70%
    );
}

.tr-hero__inner {
    position: absolute;
    inset: 0;
    padding: 48px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.tr-hero__content {
    max-width: 700px;
}

.tr-hero__overline {
    margin: 0 0 18px;
    font-family: var(--tr-font-ka-head);   /* MarkGeo */
    font-size: 16px;
    font-weight: 800;
    line-height: 16px;
    color: var(--tr-white);
}

.tr-hero__title {
    margin: 0;
    /* Bebas per spec — matches production's computed stack; Georgian glyphs
       fall back to sans exactly as production does. Line breaks are forced in
       the markup (<br>) to lock the exact three-line structure. */
    font-family: var(--tr-font-display);
    font-size: 60px;
    font-weight: 900;
    line-height: 60px;
    color: var(--tr-white);
}

/* Brand badge — bottom-right dark pill (~220x112 on production).
   Width is FIXED (not auto) so the hover animation — which spreads the logos
   horizontally — can never stretch, resize or shift the card's footprint.
   overflow:hidden is a safety net if a future logo count exceeds the row. */
.tr-hero__badge {
    align-self: flex-end;
    width: 264px;
    max-width: 264px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 24px;
    background: rgba(28, 28, 28, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 18px;
    text-align: left;
    flex: none;
    overflow: hidden;
}

/* Color logos on white chips so they read on the dark pill.
   Single horizontal row (spec: aligned horizontally, not a 2x2 grid). */
.tr-hero__badge-logos {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
.tr-hero__badge-logos .tr-hero__badge-chip {
    flex: 0 0 auto;
}

.tr-hero__badge-chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 7px;
    background: var(--tr-white);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(28, 28, 28, 0.6);  /* ring separates the stacked circles */
    transition: margin-left 0.3s ease;
}

/* Default state: circles overlap; the first stays fully visible and each next
   one tucks behind it in sequence (descending z-index). */
.tr-hero__badge-chip:not(:first-child) { margin-left: -13px; }
.tr-hero__badge-chip:nth-child(1) { z-index: 5; }
.tr-hero__badge-chip:nth-child(2) { z-index: 4; }
.tr-hero__badge-chip:nth-child(3) { z-index: 3; }
.tr-hero__badge-chip:nth-child(4) { z-index: 2; }
.tr-hero__badge-chip:nth-child(5) { z-index: 1; }

/* Hover: spread the logos out into a full row with a positive gap. */
.tr-hero__badge:hover .tr-hero__badge-chip:not(:first-child),
.tr-hero__badge-logos:hover .tr-hero__badge-chip:not(:first-child) { margin-left: 10px; }

.tr-hero__badge-chip img,
.tr-hero__badge-logo {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.tr-hero__badge-label {
    margin: 0;
    max-width: 210px;
    font-family: var(--tr-font-ka-head);   /* Gilroy Geo */
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;   /* refined, not bulky */
    text-align: left;
    color: var(--tr-white);
}

/* ── Tablet & below: production hides the badge and shortens the hero ── */
@media (max-width: 1024px) {
    .tr-hero__badge { display: none; }
    .tr-hero__inner { padding: 32px; }
    .tr-hero__title { font-size: 44px; line-height: 44px; }
}

@media (max-width: 768px) {
    .tr-hero {
        aspect-ratio: auto;
        min-height: 60vh;
        max-height: none;
    }
    .tr-hero__inner { padding: 24px; align-items: flex-end; }
    .tr-hero__title { font-size: 34px; line-height: 36px; }
    .tr-hero__overline { margin-bottom: 12px; font-size: 14px; }
}