/*
==========================================================
SERVICES CORE — services_core.css
==========================================================
WHAT IT IS:
Two-zone services section block for Boilerplate Master.

WHAT IT DOES:
Renders a two-zone layout: left intro column + up to two
stacked landscape main (featured) flip cards (top), then any
number of portrait smaller (supporting) flip cards in even
rows (bottom). Cards use an opacity-fade reveal (front → back)
on hover/focus. Phones (≤768px) and touch screens that can't
reliably hover flatten cards to static flow so all content
(and any card link) is visible.

HOW TO USE (Batch 8H, BATCH_8_PLAN.md §22):
1. Title & text tab: label, two-line title, intro, small tag
2. Main cards tab: up to 2 cards (Front · Back · Link · Color);
   0 → the intro uses the full width, 1 → one rounded card
3. Smaller cards tab: unlimited (Front · Back · Photo · Link ·
   Color) — rows of up to 4 on computers, 2 on tablets, 1 on
   small phones (≤520px); rows never differ by more than one
4. Card behavior tab: show the back when pointed at / always
   show both; Joined (default) or Separate cards
5. Colors & appearance tab: section background, optional look

Today's 2 main + 4 smaller, Joined, Standard look is unchanged.

All values use boilerplate CSS tokens from style.css.
==========================================================
*/


/* ── Base Section ────────────────────────────────────────── */

.services_core {
    margin-top: var(--space-10);
    padding: var(--space-20) 0;
    background:
        radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--color-secondary) 10%, transparent), transparent 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-bg-dark) 82%, transparent) 0%, color-mix(in srgb, var(--color-bg-dark) 88%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--color-accent) 16%, transparent);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.30),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 0 28px color-mix(in srgb, var(--color-accent) 10%, transparent);
}


/* ── Section Background Mode (Batch 8F Round 3, §8F.3) ───────────────────
   Uses the `background` shorthand, not `background-color`, specifically
   because the base .services_core rule above sets its two-layer gradient
   through that same shorthand — background-color alone cannot clear it
   (§8F.0 point 9). Each is a compound selector (two classes), which beats
   the base rule's single-class specificity regardless of source order, so
   no !important is needed; placed after the base rule anyway, matching
   this project's "variant rules after base" convention as a matter of
   style. Theme Default (no class) leaves the gradient completely
   untouched — this is this block's first-ever light background mode, so
   every element sitting directly on the section's own background (not a
   self-contained card, which keeps its own always-dark surface regardless
   — see the text-color block further down) needs an explicit flip, not
   just "no rule," since every existing rule in this file assumes dark. */
.services_core.sc_bg_background {
    background: var(--color-bg);
}

.services_core.sc_bg_alt_background {
    background: var(--color-bg-alt);
}

.services_core.sc_bg_dark {
    background: var(--color-bg-dark);
}

.services_core.sc_bg_accent {
    background: var(--color-accent);
}

.services_core.sc_bg_custom {
    background: var(--sc-custom-bg, var(--color-bg-dark));
}


/* ── Two-Column Top Area ─────────────────────────────────── */

.sc_top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: start;
    margin-bottom: var(--space-8);
}


/* ── Intro Column ────────────────────────────────────────── */

.sc_intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: var(--space-4);
}

/* BOILERPLATE NOTE: .sc_eyebrow duplicates the shared eyebrow pattern in style.css §10.
   On a live project, remove this rule once §10 is in place. */
/* Audit finding (Batch 8F Round 3) — this rule originally set the eyebrow
   to --color-accent unconditionally, the same collision pattern already
   found and fixed elsewhere this batch. Pre-existing, not introduced by
   this round, but measured here with the same real-browser luminance
   formula used throughout: a real 2.63:1 against this block's own dark
   gradient/tokens, below WCAG AA — not just a literal 1.00:1 collision in
   Accent mode. Base color changed to the block's own always-dark
   assumption (--color-text-inverse, matching .sc_heading beside it); the
   light-background override further down (§8F.3 state model) flips it
   back to accent-blue for the three modes where that reads correctly. */
.sc_eyebrow {
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-inverse);
    margin-bottom: var(--space-4);
}

.sc_heading {
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    font-weight: var(--weight-bold);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-text-inverse);
    margin-bottom: var(--space-6);
}

