/* ============================================================
   Bank Statement Download — /bank-statement-90 (and -180, -365)

   Values are the Solaris Design System tokens, loaded from assets/ds/tokens/
   unedited. The literals are the handoff's own and each is commented where it
   appears.

   Everything is scoped under .sol-bank. The design system's element defaults
   (base.css) are NOT loaded, because they would restyle the site header; the
   few this page needs are reproduced here, scoped.

   THE TWO ORANGES: Flamingo (--color-accent-default) is the action colour —
   buttons and links. Princeton Orange (--color-accent-highlight) is
   illustration only — here, the doodles. Neither is ever section ground, and
   neither is navy.

   The responsive work is at the bottom. The steps are the ruled ones — 1024,
   968 (the hero stack width) and 720 — plus 1280 for the embed's doodles and
   768, where the connector itself goes single-column.
   ============================================================ */

/* ---- Page shell -------------------------------------------- */

.sol-bank {
  /* Square buttons, matching production and every other designed page. One
     line to pills: --button-radius: var(--radius-pill). */
  --button-radius: 0px;

  /* 1280px column with the 32px gutters inside the box. */
  --wrap: calc(var(--layout-max-width) + 2 * var(--layout-gutter));

  background: var(--color-surface-default);
  color: var(--color-text-secondary);
  font: var(--type-body-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* The doodles overhang their boxes; none may scroll the document sideways. */
  overflow-x: clip;
}

.sol-bank *,
.sol-bank *::before,
.sol-bank *::after { box-sizing: border-box; }

.sol-bank :where(h1, h2, h3, h4) { color: var(--color-text-primary); margin: 0; }
.sol-bank :where(p) { margin: 0; }
.sol-bank :where(ul) { margin: 0; padding: 0; list-style: none; }
.sol-bank :where(img) { max-width: 100%; display: block; }
.sol-bank :where(a) { color: var(--color-text-link); text-decoration: none; }
.sol-bank :where(a:hover) { color: var(--color-accent-hover); }
.sol-bank :where(a, button):focus-visible { outline: 0; box-shadow: var(--elevation-focus); }

/* ---- Button ------------------------------------------------
   The design system's Button, identical to the other pages' copies. */

.sol-bank .sds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-200);
  min-height: var(--target-min);
  border: 0;
  padding: var(--space-500) var(--space-700);
  border-radius: var(--button-radius, 0px);
  font: var(--type-control-base);
  letter-spacing: var(--type-control-base-tracking);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* Colour only — no lift, no shadow on hover. */
  transition: background-color var(--motion-duration-fast) var(--motion-ease),
              color var(--motion-duration-fast) var(--motion-ease),
              border-color var(--motion-duration-fast) var(--motion-ease);
}

.sol-bank .sds-btn--solid { background: var(--color-accent-default); color: var(--color-text-inverse); }
.sol-bank .sds-btn--solid:hover { background: var(--color-accent-hover); color: var(--color-text-inverse); }

/* The outline pays for its 2px border out of its padding so both variants are
   the same height. The label is Amber Ink (CA-4.2). */
.sol-bank .sds-btn--outline {
  background: transparent;
  color: var(--color-text-accent-ink);
  border: 2px solid var(--color-accent-default);
  padding: calc(var(--space-500) - 2px) calc(var(--space-700) - 2px);
}
.sol-bank .sds-btn--outline:hover { border-color: var(--color-accent-hover); color: var(--color-accent-hover); }

/* ---- Layout primitives ------------------------------------- */

.sol-bank__wrap {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--layout-gutter);
}

/* The section half steps to 64 at 720 in the token itself (CA-1.9). */
.sol-bank__section { padding-block: var(--layout-section-half); }

/* heading/2 with its POSITIVE tracking (+.02em) — a brand tell, not a typo.
   Fluid 28 -> 40 below 1024 at the token's own line-height (CA-2.7). */
.sol-bank__heading {
  font: var(--type-heading-2);
  font-size: var(--type-heading-2-fluid-size);
  letter-spacing: var(--type-heading-2-tracking);
  color: var(--color-text-primary);
  text-align: center;
  text-wrap: balance;
  max-width: 22ch;
  margin-inline: auto;
}

/* The walls and the knowledge base are collections: heading/1, fluid
   28 -> 48 below 1024 (CA-2.2, CA-2.7). */
.sol-bank__heading--collection {
  font: var(--type-heading-1);
  font-size: var(--type-heading-1-fluid-size);
  letter-spacing: var(--type-heading-1-tracking);
}

.sol-bank__lede {
  font: var(--type-body-lg);
  color: var(--color-text-secondary);
  max-width: 54ch;
  text-wrap: pretty;
}

