/* ═══════════════════════════════════════════════════════════════════════════
   PEMFiT Burnley Redesign Blocks — studio-template-new.css
   ───────────────────────────────────────────────────────────────────────────
   Translates the approved Burnley landing mockup into the PEMFiT design
   system defined in block-styles.css / theme.json:

     mockup teal    #3a4742  →  var(--forest-green)
     mockup cream   #efe3d0  →  var(--beige)
     mockup offwht  #f6f2ef  →  var(--off-white)
     mockup orange  #e8722a  →  var(--orange)
     Montserrat               →  var(--DM-Sans)
     Libre Caslon Italic      →  var(--Source-Serif-Italic)
     fixed 12px radii         →  var(--rounded-corners)
     fixed paddings           →  fluid gutter tokens

   Enqueued for BOTH the front end and the editor (same pattern as
   block-styles.css) — class names are identical on both sides, so editor
   canvas matches published output with no separate editor CSS.
   Selectors deliberately use descendant (not direct-child) combinators so
   the editor's wrapper elements never break layout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared section scaffolding ─────────────────────────────────────────── */

.pf-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pf-section-gap, var(--thin-gutter));
    padding: var(--large-gutter) var(--thin-gutter);
    background-color: var(--off-white);
}

.pf-section-label {
    font-family: var(--DM-Sans);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--pf-leaf-color, var(--orange));
    text-align: center;
}

.pf-section-heading {
    font-family: var(--DM-Sans);
    font-size: var(--global-kb-font-size-sm);
    font-weight: 520;
    line-height: 1.15;
    color: var(--pf-leaf-color, var(--forest-green));
    text-align: center;
    max-width: 24ch;
    margin: 0;
}

/* Serif italic accent — em/i inside any Burnley heading */
.pf-section-heading em,
.pf-section-heading i,
.pf-hero-title em,
.pf-hero-title i,
.pf-panel-title em,
.pf-panel-title i {
    font-family: var(--Source-Serif-Italic);
    font-style: italic;
    font-weight: 450;
    color: var(--pf-heading-accent, var(--orange));
}

.pf-section-subtext {
    font-size: clamp(1.4rem, calc(1.1rem + (72 - 60) * (100vw - 400px) / (2000 - 400)), 1.8rem);
    line-height: 1.65;
    color: var(--pf-leaf-color, rgba(58, 71, 66, 0.8));
    text-align: center;
    max-width: 62ch;
    margin: 0;
}

.pf-section-footnote {
    font-size: 1.35rem;
    color: var(--pf-leaf-color, rgba(58, 71, 66, 0.7));
    text-align: center;
    margin: 0;
}

.pf-section-footnote.pf-footnote-pill {
    display: inline-block;
    padding: 1.1rem 2.2rem;
    border: 1px dashed var(--orange);
    border-radius: 10rem;
    background-color: var(--light-beige);
    color: var(--pf-leaf-color, var(--forest-green));
}

/* Dark-background sections recolour the shared header leaves */
.pf-split-feature .pf-section-heading,
.pf-value-props .pf-section-heading {
    color: var(--pf-leaf-color, var(--off-white));
}

/* ── Hero Split ─────────────────────────────────────────────────────────── */

.pf-hero-split {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
    gap: var(--pf-hero-gap, var(--medium-gutter));
    align-items: center;
    padding: var(--large-gutter) var(--medium-gutter);
    min-height: 82svh;
    background-color: var(--forest-green);
    overflow: hidden;
}

.pf-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Legibility scrim under the content even before an overlay is set */
.pf-hero-split::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, rgba(58, 71, 66, 0.82) 0%, rgba(58, 71, 66, 0.55) 55%, rgba(58, 71, 66, 0.25) 100%);
    pointer-events: none;
}

.pf-hero-overlay { z-index: 1; }

.pf-hero-content,
.pf-hero-panel {
    position: relative;
    z-index: 2;
}

.pf-hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--thin-gutter);
    max-width: 62rem;
}

.pf-hero-title {
    font-family: var(--DM-Sans);
    font-size: var(--global-kb-font-size-md);
    font-weight: 520;
    line-height: 1.08;
    color: var(--pf-leaf-color, var(--off-white));
    margin: 0;
}

.pf-hero-sub {
    font-size: clamp(1.5rem, calc(1.2rem + (72 - 60) * (100vw - 400px) / (2000 - 400)), 1.9rem);
    line-height: 1.6;
    color: var(--pf-leaf-color, rgba(245, 242, 238, 0.88));
    max-width: 52ch;
    margin: 0;
}

.pf-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    align-items: center;
}