/* Gradient accent — second line of the heading */
.sc_heading_accent {
    display: block;
    background: linear-gradient(135deg, var(--color-accent), var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sc_body {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: color-mix(in srgb, var(--color-text-inverse) 72%, transparent);
    margin-bottom: var(--space-6);
    max-width: 38ch;
}

.sc_body p {
    color: inherit;
    margin-bottom: var(--space-3);
}

.sc_body p:last-child {
    margin-bottom: 0;
}

/* Covers list items too — the p-only rule above left <li> text falling back
   to the global (light-background) text color on this dark-background block. */
.sc_body li {
    color: inherit;
}

/* WYSIWYG Editor Consistency and Contrast — this entire block is always a
   dark surface (no light variant exists), so this fix is unconditional, not
   gated behind a variant class. A "No color" heading saved inside .sc_body
   otherwise falls back to the global h1-h6 rule (style.css §4b,
   --color-primary) and is unreadable here. Matches .sc_card_title's own
   heading color below, not .sc_body's own muted paragraph tone. */
.sc_body h1, .sc_body h2, .sc_body h3, .sc_body h4, .sc_body h5, .sc_body h6 {
    color: var(--color-text-inverse);
}

/* Audit finding (Batch 8F Round 3) — same unconditional reasoning as the
   heading fix above, for a WYSIWYG-embedded link: .sc_body has never had
   its own link color in any state, so it fell to the global accent-blue
   `a` color — measured (same real-browser luminance formula used
   throughout this batch) at a real 2.63:1 against this block's dark
   tokens, below WCAG AA. A pre-existing gap, not introduced by this round,
   but surfaced by this round's own audit and fixed here, unconditionally,
   exactly like the heading fix beside it — not scoped to a new mode class,
   since Theme Default and explicit Dark both need it equally. */
.sc_body a {
    color: var(--color-text-inverse);
}

.sc_body a:hover {
    color: var(--color-text-inverse-soft);
}

/* BOILERPLATE NOTE: .sc_pill duplicates the shared pill/tag pattern in style.css §10.
   On a live project, remove this rule once §10 is in place. */
.sc_pill {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 22%, transparent);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-bg-dark) 72%, transparent);
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--color-text-inverse) 75%, transparent);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.18),
        0 0 12px color-mix(in srgb, var(--color-accent) 8%, transparent);
}


/* ── Section Background Mode — text treatment (Batch 8F Round 3, §8F.3) ──
   Every rule above assumes an always-dark background, since this block
   has never had a light mode before now. Background/Alternate/Custom +
   Dark Text are this block's first-ever light surface, so .sc_eyebrow,
   .sc_heading, .sc_body (and its nested links/headings), and .sc_pill all
   need an explicit flip here — not "no rule," since nothing in this file
   already does this. Dark and Custom + Light Text need no flip — both
   match the file's existing always-dark assumption exactly.

   The featured/support flip cards are NOT touched by any rule here: each
   card (.sc_flip_card_f1/f2, .sc_flip_card_support) sets its own opaque
   `background: var(--color-bg-dark)`/`background-color: var(--color-bg-
   dark)` independent of the section, the same self-contained-surface
   pattern already established for Zone Band's pill and Timeline's card —
   their own inverse-toned text keeps reading correctly against their own
   background regardless of what the outer section does. */

.services_core.sc_bg_background .sc_heading,
.services_core.sc_bg_alt_background .sc_heading,
.services_core.sc_text_dark .sc_heading {
    color: var(--color-primary);
}

.services_core.sc_bg_background .sc_eyebrow,
.services_core.sc_bg_alt_background .sc_eyebrow,
.services_core.sc_text_dark .sc_eyebrow {
    color: var(--color-accent);
}

.services_core.sc_bg_background .sc_body,
.services_core.sc_bg_alt_background .sc_body,
.services_core.sc_text_dark .sc_body {
    color: var(--color-text);
}

