/*
 * Course page sections.
 *
 * The old page was not one column: every section had its own full bleed
 * treatment (white, grey, red, black, or a half-width photo bleeding off one
 * edge). Every number here was measured off lrold.local at 1440px.
 *
 * The variant lives in the block's own className, so an editor changes a
 * section's treatment from the Additional CSS class field rather than needing
 * a developer.
 */

/* The starter theme puts 10px of side padding on main. The sections here run
   full bleed and manage their own rail, so it has to go. */
.lr-main {
    padding-block: 0;
    padding-inline: 0;
}

.lr-course-section {
    margin: 0;
    position: relative;
}

/* The inner rail every non-bleeding section uses. */
.lr-course-section > * {
    margin-inline: auto;
    max-width: var(--lr-container);
    width: 92vw;
}

.lr-course-section > .lr-container {
    max-width: var(--lr-container);
    padding-inline: 0;
}

/* ---------- book a course ---------- */

.lr-course-section.is-book { padding: 53px 0 92.7344px; }

/* Carabiner mark to the left of the heading, 45px, 20px gap. Measured. */
.lr-course-section.is-book h2 {
    align-items: center;
    display: flex;
    gap: 20px;
    margin-left: -10px;
    width: fit-content;
}

.lr-course-section.is-book h2::before {
    background: url("../mark.png") center / contain no-repeat;
    content: "";
    flex: 0 0 auto;
    height: 45px;
    width: 45px;
}

/* The note above the table: its LAST paragraph clears the table, whatever
   its paragraph count (the note is several paragraphs, not one). */
.lr-course-section.is-book p:has(+ .lrc-avail),
.lr-course-section.is-book p:has(+ .lrc-avail--request),
.lr-course-section.is-book p:has(+ section) { margin-bottom: var(--lr-space-lg); }

/* ---------- plain and wide prose ---------- */

.lr-course-section.is-plain { padding: 92.7344px 0; }

.lr-course-section.is-wide { padding: 92.7344px 0; }
.lr-course-section.is-wide > * { max-width: 1325px; width: 92vw; }

/* ---------- course details: prose left, summary right ---------- */

.lr-course-section.is-details { padding: 92.7344px 0; }
.lr-course-section.is-details > * { max-width: 1325px; width: 92vw; }

.lr-course-section.is-details .wp-block-columns {
    display: flex;
    gap: 50px;
    margin: 0;
}

/* Two equal halves of the rail with a fixed 50px gap, so the pair scales
   with the 92vw rail exactly as production's does. */
.lr-course-section.is-details .wp-block-column {
    flex: 0 0 calc(50% - 25px);
    max-width: calc(50% - 25px);
}

/* The 2px red rule the live page draws under the heading. */
.lr-course-section.is-details h2 {
    border-bottom: 2px solid var(--lr-red);
    margin-bottom: 24px;
    padding-bottom: 12px;
}

.lr-course-section.is-details .lr-details__summary { align-self: start; }

/* ---------- colour bands ---------- */

.lr-course-section.is-red,
.lr-course-section.is-dark {
    color: var(--lr-white);
    padding: 100.797px 9vw;
}

.lr-course-section.is-red { background: var(--lr-red); }
.lr-course-section.is-dark { background: var(--lr-ink-deep); }

/* Full-bleed bands pad themselves; their children span the padded box. */
.lr-course-section.is-red > *,
.lr-course-section.is-dark > * {
    max-width: none;
    width: 100%;
}

.lr-course-section.is-red :is(h2, h3, p, li, strong),
.lr-course-section.is-dark :is(h2, h3, p, li, strong) { color: var(--lr-white); }

.lr-course-section.is-red a,
.lr-course-section.is-dark a { color: var(--lr-white); }

.lr-course-section.is-dark .wp-block-button__link {
    background: var(--lr-red);
    color: var(--lr-white);
}

.lr-course-section.is-centred { text-align: center; }
.lr-course-section.is-centred .wp-block-buttons { justify-content: center; }
/* Centred sections centre their lists too, but keep the markers: the old
   list-style:none here hid the bullets in every centred band (EWP under
   11m, Tasmania: Jeremy 22/10/2026). Markers sit inside so they travel
   with centred text; icon lists keep their own rule. */
