/* =============================================================
   PTST — Content Pages (About, Training Info, etc.)
   File: hello-theme-child/css/ptst-content-pages.css

   Shared styles for content-heavy inner pages that share the
   "page hero + sticky section nav + alternating sections" pattern
   from the design system.

   All rules scoped under `.ptst-content-page` so they cannot leak
   into Elementor-rendered pages.

   Used by:
     - page-about.php
     - page-training-info.php
     - (future content pages — duplicate the pattern)
   ============================================================= */

/* ---------- Page wrapper ---------- */

.ptst-content-page {
    font-family: var(--font-sans);
    color: var(--fg-2);
    background: var(--bg);
    position: relative;
    z-index: 5; /* sit above the site's fixed scroll-to-top widget */
}

.ptst-content-page * { box-sizing: border-box; }
.ptst-content-page img { max-width: 100%; height: auto; display: block; }

.ptst-content-page .container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* ---------- Page hero (full-bleed dark intro) ---------- */

.ptst-content-page .page-hero {
    position: relative;
    background:
        radial-gradient(80% 100% at 100% 0%, rgba(46,143,208,0.35), transparent 60%),
        linear-gradient(135deg, #08316B 0%, var(--bg-deep) 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.ptst-content-page .page-hero__bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover;
    background-position: center;
}
.ptst-content-page .page-hero__scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(105deg,
        rgba(11,27,51,0.78) 0%, rgba(11,27,51,0.55) 45%, rgba(11,27,51,0.2) 100%);
}
.ptst-content-page .page-hero .container {
    position: relative; z-index: 2;
    padding-top: 80px;
    padding-bottom: 80px;
}
/* Soft drop-shadows on hero text — keeps copy legible against any
   underlying photo, regardless of how bright or busy that region is. */
.ptst-content-page .page-hero .eyebrow {
    color: var(--brand-blue-300);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.ptst-content-page .page-hero h1 {
    color: #fff;
    font-size: clamp(40px, 5vw, 60px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.022em;
    max-width: 22ch;
    margin: 14px 0 16px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.ptst-content-page .page-hero .lead {
    font-size: clamp(16px, 1.4vw, 19px);
    color: rgba(255,255,255,0.86);
    max-width: 60ch;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ---------- Sticky section nav ---------- */

.ptst-content-page .section-nav-wrap {
    display: flex;
    justify-content: center;
    padding: 0 24px;
    margin-top: -24px; /* overlap hero bottom edge */
    position: relative;
    z-index: 5;
}
.ptst-content-page .section-nav {
    position: sticky;
    top: 24px;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;     /* centre wrapped rows on narrow viewports */
    gap: 2px;
    box-shadow: var(--shadow-sm);
}
.ptst-content-page .section-nav a {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    padding: 8px 16px;
    border-radius: 999px;
    text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.ptst-content-page .section-nav a:hover {
    color: var(--brand-blue);
    background: var(--brand-blue-50);
}
.ptst-content-page .section-nav a.active {
    background: var(--brand-blue);
    color: #fff;
}

/* ---------- Section rhythm ---------- */

.ptst-content-page .section { padding: 80px 0; }
.ptst-content-page .section.tight { padding: 56px 0; }
.ptst-content-page .section.soft  { background: var(--bg-soft); }
.ptst-content-page .section.boxed-soft {
    background: var(--bg-soft);
    margin: 0;
    padding: 80px 24px;
    border-radius: 24px;
}
.ptst-content-page .section h2 { margin-bottom: 12px; }

/* Section heading (eyebrow + h2 + sub) ---------------------- */
.ptst-content-page .section-heading {
    margin: 0 0 36px;
    text-align: left;
}
.ptst-content-page .section-heading--center {
    text-align: center;
    max-width: 60ch;
    margin: 0 auto 36px;
}
.ptst-content-page .section-heading h2 {
    margin-top: 8px;
    font-size: clamp(28px, 3.4vw, 38px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.018em;
    color: var(--ink);
}
.ptst-content-page .section-heading .lead {
    margin-top: 12px;
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-2);
}

/* ---------- Prose blocks ---------- */

.ptst-content-page .prose { max-width: 70ch; }
.ptst-content-page .prose p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-2);
    margin: 0 0 1.2em;
}
.ptst-content-page .prose p:last-child { margin-bottom: 0; }
.ptst-content-page .prose ul { padding-left: 0; list-style: none; margin: 0; }
.ptst-content-page .prose ul li {
    padding: 8px 0 8px 28px;
    position: relative;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line-soft);
}
.ptst-content-page .prose ul li:last-child { border-bottom: 0; }
.ptst-content-page .prose ul li::before {
    content: "";
    position: absolute;
    left: 2px; top: 17px;
    width: 8px; height: 8px;
    background: var(--brand-gold);
    border-radius: 2px;
    transform: rotate(45deg);
}

/* ---------- Split layout (content + media) ---------- */

.ptst-content-page .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}
@media (max-width: 900px) {
    .ptst-content-page .split { grid-template-columns: 1fr; gap: 32px; }
}
.ptst-content-page .split.media-right .media { grid-column: 2; grid-row: 1; }
.ptst-content-page .split.media-left  .media { grid-column: 1; grid-row: 1; }
.ptst-content-page .split .media {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background:
        radial-gradient(60% 40% at 30% 25%, rgba(108,182,226,0.4), transparent 70%),
        radial-gradient(50% 40% at 80% 80%, rgba(245,168,35,0.25), transparent 70%),
        linear-gradient(160deg, #0E4A9C 0%, #08316B 60%, #0B1B33 100%);
    background-size: cover;
    background-position: center;
}
.ptst-content-page .split .media img {
    width: 100%; height: 100%; object-fit: cover;
}

/* ---------- Pillar / value cards ---------- */

.ptst-content-page .pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
@media (max-width: 900px) {
    .ptst-content-page .pillars { grid-template-columns: 1fr; }
}
.ptst-content-page .pillar {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px;
}
.ptst-content-page .pillar.dark {
    background: var(--brand-blue-deep);
    border-color: transparent;
    color: rgba(255,255,255,0.86);
}
.ptst-content-page .pillar__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    background: var(--brand-gold);
    color: var(--ink);
    border-radius: 10px;
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 16px;
}

/* Icon variant of .pillar__num — a transparent square with a stroke-style
   inline-SVG icon inside. Picks up its colour from currentColor so it
   inverts cleanly on the dark pillar. */
.ptst-content-page .pillar__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    color: var(--brand-blue);
    margin-bottom: 18px;
}
.ptst-content-page .pillar.dark .pillar__icon {
    color: var(--brand-gold);
}
.ptst-content-page .pillar__icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ptst-content-page .pillar h3 { margin-bottom: 8px; font-size: 22px; color: var(--ink); }
.ptst-content-page .pillar.dark h3 { color: #fff; }
.ptst-content-page .pillar p {
    font-size: 15px; line-height: 1.6; color: var(--ink-3); margin: 0;
}
.ptst-content-page .pillar.dark p { color: rgba(255,255,255,0.8); }

/* ---------- Timeline ---------- */

.ptst-content-page .timeline {
    position: relative;
    padding-left: 32px;
    border-left: 2px solid var(--brand-blue-100);
}
.ptst-content-page .timeline-item { position: relative; padding: 0 0 36px 24px; }
.ptst-content-page .timeline-item:last-child { padding-bottom: 0; }
.ptst-content-page .timeline-item::before {
    content: "";
    position: absolute;
    left: -41px; top: 6px;
    width: 18px; height: 18px;
    background: var(--brand-gold);
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--brand-blue-100);
}
.ptst-content-page .timeline-item .year {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-blue);
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.ptst-content-page .timeline-item h4 { font-size: 18px; margin: 0 0 6px; color: var(--ink); }
.ptst-content-page .timeline-item p {
    font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 60ch;
}