/* Every doodle is decoration: absolutely placed, click-through, and hidden
   until the tier that has room for it (see "Responsive"). Widths are the
   site's size table's --doodle-*-box (inc/solaris-doodles.php): the whole
   file box, shadow included, that holds the drawing at its one size. Where
   a file has shadow on the side a doodle is anchored from, the offset is the
   spot the handoff's box put the drawing, less that padding at the site's
   size, so the drawing stays where it was drawn. */
.sol-bank__doodle {
  position: absolute;
  display: none;
  height: auto;
  pointer-events: none;
}

/* ============================================================
   1. Hero
   ============================================================ */

/* The hero is white at every width (CA-5.3). It pads 112 below the strip,
   64 at 720 by the token (CA-1.2). */
.sol-bank__hero {
  background: var(--color-surface-default);
  padding-bottom: var(--layout-section-half);
}

.sol-bank__hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  /* Equal halves, 64 between (CA-7.6); top-aligned, so the headline comes
     straight after the 64 top pad (CA-7.7). */
  gap: var(--space-700) var(--space-800);
  align-items: start;
  padding: var(--layout-hero-top) 0 var(--space-700);
}

.sol-bank__display {
  font: var(--type-display-xl);
  letter-spacing: var(--type-display-xl-tracking);
  color: var(--color-text-primary);
  text-wrap: balance;
  padding-right: var(--space-500);
}

/* The media cell is the whole right column, so the offset panel can be
   placed from it; the figure inside keeps the 560 measure, right-aligned. */
.sol-bank__hero-media {
  position: relative;
  padding: var(--space-600) 0 var(--space-700);
}

/* THE OFFSET PANEL: the right half exactly, from the column's centre (half
   the 64 gap left of this cell) to the inner edge of the gutter, bleeding up
   to the header, with the kit's 0 0 22 22 corners. Its bottom edge is TIED
   TO THE PHOTO: it ends on the capsule's centre line, hidden behind it
   (CA-7.4). 100% is this cell's padding box, so the line is the bottom pad
   plus half of what is left once both pads are taken out. */
.sol-bank__hero-panel {
  position: absolute;
  top: calc(-1 * var(--layout-hero-top));
  bottom: calc(var(--space-700) + (100% - var(--space-600) - var(--space-700)) / 2);
  left: calc(var(--space-800) / -2);
  right: 0;
  background: var(--color-surface-offset);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.sol-bank__hero-figure {
  position: relative;
  max-width: 560px;
  margin-left: auto;
}

.sol-bank__hero-photo {
  position: relative;
  width: 100%;
  height: auto;
  /* Wide capsule, CA-11.15. */
  aspect-ratio: 1.72;
  object-fit: cover;
  border-radius: var(--radius-pill);
  box-shadow: var(--elevation-capsule);
}

.sol-bank__doodle--climb     { left: -56px; top: -24px; width: var(--doodle-climb-box); }
.sol-bank__doodle--dots      { left: 36px; bottom: -8px; width: var(--doodle-dot-grid-box); opacity: .9; }
/* Ink's lower-right corner 37.3px in and 25.3px up. */
.sol-bank__doodle--pill-down {
  right: calc(37.3px - var(--doodle-pill-down-pad-r));
  bottom: calc(25.3px - var(--doodle-pill-down-pad-b));
  width: var(--doodle-pill-down-box);
}

/* A grey strip of its own, rounded on all four corners: the offset panel
   now ends behind the photo, so the strip no longer tucks under it. Sunken,
   because it is not the offset device (CA-5.2). */
.sol-bank__strip {
  position: relative;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-lg);
  padding: var(--space-600) var(--space-700);
}

.sol-bank__strip p {
  font: var(--type-body-lg);
  color: var(--color-text-secondary);
}

/* ============================================================
   2. Connect
   ============================================================ */

.sol-bank__connect-heading { max-width: 24ch; }

/* The frame the page owns. "Bare" in the handoff's terms: no border, no
   shadow — the connector's own white runs into the page's. 22 at every
   width (CA-6.2). */
.sol-bank__frame {
  position: relative;
  max-width: 760px;
  margin: var(--space-700) auto 0;
  background: var(--color-surface-default);
  border-radius: var(--radius-lg);
}

.sol-bank__iframe {
  display: block;
  width: 100%;
  /* The fallback height. js/bank-statement-embed.js replaces it with the
     height the connector reports; see solaris_bank_embed(). */
  height: var(--sol-frame-h, 1000px);
  border: 0;
  border-radius: inherit;
  background: var(--color-surface-default);
}

.sol-bank__frame-empty {
  padding: var(--space-800) var(--space-500);
  border: 1px dashed var(--color-border-strong);
  border-radius: inherit;
  text-align: center;
  font: var(--type-body-base);
}

