/* ==========================================================================
   Solutions "Learn More" pages (/solutions/{slug}) — shared by all 8 covers.
   Every class is page-agnostic and prefixed `sol-`. Markup lives in the
   Views/Solutions/_Sol*.cshtml partials; see Views/Solutions/README.md.
   Figma: content shell 1280, heading column 463, gap 32 (Exclusions: 79).
   ========================================================================== */

/* ---------- section rhythm (Figma sections only carry top padding) ---------- */
.sol-section { padding-top: 72px; }
.sol-section--pt80 { padding-top: 80px; }
.sol-section--pt98 { padding-top: 98px; } /* 72 + the 26px spacer some Related Covers frames have */

/* ---------- split layout: heading column (463) + content ---------- */
.sol-split { display: flex; align-items: flex-start; gap: 32px; }
.sol-split--wide { gap: 79px; }
.sol-split__heading { width: 463px; flex-shrink: 0; color: var(--text-primary); }
.sol-split__content { flex: 1 0 0; min-width: 1px; display: flex; flex-direction: column; gap: 12px; }

/* ---------- shared card anatomy: outer bezel tray + inner plate ---------- */
.sol-tray {
    display: flex; flex-direction: column;
    padding: 6px; border-radius: var(--radius-lg);
    background: var(--glass-fill); border: 1px solid var(--glass-hair);
}
.sol-plate {
    flex: 1 0 auto; display: flex; flex-direction: column;
    border-radius: var(--radius-md);
    background: var(--glass-fill-2); box-shadow: var(--bezel-inner);
}

/* ---------- hero (Figma "Hero": 1920 × 800, blurred photo, copy at x=240) ---------- */
.sol-hero {
    position: relative; overflow: hidden; isolation: isolate;
    height: 800px;
    padding: 120px 16px 116px max(40px, calc(50% - 720px));
}
/* Geometry = the Figma image box in raw frame px (frame is 1920 × 800): --img-l/--img-t = box x/y,
   --img-w/--img-h = box size. The box keeps its offset from the frame centre, so 1440 crops like Figma.
   Optional: --img-blur (CSS px), --img-flip:-1 for a mirrored Figma image. */
.sol-hero__bg {
    position: absolute; z-index: -1;
    left: calc(50% - 960px + var(--img-l, 0px)); top: var(--img-t, 0px);
    width: var(--img-w, 1920px); height: var(--img-h, 800px); max-width: none;
    object-fit: cover;
    filter: blur(var(--img-blur, 0px));
    transform: scaleX(var(--img-flip, 1));
    pointer-events: none; user-select: none;
}
@media (min-width: 1921px) {
    .sol-hero__bg { left: 0; top: 0; width: 100%; height: 100%; }
    /* No overlay in Figma (desktop); on narrow screens the copy sits over the photo, so add a legibility scrim. */
    .sol-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.25)); }
}
.sol-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 620px; max-width: 100%; }
.sol-hero__text { display: flex; flex-direction: column; gap: 16px; color: var(--text-primary); }
.sol-hero__title { font-weight: 700; font-size: 54px; line-height: 1.02; letter-spacing: -2.16px; }
.sol-hero__lede { font-weight: 400; font-size: 22px; line-height: 1.5; letter-spacing: -0.33px; }

/* ---------- In Plain Terms (lede + numbered "Rail Step" cards) ---------- */
.sol-plain { gap: 16px; }
.sol-plain--gap12 { gap: 12px; }
.sol-plain__lede { color: var(--text-primary); }
.sol-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sol-step { padding: 5px; border-radius: var(--radius-sm); }
.sol-step .sol-plate { gap: 8px; padding: 22px 20px 20px; border-radius: var(--radius-xs); }
.sol-step__head { display: flex; align-items: flex-start; gap: 8px; }
.sol-step__num { color: var(--accent-gold); margin-top: 1.65px; flex-shrink: 0; }
.sol-step__title { font-weight: 600; font-size: 16.5px; line-height: 1.22; letter-spacing: -0.429px; color: var(--text-primary); }
.sol-step__text { font-size: 14px; line-height: 1.55; color: var(--text-tertiary); }