/* ---------- Partner cards (Accreditations section) ---------- */

.ptst-content-page .partner-list { display: flex; flex-direction: column; gap: 14px; }
.ptst-content-page .partner-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 28px;
    align-items: center;
    transition: box-shadow .15s, transform .15s;
}
.ptst-content-page .partner-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
@media (max-width: 700px) {
    .ptst-content-page .partner-card { grid-template-columns: 1fr; gap: 12px; }
}
.ptst-content-page .partner-card .mark {
    height: 150px;
    display: flex; align-items: center; justify-content: center;
}
.ptst-content-page .partner-card .mark img {
    max-width: 100%; max-height: 100%; object-fit: contain;
}
.ptst-content-page .partner-card .mark__placeholder {
    text-align: center;
    font-weight: 800;
    color: var(--brand-blue);
    letter-spacing: 0.04em;
    font-size: 14px;
    text-transform: uppercase;
}
.ptst-content-page .partner-card .body h3 {
    font-size: 18px; margin: 0 0 6px; color: var(--ink);
}
.ptst-content-page .partner-card .body p {
    font-size: 14px; line-height: 1.6; color: var(--ink-3); margin: 0;
}
.ptst-content-page .partner-card .body .meta {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--brand-blue);
    background: var(--brand-blue-50);
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 8px;
    letter-spacing: 0.04em;
}

/* ---------- Stat strip (dark band of big numbers) ---------- */

.ptst-content-page .stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--brand-blue-deep);
    color: #fff;
    border-radius: 18px;
    overflow: hidden;
}
.ptst-content-page .stat-strip > div {
    padding: 32px 28px;
    border-right: 1px solid rgba(255,255,255,0.08);
    min-width: 0; /* allow cells to shrink below content width so wide
                     numbers (e.g. "65,000+") can't force the box wider
                     than its container / the viewport on mobile. */
}
.ptst-content-page .stat-strip > div:last-child { border-right: 0; }
.ptst-content-page .stat-strip .n {
    font-size: 44px; font-weight: 800; color: #fff;
    letter-spacing: -0.02em; line-height: 1;
}
.ptst-content-page .stat-strip .n .g { color: var(--brand-gold); }
.ptst-content-page .stat-strip .l {
    font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255,255,255,0.7); margin-top: 8px; font-weight: 600;
}
@media (max-width: 900px) {
    .ptst-content-page .stat-strip { grid-template-columns: 1fr 1fr; }
    .ptst-content-page .stat-strip > div { padding: 24px 16px; }
    /* Scale the big numbers down on narrow screens so wide values like
       "65,000+" fit the 2-up cells instead of overflowing the box. */
    .ptst-content-page .stat-strip .n { font-size: clamp(24px, 7.5vw, 40px); }
}

/* ---------- Info / contact card ---------- */

.ptst-content-page .info-card {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px 26px;
}
.ptst-content-page .info-card.on-white { background: #fff; }
.ptst-content-page .info-card h4 { font-size: 18px; margin: 0 0 10px; color: var(--ink); }
.ptst-content-page .info-card p {
    font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 12px;
}
.ptst-content-page .info-card p:last-child { margin-bottom: 0; }
.ptst-content-page .info-card .contact-row {
    display: flex; gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
    font-size: 14px;
    align-items: center;
}
.ptst-content-page .info-card .contact-row svg {
    color: var(--brand-blue); flex-shrink: 0;
}
.ptst-content-page .info-card .contact-row a {
    color: var(--ink); font-weight: 600; text-decoration: none;
}
.ptst-content-page .info-card .contact-row a:hover { color: var(--brand-blue); }

/* ---------- Map placeholder (no real map dependency) ---------- */

.ptst-content-page .map-embed {
    aspect-ratio: 16 / 7;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #D6E7F4 0%, #EEF4FB 100%);
    position: relative;
    border: 1px solid var(--line);
}
.ptst-content-page .map-embed::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(46,143,208,0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(46,143,208,0.10) 1px, transparent 1px);
    background-size: 40px 40px;
}
.ptst-content-page .map-embed .pin {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -100%);
    width: 32px; height: 40px;
    background: var(--brand-gold);
    border-radius: 50% 50% 50% 0;
    rotate: -45deg;
    box-shadow: var(--shadow-md);
    display: flex; align-items: center; justify-content: center;
}
.ptst-content-page .map-embed .pin::after {
    content: "";
    width: 12px; height: 12px;
    background: #fff;
    border-radius: 50%;
    margin-top: -2px;
    rotate: 45deg;
}
.ptst-content-page .map-embed .label {
    position: absolute;
    left: 50%;
    top: calc(50% + 12px);
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid var(--line);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    box-shadow: var(--shadow-xs);
    white-space: nowrap;
}

/* ---------- Notice block (page-level fraud alert / warning) ---------- */

