/* ==========================================================================
   Course page (every course page and every town, certificate, refresher and
   provider overlay rendered by front/course-page.blade.php)
   The page shares the landing presentation layer (landing-page.css, tokens
   on .lp). This file only dresses what exists on the course page and not on
   the landing: the course family cards, the "see all courses" call to
   action and the location links. The copy is untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Course family cards: the course card of Irish Manual Handling, measured on
   the live site (500px card, 31px title, the saturated value band with its
   white tag, bordered icon tiles, the large red price, the yellow Enrol Now
   over the outlined View Course, the tick trust row). One or two cards
   centred under the showcase head, one per row on phones.
   -------------------------------------------------------------------------- */
.lp .cwCardSection {
    width: 100%;
    max-width: var(--lp-measure);
    margin: calc(44px * var(--lp-scale)) auto 0;
    padding: 0 var(--lp-pad-x);
    box-sizing: border-box;
}

/* Inside the showcase inner the page padding is already there: a second
   one would pinch the card to 318px on a 390px phone (the two card layout
   of the other platforms gets 370px) and squeeze the value band. */
.lp .productsShowcaseInner .cwCardSection {
    padding-left: 0;
    padding-right: 0;
}

.lp .cwCardsRow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 28px;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;
}

.lp .cwCardWrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(500px, 100%);
    margin: 0;
    padding: 5px 0 0;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    box-shadow: 0 1px 2px rgba(2, 6, 23, 0.05), 0 22px 48px -24px rgba(13, 71, 161, 0.28), 0 10px 26px -18px rgba(2, 6, 23, 0.12);
    overflow: hidden;
    transition: transform 0.28s var(--lp-ease), box-shadow 0.28s var(--lp-ease);
}

.lp .cwCardWrapper:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(2, 6, 23, 0.05), 0 30px 56px -24px rgba(13, 71, 161, 0.36), 0 14px 30px -18px rgba(2, 6, 23, 0.14);
}

.lp .cwCardWrapper > .ie-card-top,
.lp .cwCardWrapper > .uk-card-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: 5px;
}

.lp .cwCardImg {
    position: relative;
    overflow: hidden;
    line-height: 0;
}

.lp .cwCardImg img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 500 / 232;
    object-fit: cover;
    border-radius: 0;
}

.lp .cwCardInfo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 26px 28px 28px;
    background: #ffffff;
}

.lp .cwCardText {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}

.lp .cwCardTitle,
.lp .cwCardTitle.cwTitle--long,
.lp .cwCardTitle.cwTitle--xl,
.lp .cwCardTitle .cwTitleFull,
.lp .cwCardTitle .cwTitleMobile {
    margin: 0;
    font-family: var(--lp-font-body);
    font-size: 31px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: #0f1b34;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.lp .cwCardTitle .cwTitleMobile {
    display: none;
}

/* Value band: the saturated emerald plate with the white tag and the
   translucent check; the theory style band is violet */
.lp .cwComboBadge {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 3px -28px;
    padding: 12px 28px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, #065f46 0%, #059669 52%, #10b981 100%);
    color: #ffffff;
    font-family: var(--lp-font-body);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.005em;
    line-height: 1.3;
}