/* ---------- DL rows (Key coverages, Core benefits, list-style Who needs it) ---------- */
.sol-dl { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.sol-dl .sol-plate { gap: 12px; padding: 22px 24px; }
.sol-dl__term {
    font-weight: 600; font-size: 16px; line-height: 1.3; letter-spacing: -0.416px;
    color: var(--text-primary); text-transform: capitalize; /* Figma text case: Title */
}
.sol-dl__def { margin: 0; font-size: 15.5px; line-height: 1.66; color: var(--text-secondary); }

/* ---------- Audience cards (Who needs it / Who can claim — 2-up grid) ---------- */
.sol-audience { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sol-audience__card { border-radius: var(--radius-sm); }
.sol-audience__card .sol-plate { gap: 6px; padding: 20px 20px 18px; border-radius: var(--radius-xs); }
.sol-audience__title { font-weight: 600; font-size: 15.5px; line-height: 1.3; letter-spacing: -0.372px; color: var(--text-primary); }
.sol-audience__text { font-size: 14px; line-height: 1.55; color: var(--text-tertiary); }
.sol-audience__card--full { grid-column: 1 / -1; }

/* ---------- Exclusions card ---------- */
.sol-excl { overflow: hidden; }
.sol-excl .sol-plate { gap: 14px; padding: 24px; }
.sol-excl__list { display: flex; flex-direction: column; gap: 14px; }
.sol-excl__item { display: flex; align-items: flex-start; gap: 13px; font-size: 15.5px; line-height: 1.62; color: var(--text-secondary); }
.sol-excl__ico {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 21px; height: 21px; border-radius: var(--radius-pill); overflow: hidden;
    background: rgba(245, 137, 107, 0.14);
}
.sol-excl__text { flex: 1 0 0; min-width: 1px; }
.sol-excl__lead { font-weight: 600; color: var(--text-primary); }
.sol-excl__note { color: var(--text-tertiary); }

/* ---------- Related covers ("Product Tile" cards; 2 or 3 per row) ---------- */
.sol-related__title { color: var(--text-primary); margin-bottom: 24px; }
.sol-related__row { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 14px; }
.sol-tile .sol-plate { gap: 12px; padding: 28px 26px 24px; }
.sol-tile__icon { width: 24px; height: 24px; }
.sol-tile__copy { display: flex; flex-direction: column; gap: 12px; }
.sol-tile__name { color: var(--text-primary); }
.sol-tile__desc { font-size: 14.5px; line-height: 1.58; color: var(--text-tertiary); }
.sol-tile__more {
    display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
    font-weight: 600; font-size: 13.5px; line-height: normal; color: var(--accent-gold); white-space: nowrap;
}
.sol-tile__more-ico {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--accent-gold-dim);
    transition: transform .15s ease;
}
.sol-tile { transition: border-color .15s ease; }
.sol-tile:hover { border-color: rgba(255, 172, 0, 0.35); }
.sol-tile:hover .sol-tile__more-ico { transform: translate(2px, -2px); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .sol-hero { height: auto; min-height: 560px; padding: 120px var(--gutter) 96px; }
    .sol-hero__bg { left: 0; top: 0; width: 100%; height: 100%; }
    .sol-hero__title { font-size: 46px; letter-spacing: -1.8px; }
    .sol-split, .sol-split--wide { flex-direction: column; gap: 24px; }
    .sol-split__heading { width: 100%; }
    .sol-split__content { width: 100%; }
    .sol-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    /* Portrait tablets: 2 per row; a third tile spans the row. */
    .sol-related__row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sol-related__row > .sol-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .sol-related__row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .sol-section, .sol-section--pt80, .sol-section--pt98 { padding-top: 56px; }
    .sol-hero { min-height: 480px; padding-top: 88px; padding-bottom: 72px; }
    .sol-hero__title { font-size: 36px; letter-spacing: -1.4px; }
    .sol-hero__lede { font-size: 18px; }
    .sol-audience { grid-template-columns: minmax(0, 1fr); }
    .sol-dl .sol-plate, .sol-excl .sol-plate { padding: 20px; }
}
@media (max-width: 480px) {
    .sol-rail { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Checklist (Employer responsibilities: gold check + bold title + text, no card) — _SolChecklist ---------- */
.sol-check { display: flex; flex-direction: column; gap: 12px; }
.sol-check__item { display: flex; align-items: flex-start; gap: 13px; }
.sol-check__ico {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 20px; height: 20px; margin-top: 4px; border-radius: var(--radius-pill);
    background: var(--accent-gold-dim);
}
.sol-check__text { flex: 1 0 0; min-width: 1px; font-size: 15.5px; line-height: 1.62; color: var(--text-primary); }
.sol-check__title { display: block; font-weight: 700; }

/* ---------- Exclusions modifier: Figma lead-ins in Bold 700 keeping the body colour (Jewellers' Block) ---------- */
.sol-excl--lead-bold .sol-excl__lead { font-weight: 700; color: inherit; }

/* ---------- Plain Terms modifier: Rail Step head is nowrap in Figma (Employees' Comp "No-fault benefit") ---------- */
@media (min-width: 1025px) { .sol-plain--nowrap .sol-step__title { white-space: nowrap; } }
/* SolClass lands on the <section>, so "sol-plain--gap12" must reach the inner .sol-plain content column. */
.sol-plain--gap12 .sol-plain { gap: 12px; }

/* ---------- DL modifier: terms keep their typed case (Jewellers' Block: "Stock and Inventory") ---------- */
.sol-dl--as-typed .sol-dl__term { text-transform: none; }

/* ---------- Key coverage tick list (D&O "Key coverage": _SolTicks; split gap 32, no card) ---------- */
.sol-ticks { display: flex; flex-direction: column; gap: 16px; }
.sol-ticks__item { display: flex; align-items: flex-start; gap: 13px; }
.sol-ticks__ico {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 20px; height: 20px; margin: 4px 0; padding: 4px;
    border-radius: var(--radius-pill); background: var(--accent-gold-dim);
}
.sol-ticks__ico img { width: 12px; height: 12px; }
.sol-ticks__text { flex: 1 0 0; min-width: 1px; font-size: 15.5px; line-height: 1.62; color: var(--text-primary); }

/* ---------- Who Can Claim Against You (D&O): _SolAudience with SolClass "sol-claim" —
   split gap 79, Title Case card titles, a trailing odd card spans both columns ---------- */
.sol-claim .sol-audience__title { text-transform: capitalize; }
.sol-claim .sol-audience__card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 1025px) { .sol-claim .sol-split { gap: 79px; } }

/* ---------- Exclusions modifier: split gap 32 instead of 79 (Cyber). SolClass "sol-section--split32" ---------- */
@media (min-width: 1025px) { .sol-section--split32 .sol-split--wide { gap: 32px; } }

/* ---------- Audience list modifier: one card per row (IP "Who needs it"). SolClass "sol-section--aud-list" ---------- */
.sol-section--aud-list .sol-audience { grid-template-columns: minmax(0, 1fr); }

/* ---------- Insurer appetite (IP "Insurers' Appetite By Industry": lede + pill tabs + chip cloud) — _SolAppetite ---------- */
.sol-app__lede { color: var(--text-tertiary); }
.sol-app__tabs {
    display: inline-flex; align-self: flex-start; flex-wrap: wrap; gap: 4px; padding: 5px; max-width: 100%;
    border-radius: var(--radius-pill); background: var(--glass-fill-3); border: 1px solid var(--glass-hair);
}
.sol-app__tab {
    padding: 9px 17px; border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer;
    font: 500 13.5px/normal var(--font-sans); color: var(--text-tertiary); white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
}
.sol-app__tab:hover { color: var(--text-secondary); }
.sol-app__tab.is-active { background: var(--accent-gold); color: var(--text-on-gold); font-weight: 600; }
.sol-app__tab:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
.sol-app__cloud { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; }
.sol-app__cloud[hidden] { display: none; }
.sol-app__chip {
    padding: 7px 15px; border-radius: var(--radius-pill);
    background: var(--glass-fill); border: 1px solid var(--glass-hair);
    font-weight: 500; font-size: 13.5px; line-height: normal; color: var(--text-secondary);
}
@media (max-width: 640px) { .sol-app__chip { white-space: normal; } }

/* ==========================================================================
   Tablet / phone refinements (≤1279). Desktop (≥1280) is the Figma layout and is untouched.
   ========================================================================== */
@media (max-width: 1279px) {
    /* Hero: shorter on landscape tablets, copy aligned with the content shell, soft legibility scrim on the copy side. */
    .sol-hero { height: 660px; padding-left: var(--gutter); padding-right: var(--gutter); }
    .sol-hero::after {
        content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
        background: linear-gradient(90deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.3) 45%, rgba(15, 23, 42, 0) 75%);
    }
    /* Avoid orphaned words / single CJK characters on narrow screens. */
    .sol-hero__title, .sol-hero__lede, .sol-split__heading, .sol-related__title, .sol-tile__name, .sol-step__title { text-wrap: balance; }
    .sol-plain__lede, .sol-app__lede, .sol-tile__desc, .sol-step__text { text-wrap: pretty; }
    /* Split: narrower heading column and gap so the content column keeps a comfortable width. */
    .sol-split__heading { width: clamp(240px, 30%, 463px); }
    /* One gap for every split (Figma's 32 vs 79 variants) so content columns line up from section to section. */
    .sol-split, .sol-split--wide, .sol-claim .sol-split, .sol-section--split32 .sol-split--wide { gap: 40px; }
    /* Rail steps: 4 across is too tight next to the heading column; 2 × 2 instead. */
    .sol-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Equal-height tiles keep "Learn More" on one baseline. */
    .sol-tile__more { margin-top: auto; }
    /* Insurer appetite: 44px tap targets on touch tablets. */
    .sol-app__tab { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; }
}
@media (max-width: 1024px) {
    /* Hero: photo fills the box (cover) — overscan it so the blur doesn't leave a pale halo at the edges. */
    .sol-hero { height: auto; }
    .sol-hero__bg { left: -16px; top: -16px; width: calc(100% + 32px); height: calc(100% + 32px); }
    .sol-hero::after {
        background:
            linear-gradient(90deg, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.35) 55%, rgba(15, 23, 42, 0.1) 100%),
            linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0) 50%, rgba(15, 23, 42, 0.35) 100%);
    }
    .sol-hero__copy { width: 600px; }
    .sol-split__heading { width: 100%; }
    .sol-split, .sol-split--wide, .sol-claim .sol-split, .sol-section--split32 .sol-split--wide { gap: 24px; }
    .sol-section, .sol-section--pt80, .sol-section--pt98 { padding-top: 64px; }
}
@media (max-width: 640px) {
    .sol-section, .sol-section--pt80, .sol-section--pt98 { padding-top: 56px; }
    /* Hero copy spans the full width on phones: scrim from the top, where the copy sits. */
    .sol-hero::after {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.5) 55%, rgba(15, 23, 42, 0.3) 100%);
    }
    .sol-hero__lede { font-size: 17px; }
    .sol-hero__copy { gap: 28px; }
    /* Small grey body copy ≥ 15px on phones. */
    .sol-step__text, .sol-audience__text, .sol-tile__desc, .sol-excl__note, .sol-app__lede { font-size: 15px; }
    .sol-dl__def, .sol-excl__item, .sol-check__text, .sol-ticks__text { font-size: 15.5px; }
    .sol-step .sol-plate { padding: 18px 18px 18px; }
    .sol-tile .sol-plate { padding: 24px 20px 22px; }
    .sol-related__title { margin-bottom: 20px; }
    /* Insurer appetite: one-row segmented control spanning the column; labels may wrap inside their pill. */
    .sol-app__tabs { display: flex; align-self: stretch; flex-wrap: nowrap; }
    .sol-app__tab { flex: 1 1 auto; padding: 4px 10px; white-space: normal; line-height: 1.2; text-align: center; font-size: 13px; }
}
@media (max-width: 480px) {
    .sol-rail { grid-template-columns: minmax(0, 1fr); }
}
/* Landscape tablets down to ~960 (iPad 1024): keep heading + content side by side — the content column stays ≥ 600px. */
@media (min-width: 961px) and (max-width: 1024px) {
    .sol-split, .sol-split--wide { flex-direction: row; }
    .sol-split, .sol-split--wide, .sol-claim .sol-split, .sol-section--split32 .sol-split--wide { gap: 40px; }
    .sol-split__heading { width: 30%; }
    .sol-split__content { width: auto; }
}