.ptst-content-page .notice-block {
    background: var(--warning-50);
    border-left: 4px solid var(--brand-gold);
    border-radius: 12px;
    padding: 28px 32px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.ptst-content-page .notice-block .icon {
    width: 44px; height: 44px;
    background: var(--brand-gold);
    color: var(--ink);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 22px;
    flex-shrink: 0;
}
.ptst-content-page .notice-block h3 {
    font-size: 22px; margin: 0 0 8px; color: var(--ink);
}
.ptst-content-page .notice-block p {
    font-size: 15px; line-height: 1.65; color: var(--ink-2); margin: 0;
}
.ptst-content-page .notice-block p + p { margin-top: 12px; }

/* ---------- Step list (registration methods / how-to grid) ---------- */

.ptst-content-page .step-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 900px) {
    .ptst-content-page .step-list { grid-template-columns: 1fr; }
}
.ptst-content-page .step-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ptst-content-page .step-card.muted {
    background: var(--bg-soft);
    border-style: dashed;
}
.ptst-content-page .step-card .step-num {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-blue);
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}
.ptst-content-page .step-card h4 {
    font-size: 18px; margin: 0 0 8px; color: var(--ink);
}
.ptst-content-page .step-card p {
    font-size: 14px; line-height: 1.6; color: var(--ink-3); margin: 0;
}
.ptst-content-page .step-card a:not(.btn) {
    color: var(--brand-blue); font-weight: 600;
}

/* ---------- Buttons (design-system, scoped) ---------- */

.ptst-content-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .18s, color .18s, border-color .18s, transform .12s;
    font-family: inherit;
}
.ptst-content-page .btn:active { transform: translateY(1px); }
.ptst-content-page .btn.sm { padding: 8px 14px; font-size: 13px; }
.ptst-content-page .btn-primary {
    background: var(--brand-blue); color: #fff;
}
.ptst-content-page .btn-primary:hover {
    background: var(--brand-blue-deep); color: #fff; text-decoration: none;
}
.ptst-content-page .btn-gold {
    background: var(--brand-gold); color: var(--ink);
}
.ptst-content-page .btn-gold:hover {
    background: var(--brand-gold-600); color: #fff; text-decoration: none;
}
.ptst-content-page .btn-secondary {
    background: #fff; color: var(--brand-blue); border-color: var(--brand-blue);
}
.ptst-content-page .btn-secondary:hover {
    background: var(--brand-blue-50); color: var(--brand-blue); text-decoration: none;
}

/* ---------- Logo strip (clients section) ---------- */

.ptst-content-page .logo-strip {
    text-align: center;
}
.ptst-content-page .logo-strip__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.ptst-content-page .logo-strip__chip {
    padding: 10px 22px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    font-weight: 700;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    font-size: 13px;
    text-transform: uppercase;
}
.ptst-content-page .logo-strip__caption {
    margin-top: 24px;
    color: var(--ink-4);
    font-style: italic;
    font-size: 13px;
}

/* ---------- Mobile fixes ---------- */

@media (max-width: 768px) {
    .ptst-content-page .page-hero .container { padding-top: 60px; padding-bottom: 60px; }
    .ptst-content-page .section { padding: 56px 0; }
    .ptst-content-page .section.boxed-soft { padding: 56px 20px; }
    .ptst-content-page .notice-block {
        flex-direction: column; gap: 14px; padding: 22px;
    }
    /* On phones the nav usually wraps to 2 rows. Let the pill take the
       full container width so the centered rows have room to breathe,
       and tighten the link padding so the row count stays sensible. */
    .ptst-content-page .section-nav-wrap {
        margin-top: -16px;
        padding: 0 12px;
    }
    .ptst-content-page .section-nav {
        display: flex;             /* override base inline-flex so the pill stretches */
        width: 100%;
        max-width: 100%;
        padding: 6px 8px;
        row-gap: 4px;
    }
    .ptst-content-page .section-nav a {
        padding: 8px 14px;
        font-size: 13px;
    }
}


/* ============================================================
   Panorama band — full-bleed image strip
   (e.g. between Mission and Cilegon Training Centre on About)
   ============================================================ */
.ptst-content-page .panorama-band {
    width: 100%;
    overflow: hidden;
    line-height: 0; /* removes baseline gap below img */
    background: var(--bg-deep);
}
.ptst-content-page .panorama-band img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* Cap the height so very tall viewports don't waste space. */
    max-height: 520px;
    object-position: center;
}

/* ============================================================
   Real-map iframe wrapper (Google Maps Embed API)
   ============================================================ */
.ptst-content-page .ptst-map-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-xs);
}
.ptst-content-page .ptst-map-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ============================================================
   Client logo marquee
   ============================================================
   Pure-CSS infinite horizontal scroll. The HTML duplicates the
   logo list (2x copies inside .client-marquee__track) and the
   animation translates the track left by -50% — so when the
   first copy has fully scrolled off the left edge, the second
   copy is exactly where the first started, looping seamlessly.

   Fades at left + right via mask-image so logos don't pop in/out. */

.ptst-content-page .client-marquee {
    position: relative;
    overflow: hidden;
    padding: 16px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}
.ptst-content-page .client-marquee__track {
    display: flex;
    align-items: center;
    gap: clamp(36px, 5vw, 72px);
    width: max-content;
    animation: ptst-marquee 80s linear infinite;
    will-change: transform;
}
.ptst-content-page .client-marquee:hover .client-marquee__track {
    animation-play-state: paused;
}
.ptst-content-page .client-marquee__item {
    flex-shrink: 0;
    height: 105px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ptst-content-page .client-marquee__item img {
    max-height: 100%;
    width: auto;
    max-width: 320px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.62;
    transition: filter .25s, opacity .25s;
}
.ptst-content-page .client-marquee__item img:hover {
    filter: grayscale(0);
    opacity: 1;
}

@keyframes ptst-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Honor reduced-motion preference — stop the auto-scroll for
   users who've asked the OS to minimise animation. */
@media (prefers-reduced-motion: reduce) {
    .ptst-content-page .client-marquee__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
}


/* ============================================================
   Hotel cards (training-info Accommodation section)
   Variant of .step-card with stars, room list, inclusion chips.
   ============================================================ */

.ptst-content-page .step-card.hotel-card h4 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.ptst-content-page .hotel-card__stars {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--brand-blue);
    background: var(--brand-blue-50);
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
}