.sol-bank__doodle--grid       { left: -200px; top: 80px; width: var(--doodle-table-box); }
/* Ink right edges 157.5px and 116.2px past the frame's. */
.sol-bank__doodle--pill-check {
  right: calc(-157.5px - var(--doodle-pill-tick-pad-r));
  top: 0;
  width: var(--doodle-pill-tick-box);
}
.sol-bank__doodle--percent {
  right: calc(-116.2px - var(--doodle-percent-navy-pad-r));
  top: 220px;
  width: var(--doodle-percent-navy-box);
}

/* ============================================================
   3–6. Collections: heading on white, then a grey band
   ============================================================ */

/* 112 below the band as well as above the heading (CA-1.5). */
.sol-bank__collection { padding-block: var(--layout-section-half); }

/* Heading on white, then the 16 lead, then the band (CA-1.4). */
.sol-bank__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-500);
  padding-bottom: var(--layout-band-lead);
}

.sol-bank__band {
  background: var(--color-surface-sunken);
  padding-block: var(--layout-band-inset);
}

/* ---- Knowledge Base ---------------------------------------- */

/* The cap's ink starts 61.3px in and 82.4px down, the book's ends 64.4px in
   from its side offset. */
.sol-bank__doodle--cap {
  left: calc(var(--space-800) + 61.3px - var(--doodle-cap-pad-l));
  top: calc(82.4px - var(--doodle-cap-pad-t));
  width: var(--doodle-cap-box);
}
.sol-bank__doodle--book {
  right: calc(var(--space-700) + 64.4px - var(--doodle-book-pad-r));
  top: 70px;
  width: var(--doodle-book-box);
}

.sol-bank__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--space-500);
}

/* Card 1 is text then icon; card 2 (--reverse) is icon then text. The DOM is
   text-first in both, so the reverse card flips the icon with `order`. */
.sol-bank__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-500);
  padding: var(--space-600) var(--space-700);
  background: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-100);
  color: inherit;
  text-decoration: none;
  transition: transform var(--motion-duration-base) var(--motion-ease),
              box-shadow var(--motion-duration-base) var(--motion-ease);
}

.sol-bank__card:hover {
  color: inherit;
  transform: translateY(var(--motion-lift-card));
  box-shadow: var(--elevation-200);
}

.sol-bank__card--reverse { grid-template-columns: auto minmax(0, 1fr); }
.sol-bank__card--reverse .sol-bank__card-icon { order: -1; }

.sol-bank__card-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-200);
  text-align: center;
}

/* heading/3, fluid 22 -> 28 below 1024 (CA-2.8). */
.sol-bank__card-title {
  font: var(--type-heading-3);
  font-size: var(--type-heading-3-fluid-size);
  letter-spacing: var(--type-heading-3-tracking);
  color: var(--color-text-primary);
}

.sol-bank__card-body {
  font: var(--type-body-sm);
  color: var(--color-text-secondary);
}

/* The Finance pair at the site's house and panel sizes, which drop to 72
   below 968 (inc/solaris-doodles.php). */
.sol-bank__card-icon { width: var(--doodle-house-box); height: auto; justify-self: end; }
.sol-bank__card-icon[src*="wiki-panel"] { width: var(--doodle-panel-box); }
.sol-bank__card--reverse .sol-bank__card-icon { justify-self: center; }

/* ---- Logo walls -------------------------------------------- */

.sol-bank__wall-copy {
  font: var(--type-body-base);
  color: var(--color-text-secondary);
  max-width: var(--sol-measure, 54ch);
  text-wrap: pretty;
}

.sol-bank__wall-copy strong { font-weight: 700; color: var(--color-text-primary); }

/* The gap on the border-coloured parent IS the hairlines. No cell borders. */
.sol-bank__logos {
  display: grid;
  grid-template-columns: repeat(var(--sol-logo-cols, 3), minmax(0, 1fr));
  gap: 1px;
  background: var(--color-border-default);
  border: 1px solid var(--color-border-default);
}

/* 120 fixed, 96 on phones; partner cells pad 64 at the sides, the
   accreditations 32 (CA-11.2, CA-11.3). */
.sol-bank__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 120px;
  padding: var(--space-400) var(--space-600);
  background: var(--color-surface-raised);
}

.sol-bank__logos--3 .sol-bank__logo { padding-inline: var(--space-800); }

/* 44px, not the handoff's 64px. The handoff's logo files sit on a 425x120
   artboard; the theme's are cropped to the mark (template-parts/home/
   logo-wall.php), so the ceiling is the height of the mark itself and 44px is
   the value the home page ships for these same files. Third-party marks are
   never recoloured. */