.lr-course-section.is-centred ul.wp-block-list:not(.lr-icon-list) { list-style: disc inside; padding-left: 0; }
.lr-course-section.is-centred ol.wp-block-list { list-style: decimal inside; padding-left: 0; }

/* ---------- half text, half photo ---------- */

.lr-course-section.is-split { padding: 0; }

.lr-course-section.is-split > * {
    max-width: none;
    width: 100%;
}

.lr-course-section.is-split .wp-block-columns {
    align-items: stretch;
    display: flex;
    gap: 0;
    margin: 0;
    max-width: none;
}

.lr-course-section.is-split .wp-block-column {
    flex: 0 0 50%;
    max-width: 50%;
}

.lr-course-section.is-split .lr-split__text {
    align-self: center;
    padding: 72px 64.7969px;
}

.lr-course-section.is-split .lr-split__media { padding: 0; }

.lr-course-section.is-split .lr-split__media figure {
    height: 100%;
    margin: 0;
}

.lr-course-section.is-split .lr-split__media img {
    display: block;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
    width: 100%;
}

.lr-course-section.is-split.media-left .lr-split__text { order: 2; }
.lr-course-section.is-split.media-left .lr-split__media { order: 1; }

/* ---------- why choose ---------- */

.lr-course-section.is-grey {
    background: var(--lr-surface);
    padding: 92.7344px 0;
}

.lr-course-section.is-why { text-align: center; }
.lr-course-section.is-why h2 { margin-bottom: 35px; }

.lr-course-section.is-why .lr-why {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: left;
}

.lr-course-section.is-why .lr-why__card {
    background: var(--lr-white);
    border-radius: 10px;
    flex: none;
    max-width: none;
    padding: 35px 35px 35px 102px;
    position: relative;
}

.lr-course-section.is-why .lr-why__card figure {
    left: 35px;
    margin: 0;
    position: absolute;
    top: 35px;
}

.lr-course-section.is-why .lr-why__card figure img {
    height: 50px;
    object-fit: contain;
    width: 50px;
}

.lr-course-section.is-why .lr-why__card h3 {
    color: var(--lr-red);
    font-size: 22.4px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 24.64px;
    margin: 8px 0 16px;
}

.lr-course-section.is-why .lr-why__card p {
    color: var(--lr-ink);
    font-size: 16px;
    line-height: 24px;
}

.lr-course-section.is-why .wp-block-buttons {
    display: flex;
    gap: 32px;
    justify-content: center;
    margin-top: 56px;
}

.lr-course-section.is-why .wp-block-buttons + p {
    color: var(--lr-ink);
    margin-top: 28px;
}

/* ---------- faqs ---------- */

.lr-course-section.is-faq { padding: 92.7344px 0; }

/* ---------- bottom call to action ---------- */

.lr-course-section.is-cta {
    background: var(--lr-ink-deep);
    padding: 119.227px 0;
}

.lr-course-section.is-cta::before {
    background: url("../cta.png") center / cover no-repeat;
    content: "";
    inset: 0;
    opacity: 0.3;
    position: absolute;
}

.lr-course-section.is-cta > * {
    max-width: 700px;
    position: relative;
    z-index: 1;
}

.lr-course-section.is-cta h2 {
    color: var(--lr-white);
    font-size: 57.6px;
    font-weight: 800;
    line-height: 63.36px;
    margin-bottom: 24px;
    padding-top: 55px;
    position: relative;
}

.lr-course-section.is-cta h2::before {
    background: url("../mark.png") center / contain no-repeat;
    content: "";
    height: 45px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 45px;
}

.lr-course-section.is-cta p { color: var(--lr-white); }

.lr-course-section.is-cta .wp-block-buttons { margin-top: 40px; }

/* ---------- locations ---------- */

.lr-course-section.is-locations {
    background: var(--lr-surface);
    padding: 92.7344px 0;
}
.lr-course-section.is-locations > .lr-container { max-width: var(--lr-container); }