.ptst-content-page .hotel-card__rooms {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: grid;
    gap: 6px;
    border-top: 1px solid var(--line-soft);
}
.ptst-content-page .hotel-card__rooms li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 14px;
}
.ptst-content-page .hotel-card__room-type {
    color: var(--ink-2);
    font-weight: 600;
}
.ptst-content-page .hotel-card__room-price {
    color: var(--ink);
    font-weight: 700;
    white-space: nowrap;
}
.ptst-content-page .hotel-card__room-unit {
    font-weight: 400;
    font-size: 11px;
    color: var(--ink-3);
    margin-left: 4px;
}

/* Inclusions read as a quiet line of body text — matches the distance
   line above. Bumped margin-top so it doesn't sit on top of the price
   list. */
.ptst-content-page .hotel-card__inclusions-line {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-3);
}
.ptst-content-page .hotel-card__inclusions-line strong {
    color: var(--ink-2);
    font-weight: 600;
}

/* Single section-wide Need-Help callout (replaces the per-venue cards).
   Sits below all hotel groups in the accommodation section. */
.ptst-content-page .hotel-help {
    margin-top: 32px;
    background: var(--bg-soft);
    border: 1px dashed var(--line);
    border-radius: 14px;
    padding: 24px 28px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 24px;
    row-gap: 4px;
    align-items: baseline;
}
.ptst-content-page .hotel-help .step-num {
    grid-row: 1 / span 2;
    align-self: center;
}
.ptst-content-page .hotel-help h4 {
    margin: 0;
    font-size: 18px;
    color: var(--ink);
}
.ptst-content-page .hotel-help p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-3);
}
.ptst-content-page .hotel-help a {
    color: var(--brand-blue);
    font-weight: 600;
}
@media (max-width: 600px) {
    .ptst-content-page .hotel-help {
        grid-template-columns: 1fr;
    }
    .ptst-content-page .hotel-help .step-num {
        grid-row: auto;
    }
}


/* ============================================================
   Single Class page (/class/{slug}/)
   ============================================================ */

/* ---- Hero additions ---- */
.ptst-content-page--class .class-hero__eyebrow {
    /* Inter (page default) — matches the site-wide .eyebrow style.
       Dropped font-family: var(--font-mono) which was making the class
       hero eyebrow look different from every other page. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.ptst-content-page--class .class-hero__sep { opacity: 0.6; }
.ptst-content-page--class .class-hero h1 {
    max-width: 24ch;
    margin-top: 12px;
    margin-bottom: 18px;
}

.ptst-content-page--class .class-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}
.ptst-content-page--class .class-hero__pills .pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Status pill — Confirmed/Cancelled/Full/Waitlist colour variants. */
.ptst-content-page--class .status-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
/* Status pills also get a soft drop shadow so they pop against the photo. */
.ptst-content-page--class .status-pill {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.ptst-content-page--class .status-pill--success { background: var(--success);    color: #fff; }
.ptst-content-page--class .status-pill--info    { background: var(--brand-blue); color: #fff; }
.ptst-content-page--class .status-pill--warning { background: var(--warning);    color: #fff; }
.ptst-content-page--class .status-pill--danger  { background: var(--danger);     color: #fff; }
.ptst-content-page--class .status-pill--muted   { background: rgba(255,255,255,0.18); color: #fff; }

/* Breadcrumb — sits BELOW the hero, mirrors the Registration page's
   .ptst-crumb treatment for consistency. Lives in the standard container
   on white, with › separators and an ink-dark current page. */
.ptst-content-page--class .class-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-3);
    padding: 18px 0 6px;
}
.ptst-content-page--class .class-crumb a {
    color: var(--ink-3);
    text-decoration: none;
}
.ptst-content-page--class .class-crumb a:hover {
    color: var(--brand-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ptst-content-page--class .class-crumb__sep { color: var(--ink-4); }
.ptst-content-page--class .class-crumb__current { color: var(--ink); }

/* ---- Two-column layout ---- */
/* Tighter top padding since the breadcrumb just above already adds breathing room. */
.ptst-content-page--class .class-detail-section { padding: 24px 0 64px; }
.ptst-content-page--class .class-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 48px;
    align-items: start;
}
@media (max-width: 1000px) {
    .ptst-content-page--class .class-detail {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .ptst-content-page--class .class-detail__side { order: -1; }
}

/* ---- Left main column ---- */
.ptst-content-page--class .class-detail__main { min-width: 0; }
.ptst-content-page--class .class-detail__block {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
}
@media (max-width: 600px) {
    .ptst-content-page--class .class-detail__block { padding: 22px; }
}
/* Clean in-card heading — matches the rest of the design system's
   section headings (no decorative bar, just type). */
.ptst-content-page--class .class-detail__block-title {
    margin: 0 0 22px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.012em;
    color: var(--ink);
}

/* ---- Class meta rows (Dates / Venue / Languages) ---- */
.ptst-content-page--class .class-meta-grid {
    display: grid;
    gap: 20px;
}
.ptst-content-page--class .class-meta-row {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 16px;
    align-items: start;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line-soft);
}
.ptst-content-page--class .class-meta-row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.ptst-content-page--class .class-meta-row__icon {
    width: 44px; height: 44px;
    color: var(--brand-blue);
    background: var(--brand-blue-50);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ptst-content-page--class .class-meta-row__icon svg { width: 22px; height: 22px; }

.ptst-content-page--class .class-meta-row__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 4px;
}
.ptst-content-page--class .class-meta-row__value {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}
.ptst-content-page--class .class-meta-row__sub {
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 4px;
}

/* Course summary variant — value renders as prose paragraphs rather than
   a single bold line, with a small CTA button below. */
.ptst-content-page--class .class-meta-row__value--prose {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink-2);
    margin-top: 2px;
}
.ptst-content-page--class .class-meta-row__value--prose p {
    margin: 0 0 0.8em;
}
.ptst-content-page--class .class-meta-row__value--prose p:last-child { margin-bottom: 0; }

.ptst-content-page--class .class-meta-row__action {
    margin-top: 14px;
}

/* ---- Course content prose (rendered from ACF full_description HTML) ---- */
.ptst-content-page--class .class-course-prose h3 {
    font-size: 20px;
    color: var(--ink);
    margin: 28px 0 10px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.ptst-content-page--class .class-course-prose h3:first-child { margin-top: 0; }
.ptst-content-page--class .class-course-prose h4 {
    font-size: 16px;
    color: var(--brand-blue);
    margin: 22px 0 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ptst-content-page--class .class-course-prose p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-2);
    margin: 0 0 1em;
}
.ptst-content-page--class .class-course-prose ul,
.ptst-content-page--class .class-course-prose ol {
    margin: 0 0 1em 0;
    padding-left: 1.2em;
}
.ptst-content-page--class .class-course-prose li {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink-2);
    margin-bottom: 6px;
}
.ptst-content-page--class .class-course-prose b,
.ptst-content-page--class .class-course-prose strong { color: var(--ink); }

/* ---- Sticky right sidebar ---- */
.ptst-content-page--class .class-detail__side {
    position: sticky;
    top: 24px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media (max-width: 1000px) {
    .ptst-content-page--class .class-detail__side {
        position: static;
    }
}

.ptst-content-page--class .side-meta {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
}

/* ---- Seats widget ---- */
.ptst-content-page--class .seats-widget {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line-soft);
}
.ptst-content-page--class .seats-widget__top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}
.ptst-content-page--class .seats-widget__count {
    font-size: 32px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1;
}
.ptst-content-page--class .seats-widget__label {
    font-size: 14px;
    color: var(--ink-3);
}
.ptst-content-page--class .seats-widget__bar {
    height: 8px;
    background: var(--line-soft);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}
.ptst-content-page--class .seats-widget__bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .4s ease;
}
.ptst-content-page--class .seats-widget__bar-fill--good     { background: var(--success); }
.ptst-content-page--class .seats-widget__bar-fill--low      { background: var(--warning); }
.ptst-content-page--class .seats-widget__bar-fill--critical { background: var(--danger);  }
.ptst-content-page--class .seats-widget__footer {
    font-size: 12px;
    color: var(--ink-3);
}

/* ---- Side-meta action buttons ---- */
.ptst-content-page--class .side-meta__actions {
    display: grid;
    gap: 8px;
    margin-bottom: 22px;
}
.ptst-content-page--class .btn.btn--block { width: 100%; }
.ptst-content-page--class .btn-ghost {
    background: transparent;
    color: var(--brand-blue);
    border: 1px solid var(--line);
}
.ptst-content-page--class .btn-ghost:hover {
    background: var(--brand-blue-50);
    color: var(--brand-blue-deep);
    border-color: var(--brand-blue);
    text-decoration: none;
}

/* ---- Side-meta key/value rows ---- */
.ptst-content-page--class .side-meta__rows {
    margin: 0;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--line-soft);
}
.ptst-content-page--class .side-meta__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
}
.ptst-content-page--class .side-meta__row:last-child { border-bottom: 0; }
.ptst-content-page--class .side-meta__row dt {
    color: var(--ink-3);
    font-weight: 500;
}
.ptst-content-page--class .side-meta__row dd {
    margin: 0;
    color: var(--ink);
    font-weight: 600;
    text-align: right;
}
.ptst-content-page--class .side-meta__mono { font-family: var(--font-mono); font-size: 12px; }