/* Frosted info panel */
.pf-hero-panel {
    background-color: var(--pf-panel-bg, rgba(245, 242, 238, 0.10));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(245, 242, 238, 0.22);
    border-radius: var(--rounded-corners);
    padding: var(--thin-gutter);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 42rem;
    justify-self: end;
    width: 100%;
}

.pf-panel-title {
    font-family: var(--DM-Sans);
    font-size: 2rem;
    font-weight: 520;
    color: var(--pf-leaf-color, var(--off-white));
    margin: 0 0 0.8rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(245, 242, 238, 0.18);
}

.pf-panel-row {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.2rem 0.4rem;
    font-size: 1.45rem;
    color: var(--pf-leaf-color, rgba(245, 242, 238, 0.92));
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 242, 238, 0.10);
    transition: color 0.2s ease;
}

.pf-panel-row:last-child { border-bottom: none; }

a.pf-panel-row:hover { color: var(--orange); }

.pf-panel-dot {
    font-size: 0.7rem;
    color: var(--orange);
    flex-shrink: 0;
}

.pf-panel-row-label { flex: 1; }

.pf-panel-plus {
    color: rgba(245, 242, 238, 0.55);
    font-size: 1.7rem;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease;
}

a.pf-panel-row:hover .pf-panel-plus {
    color: var(--orange);
    transform: rotate(90deg);
}

/* ── Value Props Strip ──────────────────────────────────────────────────── */

.pf-value-props {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--pf-vp-gap, var(--medium-gutter));
    padding: var(--medium-gutter) var(--medium-gutter);
    background-color: var(--forest-green);
}

.pf-vp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.2rem;
}

.pf-vp-icon {
    width: 5.2rem;
    height: 5.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 2.1rem;
    color: var(--pf-vp-icon, var(--orange));
    background-color: var(--pf-vp-icon-bg, rgba(243, 113, 34, 0.14));
    border: 1px solid rgba(243, 113, 34, 0.35);
}

.pf-vp-heading {
    font-family: var(--DM-Sans);
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--pf-vp-text, var(--off-white));
    margin: 0;
}

.pf-vp-text {
    font-size: 1.35rem;
    line-height: 1.55;
    color: var(--pf-vp-text, rgba(245, 242, 238, 0.72));
    max-width: 30ch;
    margin: 0;
}

/* ── Membership Grid ────────────────────────────────────────────────────── */

.pf-membership-section { background-color: var(--off-white); }

.pf-membership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--thin-gutter);
    align-items: stretch;
    width: 100%;
    max-width: 130rem;
    margin-top: var(--thin-gutter);
}

.pf-m-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--pf-card-bg, #fff);
    border: 1px solid var(--dun);
    border-radius: var(--rounded-corners);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pf-m-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(58, 71, 66, 0.14);
}

.pf-m-card.pf-featured {
    border: 2px solid var(--pf-card-accent, var(--orange));
    box-shadow: 0 12px 34px rgba(243, 113, 34, 0.22);
}

.pf-m-badge {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 2;
    padding: 0.45rem 1.3rem;
    border-radius: 10rem;
    background-color: var(--beige);
    color: var(--forest-green);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pf-m-header {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 2.2rem 2rem 1.8rem;
    background-color: var(--pf-card-header-bg, var(--forest-green));
}

.pf-m-card.pf-featured .pf-m-header {
    background-color: var(--pf-card-header-bg, var(--pf-card-accent, var(--orange)));
}

.pf-m-tier-name {
    font-family: var(--DM-Sans);
    font-size: 2rem;
    font-weight: 560;
    color: var(--pf-leaf-color, var(--off-white));
    margin: 0;
}

.pf-m-tagline {
    font-family: var(--Source-Serif-Italic);
    font-style: italic;
    font-size: 1.35rem;
    color: var(--pf-leaf-color, rgba(245, 242, 238, 0.8));
}

.pf-m-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
    padding: 2.2rem 2rem 0.4rem;
    color: var(--pf-leaf-color, var(--forest-green));
}

.pf-m-price-value {
    font-size: 3.4rem;
    font-weight: 620;
    line-height: 1;
}

.pf-m-price-suffix {
    font-size: 1.3rem;
    color: rgba(58, 71, 66, 0.6);
}

.pf-m-sessions {
    text-align: center;
    font-size: 1.35rem;
    font-weight: 620;
    color: var(--pf-leaf-color, var(--orange));
    padding: 0 2rem 1.6rem;
}

.pf-m-saving {
    margin: 0 1.6rem 1.6rem;
    padding: 1rem 1.2rem;
    border-radius: calc(var(--rounded-corners) * 0.6);
    background-color: var(--light-beige);
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: center;
    color: var(--pf-leaf-color, var(--forest-green));
}