.services_core.sc_bg_background .sc_body h1, .services_core.sc_bg_background .sc_body h2,
.services_core.sc_bg_background .sc_body h3, .services_core.sc_bg_background .sc_body h4,
.services_core.sc_bg_background .sc_body h5, .services_core.sc_bg_background .sc_body h6,
.services_core.sc_bg_alt_background .sc_body h1, .services_core.sc_bg_alt_background .sc_body h2,
.services_core.sc_bg_alt_background .sc_body h3, .services_core.sc_bg_alt_background .sc_body h4,
.services_core.sc_bg_alt_background .sc_body h5, .services_core.sc_bg_alt_background .sc_body h6,
.services_core.sc_text_dark .sc_body h1, .services_core.sc_text_dark .sc_body h2,
.services_core.sc_text_dark .sc_body h3, .services_core.sc_text_dark .sc_body h4,
.services_core.sc_text_dark .sc_body h5, .services_core.sc_text_dark .sc_body h6 {
    color: var(--color-primary);
}

/* Forces the link back to normal accent-blue for the new light modes —
   the unconditional inverse fix above (correct for Theme Default/Dark/
   Accent/Custom+Light-Text) would otherwise leave an inverse-white link
   sitting on a light background here. */
.services_core.sc_bg_background .sc_body a,
.services_core.sc_bg_alt_background .sc_body a,
.services_core.sc_text_dark .sc_body a {
    color: var(--color-accent);
}

.services_core.sc_bg_background .sc_body a:hover,
.services_core.sc_bg_alt_background .sc_body a:hover,
.services_core.sc_text_dark .sc_body a:hover {
    color: var(--color-accent-hover);
}

.services_core.sc_bg_background .sc_pill,
.services_core.sc_bg_alt_background .sc_pill,
.services_core.sc_text_dark .sc_pill {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

/* .sc_eyebrow and .sc_heading_accent are handled in the accent-collision
   block below, not here — Background/Alternate/Custom+Dark-Text's accent-
   blue eyebrow and accent-to-secondary gradient heading both already read
   correctly against a light surface; only Accent mode (and Custom+Light
   Text, which carries the same signal) collide. */


/* ── Accent-color collision (Batch 8F Round 3, §8F.3) ─────────────────────
   .sc_heading_accent's gradient uses --color-accent as one of its two
   stops unconditionally — the same collision pattern already found and
   fixed in Zone Band (Round 1), Flexible Content, Image Grid, Before/After,
   and Timeline this batch. .sc_eyebrow needed no separate rule here — its
   base color is now the block's own always-dark assumption (see the fix
   at its own rule, above), so Dark/Accent/Custom+Light-Text all already
   read correctly with no class at all; only the light-background
   override further up flips it back to accent-blue. Grouped with Custom +
   Light Text, not just Accent: an editor who explicitly chose Light Text
   for a Custom background has already told us accent-toned elements may
   not read there either — the same signal, not a separate guess. */

.services_core.sc_bg_accent .sc_heading_accent,
.services_core.sc_text_light .sc_heading_accent {
    /* Fully resets the gradient-clip-text effect rather than just changing
       its colors — a gradient that still had --color-accent as one of its
       two stops would keep reproducing the same collision at that end. */
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--color-text-inverse);
}


/* ── Featured Cards Column ───────────────────────────────── */

.sc_featured {
    display: flex;
    flex-direction: column;
    gap: 0;
}


/* ── Base Flip Card ──────────────────────────────────────── */

.sc_flip_card {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

/* Inset border — sits above all content via z-index */
.sc_flip_card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
    z-index: 5;
    pointer-events: none;
    transition: border-color 0.35s ease;
}

.sc_flip_card:hover::before,
.sc_flip_card:focus-within::before {
    border-color: color-mix(in srgb, var(--color-accent) 45%, white);
}

/* Inner wrapper — flips from absolute (desktop) to flex flow (mobile) */
.sc_flip_card_inner {
    position: absolute;
    inset: 0;
}

/* ── Front Face ─── */

.sc_flip_card_front {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    padding: var(--space-6);
    z-index: 2;
    transition: opacity 0.35s ease;
}

/* Bottom gradient scrim — keeps title legible over gradient background */
.sc_flip_card_front::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--color-bg-dark) 88%, transparent) 0%,
        color-mix(in srgb, var(--color-bg-dark) 45%, transparent) 45%,
        transparent 80%
    );
    pointer-events: none;
    z-index: -1;
}

/* ── Back Face ─── */

