/*
 * External-booking landing page.
 *
 * Loaded only by resources/views/layouts/home.blade.php, and only when
 * config('site.booking_mode') is 'external'. Everything else on the site — including the
 * in-house departure board — is unaffected by this file.
 *
 * No colour is invented here. Every value is a --jt-* token from theme.css or one of the
 * two rgba scrims style.css already uses over the hero (rgba(6, 12, 34, …)). The brief was
 * a restructured landing page, not a new look, so a reader comparing this page with the
 * booking funnel should not be able to tell they were built at different times.
 *
 * Layout only otherwise: the page reuses #hero and .about-btn from style.css rather than
 * restyling them.
 *
 * This file was roughly a third larger until 2026-09-05, when the "Book Your Seat Online"
 * explainer and the Route Schedule section were dropped from the page; their rules went
 * with them. What is left is the promo bar, the hero and the footer credit.
 */

/* The marketing hero lays its container out in flow rather than absolutely (see below),
   so the bar's height is added to the container's top padding, not to a `top` offset.
   --promo-h is the bar's measured height, published by main.js and defaulting to the
   one-line 40px; see promo-bar.css. 170 + 40 is the 210px this was written as. */
body:has(.promo-bar) #hero.hero-marketing .hero-container {
    padding-top: calc(170px + var(--promo-h, 40px));
}

/* ---------- Marketing hero ---------- */

/*
 * Two layers, and the order matters. The operator's own photograph is on top; the brand
 * gradient sits underneath as a real fallback, not a placeholder — a browser that cannot
 * fetch the JPEG (missing file, failed request, an image-blocking extension) paints the
 * gradient rather than a black or transparent band behind white text.
 *
 * That is why the photo can be referenced before it exists: dropping
 * img/bus/hero.jpg into place switches the hero over with no code change, and removing it
 * switches it back. The stock hero-bg.jpg that ships with the template is a conference
 * auditorium and is never used here.
 *
 * Position is 'center 60%': the buses are photographed with a lot of tree canopy above
 * them, and anchoring to the top would crop the vehicle out of a wide hero band.
 */
/* #hero.hero-marketing, not .hero-marketing: style.css sets the stock background on the
   #hero id, which outranks a bare class however late this file loads. */
#hero.hero-marketing {
    background-color: var(--jt-heading);
    background-image:
        url(../img/bus/hero.jpg),
        linear-gradient(160deg, var(--jt-heading) 0%, #0b2f6b 45%, var(--jt-accent-dark) 100%);
    background-position: center 60%;
    background-repeat: no-repeat;
    background-size: cover;
    /* The template's hero is a fixed 100vh because it is a photograph and wants to fill
       the screen. This one is sized by its content: a route name, two departure times and
       two buttons do not fill 900px, and stretching to it left a third of the hero empty
       below the CTA. */
    height: auto;
    min-height: 0;
}

/* Back to the template's weight: over a gradient a light scrim was enough, but a
   photograph has bright sky and white bodywork in it and the hero text needs a
   guaranteed contrast floor against both. */
#hero.hero-marketing:before {
    background: rgba(6, 12, 34, 0.62);
}

#hero.hero-marketing .hero-container {
    /* The default is absolutely positioned against a 100vh box. This hero grows with its
       content — a route with several legs is taller than one line of copy — so it lays
       out in flow instead and brings its own vertical rhythm. */
    position: relative;
    top: auto;
    bottom: auto;
    /* Clears the fixed header (90px, plus the 40px promo bar when it is up). */
    padding: 170px 15px 110px;
    gap: 4px;
}

#hero.hero-marketing h1 {
    /* clamp() so a two-place route name ("Embilipitiya ↔ Trincomalee") does not overflow
       a phone. The template's fixed 56px did. */
    font-size: clamp(28px, 6.4vw, 52px);
    line-height: 1.15;
}

/*
 * The departure cards. After the explainer and schedule sections were dropped these are
 * the only concrete information the page carries — what time the bus goes, which way, and
 * that it is not daily — so they are sized as the body of the page rather than as a
 * caption under the headline. Enlarged 2026-09-05 along with the removal of the
 * "Passenger transport since 1990" eyebrow that used to sit above the route name.
 */
.hero-legs {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

.hero-leg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 262px;
    padding: 26px 34px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--jt-radius);
    background: rgba(6, 12, 34, 0.35);
}

.hero-leg-time {
    font-family: var(--jt-font-heading);
    /* clamp for the same reason the headline has one: two of these sit side by side and
       must still fit a 390px phone once .hero-leg goes full width. */
    font-size: clamp(34px, 8vw, 42px);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.hero-leg-route {
    font-family: var(--jt-font-body);
    font-size: 17px;
    color: rgba(255, 255, 255, 0.9);
}

.hero-leg-note {
    margin-top: 4px;
    padding: 3px 13px;
    border-radius: var(--jt-pill);
    background: var(--jt-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/*
 * The '/#book-tickets' anchor target lives on this row in external mode (see
 * marketing/hero.blade.php). style.css sizes #book-tickets as a full-width page section —
 * `padding: 60px 0` — so without this reset the id alone pushes the buttons a section's
 * worth of space away from the departure times above them. Here the id is an anchor, not
 * a section.
 */
.hero-actions#book-tickets {
    padding: 0;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 34px;
}

/*
 * The calls to action — one per sales channel, sized identically so the pair reads as one
 * choice rather than a primary and a fallback. The template's #hero .about-btn is 14px
 * text in 12px/32px padding, a link-sized button; these carry the page, so they are bigger.
 *
 * The horizontal padding is smaller than the 46px this had while there was a single button:
 * "Book on busticket.gov.lk" is the longer label of the two, and at 46px the pair overflowed
 * a 768px tablet into a wrap. 34px keeps them on one row down to about 700px, and below the
 * breakpoint at the end of this file they go full width and stack anyway.
 *
 * Written with the #hero id on purpose. The reset this replaces was `.hero-actions
 * .about-btn` (0-2-0), which loses to `#hero .about-btn` (1-1-0) however late this file
 * loads — so its `margin-top: 0` had in fact never applied. The template's `margin: 10px`
 * is zeroed here for real; the flex gap above supplies the spacing.
 */
#hero.hero-marketing .hero-actions .about-btn {
    margin: 0;
    padding: 18px 34px;
    font-size: 18px;
    font-weight: 600;
}

/* ---------- Footer ---------- */

.powered-by {
    white-space: nowrap;
}

/* ---------- Small screens ---------- */

@media (max-width: 767.98px) {
    #hero.hero-marketing .hero-container {
        padding: 120px 15px 70px;
    }

    .hero-leg {
        min-width: 0;
        width: 100%;
    }

    .hero-actions .about-btn {
        width: 100%;
    }
}