.pf-m-features {
    list-style: none;
    margin: 0;
    padding: 0 2rem;
    flex: 1;                       /* pushes the CTA to a common baseline   */
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.pf-m-feature {
    position: relative;
    padding-left: 2.4rem;
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--pf-leaf-color, rgba(58, 71, 66, 0.85));
    list-style: none;
}

.pf-m-feature::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--orange);
    font-weight: 700;
}

/* Existing pemfit/cta-button, adapted as the card CTA */
.pf-m-card .wp-block-pemfit-cta-button,
.pf-m-card .cta {
    width: auto;
    display: block;
    margin: 2rem;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 620;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pf-m-card .cta-outline { color: var(--forest-green); }

/* block-styles.css sets white-space:nowrap!important on .cta — allow the
   label to wrap inside narrow cards (this sheet loads after, so wins). */
.pf-m-card .cta,
.pf-pack-card .cta { white-space: normal !important; }

/* ── Split Feature / Discovery ──────────────────────────────────────────── */

.pf-split-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--pf-sf-gap, var(--large-gutter));
    align-items: center;
    padding: var(--large-gutter) var(--medium-gutter);
    background-color: var(--forest-green);
}

.pf-sf-content {
    display: flex;
    flex-direction: column;
    gap: var(--thin-gutter);
    align-items: flex-start;
}

.pf-sf-content .pf-section-label,
.pf-sf-content .pf-section-heading { text-align: left; }

.pf-sf-content .pf-section-heading {
    max-width: 20ch;
    color: var(--pf-leaf-color, var(--off-white));
}

.pf-sf-content p {
    font-size: clamp(1.4rem, calc(1.1rem + (72 - 60) * (100vw - 400px) / (2000 - 400)), 1.7rem);
    line-height: 1.7;
    color: var(--pf-sf-text, rgba(245, 242, 238, 0.85));
    max-width: 54ch;
    margin: 0;
}

.pf-steps-card {
    background-color: var(--pf-steps-bg, rgba(245, 242, 238, 0.07));
    border: 1px solid rgba(245, 242, 238, 0.18);
    border-radius: var(--rounded-corners);
    padding: var(--thin-gutter);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    counter-reset: pf-step;        /* auto numbering — reorder-safe         */
}

.pf-step-item {
    display: flex;
    gap: 1.6rem;
    align-items: flex-start;
    counter-increment: pf-step;
}

.pf-step-num {
    flex-shrink: 0;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background-color: var(--pf-step-num-bg, var(--orange));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 650;
}

.pf-step-num::before { content: counter(pf-step); }

.pf-step-heading {
    font-family: var(--DM-Sans);
    font-size: 1.55rem;
    font-weight: 620;
    color: var(--off-white);
    margin: 0 0 0.4rem;
}

.pf-step-text {
    font-size: 1.3rem;
    line-height: 1.55;
    color: rgba(245, 242, 238, 0.72);
    margin: 0;
}

/* ── Session Packs ──────────────────────────────────────────────────────── */

.pf-pack-section { background-color: var(--beige); }

.pf-pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--thin-gutter);
    align-items: stretch;
    width: 100%;
    max-width: 120rem;
    margin-top: var(--thin-gutter);
}

.pf-pack-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    background-color: var(--pf-card-bg, var(--off-white));
    border: 1px solid var(--dun);
    border-radius: var(--rounded-corners);
    padding: 2.8rem 2rem 2.4rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pf-pack-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(58, 71, 66, 0.12);
}

.pf-pack-name {
    font-family: var(--DM-Sans);
    font-size: 1.55rem;
    font-weight: 620;
    color: var(--pf-leaf-color, var(--forest-green));
    margin: 0;
}

.pf-pack-price {
    font-size: 2.9rem;
    font-weight: 620;
    line-height: 1.1;
    color: var(--pf-leaf-color, var(--forest-green));
}

.pf-pack-per {
    font-size: 1.25rem;
    color: var(--pf-leaf-color, rgba(58, 71, 66, 0.6));
}

.pf-pack-card .wp-block-pemfit-cta-button,
.pf-pack-card .cta {
    margin-top: auto;
    padding-top: 1rem;
    font-size: 1.25rem;
    font-weight: 620;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pf-pack-card .cta-outline { color: var(--forest-green); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.pf-faq-section { background-color: var(--off-white); }

.pf-faq-list {
    width: 100%;
    max-width: 78rem;
    margin-top: var(--thin-gutter);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.pf-faq-item {
    background-color: #fff;
    border: 1px solid var(--dun);
    border-radius: calc(var(--rounded-corners) * 0.8);
    overflow: hidden;
}

.pf-faq-q-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1.8rem 2.2rem;
    cursor: pointer;
    list-style: none;              /* hide the default details marker       */
}

.pf-faq-q-row::-webkit-details-marker { display: none; }

.pf-faq-question {
    font-family: var(--DM-Sans);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--forest-green);
}

.pf-faq-toggle {
    font-size: 2rem;
    line-height: 1;
    color: var(--orange);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

details.pf-faq-item[open] .pf-faq-toggle { transform: rotate(45deg); }

.pf-faq-answer {
    padding: 0 2.2rem 2rem;
    font-size: 1.35rem;
    line-height: 1.65;
    color: rgba(58, 71, 66, 0.8);
}

/* Editor shows the answer always-open beneath the question */
.editor-styles-wrapper .pf-faq-item .pf-faq-answer { padding-top: 0.4rem; }

/* ── Team Grid ──────────────────────────────────────────────────────────── */

.pf-team-section { background-color: var(--light-beige); }

.pf-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--thin-gutter);
    width: 100%;
    max-width: 110rem;
    margin-top: var(--thin-gutter);
}