.sol-bank__logo img {
  width: 100%;
  height: 100%;
  max-height: 44px;
  object-fit: contain;
}

/* ============================================================
   4 & 7. Refrain
   ============================================================ */

/* 24 / 24 inside, both variants (CA-1.8). */
.sol-bank__refrain-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-500);
}

.sol-bank__refrain-heading { max-width: 22ch; }

.sol-bank__refrain-body {
  font: var(--type-body-lg);
  color: var(--color-text-secondary);
  max-width: 54ch;
  text-wrap: pretty;
}

.sol-bank__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-400);
}

.sol-bank__refrain-inner--panel {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-offset);
  border-radius: var(--radius-lg);
  padding: var(--space-800) var(--space-700);
}

/* THE DOT FIELD, the doodle set's own artwork (CA-12.5). A 200px window onto
   the field's top-right corner at its drawn size, so the dots keep the set's
   13px pitch. It bleeds off the panel's top-right corner; the panel's
   overflow crops it, and the crop follows the panel's radius. */
.sol-bank__panel-dots {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 200px;
  height: 200px;
  max-width: none;
  object-fit: none;
  object-position: right top;
  pointer-events: none;
}

/* Above the dot field, not under it. */
.sol-bank__refrain-inner--panel > :not(.sol-bank__panel-dots) { position: relative; }

/* ============================================================
   Responsive

   Mobile-first for the doodles (they only appear with room); max-width for
   the rest. Section, band and hero pads step at 720 in the tokens
   themselves (CA-1.9), and the headings are fluid by token (CA-2.7), so
   neither needs a rule here.
   ============================================================ */

/* ---- 968 up: the hero and knowledge-base doodles ------------
   The site's stack width. Below it they would sit on the stacked copy. */
@media (min-width: 968px) {
  .sol-bank__doodle--climb,
  .sol-bank__doodle--dots,
  .sol-bank__doodle--pill-down,
  .sol-bank__doodle--cap,
  .sol-bank__doodle--book { display: block; }
}

/* ---- 1280 up: the embed's doodles ---------------------------
   760px of frame plus 236px of overhang each side = 1232px. Narrower and they
   collide with the column edge. */
@media (min-width: 1280px) {
  .sol-bank__doodle--grid,
  .sol-bank__doodle--pill-check,
  .sol-bank__doodle--percent { display: block; }
}

/* ---- ≤968: the hero stacks ---------------------------------
   The offset panel becomes a grey box around the hero copy (CA-5.3). */
@media (max-width: 967.98px) {
  .sol-bank__hero-panel { display: none; }

  .sol-bank__hero-copy {
    padding: var(--space-600);
    border-radius: var(--radius-lg);
    background: var(--color-surface-offset);
  }

  .sol-bank__display { padding-right: 0; }
}

/* ---- Below 768: the connector runs single-column ------------
   Its taller fallback height, and the lead steps the handoff gives (not
   ruled; left as shipped). */
@media (max-width: 767.98px) {
  .sol-bank__lede,
  .sol-bank__strip p,
  .sol-bank__refrain-body { font: var(--type-body-base); }

  .sol-bank__iframe { height: var(--sol-frame-h-mobile, 1200px); }
}

/* ---- ≤720: phone ------------------------------------------- */
@media (max-width: 720px) {
  .sol-bank__hero-grid { padding-bottom: var(--space-500); }

  .sol-bank__hero-copy { padding: var(--space-500); }

  .sol-bank__strip { padding: var(--space-500) var(--space-600); }

  /* Cards: one column, icon above centred text on both, 32 / 24 (CA-6.12). */
  .sol-bank__card,
  .sol-bank__card--reverse {
    grid-template-columns: 1fr;
    padding: var(--space-600) var(--space-500);
  }

  .sol-bank__card-icon,
  .sol-bank__card--reverse .sol-bank__card-icon {
    order: -1;
    justify-self: center;
  }

  /* Refrains: buttons stacked full-width, 16 apart, keeping their 48 sides
     (CA-4.10). */
  .sol-bank__ctas {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
  }

  .sol-bank__ctas .sds-btn { width: 100%; }

  /* Closing panel 48 / 24 (CA-6.12). */
  .sol-bank__refrain-inner--panel { padding: var(--space-700) var(--space-500); }

  /* LogoGrid to two columns, 96 cells (CA-11.3). */
  .sol-bank__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-bank__logo,
  .sol-bank__logos--3 .sol-bank__logo { height: 96px; padding: var(--space-400); }
}

/* ============================================================
   Motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .sol-bank *,
  .sol-bank *::before,
  .sol-bank *::after {
    transition: none !important;
    animation: none !important;
  }

  .sol-bank__card:hover { transform: none; }
}