/* ═══════════════════════════════════════════════════════════════════════════
   Card Carousel — pemfit/card-carousel
   Loaded on the front end AND in the editor canvas (same file).

   Selector strength is kept LOW (single classes) so the shared controls
   always win without fighting: Typography "all text" and the per-part panels
   (Heading, Text, Card name, Card line, Button) override everything here.

   Breakpoints follow the theme: tablet ≤991px, mobile ≤600px.
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-cc {
    --pf-cc-bg-default: var(--forest-green, #3A4742);
    --pf-cc-card-bg-default: var(--light-beige, #F8EBDD);
    --pf-cc-card-border-default: transparent;
    --pf-cc-media-bg-default: var(--sage-grey, #D0D1C6);
    --pf-cc-pv-now: var(--pf-cc-pv, 4);
    --pf-cc-card-pad: clamp(1.4rem, calc(1.4rem + 6 * (100vw - 400px) / (2000 - 400)), 2rem);

    box-sizing: border-box;
    width: auto;
    padding: var(--large-gutter, 8rem) var(--thin-gutter, 2rem);
    background: var(--pf-cc-bg, var(--pf-cc-bg-default));
    color: var(--off-white, #F5F2EE);
    font-family: var(--DM-Sans);
    border-radius: 0;
}
.pf-cc.pf-cc-pad-compact { --pf-cc-card-pad: clamp(1rem, calc(1rem + 4 * (100vw - 400px) / (2000 - 400)), 1.4rem); }
.pf-cc.pf-cc-pad-roomy   { --pf-cc-card-pad: clamp(1.8rem, calc(1.8rem + 8 * (100vw - 400px) / (2000 - 400)), 2.8rem); }

.pf-cc-inner {
    display: flex;
    align-items: center;
    gap: var(--medium-gutter, 4rem);
    max-width: var(--pf-cc-inner-max, 128rem);
    margin-left: auto;
    margin-right: auto;
}

/* ── Intro ────────────────────────────────────────────────────────────── */
.pf-cc-intro {
    flex: 0 0 var(--pf-cc-text-w, 30%);
    max-width: var(--pf-cc-text-w, 30%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
    min-width: 0;
}
.pf-cc-heading {
    font-family: var(--DM-Sans);
    font-size: var(--global-kb-font-size-sm, clamp(2.25rem, 1.728rem + 1.63vw, 3rem));
    font-weight: 520;
    line-height: 1.15;
    margin: 0;
    text-align: left;
    /* The theme colours bare headings dark green, which vanishes on this
       section's background — take the section's text colour instead. */
    color: inherit;
}
.pf-cc-heading em,
.pf-cc-heading i {
    font-family: var(--Source-Serif-Italic);
    font-style: italic;
    font-weight: 450;
    color: var(--pf-heading-accent, var(--rose-gold, #D8BEAA));
}
.pf-cc-text {
    font-size: clamp(1.5rem, calc(1.3rem + 5 * (100vw - 400px) / (2000 - 400)), 1.9rem);
    line-height: 1.6;
    opacity: 0.88;
    text-align: left;
}
.pf-cc-text p { margin: 0; }
.pf-cc-btn { margin-top: 0.8rem; text-decoration: none; }

/* Button font size: the theme's link rule uses an ID inside :not(), which a
   plain class can't beat, so the size is pinned the same way the pack-card
   buttons are (tripled class + !important). */
.pf-cc-btn.pf-cc-btn.pf-cc-btn { font-size: 1.5rem !important; line-height: 1.2; }

/* Custom button colours. Each one only applies when it has been set in the
   Button panel (the render adds a has-btn-* class), so the chosen Button
   style stays untouched otherwise. The theme's .cta / .cta-outline rules and
   their :hover are !important, hence the tripled class + !important. */
.pf-cc-btn { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.pf-cc.has-btn-bg .pf-cc-btn.pf-cc-btn.pf-cc-btn { background: var(--pf-cc-btn-bg) !important; }
.pf-cc.has-btn-border .pf-cc-btn.pf-cc-btn.pf-cc-btn,
.pf-cc.has-btn-hover-border .pf-cc-btn.pf-cc-btn.pf-cc-btn { border: 1px solid var(--pf-cc-btn-border, transparent) !important; }
.pf-cc.has-btn-hover-bg .pf-cc-btn.pf-cc-btn.pf-cc-btn:hover,
.pf-cc.has-btn-hover-bg .pf-cc-btn.pf-cc-btn.pf-cc-btn:focus-visible { background: var(--pf-cc-btn-hover-bg) !important; }
.pf-cc.has-btn-hover-color .pf-cc-btn.pf-cc-btn.pf-cc-btn:hover,
.pf-cc.has-btn-hover-color .pf-cc-btn.pf-cc-btn.pf-cc-btn:focus-visible { color: var(--pf-cc-btn-hover-color) !important; }
.pf-cc.has-btn-hover-border .pf-cc-btn.pf-cc-btn.pf-cc-btn:hover,
.pf-cc.has-btn-hover-border .pf-cc-btn.pf-cc-btn.pf-cc-btn:focus-visible { border-color: var(--pf-cc-btn-hover-border) !important; }

/* ── Stage: arrows + viewport + dots ──────────────────────────────────── */
.pf-cc-stage {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    align-items: center;
    column-gap: clamp(0.8rem, 1.4vw, 1.6rem);
    row-gap: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "prev view next"
        ".    dots .";
}
.pf-cc-viewport { grid-area: view; min-width: 0; }
.pf-cc-prev     { grid-area: prev; }
.pf-cc-next     { grid-area: next; }
.pf-cc-dots     { grid-area: dots; }

.pf-cc-layout-stacked .pf-cc-inner { flex-direction: column; align-items: stretch; }
.pf-cc-layout-stacked .pf-cc-intro { flex: none; max-width: 60ch; width: 100%; margin-left: auto; margin-right: auto; align-items: stretch; }
.pf-cc-layout-stacked .pf-cc-heading,
.pf-cc-layout-stacked .pf-cc-text { text-align: center; }
.pf-cc-layout-stacked .pf-cc-btn { align-self: center; }
.pf-cc-layout-stacked .pf-cc-stage { flex: none; width: 100%; }

/* Arrows below the cards instead of either side. */
.pf-cc-arrows-below-end .pf-cc-stage {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "view view view" "dots prev next";
}
.pf-cc-arrows-below-start .pf-cc-stage {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: "view view view" "prev next dots";
}
.pf-cc-arrows-below-center .pf-cc-stage {
    grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    grid-template-areas: "view view view view view" ". prev dots next .";
}
/* Below-the-cards layouts: space under the cards, dots sit level with arrows. */
.pf-cc-arrows-below-start .pf-cc-stage,
.pf-cc-arrows-below-center .pf-cc-stage,
.pf-cc-arrows-below-end .pf-cc-stage { row-gap: 1.8rem; }
.pf-cc-arrows-below-start .pf-cc-dots,
.pf-cc-arrows-below-center .pf-cc-dots,
.pf-cc-arrows-below-end .pf-cc-dots { margin-top: 0; }
.pf-cc-arrows-below-end .pf-cc-dots   { justify-self: start; }
.pf-cc-arrows-below-start .pf-cc-dots { justify-self: end; }
.pf-cc-no-arrows .pf-cc-arrow { display: none; }
.pf-cc-no-arrows .pf-cc-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "view" "dots";
}

/* ── Track: equal-height cards, native scroll-snap ────────────────────── */
.pf-cc-track {
    list-style: none;
    margin: 0;
    padding: 0.6rem 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc( ( 100% - ( var(--pf-cc-pv-now) - 1 ) * var(--pf-cc-gap, 1.6rem) ) / var(--pf-cc-pv-now) );
    gap: var(--pf-cc-gap, 1.6rem);
    align-items: stretch;             /* every card as tall as the tallest */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.pf-cc-track::-webkit-scrollbar { display: none; }
.pf-cc-track:focus-visible { outline: 2px solid var(--rose-gold, #D8BEAA); outline-offset: 4px; border-radius: 1rem; }

.pf-cc-slide {
    display: flex;
    min-width: 0;
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
}
.pf-cc-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-sizing: border-box;
    padding: var(--pf-cc-card-pad);
    gap: calc(var(--pf-cc-card-pad) * 0.8);
    background: var(--pf-cc-card-bg, var(--pf-cc-card-bg-default));
    border: 1px solid var(--pf-cc-card-border, var(--pf-cc-card-border-default));
    border-radius: var(--rounded-corners, 1.6rem);
    color: var(--forest-green, #3A4742);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pf-cc-hover .pf-cc-card:hover,
.pf-cc-hover .pf-cc-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.pf-cc-media {
    position: relative;
    flex: none;
    aspect-ratio: var(--pf-cc-ratio, 4 / 5);
    background: var(--pf-cc-media-bg, var(--pf-cc-media-bg-default));
    border-radius: calc(var(--rounded-corners, 1.6rem) * 0.6);
    overflow: hidden;
}
.pf-cc-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--pf-cc-fit, cover);
    display: block;
}

/* The body takes the leftover height, so text sits at the top of its area
   and every card ends on the same line however long the text is. */
.pf-cc-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: center;
}
.pf-cc-name {
    font-family: var(--DM-Sans);
    font-size: clamp(1.6rem, calc(1.5rem + 3 * (100vw - 400px) / (2000 - 400)), 1.9rem);
    font-weight: 620;
    line-height: 1.25;
    margin: 0;
}
.pf-cc-role {
    font-size: clamp(1.25rem, calc(1.2rem + 2 * (100vw - 400px) / (2000 - 400)), 1.45rem);
    line-height: 1.4;
    margin: 0;
    opacity: 0.8;
}

/* ── Arrows: minimal circular line buttons ────────────────────────────── */
.pf-cc-arrow {
    --pf-cc-arrow-fg: var(--pf-cc-arrow-color, currentColor);
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-sizing: border-box;
    width: var(--pf-cc-arrow-size, 4.4rem);
    height: var(--pf-cc-arrow-size, 4.4rem);
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 1px solid var(--pf-cc-arrow-fg);
    border-radius: 50%;
    background: var(--pf-cc-arrow-bg, transparent);
    color: var(--pf-cc-arrow-fg);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.pf-cc-arrow-icon { width: 46%; height: 46%; display: block; }

/* Filled: a light disc with a dark icon by default. Set explicitly (not via
   currentColor, which would make the disc and icon the same colour). */
.pf-cc-arrowstyle-filled .pf-cc-arrow {
    background: var(--pf-cc-arrow-bg, var(--off-white, #F5F2EE));
    border-color: var(--pf-cc-arrow-bg, var(--off-white, #F5F2EE));
    color: var(--pf-cc-arrow-color, var(--forest-green, #3A4742));
}
.pf-cc-arrowstyle-plain .pf-cc-arrow { border-color: transparent; }

.pf-cc-arrow:hover,
.pf-cc-arrow:focus-visible {
    background: var(--pf-cc-arrow-hover-bg, var(--orange, #F37122));
    border-color: var(--pf-cc-arrow-hover-bg, var(--orange, #F37122));
    color: var(--pf-cc-arrow-hover-color, #fff);
}
.pf-cc-arrow:focus-visible { outline: 2px solid var(--rose-gold, #D8BEAA); outline-offset: 3px; }
.pf-cc-arrow[disabled],
.pf-cc-arrow[aria-disabled="true"] {
    opacity: 0.3;
    cursor: default;
    background: var(--pf-cc-arrow-bg, transparent);
    border-color: var(--pf-cc-arrow-fg);
    color: var(--pf-cc-arrow-fg);
}
.pf-cc.pf-cc-arrowstyle-filled .pf-cc-arrow[disabled] {
    background: var(--pf-cc-arrow-bg, var(--off-white, #F5F2EE));
    border-color: var(--pf-cc-arrow-bg, var(--off-white, #F5F2EE));
    color: var(--pf-cc-arrow-color, var(--forest-green, #3A4742));
}

/* ── Dots (built by the script when switched on) ──────────────────────── */
.pf-cc-dots { display: flex; gap: 0.8rem; justify-content: center; min-height: 0; margin-top: 1.8rem; }
.pf-cc-dots:empty { display: none; }
.pf-cc-dot {
    appearance: none; -webkit-appearance: none;
    width: 0.9rem; height: 0.9rem; padding: 0; margin: 0;
    border: 0; border-radius: 50%;
    color: inherit;          /* buttons don't inherit colour by default */
    background: var(--pf-cc-dot, currentColor);
    opacity: 0.35;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.pf-cc-dot.is-active { opacity: 1; background: var(--pf-cc-dot-active, var(--pf-cc-dot, currentColor)); transform: scale(1.25); }
.pf-cc-dot:focus-visible { outline: 2px solid var(--rose-gold, #D8BEAA); outline-offset: 3px; }

/* Nothing to scroll: hide the controls (set by the script). */
.pf-cc.is-static .pf-cc-arrow,
.pf-cc.is-static .pf-cc-dots { visibility: hidden; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1400px) {
    .pf-cc-intro { flex-basis: var(--pf-cc-text-w, 30%); }
}

/* Tablet: the text panel sits above the cards, cards per view from the
   block's tablet setting. */
@media (max-width: 991px) {
    .pf-cc { --pf-cc-pv-now: var(--pf-cc-pv-t, 2); }
    .pf-cc-inner { flex-direction: column; align-items: stretch; gap: var(--thin-gutter, 2.4rem); }
    /* The text panel now sits above the cards: centre it. The block is
       centred in the container, the text is centred inside it (a Typography
       alignment choice still wins), and the button sits in the middle. */
    .pf-cc-intro { flex: none; max-width: 60ch; width: 100%; margin-left: auto; margin-right: auto; align-items: stretch; }
    .pf-cc-heading,
    .pf-cc-text { text-align: center; }
    .pf-cc-btn { align-self: center; }
    .pf-cc-stage { flex: none; width: 100%; }
}

/* Mobile: cards per view from the mobile setting; side arrows would squeeze
   the cards, so they move underneath, centred. */
@media (max-width: 600px) {
    .pf-cc { --pf-cc-pv-now: var(--pf-cc-pv-m, 1); }
    .pf-cc-arrows-sides .pf-cc-stage { row-gap: 1.8rem; }
    .pf-cc-arrows-sides .pf-cc-dots { margin-top: 0; }
    .pf-cc-arrows-sides .pf-cc-stage {
        grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
        grid-template-areas: "view view view view view" ". prev dots next .";
    }
    .pf-cc-arrows-below-start .pf-cc-stage,
    .pf-cc-arrows-below-end .pf-cc-stage {
        grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
        grid-template-areas: "view view view view view" ". prev dots next .";
    }
    .pf-cc-arrows-below-start .pf-cc-dots,
    .pf-cc-arrows-below-end .pf-cc-dots { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
    .pf-cc-card, .pf-cc-arrow, .pf-cc-dot { transition: none; }
    .pf-cc-hover .pf-cc-card:hover { transform: none; }
}

/* ── Editor ───────────────────────────────────────────────────────────────
   This selector also makes Gutenberg copy the file into the iframed canvas
   (it only copies sheets containing .editor-styles-wrapper). */
.editor-styles-wrapper .pf-cc-media .pf-cc-add-image {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    background: transparent; border: 0; cursor: pointer;
    color: rgba(58, 71, 66, 0.7);
    font-size: 1.3rem; text-align: center;
}
.editor-styles-wrapper .pf-cc-media .pf-cc-add-image:hover { background: rgba(58, 71, 66, 0.08); }
.editor-styles-wrapper .pf-cc-media .pf-cc-replace-image {
    position: absolute; right: 0.6rem; bottom: 0.6rem; z-index: 3;
    padding: 0.4rem 0.9rem; border-radius: 10rem; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.92); color: #1e1e1e; font-size: 1.2rem;
    opacity: 0; transition: opacity 0.15s ease;
}
.editor-styles-wrapper .pf-cc-media:hover .pf-cc-replace-image { opacity: 1; }
.editor-styles-wrapper .pf-cc-name:focus,
.editor-styles-wrapper .pf-cc-role:focus,
.editor-styles-wrapper .pf-cc-heading:focus,
.editor-styles-wrapper .pf-cc-text:focus {
    outline: 1px dashed rgba(245, 242, 238, 0.5);
    outline-offset: 2px;
}
.editor-styles-wrapper .pf-cc-card .pf-cc-name:focus,
.editor-styles-wrapper .pf-cc-card .pf-cc-role:focus { outline-color: rgba(58, 71, 66, 0.5); }

/* ── Width, side margins and centring ────────────────────────────────────
   Same approach as the price table: the render (and the editor code) copy
   the Spacing & Size "Margin left / right" and "Max width" into --pf-cc-ml /
   -mr / -max, and each side margin is the LARGER of your fixed margin and
   half the space left once the block is at its max width — so a fixed margin
   no longer pushes a max-width block to one side on large screens. With no
   max width set the block is simply full width. !important + doubled class:
   these must beat the plain margin / max-width the shared controls also put
   inline, and the editor's layout rules that force side margins to auto. */
.wp-block-pemfit-card-carousel.pf-cc {
    max-width: none !important;
    margin-left:  max( var(--pf-cc-ml, 0px), calc( ( 100% - var(--pf-cc-max, 100%) ) / 2 ) ) !important;
    margin-right: max( var(--pf-cc-mr, 0px), calc( ( 100% - var(--pf-cc-max, 100%) ) / 2 ) ) !important;
}