/*
 * Header, hero, archive and footer.
 * Measured against lrold.local at a 1440px viewport.
 */

/* =============== header =============== */

.lr-header {
    background: transparent;
    position: relative;
    z-index: 30;
}

/* 155px tall, measured. The hero is pulled up underneath it so its background
   runs behind the header, which is what the live site does. */
.lr-header__bar {
    align-items: center;
    display: flex;
    gap: 0;
    max-width: none;
    min-height: 0;
    padding: 2.15vw 29px;
}

.lr-page--plain .lr-header { background: var(--lr-white); }

.lr-header__brand {
    flex: 0 0 auto;
    line-height: 0;
    margin-right: auto;
}

.lr-header__brand img,
.lr-header__brand svg {
    height: 56px;
    width: auto;
}

.lr-header__brand--text {
    color: var(--lr-red);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-decoration: none;
}

.lr-header__rto {
    color: var(--lr-ink-muted);
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.2px;
    margin-top: 2px;
    text-transform: uppercase;
}

/* The items sit shoulder to shoulder; their own 12px side padding (as
   production's) is the only gap, and the whole group is pushed to the right. */
.lr-header__nav {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 0;
}

.lr-header__search {
    background: none;
    border: 0;
    color: var(--lr-red);
    cursor: pointer;
    display: inline-flex;
    line-height: 0;
    margin-left: 22px;
    padding: 4px;
}

.lr-header__search svg { height: 30px; width: 30px; }

.lr-header__search:hover { color: var(--lr-red-dark); }

.lr-header__item {
    align-items: center;
    background: none;
    border: 0;
    color: var(--lr-ink);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: var(--lr-nav-size);
    font-weight: var(--lr-nav-weight);
    gap: 5px;
    height: 40px;
    padding: 0 12px;
    text-decoration: none;
    white-space: nowrap;
}

.lr-header__item:hover { color: var(--lr-red); }

.lr-header__item[aria-expanded="true"],
.lr-header__item.is-current {
    background: var(--lr-red);
    color: var(--lr-white);
}

.lr-header__item svg { transition: transform 0.18s ease; }
.lr-header__item[aria-expanded="true"] svg { transform: rotate(180deg); }

/* "Courses": a link plus its own caret button inside one nav pill. */
.lr-header__trigger-wrap { gap: 0; padding: 0; }
.lr-header__courses-link,
.lr-header__courses-caret {
    align-items: center;
    align-self: stretch;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    text-decoration: none;
}
.lr-header__courses-link,
.lr-header__courses-link:hover,
.lr-header__courses-link:focus { color: inherit; padding: 0 3px 0 12px; }
.lr-header__courses-caret { padding: 0 12px 0 3px; }
.lr-header__trigger-wrap:has(.lr-header__trigger[aria-expanded="true"]) {
    background: var(--lr-red);
    color: var(--lr-white);
}
.lr-header__trigger-wrap:has(.lr-header__trigger[aria-expanded="true"]) svg { transform: rotate(180deg); }

/* Phone centred above the button, as production stacks them. */
.lr-header__aside {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 5px;
    margin-left: 28px;
}

.lr-header__phone {
    align-items: center;
    color: var(--lr-red);
    display: inline-flex;
    font-size: 20px;
    font-weight: 600;
    gap: 8px;
    min-height: 30px;
    text-decoration: none;
    white-space: nowrap;
}

.lr-header__phone svg { flex: 0 0 auto; }

.lr-header__cta {
    align-items: center;
    background: var(--lr-red);
    border-radius: var(--lr-radius-pill);
    color: var(--lr-white);
    display: inline-flex;
    font-size: 17.6px;
    font-weight: 500;
    min-height: 58px;
    padding: 0 28px;
    text-decoration: none;
    white-space: nowrap;
}

.lr-header__cta:hover { background: var(--lr-red-dark); color: var(--lr-white); }

/* the courses panel */

.lr-header__courses { position: relative; }

/* Production anchors the panel under the Courses item itself: the rail starts
   12px left of the label and the pane hangs 25px below the nav row. The panel
   width tracks the viewport on desktop (708 at 1440, 784 at 1600) and pins to
   621px on laptop. The ::before bridge keeps the hover alive across the gap. */