.sc_flip_card_back {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    z-index: 3;
    background: var(--color-bg-dark);
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* ── Reveal on hover / keyboard focus ─── */

.sc_flip_card:hover .sc_flip_card_front,
.sc_flip_card:focus-within .sc_flip_card_front {
    opacity: 0;
}

.sc_flip_card:hover .sc_flip_card_back,
.sc_flip_card:focus-within .sc_flip_card_back {
    opacity: 1;
}

/* ── Shared Text Elements ─── */

.sc_card_title {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    color: var(--sc-ink-title, var(--color-text-inverse));
    line-height: var(--leading-tight);
    position: relative;
    z-index: 1;
    margin: 0 0 var(--space-2) 0;
    text-shadow: var(--sc-ink-shadow, 0 2px 14px rgba(0, 0, 0, 0.45));
}

.sc_card_subtext {
    font-size: var(--text-sm);
    color: var(--sc-ink-sub, color-mix(in srgb, var(--color-accent) 85%, white));
    line-height: var(--leading-snug);
    position: relative;
    z-index: 1;
    margin: 0;
}

.sc_card_text {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--sc-ink-body, color-mix(in srgb, var(--color-text-inverse) 88%, transparent));
    text-align: center;
    max-width: 26ch;
}

.sc_card_text p {
    color: inherit;
    margin: 0;
}

/* Covers list items too — the p-only rule above left <li> text falling back
   to the global (light-background) text color on this dark-background block. */
.sc_card_text li {
    color: inherit;
}

/* WYSIWYG Editor Consistency and Contrast — same unconditional fix as
   .sc_body above; this card face is always dark. Matches .sc_card_title's
   heading color, not .sc_card_text's own muted paragraph tone. */
.sc_card_text h1, .sc_card_text h2, .sc_card_text h3,
.sc_card_text h4, .sc_card_text h5, .sc_card_text h6 {
    color: var(--sc-ink-title, var(--color-text-inverse));
}


/* ── Featured Cards — Landscape ──────────────────────────── */

.sc_flip_card_featured {
    min-height: calc(230px * var(--sc-feat-scale, 1));
}

/* Corner rounding — top card gets top radius, bottom card gets bottom radius */
.sc_flip_card_featured:first-child {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.sc_flip_card_featured:last-child {
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.sc_flip_card_featured .sc_card_title {
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
}

/* Gradient line separating the two featured cards */
.sc_flip_card_featured:first-child::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--space-6);
    right: var(--space-6);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--color-accent) 30%, transparent) 25%,
        color-mix(in srgb, var(--color-accent) 50%, transparent) 50%,
        color-mix(in srgb, var(--color-accent) 30%, transparent) 75%,
        transparent 100%
    );
    z-index: 6;
    pointer-events: none;
}

/* Featured card 1 */
.sc_flip_card_f1 {
    background: var(--color-bg-dark);
}

/* Featured card 2 */
.sc_flip_card_f2 {
    background: var(--color-bg-dark);
}


/* ── Supporting Cards Row — 4 connected ──────────────────── */

/* Even rows (§22 #10.3): the template places each card on a grid of
   half-width tracks (--sc-d-tracks = 2 × cards per row) with --sc-dc /
   --sc-dr, so a row one card short is centered. 4 cards = 8 tracks, each
   card spanning 2 — the same widths as today's repeat(4, 1fr). */
.sc_support {
    display: grid;
    grid-template-columns: repeat(var(--sc-d-tracks, 8), minmax(0, 1fr));
    gap: 0;
}

.sc_flip_card_support {
    grid-column: var(--sc-dc, auto) / span 2;
    grid-row: var(--sc-dr, auto);
}

/* A shorter last row: each row becomes its own rounded strip. */
.sc_support.sc_d_strips {
    row-gap: var(--space-4);
}

.sc_flip_card_support {
    aspect-ratio: 3 / 4;
    background-color: var(--color-bg-dark); /* fallback when no image is set */
    background-size: cover;
    background-position: center;
}

/* Dark gradient overlay — sits on top of the background image, below card content */
.sc_flip_card_support::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--color-bg-dark) 92%, transparent) 0%,
        color-mix(in srgb, var(--color-bg-dark) 55%, transparent) 50%,
        color-mix(in srgb, var(--color-bg-dark) 22%, transparent) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.sc_flip_card_support .sc_flip_card_back {
    align-items: flex-start;
    padding: var(--space-6);
}

