/* ==========================================================================
   Platform specific landing sections on the shared presentation layer.
   Loaded on every platform after landing-page.css; it only matches markup
   that exists on the platform that prints it. The copy is untouched.

   1. The three UK story sections (employees, nationwide, certificate):
      empTrainingSection, wkSafetySection, hsCertSection. One architecture:
      a centred head (badge, title, subtitle), a text block, three cards
      with a tinted icon tile, a closing text block.
   2. The First Aid hub (cvrSection) and the HACCP hub (hcvSection): the
      tokens of the approved language on top of their own layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. UK story sections
   -------------------------------------------------------------------------- */
.lp .empTrainingSection {
    background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
}

.lp .wkSafetySection {
    background: linear-gradient(180deg, #f2fbf7 0%, #ffffff 100%);
}

.lp .hsCertSection {
    background: linear-gradient(180deg, #ffffff 0%, #f7f5ff 100%);
}

.lp .empTrainingInner,
.lp .wkSafetyInner,
.lp .hsCertInner {
    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;
}

.lp .empTrainingHeaderBlock,
.lp .wkSafetyHeaderBlock,
.lp .hsCertHeaderBlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: calc(760px * var(--lp-scale));
    margin: 0 auto calc(40px * var(--lp-scale));
}

/* The badge is the shared eyebrow chip */
.lp .empTrainingBadge,
.lp .wkSafetyBadge,
.lp .hsCertBadge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 calc(24px * var(--lp-scale));
    padding: 9px 16px 9px 12px;
    border-radius: 999px;
    background: var(--lp-glass-strong);
    border: 1px solid var(--lp-line);
    box-shadow: 0 10px 24px -18px rgba(30, 58, 138, 0.5);
    font-family: var(--lp-font-body);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-ink-2);
    line-height: 1;
    white-space: nowrap;
}

.lp .empTrainingBadgeIcon,
.lp .wkSafetyBadgeIcon,
.lp .hsCertBadgeIcon {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, var(--lp-blue) 0%, var(--lp-blue-deep) 100%);
    box-shadow: 0 6px 14px -8px rgba(37, 99, 235, 0.8);
}

.lp .empTrainingBadgeIcon svg,
.lp .wkSafetyBadgeIcon svg,
.lp .hsCertBadgeIcon svg {
    width: 12px;
    height: 12px;
}

.lp .empTrainingTitle,
.lp .wkSafetyTitle,
.lp .hsCertTitle {
    margin: 0;
    font-family: var(--lp-font-display);
    font-size: clamp(30px, 3.1vw, calc(44px * var(--lp-scale)));
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: var(--lp-ink);
    text-wrap: balance;
}

.lp .empTrainingSubtitle,
.lp .wkSafetySubtitle,
.lp .hsCertSubtitle {
    max-width: calc(680px * var(--lp-scale));
    margin: calc(20px * var(--lp-scale)) 0 0;
    font-family: var(--lp-font-body);
    font-size: calc(17.5px * var(--lp-scale));
    font-weight: 500;
    line-height: 1.65;
    color: var(--lp-ink-2);
}

/* Text blocks: the reading measure of the definition block */
.lp .empTrainingTextBlock,
.lp .wkSafetyTextBlock,
.lp .hsCertTextBlock {
    max-width: calc(860px * var(--lp-scale));
    margin: 0 auto calc(36px * var(--lp-scale));
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    text-align: center;
}

.lp .empTrainingTextBlock p,
.lp .wkSafetyTextBlock p,
.lp .hsCertTextBlock p {
    margin: 0 0 calc(16px * var(--lp-scale));
    font-family: var(--lp-font-body);
    font-size: calc(17px * var(--lp-scale));
    font-weight: 500;
    line-height: 1.7;
    color: var(--lp-ink-2);
}

.lp .empTrainingTextBlock p:last-child,
.lp .wkSafetyTextBlock p:last-child,
.lp .hsCertTextBlock p:last-child {
    margin-bottom: 0;
}

.lp .empTrainingTextBlock strong,
.lp .wkSafetyTextBlock strong,
.lp .hsCertTextBlock strong {
    color: var(--lp-ink);
    font-weight: 700;
}

.lp .empTrainingTextBlock--bottom,
.lp .wkSafetyTextBlock--bottom,
.lp .hsCertTextBlock--bottom {
    margin: calc(36px * var(--lp-scale)) auto 0;
}

/* Cards: three glass cards, the tinted icon tile on the first row */
.lp .empTrainingGrid,
.lp .wkSafetyGrid,
.lp .hsCertGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(22px * var(--lp-scale));
    margin: 0;
    padding: 0;
}

.lp .empTrainingCard,
.lp .wkSafetyCard,
.lp .hsCertCard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: calc(28px * var(--lp-scale));
    box-sizing: border-box;
    background: var(--lp-glass);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow), 0 0 0 1px var(--lp-line);
    text-align: left;
    transition: transform 0.28s var(--lp-ease), box-shadow 0.28s var(--lp-ease);
}

.lp .empTrainingCard:hover,
.lp .wkSafetyCard:hover,
.lp .hsCertCard:hover {
    transform: translateY(-4px);
    box-shadow: var(--lp-shadow-hover), 0 0 0 1px rgba(37, 99, 235, 0.22);
}

