/* ==========================================================================
   AlTrainer shared UI components
   Buttons (.ui-btn), split hero (.hero-split), programme bar (.program-bar).

   Load per page:
     @push('styles')
       <link rel="stylesheet" href="{{ asset('frontend/css/shared-ui.css') }}">
     @endpush

   Every class is namespaced, so nothing here can reach the theme or the
   homepage. Colours come from the DB theme variables.
   ========================================================================== */

:root {
    --ui-navy: #12365c;
    --ui-navy-deep: #0f2c4b;
    --ui-navy-soft: #16406c;
    --ui-on-dark: #ffffff;
    --ui-on-dark-muted: rgba(255, 255, 255, .78);
    --ui-on-dark-faint: rgba(255, 255, 255, .45);
}

/* ==========================================================================
   1. Buttons
   Reusable anywhere: <a class="ui-btn ui-btn--primary">…</a>
   ========================================================================== */

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 17px 28px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, filter .2s ease;
}

.ui-btn:focus-visible {
    outline: 2px solid var(--tg-theme-primary, #138b4c);
    outline-offset: 3px;
}

.ui-btn svg,
.ui-btn img,
.ui-btn i {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    font-size: 1.05em;
}

.ui-btn--primary,
.ui-btn--primary:hover,
.ui-btn--primary:focus {
    background: var(--tg-theme-primary, #138b4c);
    color: #fff;
}

.ui-btn--primary:hover {
    filter: brightness(.9);
}

.ui-btn--outline,
.ui-btn--outline:hover,
.ui-btn--outline:focus {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
}

.ui-btn--outline:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .8);
}

.ui-btn--white,
.ui-btn--white:hover,
.ui-btn--white:focus {
    background: #fff;
    color: var(--tg-theme-primary, #138b4c);
}

.ui-btn--white:hover {
    filter: brightness(.94);
}

/* Outline for light backgrounds — the --outline variant above is white-on-dark. */
.ui-btn--line,
.ui-btn--line:hover,
.ui-btn--line:focus {
    background: transparent;
    color: var(--ui-navy);
    border-color: #d8e0e8;
}

.ui-btn--line:hover {
    color: var(--tg-theme-primary, #138b4c);
    border-color: var(--tg-theme-primary, #138b4c);
}

.ui-btn--navy,
.ui-btn--navy:hover,
.ui-btn--navy:focus {
    background: var(--ui-navy-soft);
    color: #fff;
}

.ui-btn--navy:hover {
    filter: brightness(1.12);
}

/* ==========================================================================
   2. Split hero — copy on the left, photo bleeding in from the right
   ========================================================================== */

.hero-split {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ui-navy);
    color: var(--ui-on-dark);
}

.hero-split__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
}

.hero-split__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    background: linear-gradient(90deg,
            var(--ui-navy) 0%,
            rgba(18, 54, 92, .97) 34%,
            rgba(18, 54, 92, .80) 55%,
            rgba(18, 54, 92, .22) 100%);
}

.hero-split__inner {
    display: flex;
    align-items: center;
    min-height: 700px;
    padding-top: 96px;
    padding-bottom: 96px;
}

.hero-split__copy {
    max-width: 640px;
}

.hero-split__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tg-theme-primary, #138b4c);
}

.hero-split__eyebrow::before {
    content: "";
    display: block;
    width: 46px;
    height: 1px;
    flex-shrink: 0;
    background: currentColor;
    opacity: .85;
}

.hero-split__title {
    margin: 24px 0 22px;
    font-size: clamp(30px, 4.6vw, 60px);
    line-height: 1.07;
    font-weight: 700;
    color: var(--ui-on-dark);
    max-width: 16ch;
}

.hero-split__lead {
    margin: 0;
    max-width: 480px;
    font-size: 16.5px;
    line-height: 1.62;
    color: var(--ui-on-dark-muted);
}

.hero-split__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
}

@media (max-width: 1199.98px) {
    .hero-split__inner {
        min-height: 610px;
    }

    .hero-split__media {
        object-position: 76% center;
    }
}

@media (max-width: 991.98px) {
    .hero-split__inner {
        min-height: 520px;
        padding-top: 76px;
        padding-bottom: 76px;
    }

    .hero-split__scrim {
        background: linear-gradient(90deg,
                var(--ui-navy) 0%,
                rgba(18, 54, 92, .96) 55%,
                rgba(18, 54, 92, .62) 100%);
    }
}

@media (max-width: 767.98px) {
    .hero-split__inner {
        min-height: 0;
        padding: 62px 20px;
    }

    .hero-split__scrim {
        background: linear-gradient(180deg,
                rgba(18, 54, 92, .95) 0%,
                rgba(18, 54, 92, .90) 100%);
    }

    .hero-split__eyebrow {
        gap: 10px;
        font-size: 10.5px;
        letter-spacing: .14em;
    }

    .hero-split__eyebrow::before {
        width: 26px;
    }

    .hero-split__title {
        margin: 18px 0 16px;
        max-width: none;
    }

    .hero-split__lead {
        font-size: 15px;
    }

    .hero-split__cta {
        gap: 10px;
        margin-top: 26px;
    }

    .hero-split__cta .ui-btn {
        flex: 1 1 100%;
        padding: 16px 22px;
    }
}

/* ==========================================================================
   3. Programme bar — full-bleed scrolling strip of linked Services /
      Training programme names
   ========================================================================== */

.program-bar {
    position: relative;
    overflow: hidden;
    padding: 15px 0;
    background: var(--ui-navy-soft);
}

.program-bar__track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 40px;
    animation: program-bar-scroll 38s linear infinite;
}

.program-bar--slow .program-bar__track {
    animation-duration: 60s;
}

.program-bar--fast .program-bar__track {
    animation-duration: 24s;
}

/* Pause on hover and while any item has keyboard focus. */
.program-bar:hover .program-bar__track,
.program-bar:focus-within .program-bar__track {
    animation-play-state: paused;
}

.program-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    color: var(--ui-on-dark-faint);
    transition: color .2s ease;
}

.program-bar__item:hover,
.program-bar__item:focus-visible {
    color: rgba(255, 255, 255, .85);
    outline: none;
}

.program-bar__item:hover .program-bar__label,
.program-bar__item:focus-visible .program-bar__label {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.program-bar__dot {
    display: block;
    width: 4px;
    height: 4px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--tg-theme-primary, #138b4c);
}

@keyframes program-bar-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 20px)); }
}

[dir="rtl"] .program-bar__track {
    animation-name: program-bar-scroll-rtl;
}

@keyframes program-bar-scroll-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(50% + 20px)); }
}

@media (max-width: 767.98px) {
    .program-bar {
        padding: 12px 0;
    }

    .program-bar__track {
        gap: 28px;
    }

    .program-bar__item {
        gap: 9px;
        font-size: 10.5px;
        letter-spacing: .14em;
    }

    @keyframes program-bar-scroll {
        from { transform: translateX(0); }
        to   { transform: translateX(calc(-50% - 14px)); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .program-bar__track {
        animation: none;
        flex-wrap: wrap;
        width: 100%;
        row-gap: 12px;
        padding: 0 20px;
    }

    /* The second pass exists only to make the scroll loop seamless. With the
       animation off it would render as a visible duplicate of every item. */
    .program-bar__item[aria-hidden="true"] {
        display: none;
    }
}