.sc_flip_card_support .sc_card_text {
    text-align: left;
    max-width: none;
}

.sc_flip_card_support .sc_card_title {
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
}

/* Outer corner rounding — the template marks each card's outer corners
   (sc_d_* on computers, sc_t_* on tablets), so rounding is always on the
   outside of the joined shape, whatever the number of cards. */
.sc_flip_card_support.sc_d_tl { border-top-left-radius: var(--radius-xl); }
.sc_flip_card_support.sc_d_tr { border-top-right-radius: var(--radius-xl); }
.sc_flip_card_support.sc_d_bl { border-bottom-left-radius: var(--radius-xl); }
.sc_flip_card_support.sc_d_br { border-bottom-right-radius: var(--radius-xl); }


/* ── Flip suppressor — card_flip_animation: none ────────────── */
/* The field's own instructions promise "None" displays all content statically.
   The rules this replaced only suppressed the hover animation while leaving
   the back face permanently hidden (opacity: 0 always) — its body copy was
   never visible at any screen width. Fix: break out of the absolute-overlay
   flip layout into normal stacked flow, both faces visible at once. Mirrors
   the same static-stack pattern already proven at the mobile breakpoint
   below, applied here regardless of screen width. */

.sc_no_flip .sc_flip_card {
    cursor: default;
}