/* ---- Accommodation cards in the sidebar ---- */
.ptst-content-page--class .side-accom {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px 24px;
}
.ptst-content-page--class .side-accom__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-blue);
    margin: 0 0 4px;
}
.ptst-content-page--class .side-accom__intro {
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.55;
    margin: 0 0 16px;
}
.ptst-content-page--class .side-accom__list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: grid;
    gap: 14px;
}
.ptst-content-page--class .side-accom__item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
}
.ptst-content-page--class .side-accom__hotel {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.ptst-content-page--class .side-accom__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}
.ptst-content-page--class .side-accom__stars {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--brand-blue);
    background: var(--brand-blue-50);
    padding: 2px 6px;
    border-radius: 999px;
    text-transform: uppercase;
}
.ptst-content-page--class .side-accom__meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: var(--ink-3);
    margin-top: 4px;
}
.ptst-content-page--class .side-accom__price {
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}
.ptst-content-page--class .side-accom__note {
    font-size: 11px;
    color: var(--ink-4);
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}


/* ============================================================
   Single Course page (/course/{slug}/)
   ============================================================ */

/* ---- Hero ---- */
.ptst-content-page--course .course-hero__eyebrow {
    /* Inter (page default) — matches the site-wide .eyebrow style.
       Dropped font-family: var(--font-mono) so the course hero eyebrow
       reads consistently with About, Training Info, Home, etc. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.ptst-content-page--course .course-hero__sep { opacity: 0.6; }
.ptst-content-page--course .course-hero h1 {
    max-width: 24ch;
    margin-top: 12px;
    margin-bottom: 14px;
}
.ptst-content-page--course .course-hero .lead {
    margin-bottom: 22px;
    max-width: 62ch;
}
/* Darker scrim on course hero — the page is content-dense and the
   accred eyebrow / pills sit very close to the photo edge, so we want
   the whole image to recede a bit more than the class page does. */
.ptst-content-page--course .page-hero__scrim {
    background: linear-gradient(105deg,
        rgba(11,27,51,0.92) 0%, rgba(11,27,51,0.78) 45%, rgba(11,27,51,0.55) 100%);
}

.ptst-content-page--course .course-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* Course hero pills — adopt the accommodation-chip language:
   compact, uppercase, letter-spaced. Adapted for the dark hero with
   a frosted white background so they stay legible against the photo. */
.ptst-content-page--course .course-hero__pills .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.92);
    color: var(--brand-blue-700, #08528F);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

/* ---- Hero two-column layout (text + trust logos) ----
   When a course has at least one trust logo (accred and/or partner) we
   render a right column with the logos vertically centred next to the
   text. Collapses to single column on small viewports and when there
   are no logos to show. */
.ptst-content-page--course .course-hero__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
}
.ptst-content-page--course .course-hero__layout--has-logos {
    grid-template-columns: 1fr minmax(170px, 230px);
    gap: 48px;
}
@media (max-width: 900px) {
    .ptst-content-page--course .course-hero__layout--has-logos {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.ptst-content-page--course .course-hero__logos {
    display: flex;
    flex-direction: column;
    gap: 36px;
    align-items: stretch;
}

.ptst-content-page--course .course-hero__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ptst-content-page--course .course-hero__logo-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.ptst-content-page--course .course-hero__logo-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.ptst-content-page--course .course-hero__logo-frame img {
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Light-on-dark logo — naked with a soft drop shadow. Accred = larger,
   partner = smaller (clear primary vs secondary hierarchy). */
.ptst-content-page--course .course-hero__logo--light .course-hero__logo-frame img {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}
.ptst-content-page--course .course-hero__logo--accred .course-hero__logo-frame img {
    max-height: 72px;
}
.ptst-content-page--course .course-hero__logo--partner .course-hero__logo-frame img {
    max-height: 60px;
}

/* Dark-on-light logo — wrap in a soft white card so it reads on the
   dark hero. Sized to match the naked equivalents above. */
.ptst-content-page--course .course-hero__logo--dark .course-hero__logo-frame {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 12px;
    padding: 12px 16px;
    min-height: 76px;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
.ptst-content-page--course .course-hero__logo--dark.course-hero__logo--accred .course-hero__logo-frame {
    min-height: 88px;
}
.ptst-content-page--course .course-hero__logo--dark.course-hero__logo--accred .course-hero__logo-frame img {
    max-height: 60px;
}
.ptst-content-page--course .course-hero__logo--dark.course-hero__logo--partner .course-hero__logo-frame img {
    max-height: 52px;
}

@media (max-width: 900px) {
    /* On mobile, stack the logos side-by-side under the text rather than
       in a vertical column. Saves vertical space and reads as a
       "presented by" row. */
    .ptst-content-page--course .course-hero__logos {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
    }
    .ptst-content-page--course .course-hero__logo {
        flex: 1 1 130px;
        max-width: 190px;
    }
    .ptst-content-page--course .course-hero__logo--accred .course-hero__logo-frame img,
    .ptst-content-page--course .course-hero__logo--dark.course-hero__logo--accred .course-hero__logo-frame img {
        max-height: 60px;
    }
    .ptst-content-page--course .course-hero__logo--partner .course-hero__logo-frame img,
    .ptst-content-page--course .course-hero__logo--dark.course-hero__logo--partner .course-hero__logo-frame img {
        max-height: 52px;
    }
}

/* ---- Breadcrumb (mirrors class page) ---- */
.ptst-content-page--course .course-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-3);
    padding: 18px 0 6px;
}
.ptst-content-page--course .course-crumb a {
    color: var(--ink-3); text-decoration: none;
}
.ptst-content-page--course .course-crumb a:hover {
    color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px;
}
.ptst-content-page--course .course-crumb__sep { color: var(--ink-4); }
.ptst-content-page--course .course-crumb__current { color: var(--ink); }

/* ---- Two-column layout ---- */
.ptst-content-page--course .course-detail-section { padding: 24px 0 64px; }
.ptst-content-page--course .course-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 48px;
    align-items: start;
}
@media (max-width: 1000px) {
    .ptst-content-page--course .course-detail {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .ptst-content-page--course .course-detail__side { order: -1; }
}
.ptst-content-page--course .course-detail__main { min-width: 0; }
.ptst-content-page--course .course-detail__side {
    position: sticky;
    top: 24px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (max-width: 1000px) {
    .ptst-content-page--course .course-detail__side { position: static; }
}

/* ---- Accordion (design-system restyle of the existing accordion) ---- */
/* Scoped to .ptst-course-accordion--ds so the existing accordion CSS
   (loaded by inc/shortcodes/course.php) gets overridden cleanly without
   modifying that file. */
.ptst-course-accordion--ds {
    display: grid;
    gap: 12px;
}
.ptst-course-accordion--ds .ptst-accordion-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px !important;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.ptst-course-accordion--ds .ptst-accordion-item[open] {
    border-color: var(--brand-blue-100);
    box-shadow: var(--shadow-sm);
}
.ptst-course-accordion--ds .ptst-accordion-trigger {
    padding: 18px 22px;
    background: #fff !important;
    color: var(--ink);
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
}
.ptst-course-accordion--ds .ptst-accordion-trigger:hover {
    background: var(--bg-soft) !important;
}
.ptst-course-accordion--ds .ptst-accordion-trigger .e-n-accordion-item-title-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink) !important;
    letter-spacing: -0.012em;
    line-height: 1.3;
}

/* Replace the FontAwesome +/− with a clean chevron rendered via a
   pseudo-element. Hide the old FA icons. */
.ptst-course-accordion--ds .e-n-accordion-item-title-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-blue-50);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-blue) !important;
    flex-shrink: 0;
    position: relative;
    transition: background .15s, transform .25s;
}
.ptst-course-accordion--ds .e-n-accordion-item-title-icon i { display: none; }
.ptst-course-accordion--ds .e-n-accordion-item-title-icon::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .25s;
}
.ptst-course-accordion--ds .ptst-accordion-item[open] .e-n-accordion-item-title-icon {
    background: var(--brand-blue);
    color: #fff !important;
}
.ptst-course-accordion--ds .ptst-accordion-item[open] .e-n-accordion-item-title-icon::after {
    transform: rotate(-135deg) translate(-1px, -1px);
}