.lp .empTrainingCardIcon,
.lp .wkSafetyCardIcon,
.lp .hsCertCardIcon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--lp-blue) 0%, var(--lp-blue-deep) 100%);
    box-shadow: 0 14px 26px -16px rgba(37, 99, 235, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.lp .empTrainingCardIcon svg,
.lp .wkSafetyCardIcon svg,
.lp .hsCertCardIcon svg {
    width: 26px;
    height: 26px;
}

.lp .empTrainingCardIcon--green,
.lp .hsCertCardIcon--emerald {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 14px 26px -16px rgba(5, 150, 105, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.lp .empTrainingCardIcon--amber {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 14px 26px -16px rgba(217, 119, 6, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.lp .wkSafetyCardIcon--teal {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    box-shadow: 0 14px 26px -16px rgba(13, 148, 136, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.lp .wkSafetyCardIcon--indigo,
.lp .hsCertCardIcon--purple {
    background: linear-gradient(135deg, #6d28d9 0%, #4c1d95 100%);
    box-shadow: 0 14px 26px -16px rgba(109, 40, 217, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.lp .wkSafetyCardIcon--rose {
    background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
    box-shadow: 0 14px 26px -16px rgba(225, 29, 72, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.lp .hsCertCardIcon--sky {
    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
    box-shadow: 0 14px 26px -16px rgba(14, 165, 233, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.lp .empTrainingCardBody,
.lp .wkSafetyCardBody,
.lp .hsCertCardBody {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lp .empTrainingCardTitle,
.lp .wkSafetyCardTitle,
.lp .hsCertCardTitle {
    margin: 0;
    font-family: var(--lp-font-display);
    font-size: calc(20px * var(--lp-scale));
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--lp-ink);
}

.lp .empTrainingCardText,
.lp .wkSafetyCardText,
.lp .hsCertCardText {
    margin: 0;
    font-family: var(--lp-font-body);
    font-size: calc(16px * var(--lp-scale));
    font-weight: 500;
    line-height: 1.65;
    color: var(--lp-ink-2);
}

.lp .empTrainingCardText strong,
.lp .wkSafetyCardText strong,
.lp .hsCertCardText strong {
    color: var(--lp-ink);
}

/* Links inside these sections */
.lp .empTrainingSection a:not([class]),
.lp .wkSafetySection a:not([class]),
.lp .hsCertSection a:not([class]) {
    color: var(--lp-blue-deep);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

@media (max-width: 1024px) {
    .lp .empTrainingGrid,
    .lp .wkSafetyGrid,
    .lp .hsCertGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .lp .empTrainingGrid,
    .lp .wkSafetyGrid,
    .lp .hsCertGrid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .lp .empTrainingCard,
    .lp .wkSafetyCard,
    .lp .hsCertCard {
        padding: 22px 18px;
        border-radius: 22px;
    }

    .lp .empTrainingHeaderBlock,
    .lp .wkSafetyHeaderBlock,
    .lp .hsCertHeaderBlock {
        margin-bottom: 32px;
    }

    /* The chip may take two lines on a phone, never overflow */
    .lp .empTrainingBadge,
    .lp .wkSafetyBadge,
    .lp .hsCertBadge {
        max-width: 100%;
        white-space: normal;
        text-align: center;
        line-height: 1.35;
        padding: 8px 14px 8px 10px;
        box-sizing: border-box;
    }

    .lp .empTrainingTextBlock p,
    .lp .wkSafetyTextBlock p,
    .lp .hsCertTextBlock p {
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   Course cards printed by a partial with one title span only: the phone
   rules hide .title-full expecting a .title-mobile twin. When the twin is
   missing the full title stays, so the card never appears without a name.
   -------------------------------------------------------------------------- */
.lp .product-text h2 .title-full:only-child,
.lp .product-text h3 .title-full:only-child {
    display: inline !important;
}

/* --------------------------------------------------------------------------
   2. The First Aid hub (cvrSection) and the HACCP hub (hcvSection) already
   sit in a light, glass and soft shadow language of their own, with the
   green and orange accents of their niche. Only the type is aligned here:
   Plus Jakarta Sans for the headings, Inter for the body. Their layout,
   surfaces and accents stay untouched.
   -------------------------------------------------------------------------- */
.lp .cvrSection,
.lp .hcvSection {
    font-family: var(--lp-font-body);
}

.lp .cvrSection h2,
.lp .cvrSection h3,
.lp .cvrSection h4,
.lp .hcvSection h2,
.lp .hcvSection h3,
.lp .hcvSection h4,
.lp .cvrTitle,
.lp .hcvTitle,
.lp .cvrCardTitle,
.lp .hcvRowTitle,
.lp .hcvTileName,
.lp .cvrCta__title,
.lp .hcvCtaTitle {
    font-family: var(--lp-font-display);
}

.lp .cvrTitle em {
    font-style: normal;
}

@media (prefers-reduced-motion: reduce) {
    .lp .empTrainingCard, .lp .wkSafetyCard, .lp .hsCertCard {
        transition: none;
    }

    .lp .empTrainingCard:hover, .lp .wkSafetyCard:hover, .lp .hsCertCard:hover {
        transform: none;
    }
}