.sc_no_flip .sc_flip_card_inner {
    position: static;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sc_no_flip .sc_flip_card_front {
    position: static;
    opacity: 1;
    padding: var(--space-5) var(--space-5) 0;
    justify-content: flex-end;
}

.sc_no_flip .sc_flip_card_front::before {
    display: none;
}

.sc_no_flip .sc_flip_card_back {
    position: static;
    opacity: 1;
    background: none;
    padding: var(--space-3) var(--space-5) var(--space-5);
    align-items: flex-start;
    justify-content: flex-start;
}

.sc_no_flip .sc_card_text {
    text-align: left;
    max-width: none;
    color: var(--sc-ink-body-static, color-mix(in srgb, var(--color-text-inverse) 70%, transparent));
}

.sc_no_flip .sc_flip_card_featured {
    min-height: 0;
}

.sc_no_flip .sc_flip_card_support {
    aspect-ratio: auto;
    min-height: 180px;
}

/* The resting-state opacity:1 rules above don't survive hover/focus — the
   base ".sc_flip_card:hover .sc_flip_card_front { opacity: 0; }" rule
   (class + pseudo-class + class = higher specificity) still wins over the
   plain ".sc_no_flip .sc_flip_card_front" resting rule, so a "None" card
   would lose its front face the moment it's hovered or keyboard-focused.
   These explicit hover/focus overrides add one more class-level selector
   than the base rules, so they win instead and both faces stay visible. */
.sc_no_flip .sc_flip_card:hover .sc_flip_card_front,
.sc_no_flip .sc_flip_card:focus-within .sc_flip_card_front,
.sc_no_flip .sc_flip_card:hover .sc_flip_card_back,
.sc_no_flip .sc_flip_card:focus-within .sc_flip_card_back {
    opacity: 1;
}


/* ── Main-card count (Batch 8H, §22 #10.3) ──────────────────────
   2 main cards add no class (today's stacked pair). One card is as tall
   as the pair and rounded on all corners; with none, the intro uses the
   full width instead of leaving an empty half. */
.services_core.sc_featured_count_1 {
    --sc-feat-scale: 2;
}

.sc_featured_count_1 .sc_flip_card_featured {
    border-radius: var(--radius-xl);
}

.sc_featured_count_1 .sc_flip_card_featured::after {
    display: none;
}

.sc_featured_count_0 .sc_top {
    grid-template-columns: 1fr;
}


/* ── Card spacing: Separate (§22 #10.3) ─────────────────────────
   Joined is today's look (no class). Separate adds one standard space
   between every card and rounds each card on its own. Three classes, so it
   outranks every corner rule at every screen width. */
.services_core.sc_spacing_separate .sc_featured,
.services_core.sc_spacing_separate .sc_support {
    gap: var(--space-4);
}

.services_core.sc_spacing_separate .sc_flip_card {
    border-radius: var(--radius-xl);
}

.services_core.sc_spacing_separate .sc_flip_card_featured::after {
    display: none;
}


/* ── Card colors (§22 #10.4) ────────────────────────────────────
   Standard adds no class (today's look). A card color sets --sc-card-bg
   (theme colors here; "Pick my own color" inline from the template) and an
   ink class sets the text colors through the --sc-ink-* variables used by
   the card text rules above. Precedence:
   - no photo: the color fills front and back; the dark front shade and
     photo overlay are not drawn;
   - smaller card with a photo: the front keeps the photo and its dark
     overlay (words stay light); the color and ink apply to the back only,
     including where phones show the back under the front. */
.sc_card_bg_background     { --sc-card-bg: var(--color-bg); }
.sc_card_bg_alt_background { --sc-card-bg: var(--color-bg-alt); }
.sc_card_bg_dark           { --sc-card-bg: var(--color-bg-dark); }
.sc_card_bg_accent         { --sc-card-bg: var(--color-accent); }

.sc_flip_card.sc_card_colored:not(.sc_card_has_photo) {
    background: var(--sc-card-bg);
}

.sc_flip_card.sc_card_colored:not(.sc_card_has_photo) .sc_flip_card_front::before,
.sc_flip_card_support.sc_card_colored:not(.sc_card_has_photo)::after {
    display: none;
}

.sc_flip_card.sc_card_colored .sc_flip_card_back {
    background: var(--sc-card-bg);
}

.sc_card_ink_dark:not(.sc_card_has_photo),
.sc_card_ink_dark.sc_card_has_photo .sc_flip_card_back {
    --sc-ink-title: var(--color-primary);
    --sc-ink-sub: var(--color-secondary);
    --sc-ink-body: var(--color-text);
    --sc-ink-body-static: var(--color-text);
    --sc-ink-shadow: none;
}

/* Light text on a chosen color: the short line under the title drops its
   accent tint (it can vanish on a Brand or custom color) for the theme's
   soft light text. Standard cards keep today's tint. */
.sc_card_colored.sc_card_ink_light:not(.sc_card_has_photo) {
    --sc-ink-sub: var(--color-text-inverse-soft);
}

/* Hover/focus outline follows the dark text, so it stays visible on light cards. */
.sc_card_ink_dark:not(.sc_card_has_photo):hover::before,
.sc_card_ink_dark:not(.sc_card_has_photo):focus-within::before {
    border-color: var(--color-primary);
}


/* ── Card links (§22 #10.5) ─────────────────────────────────────
   One text link at the bottom of the back — never a whole-card link. On a
   linked card the link is the only keyboard stop; focusing it reveals the
   back through the card's :focus-within rules above. */
.sc_card_link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--sc-ink-title, var(--color-text-inverse));
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sc_card_link:hover {
    text-decoration-thickness: 2px;
}

.sc_card_link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Read by screen readers, not shown ("… about Kitchen remodels"). */
.sc_sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Editor only: shown when no title is typed (the page shows nothing). */
.sc_preview_empty {
    padding: var(--space-6);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-size: var(--text-sm);
    text-align: center;
}


/* ── Section Variants (v4 pattern) ──────────────────────────── */
/*
   This block is the first in Boilerplate Master to ship with
   CSS rules for each variant. All future blocks should follow
   this pattern. Existing blocks will be backfilled in V4.
*/

/* default — base styles apply, no override needed */

/* homepage-feature — elevated treatment, larger padding */
.services_core_variant_homepage_feature {
    padding: var(--space-24) 0;
    box-shadow:
        var(--shadow-lg),
        0 0 60px color-mix(in srgb, var(--color-accent) 12%, transparent);
}

/* minimal — stripped back, plain bg, no decorative chrome */
.services_core_variant_minimal {
    padding: var(--space-12) 0;
    background: var(--color-bg-dark);
    border: none;
    box-shadow: none;
    border-radius: var(--radius-md);
}

/* split-feature — layout variant, implement per-project */
/* .services_core_variant_split_feature { } */

/* cards-feature — taller support cards to emphasize imagery */
.services_core_variant_cards_feature .sc_flip_card_support {
    aspect-ratio: 2 / 3;
}