/* Body */
.ptst-course-accordion--ds .ptst-accordion-body {
    overflow: hidden;
    border-top: 1px solid var(--line-soft);
}
.ptst-course-accordion--ds .ptst-accordion-body-inner {
    padding: 22px;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.65;
}
.ptst-course-accordion--ds .ptst-accordion-body-inner h3.ptst-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.ptst-course-accordion--ds .ptst-accordion-body-inner h4 {
    font-size: 15px;
    color: var(--brand-blue);
    margin: 18px 0 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ptst-course-accordion--ds .ptst-accordion-body-inner h4:first-child { margin-top: 0; }
.ptst-course-accordion--ds .ptst-accordion-body-inner p { margin: 0 0 1em; }
.ptst-course-accordion--ds .ptst-accordion-body-inner p:last-child { margin-bottom: 0; }
.ptst-course-accordion--ds .ptst-accordion-body-inner ul,
.ptst-course-accordion--ds .ptst-accordion-body-inner ol {
    margin: 0 0 1em 1.2em;
    padding: 0;
}
.ptst-course-accordion--ds .ptst-accordion-body-inner li {
    margin-bottom: 6px;
    line-height: 1.6;
}
.ptst-course-accordion--ds .ptst-accordion-body-inner b,
.ptst-course-accordion--ds .ptst-accordion-body-inner strong {
    color: var(--ink);
}

/* ---- Flat profile content (course ACF use_accordion = false) ----
   Same readable prose as the accordion body, but each H3 section heading
   gets generous top spacing + a subtle divider so sections don't bunch up. */
.ptst-content-page--course .course-detail__prose {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-2);
}
.ptst-content-page--course .course-detail__prose > h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin: 36px 0 14px;
    padding-top: 24px;
    border-top: 1px solid var(--line-soft);
}
.ptst-content-page--course .course-detail__prose > h3:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.ptst-content-page--course .course-detail__prose h4 {
    font-size: 15px;
    color: var(--brand-blue);
    margin: 18px 0 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ptst-content-page--course .course-detail__prose p { margin: 0 0 1em; }
.ptst-content-page--course .course-detail__prose ul,
.ptst-content-page--course .course-detail__prose ol { margin: 0 0 1em 1.2em; padding: 0; }
.ptst-content-page--course .course-detail__prose li { margin-bottom: 6px; line-height: 1.6; }
.ptst-content-page--course .course-detail__prose a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 2px; }
.ptst-content-page--course .course-detail__prose b,
.ptst-content-page--course .course-detail__prose strong { color: var(--ink); }
.ptst-content-page--course .course-detail__prose img { max-width: 100%; height: auto; border-radius: 10px; }