.lr-header__panel {
    left: -12px;
    padding: 0;
    position: absolute;
    top: calc(100% + 25px);
    width: calc(47.5vw + 24px);
    z-index: 40;
}

.lr-header__panel::before {
    content: "";
    height: 25px;
    left: 0;
    position: absolute;
    right: 0;
    top: -25px;
}

.lr-header__panel[hidden] { display: none; }
.lr-header__panel > .lr-container {
    max-width: none;
    padding-inline: 0;
}

/* =============== hero =============== */

.lr-hero {
    background: var(--lr-surface);
    margin-top: -200px;
    overflow: hidden;
    position: relative;
}

/* The diagonal the old hero cut into the section below it: 60px tall, white,
   sitting on the hero's bottom edge without adding to its height. */
.lr-hero__shape {
    bottom: 0;
    height: 60px;
    left: 0;
    line-height: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
}

.lr-hero__shape svg {
    display: block;
    height: 60px;
    width: 100%;
}

.lr-hero__shape path { fill: var(--lr-white); }

/* Measured: content starts 130px from the left, the image column begins at
   993px and runs off the right edge. */
.lr-hero__inner {
    align-items: center;
    column-gap: 170px;
    display: grid;
    grid-template-columns: 693px 500px;
    margin: 0;
    max-width: none;
    padding: 187px 0 44px 130px;
}

.lr-hero__eyebrow {
    color: var(--lr-red);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    margin: 0 0 var(--lr-space-sm);
    text-transform: uppercase;
}

.lr-hero h1 {
    color: var(--lr-ink);
    margin: 0 0 28px;
}