/* inner-banner — compact padding and reduced chrome */
.services_core_variant_inner_banner {
    padding: var(--space-10) 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* ── Responsive — Tablet (≤900px) ────────────────────────── */

@media (max-width: 900px) {

    .sc_top {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .sc_intro {
        padding-top: 0;
    }

    .sc_body {
        max-width: none;
    }

    /* Featured cards take full width when stacked below intro */
    .sc_flip_card_featured {
        min-height: calc(200px * var(--sc-feat-scale, 1));
    }

    /* Tablets: up to 2 per row, placed and rounded by the template (sc_t_*). */
    .sc_support {
        grid-template-columns: repeat(var(--sc-t-tracks, 4), minmax(0, 1fr));
        row-gap: 0;
    }

    .sc_support.sc_t_strips {
        row-gap: var(--space-4);
    }

    /* Two classes: outranks the computer corner classes (sc_d_*). */
    .sc_support .sc_flip_card_support {
        grid-column: var(--sc-tc, auto) / span 2;
        grid-row: var(--sc-tr, auto);
        border-radius: 0;
    }

    .sc_flip_card_support.sc_t_tl { border-top-left-radius: var(--radius-xl); }
    .sc_flip_card_support.sc_t_tr { border-top-right-radius: var(--radius-xl); }
    .sc_flip_card_support.sc_t_bl { border-bottom-left-radius: var(--radius-xl); }
    .sc_flip_card_support.sc_t_br { border-bottom-right-radius: var(--radius-xl); }
}


/* ── Responsive — Mobile (≤768px) ────────────────────────── */
/*
   At this breakpoint: switch from absolute-overlay flip cards
   to static flow — front and back stack vertically so all
   content is visible without requiring hover.
*/

@media (max-width: 768px) {

    .services_core {
        padding: var(--space-16) 0;
        border-radius: var(--radius-lg);
    }
}

/* Static cards — phones, and (S1, §22 #11) any screen that can't reliably
   hover: touch tablets and touch-first laptops show both sides like phones,
   so details are readable and a card link opens with one tap. Screens with
   a mouse or trackpad keep the hover reveal. */
@media (max-width: 768px), (hover: none), (pointer: coarse) {

    /* Inner wrapper becomes flex column — content flows naturally */
    .sc_flip_card .sc_flip_card_inner {
        position: static;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /* Front: static, always visible, no bottom scrim needed */
    .sc_flip_card .sc_flip_card_front {
        position: static;
        opacity: 1;
        padding: var(--space-5) var(--space-5) 0;
        justify-content: flex-end;
    }

    .sc_flip_card .sc_flip_card_front::before {
        display: none;
    }

    /* Back: static, always visible, no dark overlay */
    .sc_flip_card .sc_flip_card_back {
        position: static;
        opacity: 1;
        background: none;
        padding: var(--space-3) var(--space-5) var(--space-5);
        align-items: flex-start;
        justify-content: flex-start;
    }

    .sc_flip_card .sc_card_text {
        text-align: left;
        max-width: none;
        color: var(--sc-ink-body-static, color-mix(in srgb, var(--color-text-inverse) 70%, transparent));
    }

    /* Featured cards: natural height from content */
    .sc_flip_card_featured {
        min-height: 0;
    }

    /* Support cards: natural height, no aspect ratio */
    .sc_flip_card_support {
        aspect-ratio: auto;
        min-height: 180px;
    }

    /* Suppress hover/focus flip on mobile — all content is already visible */
    .sc_flip_card:hover .sc_flip_card_front,
    .sc_flip_card:focus-within .sc_flip_card_front {
        opacity: 1;
    }

    .sc_flip_card:hover .sc_flip_card_back,
    .sc_flip_card:focus-within .sc_flip_card_back {
        opacity: 1;
    }
}


/* ── Responsive — Small Mobile (≤520px) ──────────────────── */

@media (max-width: 520px) {

    .services_core {
        padding: var(--space-12) 0;
        border-radius: var(--radius-md);
    }

    /* One card per row (as before), each card fully rounded. */
    .sc_support,
    .sc_support.sc_t_strips {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .sc_support .sc_flip_card_support {
        grid-column: auto;
        grid-row: auto;
        border-radius: var(--radius-xl);
    }
}