/* ---- Image gallery (3-up carousel + lightbox) ----
   Layout:
     .course-gallery
       └ .course-gallery__head   (heading + prev/next chrome)
       └ .course-gallery__viewport  (overflow:hidden window)
           └ .course-gallery__track (flex strip; JS translates it)
               └ .course-gallery__slide (each one is `--slides-per-view` wide)
                   └ button.course-gallery__item
   JS sets `--slides-per-view` on the carousel based on viewport width
   (3 desktop / 2 tablet / 1 mobile) and applies a transform to the
   track for prev/next. The chrome is hidden on small viewports where
   native horizontal scroll feels better.
*/
.ptst-content-page--course .course-gallery {
    margin-top: 56px;
    --gap: 14px;
    --slides-per-view: 3;
}
.ptst-content-page--course .course-gallery__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.ptst-content-page--course .course-gallery__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.012em;
}
.ptst-content-page--course .course-gallery__controls {
    display: inline-flex;
    gap: 8px;
}
.ptst-content-page--course .course-gallery__nav {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--brand-blue-700, #08528F);
    /* Use the secondary brand blue for the outline so the controls
       read clearly against a white-ish background — the default
       --line hairline was too quiet here. */
    border: 1.5px solid var(--brand-blue-500, #2E8FD0);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.ptst-content-page--course .course-gallery__nav:hover:not([disabled]) {
    background: var(--brand-blue-500, #2E8FD0);
    color: #fff;
    border-color: var(--brand-blue-500, #2E8FD0);
    box-shadow: var(--shadow-sm);
}
.ptst-content-page--course .course-gallery__nav:active:not([disabled]) { transform: scale(0.96); }
.ptst-content-page--course .course-gallery__nav[disabled] {
    /* Less aggressive fade — the icon should still be readable, just
       de-emphasised, so users understand it's a control that's
       temporarily unavailable rather than a decoration. */
    opacity: 0.55;
    cursor: not-allowed;
}
/* Defensive: SVG icons should always inherit the button's color and
   never be overridden by upstream theme rules that set svg{fill:…}
   or svg{width:1em} (Elementor and some plugins do both). */
.ptst-content-page--course .course-gallery__nav svg {
    display: block;
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
}

.ptst-content-page--course .course-gallery__viewport {
    overflow: hidden;
    /* Native scroll fallback when JS hasn't initialised yet (or for
       small viewports). Once JS adds .is-ready, scroll-snap stays
       useful only on small screens. */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.ptst-content-page--course .course-gallery__track {
    display: flex;
    gap: var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.ptst-content-page--course .course-gallery__slide {
    /* Each slide takes 1/N of the viewport, minus its share of the gap. */
    flex: 0 0 calc(
        (100% - (var(--slides-per-view) - 1) * var(--gap)) / var(--slides-per-view)
    );
    scroll-snap-align: start;
}
.ptst-content-page--course .course-gallery__item {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--bg-soft);
    padding: 0;
    cursor: zoom-in;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ptst-content-page--course .course-gallery__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--brand-blue-100);
}
.ptst-content-page--course .course-gallery__item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* Before JS boots, the track is a horizontal scroller — gives a
   graceful no-JS experience. JS adds .is-ready and switches off
   the scroll affordance once it's controlling translate. */
.ptst-content-page--course .course-gallery--carousel:not(.is-ready) .course-gallery__viewport {
    overflow-x: auto;
}
.ptst-content-page--course .course-gallery--carousel.is-ready .course-gallery__viewport {
    overflow-x: hidden;
    scroll-snap-type: none;
}

/* Breakpoint adjustments */
@media (max-width: 900px) {
    .ptst-content-page--course .course-gallery { --slides-per-view: 2; }
}
@media (max-width: 560px) {
    .ptst-content-page--course .course-gallery {
        --slides-per-view: 1;
        --gap: 10px;
    }
    .ptst-content-page--course .course-gallery__head {
        align-items: flex-start;
    }
}


/* Lightbox styles have moved to css/ptst-lightbox.css — the course
   gallery now uses the shared ptst-lightbox bundle that also powers
   /facilities/ and /course-exercises/. One implementation, three pages. */

/* ---- Sidebar action card (Next available / On demand / No dates / On-site) ---- */
.ptst-content-page--course .action-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--shadow-xs);
}
.ptst-content-page--course .action-card--scheduled { background: var(--bg-soft); }
.ptst-content-page--course .action-card--onsite {
    background: var(--brand-blue-50);
    border-color: var(--brand-blue-100);
}
.ptst-content-page--course .action-card__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-blue);
    margin-bottom: 12px;
}
.ptst-content-page--course .action-card__body {
    font-size: 14px;
    color: var(--ink-3);
    line-height: 1.6;
    margin: 0 0 16px;
}
.ptst-content-page--course .action-card__dates {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}
.ptst-content-page--course .action-card__date-row {
    border-bottom: 1px solid var(--line-soft);
}
.ptst-content-page--course .action-card__date-row:last-child { border-bottom: 0; }
.ptst-content-page--course .action-card__date-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--ink);
    text-decoration: none;
    transition: background .12s;
}
.ptst-content-page--course .action-card__date-link:hover {
    background: var(--brand-blue-50);
    color: var(--ink);
    text-decoration: none;
}
.ptst-content-page--course .action-card__date { font-size: 14px; font-weight: 600; }
.ptst-content-page--course .action-card__seats {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
}
.ptst-content-page--course .action-card__seats--success { background: var(--success-50); color: var(--success); }
.ptst-content-page--course .action-card__seats--warning { background: var(--warning-50); color: var(--warning); }
.ptst-content-page--course .action-card__actions {
    display: grid;
    gap: 8px;
}