.lr-locations__intro { margin-bottom: 40px; }

.lr-locations {
    background: var(--lr-white);
    border-radius: 10px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 45px;
}

.lr-locations__card {
    color: inherit;
    display: block;
    text-decoration: none;
}

.lr-locations__img {
    border-radius: 15px;
    display: block;
    height: 165px;
    object-fit: cover;
    width: 100%;
}

.lr-locations__card h3 {
    align-items: center;
    color: var(--lr-red);
    display: flex;
    font-size: 22.4px;
    font-weight: 700;
    gap: 10px;
    letter-spacing: normal;
    line-height: 1.1;
    margin: 20px 0 12px;
}

.lr-locations__pin {
    background: currentColor;
    display: inline-block;
    flex: 0 0 auto;
    height: 18px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M172.3 501.7C27 291 0 269.4 0 192 0 86 86 0 192 0s192 86 192 192c0 77.4-27 99-172.3 309.7-9.5 13.8-29.9 13.8-39.4 0zM192 272c44.2 0 80-35.8 80-80s-35.8-80-80-80-80 35.8-80 80 35.8 80 80 80z'/%3E%3C/svg%3E") center / contain no-repeat;
    width: 14px;
}

.lr-locations__card p {
    color: var(--lr-ink);
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}

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

/* ---------- nationally recognised training note ---------- */

.lr-course-section.is-note {
    background: var(--lr-surface);
    padding: 92.7344px 0;
    text-align: center;
}

.lr-note__logo {
    display: block;
    height: 124px;
    margin: 0 auto 24px;
    width: auto;
}

.lr-note__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    justify-content: center;
    margin: 0;
}

/* ---------- buttons ---------- */

.lr-main .wp-block-button__link {
    background: var(--lr-red);
    border: 2px solid var(--lr-red);
    border-radius: var(--lr-radius-pill);
    color: var(--lr-white);
    display: inline-block;
    font-size: 17.6px;
    font-weight: 500;
    line-height: 1.2;
    min-height: 0;
    padding: 18px 28px;
    text-decoration: none;
}

.lr-main .wp-block-button.is-style-outline > .wp-block-button__link {
    background: transparent;
    border-color: var(--lr-red);
    color: var(--lr-ink-deep);
}

.lr-main .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.lr-main .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
    background: var(--lr-red);
    border-color: var(--lr-red);
    color: var(--lr-white);
}

.lr-course-section.is-dark .wp-block-button.is-style-outline > .wp-block-button__link,
.lr-course-section.is-cta .wp-block-button.is-style-outline > .wp-block-button__link {
    border-color: var(--lr-white);
    color: var(--lr-white);
}

.lr-main .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.lr-course-section.is-dark .wp-block-buttons { margin-top: 32px; }

/* ---------- faq accordion, matched to the live rows ---------- */

.lr-course-section.is-faq .wp-block-blacksheep-faq-accordion { text-align: left; }

.lr-course-section.is-faq .faq {
    margin: 0;
    max-width: none;
    width: 100%;
}

.lr-course-section.is-faq .faq__item {
    background: transparent;
    border: 1px solid #d5d8dc;
    border-radius: 0;
    margin: 0;
}

.lr-course-section.is-faq .faq__item + .faq__item { border-top: 0; }

.lr-course-section.is-faq .faq__q {
    color: var(--lr-ink-deep);
    font-size: 16px;
    font-weight: 400;
    gap: 10px;
    justify-content: flex-start;
    line-height: 24px;
    padding: 10px;
}

.lr-course-section.is-faq .faq__q svg { display: none; }

/* Production leads the question with the toggle glyph. */
.lr-course-section.is-faq .faq__q::before {
    color: #1f2124;
    content: "+";
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
}

.lr-course-section.is-faq .faq__item.is-open .faq__q::before { content: "\2212"; }

.lr-course-section.is-faq .faq__a { padding: 0 10px 0 35px; }
.lr-course-section.is-faq .faq__a p { font-size: 16px; line-height: 24px; }