.pf-team-card {
    background-color: var(--pf-card-bg, #fff);
    border-radius: var(--rounded-corners);
    overflow: hidden;
    border: 1px solid var(--dun);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pf-team-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(58, 71, 66, 0.12);
}

.pf-team-photo {
    aspect-ratio: 4 / 5;
    background-color: var(--sage-grey);
    overflow: hidden;
}

.pf-team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pf-team-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 1.25rem;
    color: rgba(58, 71, 66, 0.55);
    padding: 1rem;
    text-align: center;
}

.pf-team-body {
    padding: 1.8rem 2rem 2.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pf-team-name {
    font-family: var(--DM-Sans);
    font-size: 1.7rem;
    font-weight: 620;
    color: var(--forest-green);
    margin: 0;
}

.pf-team-bio {
    font-size: 1.3rem;
    line-height: 1.6;
    color: rgba(58, 71, 66, 0.75);
    margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
    .pf-membership-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-pack-grid       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .pf-hero-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .pf-hero-panel { justify-self: stretch; max-width: none; }

    .pf-split-feature { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .pf-membership-grid,
    .pf-pack-grid,
    .pf-team-grid { grid-template-columns: 1fr; }

    .pf-value-props { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
    .pf-value-props { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FIXES — editor parity, em sizing, card padding, equal CTA heights
   ═══════════════════════════════════════════════════════════════════════════ */

/* All em elements at 1.05em across the Burnley blocks. block-styles.css sets
   1.04em on h1 em and 1.14em elsewhere, both at higher specificity than a
   bare element selector, hence the scoping. */
.pf-section em, .pf-section i,
.pf-hero-split em, .pf-hero-split i,
.pf-value-props em, .pf-value-props i,
.pf-split-feature em, .pf-split-feature i {
    font-size: 1.05em;
}

/* The editor adds vertical margins between top-level blocks that do not
   exist on the front end, leaving a visible gap between sections. */
.editor-styles-wrapper .block-editor-block-list__layout > [data-type^="pemfit/"],
.editor-styles-wrapper .wp-block[data-type^="pemfit/"] {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* ── Membership cards ────────────────────────────────────────────────────── */
/* One padding value drives every child, so the tick bullets line up with the
   rest of the card content instead of sitting hard against the edge. */

.pf-m-card {
    --pf-card-pad: 2rem;
}

.pf-m-header   { padding: 2.2rem var(--pf-card-pad) 1.8rem; }
.pf-m-price    { padding: 2.2rem var(--pf-card-pad) 0.4rem; }
.pf-m-sessions { padding: 0 var(--pf-card-pad) 1.6rem; }
.pf-m-saving   { margin: 0 var(--pf-card-pad) 1.6rem; }
.pf-m-features { padding: 0 var(--pf-card-pad); }

/* Tick sits at the content edge and the label is indented from it, so the
   whole list aligns with the price, sessions and savings strip above. */
.pf-m-feature {
    padding-left: 2.2rem;
}

.pf-m-feature::before {
    left: 0;
}

.pf-m-card .wp-block-pemfit-cta-button,
.pf-m-card .cta {
    margin: 2rem var(--pf-card-pad);
}

/* ── Equal CTA heights ───────────────────────────────────────────────────── */
/* Card CTAs previously varied in height because a wrapped label made the
   button taller. A shared min-height plus centred flex content keeps every
   button on the same baseline regardless of label length. */
.pf-m-card .cta,
.pf-pack-card .cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--pf-cta-min-height, 4.8rem);
    box-sizing: border-box;
}

/* ── Footnote icons ──────────────────────────────────────────────────────── */
.pf-section-footnote .pf-icon {
    margin-right: 0.6em;
    color: var(--orange);
}

/* ── Value prop icons ────────────────────────────────────────────────────── */
.pf-vp-icon .pf-icon {
    font-size: 2.1rem;
    line-height: 1;
    color: inherit;
}