/* Reuse the .btn / .btn--block pattern from the class page */
.ptst-content-page--course .btn.btn--block { width: 100%; }
.ptst-content-page--course .btn-ghost {
    background: transparent;
    color: var(--brand-blue);
    border: 1px solid var(--line);
}
.ptst-content-page--course .btn-ghost:hover {
    background: var(--brand-blue-50);
    color: var(--brand-blue-deep);
    border-color: var(--brand-blue);
    text-decoration: none;
}

/* ---- Price card ---- */
.ptst-content-page--course .course-price-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px 22px;
}
.ptst-content-page--course .course-price-card__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.ptst-content-page--course .course-price-card__amount {
    font-size: 30px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin: 4px 0 2px;
    line-height: 1.1;
}
.ptst-content-page--course .course-price-card__currency {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink-3);
    margin-right: 4px;
}
.ptst-content-page--course .course-price-card__sub {
    font-size: 12px;
    color: var(--ink-3);
}

/* ---- Course meta facts card ---- */
.ptst-content-page--course .course-meta-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 6px 22px;
}
.ptst-content-page--course .course-meta-card__rows {
    margin: 0;
    display: grid;
    gap: 0;
}
.ptst-content-page--course .course-meta-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
}
.ptst-content-page--course .course-meta-card__row:last-child { border-bottom: 0; }
.ptst-content-page--course .course-meta-card__row dt {
    color: var(--ink-3);
    font-weight: 500;
}
.ptst-content-page--course .course-meta-card__row dd {
    margin: 0;
    color: var(--ink);
    font-weight: 600;
    text-align: right;
}
.ptst-content-page--course .course-meta-card__mono {
    font-family: var(--font-mono);
    font-size: 12px;
}

/* ---- Accred / partner trust cards ---- */
.ptst-content-page--course .trust-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px 22px;
}
.ptst-content-page--course .trust-card__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 10px;
}
.ptst-content-page--course .trust-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
}
.ptst-content-page--course .trust-card__logo img {
    max-height: 64px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}
/* Accrediting-body logo is the primary trust signal — render it
   twice the size of the (secondary) delivery-partner logo. */
.ptst-content-page--course .trust-card--accred .trust-card__logo {
    min-height: 128px;
}
.ptst-content-page--course .trust-card--accred .trust-card__logo img {
    max-height: 128px;
}


/* ─── Related course carousels (bottom of single-course page) ────────────
   Layout: section heading on the left + prev/next nav on the right,
   then a horizontal carousel of compact "chip" cards. Three slides per
   view on desktop, two on tablet, one on mobile. JS in ptst-content-pages
   handles the prev/next translation logic (see initRelatedCarousel).
*/
.ptst-content-page--course .course-related-section {
    padding: 24px 0 80px;
    background: var(--bg-soft, #F4F6FB);
}
.ptst-content-page--course .course-related {
    margin-top: 56px;
    --gap: 18px;
    --slides-per-view: 3;
}
.ptst-content-page--course .course-related:first-child { margin-top: 8px; }

.ptst-content-page--course .course-related__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}
.ptst-content-page--course .course-related__title {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.012em;
}

/* Prev/next controls — same look as the gallery carousel buttons. */
.ptst-content-page--course .course-related__controls {
    display: inline-flex;
    gap: 8px;
}
.ptst-content-page--course .course-related__nav {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--brand-blue-700, #08528F);
    border: 1.5px solid var(--brand-blue-500, #2E8FD0);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.ptst-content-page--course .course-related__nav:hover:not([disabled]) {
    background: var(--brand-blue-500, #2E8FD0);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.ptst-content-page--course .course-related__nav:active:not([disabled]) { transform: scale(0.96); }
.ptst-content-page--course .course-related__nav[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}
.ptst-content-page--course .course-related__nav svg {
    display: block;
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
}

.ptst-content-page--course .course-related__viewport {
    overflow: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.ptst-content-page--course .course-related__track {
    display: flex;
    gap: var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.ptst-content-page--course .course-related__slide {
    flex: 0 0 calc(
        (100% - (var(--slides-per-view) - 1) * var(--gap)) / var(--slides-per-view)
    );
    scroll-snap-align: start;
}
/* Before JS boots, the track is a horizontal scroller — graceful
   no-JS experience. JS adds .is-ready and switches off the scroll
   affordance once it's controlling translate. */
.ptst-content-page--course .course-related--carousel:not(.is-ready) .course-related__viewport {
    overflow-x: auto;
}
.ptst-content-page--course .course-related--carousel.is-ready .course-related__viewport {
    overflow-x: hidden;
    scroll-snap-type: none;
}

/* ── Course chip ────────────────────────────────────────────────────────
   Compact card: square cover image on top, then identification text
   stacked below. Click anywhere on the card to open the course. */
/* Card frame — reusable across single-course's related-courses carousel,
   the 404 page's popular-courses grid, and anywhere else a course chip
   appears. Scope is intentionally JUST .course-chip — adding an ancestor
   selector here would lock the component to one page context. */
.course-chip {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.course-chip:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
    border-color: var(--brand-blue-100, #D6E7F4);
}
.course-chip__thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(160deg, var(--brand-blue, #0E4A9C) 0%, var(--brand-blue-deep, #08316B) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.course-chip__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.course-chip__thumb--placeholder {
    background-image: linear-gradient(160deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(0, 0, 0, 0.18) 100%);
    background-blend-mode: overlay;
}
.course-chip__thumb-icon {
    color: rgba(255, 255, 255, 0.55);
    stroke: currentColor;
    fill: none;
}

.course-chip__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.course-chip__abbr {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--brand-blue-700, #08528F);
    background: var(--brand-blue-50, #EEF4FB);
    padding: 3px 8px;
    border-radius: 4px;
    align-self: flex-start;
}
.course-chip__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin: 0;
    letter-spacing: -0.005em;
}
.course-chip__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto;
    padding-top: 4px;
}
.course-chip__pill {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
}

/* Breakpoints — fewer slides per view as the viewport shrinks. */
@media (max-width: 900px) {
    .ptst-content-page--course .course-related { --slides-per-view: 2; }
}
@media (max-width: 560px) {
    .ptst-content-page--course .course-related {
        --slides-per-view: 1;
        --gap: 12px;
    }
}