/* ---------------------------------------------------------------
 * Type per section, measured off the live page.
 *
 * The prose sections do not run at the 16px body size: they run at
 * 20/30 with -1px tracking, and the two colour bands drop to 18/27
 * at weight 500 so white copy holds its own against red and black.
 * ------------------------------------------------------------- */

.lr-course-section :is(p, li) {
    font-size: 20px;
    letter-spacing: 0;
    line-height: 30px;
}

.lr-course-section p { margin: 0 0 16px; }
.lr-course-section :is(ul, ol) { margin: 0 0 16px; padding-left: 40px; }
.lr-course-section li { margin: 0; }
.lr-course-section > * > :last-child { margin-bottom: 0; }

/* Course details prose is the deep ink, the rest of the prose is #333. */
.lr-course-section.is-details :is(p, li) { color: var(--lr-ink-deep); }

.lr-course-section.is-red :is(p, li),
.lr-course-section.is-dark :is(p, li) {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 27px;
}

.lr-course-section.is-red p,
.lr-course-section.is-dark p { margin-bottom: 14.4px; }

/* Cards, notes and the closing call to action sit back at 16/24. */
.lr-course-section.is-why .lr-why__card :is(p, li),
.lr-course-section.is-faq .faq__a :is(p, li),
.lr-course-section.is-cta :is(p, li),
.lr-course-section.is-locations .lr-locations__card p {
    font-size: 16px;
    letter-spacing: normal;
    line-height: 24px;
}

.lr-course-section.is-note p {
    font-size: 20px;
    letter-spacing: 0;
    line-height: 30px;
}

.lr-course-section.is-note .lr-note__links a { font-size: 16px; letter-spacing: normal; }

/* Numbers that sit in a column read as a column. */
.lr-course-section :is(time, .lrc-avail__cost, .lrc-avail__per) {
    font-variant-numeric: tabular-nums;
}

/* ---------- the locations a course is delivered at ----------
 * Two columns inside the text half, each a linked suburb over a linked
 * address. These rows are the only link from a course to its location page,
 * so they are worth more than the hard-coded grid further down.
 */

.lr-delivery-locations { margin-top: 32px; }

/* The list is a dynamic block now and writes its own container, so the grid
   sits on .lr-delivery-locations itself. The "> *" form is kept for the
   converted markup that still has core/group's inner container. */
.lr-delivery-locations,
.lr-delivery-locations > .wp-block-group__inner-container {
    column-gap: 50px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 30px;
    row-gap: 26px;
}

.lr-delivery-location > * { margin: 0; }

/* Each facility is one link: name and address inside a single anchor, so the
   whole card is the click target and Google sees one signal, not two. */
a.lr-delivery-location {
    color: inherit;
    display: block;
    text-decoration: none;
}

a.lr-delivery-location:hover h5,
a.lr-delivery-location:focus-visible h5 { text-decoration: underline; }

a.lr-delivery-location:focus-visible {
    outline: 2px solid var(--lr-red);
    outline-offset: 4px;
}

/* The facility you are already on. Still listed, deliberately not a link. */
.lr-delivery-location.is-here { opacity: .65; }

.lr-course-section .lr-delivery-location h5 {
    color: var(--lr-red);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 24.2px;
    margin: 0 0 4px;
}

.lr-course-section .lr-delivery-location h5 a { color: inherit; text-decoration: none; }
.lr-course-section .lr-delivery-location h5 a:hover { text-decoration: underline; }

.lr-course-section .lr-delivery-location p {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 27px;
    margin: 0;
}

.lr-course-section .lr-delivery-location p a { color: var(--lr-red); text-decoration: none; }
.lr-course-section .lr-delivery-location p a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------
 * Responsive. Last in the file so the phone values win the cascade.
 * ------------------------------------------------------------- */