.lr-hero__units {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lr-hero__units li {
    color: var(--lr-ink);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 28px;
    margin: 0;
}

.lr-hero__lede {
    color: var(--lr-ink);
    font-size: 20px;
    line-height: 28px;
    margin: var(--lr-space-md) 0 0;
    max-width: 58ch;
}

.lr-hero__media { line-height: 0; }

.lr-hero__media img {
    border-radius: var(--lr-radius-pill) 0 0 var(--lr-radius-pill);
    height: 340px;
    object-fit: cover;
    width: 500px;
}

/* =============== archive =============== */

.lr-archive__intro { margin-bottom: var(--lr-space-xl); max-width: 68ch; }

.lr-cards {
    display: grid;
    gap: var(--lr-space-lg);
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.lr-card {
    border: 1px solid var(--lr-border);
    border-radius: var(--lr-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lr-card__media { aspect-ratio: 16 / 10; }
.lr-card__media img { height: 100%; object-fit: cover; width: 100%; }

.lr-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--lr-space-md);
}

.lr-card__title { font-size: 19px; line-height: 1.25; margin: 0 0 var(--lr-space-xs); }
.lr-card__title a { color: var(--lr-ink); text-decoration: none; }
.lr-card__title a:hover { color: var(--lr-red); }

.lr-card__meta {
    color: var(--lr-ink-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 15px;
    gap: var(--lr-space-sm);
    margin-top: auto;
    padding-top: var(--lr-space-md);
}

.lr-card__price { color: var(--lr-ink); font-weight: 700; }

/* =============== footer =============== */

.lr-footer {
    background: var(--lr-ink-deep);
    color: var(--lr-white);
    margin-top: var(--lr-space-2xl);
    padding-block: var(--lr-space-xl);
}

.lr-footer a { color: var(--lr-white); }
.lr-footer__note { color: #b9b7b7; font-size: 15px; margin: 0; }

/* On desktop the corner hamburger opens the same drawer as a panel hanging
   from the top right, standing in for production's off-canvas. */
.lr-header__drawer {
    background: var(--lr-white);
    border: 1px solid var(--lr-border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    overflow-y: auto;
    position: absolute;
    right: 20px;
    top: 100%;
    width: 360px;
    z-index: 50;
}

.lr-header__drawer[hidden] { display: none; }

.lr-header__drawer-link {
    align-items: center;
    border-bottom: 1px solid var(--lr-border);
    color: var(--lr-ink-deep);
    display: flex;
    font-size: 16px;
    font-weight: 500;
    min-height: 60px;
    padding: 0 22.5px;
    text-decoration: none;
}

.lr-header__drawer-link:hover { background: var(--lr-surface); color: var(--lr-red); }

.lr-header__drawer-link--sub {
    color: var(--lr-ink-muted);
    font-size: 15px;
    min-height: 48px;
    padding-left: 42px;
}

/* =============== responsive =============== */

/* ---------------------------------------------------------------
 * Responsive header.
 *
 * Production runs four header states, profiled on link-resources.com.au:
 *
 *   >=1367  one bar: logo left (14.4vw, 207-250px), nav+search+phone/CTA
 *           right, nav 15px scaling ~1.05vw. The corner hamburger exists
 *           only on very wide screens.
 *   1025-1366  two rows: phone centred in the left half, a half-width CTA
 *           bar filling the right half, then logo (19.2vw, max 250) with
 *           the nav at 14px and the search on the right.
 *   768-1024  same two rows, nav gone: logo centred, search + burger right.
 *   <=767   three rows: phone, full-width CTA bar, logo left burger right.
 * ------------------------------------------------------------- */

.lr-header__strip,
.lr-header__cta--strip,
.lr-header__burger { display: none; }

/* Desktop: the logo and nav scale gently with the viewport, as production's
   do between 1440 and 1600. */
.lr-header__brand img {
    height: auto;
    width: clamp(207px, 14.4vw, 250px);
}

.lr-header__item { font-size: clamp(15px, 1.05vw, 18px); }

/* ---- laptop: 1025-1366 ---- */

@media (max-width: 1366px) {
    .lr-header {
        background: var(--lr-white);
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .lr-header__strip {
        align-items: center;
        display: flex;
        justify-content: center;
        padding: 0 20px;
    }

    .lr-header__cta--strip {
        align-items: center;
        background: var(--lr-red);
        border-radius: 40px 0 0 40px;
        color: var(--lr-white);
        display: flex;
        font-size: 17.6px;
        font-weight: 500;
        justify-content: center;
        margin: 0 0 4px;
        min-height: 58px;
        padding: 0 20px;
        text-align: center;
        text-decoration: none;
    }

    .lr-header__cta--strip:hover { background: var(--lr-red-dark); color: var(--lr-white); }

    .lr-header__bar {
        grid-column: 1 / -1;
        min-height: 0;
        padding: clamp(16px, 2.4vw, 28px) 20px;
    }

    .lr-header__brand img { width: 19.2vw; }

    .lr-header__item {
        font-size: 14px;
        padding: 0 6px;
    }

    .lr-header__aside { display: none; }

    .lr-header__panel { width: 621px; }

    /* The hero no longer hides under a transparent header. */
    .lr-hero { margin-top: 0; }
}

/* ---- tablet: 768-1024 ---- */

@media (max-width: 1024px) {
    .lr-header__nav { display: none; }

    .lr-header__brand img { width: 250px; }

    .lr-header__brand { margin-inline: auto; }

    /* Production puts the burger to the right of the search icon. */
    .lr-header__burger {
        background: none;
        border: 0;
        color: var(--lr-red);
        cursor: pointer;
        display: inline-flex;
        line-height: 0;
        order: 10;
        padding: 6px;
    }

    .lr-header__search { margin-left: 0; }

    .lr-header__drawer {
        border: 0;
        border-top: 1px solid var(--lr-border);
        box-shadow: none;
        left: 0;
        right: 0;
        top: 100%;
        width: auto;
    }
}

/* ---- phone: <=767 ---- */

@media (max-width: 767px) {
    .lr-header { grid-template-columns: 1fr; }

    .lr-header__strip { padding: 4vw 22.5px; }

    .lr-header__cta--strip {
        border-radius: 0;
        margin: 0;
    }

    .lr-header__bar {
        justify-content: space-between;
        padding: 4.8vw 22.5px;
    }

    .lr-header__brand { margin-inline: 0; }
    .lr-header__brand img { width: 250px; }

    .lr-header__search { display: none; }
}

/* ---------------------------------------------------------------
 * Responsive hero, profiled on production:
 *
 *   1025-1366  still two columns: padding 14vw 0 6vw 5vw, the 500x340
 *              photo pinned right with ~224px visible and the rest
 *              clipped off the edge.
 *   768-1024   padding 10vw 0 16vw 10vw, H1 44px, text 47vw, photo
 *              starts at 62vw and clips.
 *   <=767      one column: padding 20vw 6vw 30vw, H1 36px centred,
 *              photo still 500x340, clipped at the right edge.
 * ------------------------------------------------------------- */

@media (max-width: 1366px) {
    .lr-hero__inner {
        column-gap: 0;
        grid-template-columns: 1fr 224px;
        max-width: none;
        padding: 14vw 0 6vw 5vw;
    }

    .lr-hero__text { padding-right: clamp(118px, 12.2vw, 166px); }

    .lr-hero__media img {
        border-radius: var(--lr-radius-pill) 0 0 var(--lr-radius-pill);
        height: 340px;
        max-width: none;
        width: 500px;
    }
}

@media (max-width: 1024px) {
    .lr-hero__inner {
        column-gap: 5vw;
        grid-template-columns: 1fr 38vw;
        padding: 10vw 0 16vw 10vw;
    }

    .lr-hero__text { padding-right: 0; }

    .lr-hero h1 {
        font-size: 44px;
        line-height: 48.4px;
    }
}

@media (max-width: 767px) {
    .lr-hero__inner {
        display: block;
        padding: 20vw 6vw 30vw;
    }

    .lr-hero h1 {
        font-size: 36px;
        line-height: 39.6px;
        margin-bottom: 20px;
        text-align: center;
    }

    .lr-hero__units li { font-size: 20px; line-height: 28px; }

    .lr-hero__media { margin-top: 40px; }

    .lr-hero__media img {
        display: block;
        margin-left: auto;
    }

    .lr-hero__shape { height: 34px; }
    .lr-hero__shape svg { height: 34px; }
}

/* The hero decision band straddles the hero's diagonal edge. */
.lr-band-wrap {
    margin: -58px auto 0;
    max-width: var(--lr-container);
    position: relative;
    width: 92vw;
    z-index: 20;
}

/* The band already answers the fold; the content below needs less lead-in. */
.lr-band-wrap + .lr-main .lr-course-section.is-book { padding-top: 64px; }

@media (max-width: 767px) {
    .lr-band-wrap {
        margin-top: -34px;
        width: 88vw;
    }
}

/* Header search bar (opened by .lr-header__search, header.js) */
.lr-header { position: relative; }
.lr-header__searchbar { background: #2b2827; border-top: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18); left: 0; padding: 14px 29px; position: absolute; right: 0; top: 100%; z-index: 45; }
.lr-header__searchform { align-items: center; display: flex; gap: 10px; margin: 0 auto; max-width: 760px; }
.lr-header__searchinput { background: #fff; border: 1px solid #666; border-radius: 40px; color: #0c0b0b; flex: 1 1 auto; font: inherit; font-size: 16px; min-width: 0; padding: 12px 18px; }
.lr-header__searchinput:focus { border-color: var(--lr-red); outline: 2px solid var(--lr-red); outline-offset: 1px; }
.lr-header__searchsubmit { background: var(--lr-red); border: 2px solid var(--lr-red); border-radius: 40px; color: #fff; cursor: pointer; font: inherit; font-size: 16px; font-weight: 500; padding: 11px 24px; }
.lr-header__searchsubmit:hover { background: var(--lr-red-dark); border-color: var(--lr-red-dark); }
.lr-header__searchclose { background: none; border: 0; color: #fff; cursor: pointer; font-size: 30px; line-height: 1; padding: 0 6px; }
@media (max-width: 767px) {
    .lr-header__searchbar { padding: 12px 16px; }
    .lr-header__searchsubmit { display: none; }
}

/* Search results */
.lr-page-head__sub { color: rgba(255, 255, 255, 0.75); font-size: 16px; margin: 6px 0 0; }
.lr-search-again { display: flex; gap: 10px; margin: 0 0 32px; max-width: 640px; }
.lr-search-again__input { border: 1px solid #666; border-radius: 40px; flex: 1 1 auto; font: inherit; font-size: 16px; min-width: 0; padding: 12px 18px; }
.lr-search-again__input:focus { border-color: var(--lr-red); outline: 2px solid var(--lr-red); outline-offset: 1px; }