/*
 * Component: final banner (homepage, section 7) — "განიცადე სასურველი ემოცია".
 *
 * Full-bleed closing band: the Maverick desert action photo edge-to-edge,
 * heading top-left in Bebas 42/800 white. Spec (locked with the user):
 *   width 100% (full-bleed), height 480px, padding 48px 48px 0 48px,
 *   background cover / center.
 */

.tr-final-banner {
    position: relative;
    /* No longer full-bleed. It fills the .tr-main content box (already inset 5px
       L/R by the global wrapper) and adds 5px below, so it sits 5px inside the
       viewport on left, right and bottom — matching the global 5px logic. */
    width: 100%;
    margin-bottom: 5px;
    min-height: 480px;               /* spec: height 480px */
    padding: 48px 48px 0 48px;       /* spec: T48 R48 B0 L48 */
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    background-color: #0f0f0f;       /* under the photo while it loads */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
}

/* Full-bleed band supplies its own rhythm; drop the global inter-section gap. */
.tr-home > .tr-final-banner { margin-top: 0; }

.tr-final-banner__scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Light top/bottom scrim so the white heading stays legible on the photo. */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.35) 100%);
}

.tr-final-banner__inner {
    position: relative;
    z-index: 1;
}

.tr-final-banner__title {
    margin: 0;
    font-family: var(--tr-font-display);
    font-size: 42px;
    font-weight: 800;
    line-height: 42px;
    color: var(--tr-white);
    text-align: left;
}

@media (max-width: 768px) {
    .tr-final-banner {
        min-height: 320px;
        padding: 32px 20px 0 20px;
    }
    .tr-final-banner__title { font-size: 32px; line-height: 34px; }
}