@media (max-width: 1024px) {
    .lr-course-section.is-red,
    .lr-course-section.is-dark { padding: 72px 4vw; }

    .lr-course-section.is-split > .wp-block-columns { display: block; }

    .lr-course-section.is-split .wp-block-columns { display: block; }

    .lr-course-section.is-split .wp-block-column {
        flex: none;
        max-width: none;
    }

    .lr-course-section.is-split .lr-split__text { padding: 56px 4vw; }
    .lr-course-section.is-split .lr-split__media img { height: 250px; min-height: 0; }

    .lr-course-section.is-details .wp-block-columns { display: block; }
    .lr-course-section.is-details .wp-block-column { flex: none; max-width: none; }
    .lr-course-section.is-details .lr-details__summary { margin-top: 32px; }

    .lr-course-section.is-book h2 { margin-left: 0; width: auto; }
}

/* Prose steps down at the tablet edge, exactly where production does. */
@media (max-width: 1024px) {
    .lr-course-section :is(p, li) {
        font-size: 18px;
        letter-spacing: 0;
        line-height: 27px;
    }

    /* The RTO note never changes size on production. */
    .lr-course-section.is-note p {
        font-size: 20px;
        letter-spacing: 0;
        line-height: 30px;
    }
}

/* ---------- phone ----------
 * One 88vw rail, centred H1, stacked cards. Measured at 767 and 375.
 */

@media (max-width: 767px) {
    .lr-course-section > *,
    .lr-course-section.is-wide > *,
    .lr-course-section.is-details > * { width: 88vw; }

    .lr-course-section.is-red,
    .lr-course-section.is-dark { padding: 56px 6vw; }

    .lr-course-section :is(ul, ol) { padding-left: 24px; }

    .lr-course-section.is-cta h2 { font-size: 35.2px; line-height: 38.72px; }

    .lr-course-section.is-why .lr-why { grid-template-columns: 1fr; }

    .lr-course-section.is-split .lr-split__text { padding: 48px 6vw; }

    .lr-course-section.is-book,
    .lr-course-section.is-details,
    .lr-course-section.is-wide,
    .lr-course-section.is-plain,
    .lr-course-section.is-grey,
    .lr-course-section.is-faq,
    .lr-course-section.is-locations,
    .lr-course-section.is-note { padding: 56px 0; }

    .lr-course-section.is-cta { padding: 72px 0; }
    .lr-course-section.is-cta h2 { padding-top: 55px; }

    /* Production keeps the card left-aligned on a phone: icon above title. */
    .lr-course-section.is-why .lr-why__card {
        padding: 35px;
        text-align: left;
    }

    .lr-course-section.is-why .lr-why__card figure {
        left: auto;
        margin: 0 0 12px;
        position: static;
        top: auto;
    }

    .lr-course-section.is-why .wp-block-buttons { flex-direction: column; gap: 16px; }
    .lr-course-section.is-why .wp-block-buttons .wp-block-button { width: 100%; }
    .lr-course-section.is-why .wp-block-button__link { display: block; text-align: center; }

    .lr-locations { grid-template-columns: 1fr; padding: 24px; }
    .lr-locations__card { text-align: center; }
    .lr-locations__img { height: 165px; }

    .lr-locations__card h3 {
        display: block;
        font-size: 22.4px;
    }

    .lr-locations__pin { display: block; margin: 0 auto 6px; }

    .lr-note__links { flex-direction: column; gap: 10px; }

    .lr-delivery-locations,
    .lr-delivery-locations > .wp-block-group__inner-container {
        grid-template-columns: 1fr;
        padding-left: 0;
        row-gap: 20px;
    }

}

/* Location pages only: the way into everything else run at this facility.
   Sits under the facilities list inside Course delivery, which is a narrow
   column, so the button wraps rather than overflowing it. */
/* #lr-main to beat the section's own paragraph margin reset. */
#lr-main .lr-delivery-more,
.lr-delivery-more {
    margin: 28px 0 0;
    padding-left: 30px;
}

.lr-delivery-more .lrc-btn {
    display: inline-block;
    height: auto;
    line-height: 1.3;
    max-width: 100%;
    text-align: center;
    white-space: normal;
}

@media (max-width: 767px) {
    #lr-main .lr-delivery-more,
    .lr-delivery-more { padding-left: 0; }

    .lr-delivery-more .lrc-btn { width: 100%; }
}