.lp .cwComboBadge--blue {
    background: linear-gradient(90deg, #4c1d95 0%, #6d28d9 52%, #8b5cf6 100%);
}

.lp .cwComboBadge__tag {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(2, 6, 23, 0.14);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #064e3b;
}

.lp .cwComboBadge--blue .cwComboBadge__tag {
    color: #4c1d95;
}

.lp .cwComboBadge__txt {
    flex: 1 1 auto;
    min-width: 0;
    color: #ffffff;
}

.lp .cwComboBadge__short {
    display: none;
}

.lp .cwComboBadge__check {
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-left: auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.lp .cwComboBadge__check svg {
    width: 14px;
    height: 14px;
}

.lp .cwCardDivider {
    width: 100%;
    height: 0;
    margin: 4px 0 2px;
    border: 0;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    opacity: 1;
}

/* Key facts: a bordered icon tile, the label, the value */
.lp .cwCardFacts {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0;
}

.lp .cwCardFact {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.lp .cwCardFactIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(99, 170, 255, 0.3);
    border-radius: 11px;
    background: #ffffff;
    box-sizing: border-box;
}

.lp .cwCardFactIcon img {
    width: 21px;
    height: 21px;
    object-fit: contain;
}

.lp .cwCardFactBody {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 7px;
    min-width: 0;
    font-family: var(--lp-font-body);
    font-size: 17.5px;
    line-height: 1.3;
}

.lp .cwFactLabel {
    font-weight: 700;
    color: #0f1b34;
}

.lp .cwFactLabel::after {
    content: ':';
}

.lp .cwFactValue {
    font-weight: 600;
    color: #334155;
}

.lp .cwCardFact--price .cwCardFactBody {
    gap: 4px 11px;
}

.lp .cwPriceWas {
    margin-right: -6px;
    font-family: var(--lp-font-body);
    font-size: 21px;
    font-weight: 700;
    color: #94a3b8;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.lp .cwPriceNow {
    font-family: var(--lp-font-body);
    font-size: 37px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #dc2626;
}

/* The two line note sits centred on the price digits; the two prices keep
   their common baseline (the row aligns on baseline, the note opts out). */
.lp .cwPriceIncl {
    display: flex;
    flex-direction: column;
    align-self: center;
    margin-left: 1px;
    font-size: 14px;
    line-height: 1.16;
}

.lp .cwPriceIncl__a {
    font-weight: 600;
    color: #64748b;
}

.lp .cwPriceIncl__b {
    font-weight: 800;
    color: #047857;
}

/* Buttons: the yellow Enrol Now on top, the outlined View Course under it
   (the markup prints View Course first, the column is reversed) */
.lp .cwCardBtns {
    display: flex;
    flex-direction: column-reverse;
    gap: 11px;
    margin: 20px 0 0;
    padding: 0;
}

.lp .cwCardBtns a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 54px;
    padding: 0 24px;
    box-sizing: border-box;
    border-radius: 13px;
    font-family: var(--lp-font-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.25s var(--lp-ease), box-shadow 0.25s var(--lp-ease), filter 0.25s var(--lp-ease), border-color 0.25s var(--lp-ease);
}

.lp .cwCardBtns a::before {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 90%);
    transform: translateX(-140%) translateZ(0);
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
}

.lp .cwCardBtns a:hover::before,
.lp .cwCardBtns a:focus-visible::before {
    animation: lp-btn-shimmer 2100ms ease-in-out 1 forwards;
}

.lp .cwBtnBuy {
    color: #1a1500;
    border: 0;
    background: linear-gradient(135deg, #ffe53d 0%, #ffd400 50%, #ffc400 100%);
    box-shadow: 0 12px 24px -10px rgba(255, 196, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.lp .cwBtnBuy:hover {
    color: #1a1500;
    transform: translateY(-2px);
    filter: brightness(1.03);
    box-shadow: 0 16px 30px -10px rgba(255, 196, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.65);
    text-decoration: none;
}

.lp .cwBtnInfo {
    color: #0f1b34;
    background: #ffffff;
    border: 1.5px solid rgba(15, 23, 42, 0.16);
    box-shadow: 0 4px 12px -8px rgba(2, 6, 23, 0.18);
}

.lp .cwBtnInfo:hover {
    color: #0f1b34;
    transform: translateY(-2px);
    border-color: rgba(15, 23, 42, 0.3);
    box-shadow: 0 10px 22px -12px rgba(2, 6, 23, 0.3);
    text-decoration: none;
}

.lp .cwCardBtns a:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.22);
}

/* Trust row: three short promises with green ticks on one line */
.lp .cwCardTrust {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    width: 100%;
    margin: 16px 0 0;
    padding: 13px 0 0;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    font-family: var(--lp-font-body);
    font-size: 13px;
    font-weight: 600;
    color: #5b6b82;
    text-align: center;
}

.lp .cwCardTrust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.lp .cwCardTrust span::before {
    content: '';
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background: #10b981;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z'/></svg>") center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   "Looking for a different course?": one line and the shared arrow button
   -------------------------------------------------------------------------- */
.lp .sacSection {
    width: 100%;
    max-width: var(--lp-measure);
    margin: calc(40px * var(--lp-scale)) auto 0;
    padding: 0 var(--lp-pad-x);
    box-sizing: border-box;
    text-align: center;
}

.lp .sacInner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.lp .sacKicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-family: var(--lp-font-body);
    font-size: 16.5px;
    font-weight: 600;
    color: var(--lp-ink-2);
}

.lp .sacKickerIcon {
    width: 20px;
    height: 20px;
    color: var(--lp-blue);
}

.lp .sacBtnWrap {
    position: relative;
    display: inline-flex;
}

.lp .sacBtnHalo {
    position: absolute;
    inset: -8px;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgba(37, 99, 235, 0.22), rgba(37, 99, 235, 0));
    filter: blur(8px);
    opacity: 0.8;
    pointer-events: none;
    transition: opacity 0.3s var(--lp-ease);
}

.lp .sacBtnWrap:hover .sacBtnHalo {
    opacity: 1;
}

.lp .sacBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 0 10px 0 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 55%, #1d4ed8 100%);
    color: #ffffff;
    font-family: var(--lp-font-display);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 18px 34px -18px rgba(37, 99, 235, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: transform 0.25s var(--lp-ease), box-shadow 0.25s var(--lp-ease);
}

.lp .sacBtn:hover,
.lp .sacBtn:focus-visible {
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 24px 40px -18px rgba(37, 99, 235, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    outline: 0;
}

.lp .sacBtnLabel {
    white-space: nowrap;
}

.lp .sacBtnCount {
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    font-family: var(--lp-font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.lp .sacBtnArrow {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--lp-blue-deep);
    box-shadow: 0 8px 18px -10px rgba(2, 6, 23, 0.5);
    transition: transform 0.25s var(--lp-ease);
}

.lp .sacBtnArrow svg {
    width: 18px;
    height: 18px;
}

.lp .sacBtn:hover .sacBtnArrow {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Location links (every town page of this course): the crawl block in the
   same glass frame as the cluster links under it
   -------------------------------------------------------------------------- */
.lp .sllSection {
    padding: var(--lp-sec-pad) 0;
    background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
    border: 0;
}

.lp .sllInner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--lp-measure);
    margin: 0 auto;
    padding: 0 var(--lp-pad-x);
    box-sizing: border-box;
    text-align: center;
}

.lp .sllTitle {
    margin: 0 0 calc(20px * var(--lp-scale));
    font-family: var(--lp-font-display);
    font-size: calc(30px * var(--lp-scale));
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--lp-ink);
}

.lp .sllSubtitle {
    max-width: 620px;
    margin: 0 auto;
    font-family: var(--lp-font-body);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.65;
    color: var(--lp-ink-2);
}

.lp .sllLinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: calc(32px * var(--lp-scale)) 0 0;
    padding: 0;
    font-size: 14.5px;
    line-height: 1.2;
}

.lp .sllLinks a,
.lp .sllCurrent {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--lp-line);
    background: var(--lp-glass-strong);
    font-family: var(--lp-font-body);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--lp-ink-2);
    text-decoration: none;
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.3;
    box-shadow: 0 10px 24px -18px rgba(30, 58, 138, 0.5);
    transition: transform 0.2s var(--lp-ease), color 0.2s var(--lp-ease), border-color 0.2s var(--lp-ease);
}

.lp .sllLinks a:hover {
    transform: translateY(-2px);
    color: var(--lp-blue-deep);
    border-color: rgba(37, 99, 235, 0.4);
    text-decoration: none;
}

.lp .sllCurrent {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--lp-blue) 0%, var(--lp-blue-deep) 100%);
}

/* The partial prints a middle dot between the links; the pills do not need it */
.lp .sllLinks a:not(:last-child)::after,
.lp .sllCurrent:not(:last-child)::after {
    content: none;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Breakpoints (phone values measured on the reference card: 22px side
   padding, 26px title, the short band label, stacked facts with a small
   capital label over the value, 33px price, full width buttons)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .lp .cwCardsRow {
        gap: 22px;
    }
}

@media (max-width: 767px) {
    .lp .cwCardsRow {
        gap: 20px;
    }

    .lp .cwCardWrapper {
        width: min(500px, 100%);
    }

    .lp .cwCardImg img {
        aspect-ratio: 2 / 1;
    }

    .lp .cwCardInfo {
        padding: 24px 22px 26px;
    }

    .lp .cwCardText {
        row-gap: 14px;
    }

    .lp .cwCardTitle,
    .lp .cwCardTitle.cwTitle--long,
    .lp .cwCardTitle.cwTitle--xl,
    .lp .cwCardTitle .cwTitleFull,
    .lp .cwCardTitle .cwTitleMobile {
        font-size: 26px;
    }

    /* Phone metrics of the two card layout's band (gap 9, check 22), so the
       tag, the short text and the check share one line down to 360px */
    .lp .cwComboBadge {
        gap: 9px;
        margin: 6px -22px 2px;
        padding: 13px 22px;
        font-size: 14px;
    }

    .lp .cwComboBadge__tag {
        padding: 4px 7px;
        letter-spacing: 0.04em;
    }

    .lp .cwComboBadge__check {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
    }

    .lp .cwComboBadge__full {
        display: none;
    }

    .lp .cwComboBadge__short {
        display: inline;
    }

    .lp .cwCardFactIcon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    .lp .cwCardFactBody {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .lp .cwFactLabel {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #334155;
    }

    .lp .cwFactLabel::after {
        content: none;
    }

    .lp .cwFactValue {
        font-size: 17px;
        font-weight: 700;
        color: #0f1b34;
    }

    .lp .cwCardFact--price .cwCardFactBody {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 8px;
    }

    .lp .cwPriceWas {
        margin-right: 0;
        font-size: 19px;
    }

    .lp .cwPriceNow {
        font-size: 33px;
    }

    .lp .cwPriceIncl {
        flex: 1 0 100%;
        flex-direction: row;
        gap: 6px;
        margin: 0;
    }

    .lp .cwPriceIncl__a::after {
        content: '\00B7';
        margin-left: 6px;
        color: #94a3b8;
    }

    .lp .cwCardBtns {
        gap: 12px;
        margin-top: 22px;
    }

    .lp .cwCardTrust {
        flex-wrap: wrap;
        margin-top: 18px;
        padding-top: 14px;
    }

    .lp .sacBtn {
        font-size: 15px;
        padding-left: 20px;
    }

    .lp .sllTitle {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    .lp .cwCardTitle .cwTitleFull {
        display: none;
    }

    .lp .cwCardTitle .cwTitleMobile {
        display: inline;
    }

    .lp .sacBtnCount {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp .cwCardWrapper,
    .lp .cwCardBtns a,
    .lp .sacBtn,
    .lp .sacBtnArrow,
    .lp .sllLinks a {
        transition: none;
    }

    .lp .cwCardWrapper:hover,
    .lp .cwCardBtns a:hover,
    .lp .sacBtn:hover {
        transform: none;
    }

    .lp .cwCardBtns a:hover::before {
        animation: none;
    }
}