/* ============================================================
   Solaris Finance — Residential, /finance/residential/

   LOADS AFTER styles/home.css, and only makes sense on top of it. The page
   scope is `.sol-home.sol-residential`: home.css supplies the resets, the
   Button, the wrap, the band, the dot texture, and the four parts this page
   renders from template-parts/home/ (endorsement, both logo walls, closing
   panel). The footer is the site's (styles/footer.css). This sheet holds what is new — the hero, the editorial
   rows, the plain refrain, the knowledge base — plus the handful of places
   a borrowed part sits differently here, each marked where it happens.

   Values are the design-system tokens, unedited. The same two-orange rule the
   home sheet states applies: Flamingo (--color-accent-default) is ACTION,
   Princeton Orange (--color-accent-highlight) is ILLUSTRATION and never type.

   Section order follows the page. The responsive work is at the bottom, with
   the reason for each decision beside it.
   ============================================================ */

/* ---- Shared ------------------------------------------------ */

/* Every editorial row and plain refrain: 112px top and bottom, so the seams
   between them are the design's 224px ink to ink. */
.sol-residential__section {
  background: var(--color-surface-default);
  padding: var(--layout-section-half) 0;
}

/* Loose line art, at the site's one size per doodle: each width is the
   table's --doodle-*-box, the file box (shadow included) that holds the
   drawing at its size (inc/solaris-doodles.php). Below 968 they take the
   site's scale(.8) (--doodle-scale): about their centre where the table
   kept a doodle's size, from the drawing's corner where it changed it,
   re-anchored under "Responsive" to where the old scale put it. */
.sol-residential__doodle {
  position: absolute;
  display: block;
  pointer-events: none;
  height: auto;
  transform: var(--doodle-scale);
}

/* The endorsement keeps home's 112 top and bottom: the hero pads 112 below
   itself, so the seam is the site's 224 (CA-1.10). */

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

.sol-residential__hero {
  position: relative;
  background: var(--color-surface-default);
  /* 64 under the header, 112 below (CA-1.2, CA-1.3). Both tokens take their
     own step at 720, so there is no phone override. */
  padding: var(--layout-hero-top) 0 var(--layout-section-half);
  /* Clips the offset panel's top. The panel having no visible top edge is
     the device, not an accident of this rule. */
  overflow: hidden;
}

/* THE OFFSET PANEL — layout C, the headline panel, as About ships it
   (CA-7.2): its right edge on the CONTENT COLUMN's right edge, 68% of the
   column wide, so it sits behind the headline and runs in under the
   photograph's right side. The photograph stays left (CA-7.3).

   About's panel is a fixed 440 tall behind a headline alone. This hero also
   carries a lede and the CTA pair, and a fixed height cut through the lede
   at some width or other, so the panel is placed from the copy block
   instead: its top at the section's top edge (the hero's 64 above the copy),
   so no top edge shows, and its bottom 64 below the buttons.

     right:  0 — the copy cell's right edge is the column's;
     width:  68% of the column, which is two cells and the 64 gap between
             them. A percentage here is of the copy cell. */
.sol-residential__offset {
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--layout-hero-top));
  right: 0;
  bottom: calc(-1 * var(--space-800));
  width: calc((200% + var(--space-800)) * .68);
  background: var(--color-surface-offset);
  pointer-events: none;
}

/* Two equal cells, 64 apart (CA-7.6), from 968px; one below it, where the
   offset panel is dropped in the same moment (CA-5.3). */
.sol-residential__hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-800);
  align-items: start;
}

/* THE PHOTO COMPOSITION.
   ----------------------
   The design places one oval and three doodles in a 616x560 cell with pixel
   coordinates. They are PERCENTAGES of a frame with that aspect ratio here,
   so the composition scales as one object instead of bursting its cell below
   the design width. The design's numbers are written beside each value.
   Same device as the home hero. DO NOT CONVERT THESE BACK TO PIXELS. */
.sol-residential__stack {
  position: relative;
  width: min(100%, 616px);
  aspect-ratio: 616 / 560;
}

.sol-residential__oval {
  position: absolute;
  display: block;
  left: 7.1429%;    /*  44 / 616 */
  top: 22.6786%;    /* 127 / 560 */
  width: 89.4481%;  /* 551 / 616 */
  aspect-ratio: 551 / 246;
  border-radius: var(--radius-pill);
  overflow: hidden;
  /* Shows while the photograph loads. Sunken: offset grey is the offset
     panel's alone (CA-5.2). */
  background: var(--color-surface-sunken);
  /* The kit's one capsule shadow, at every size (CA-6.9). It falls straight
     down; the left-casting variant the light-in-the-middle rule wants for a
     left-hand photograph is not in the kit yet (CA-6.10). */
  box-shadow: var(--elevation-capsule);
  z-index: 1;
}

.sol-residential__oval img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sol-residential__doodle--dots {
  left: 30.8442%;   /* 190 / 616 */
  top: 0;
  width: var(--doodle-dot-grid-box);
  aspect-ratio: 1;
}

/* The page's navy line art, in the illustration navy (CA-5.7). Over the
   oval's bottom edge, as drawn. */
.sol-residential__doodle--climb {
  left: 15.2597%;   /*  94 / 616 */
  top: 63.3929%;    /* 355 / 560 */
  width: var(--doodle-climb-box);
  aspect-ratio: 213 / 179;
  color: var(--color-illustration-navy);
  transform-origin: left top;
  z-index: 2;
}

.sol-residential__doodle--grid {
  left: 57.1429%;   /* 352 / 616 */
  top: 74.4643%;    /* 417 / 560 */
  width: var(--doodle-table-box);
  aspect-ratio: 111 / 124;
  color: var(--color-accent-highlight);
  z-index: 2;
}

/* No top pad: the headline starts at the hero's 64 (CA-7.7). Its own
   stacking context, so the offset panel inside it paints behind the words
   and still under the oval (z-index 1) where it runs across. */
.sol-residential__hero-copy {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 0 0 var(--space-600);
}

.sol-residential__display {
  font: var(--type-display-xl);
  letter-spacing: var(--type-display-xl-tracking);
  /* 11ch is what breaks it "Give Your / Customers / The Best ROI". */
  max-width: 11ch;
  text-wrap: balance;
}

.sol-residential__hero-lead {
  font: var(--type-body-lg);
  color: var(--color-text-secondary);
  max-width: 38ch;
  margin-top: var(--space-500);
  text-wrap: pretty;
}

.sol-residential__hero-copy .sol-home__ctas { margin-top: var(--space-700); }

/* ============================================================
   2. Editorial rows
   ============================================================ */

/* Two cells from 1008px — where the design's auto-fit (440px minimum, 64px
   gap) stops fitting two — and one below. Explicit for the same reason as
   the hero: the offset panels and the visual reorder both have to switch off
   at exactly the width the row stacks. */
.sol-residential__row-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-800);
  align-items: center;
}

.sol-residential__media {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

/* Copy is first in the DOM on every row; a left-media row is flipped here
   and nowhere else. See template-parts/residential/editorial.php. */
.sol-residential__row--media-left .sol-residential__media {
  order: -1;
  justify-content: flex-start;
}

.sol-residential__mockup {
  width: 100%;
  max-width: var(--sol-art-max, 640px);
  height: auto;
}

.sol-residential__mockup--pull { margin-left: -60px; }

/* Positioned so it paints above its own panel. */
.sol-residential__heading-block,
.sol-residential__body-block { position: relative; }

/* The font is the element default (heading/2, +.02em, fluid below 1024), set
   in home.css. The measure is per row and is what forces the design's line
   breaks. */
.sol-residential__heading {
  position: relative;
  max-width: var(--sol-measure, 12ch);
  hyphens: manual;
}

.sol-residential__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-400);
  margin-top: var(--space-700);
  max-width: var(--sol-measure, 36ch);
  font: var(--type-body-lg);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

/* Emphasis is weight, not colour: the design keeps it at body grey. */
.sol-residential__body strong { font-weight: var(--type-weight-bold); color: inherit; }

/* Cheap Pricing's copy is stepped in 32px from the column edge. */
.sol-residential__row--inset .sol-residential__copy { padding-left: var(--space-600); }

/* THE OFFSET PANELS. Grey, rounded on the side facing the column centre and
   square on the side that runs out toward the page edge. Two rows carry one,
   on opposite sides of the page. */
.sol-residential__panel {
  position: absolute;
  display: block;
  background: var(--color-surface-offset);
  pointer-events: none;
}

/* Behind the body: Easy Online Applications. Runs right to the gutter edge;
   the paragraph sits on it with the panel's padding. */
.sol-residential__row--panel-body .sol-residential__body-block { margin-top: var(--space-600); }

.sol-residential__panel--body {
  top: 0;
  left: calc(-1 * var(--layout-offset-step));
  right: calc(-1 * var(--layout-gutter));
  bottom: calc(-1 * var(--space-800));
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.sol-residential__row--panel-body .sol-residential__body {
  margin-top: 0;
  padding: var(--space-800) 0 var(--space-500);
}

/* Behind the heading: Online And Electronic. Runs left to the gutter edge,
   and the heading is stepped in 32px on it. */
.sol-residential__panel--heading {
  top: calc(-1 * var(--space-800));
  left: calc(-1 * var(--layout-gutter));
  right: -80px;
  bottom: calc(-1 * var(--space-700));
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.sol-residential__row--panel-heading .sol-residential__heading { padding-left: var(--space-600); }

/* The dot grid beside that row's paragraph, hung 60px into the gutter. */
.sol-residential__row--panel-heading .sol-residential__body-block {
  display: flex;
  gap: var(--space-600);
  align-items: flex-start;
  margin-top: var(--space-900);
}

.sol-residential__row--panel-heading .sol-residential__body { margin-top: 0; }

.sol-residential__body-dots {
  flex: none;
  width: var(--doodle-dot-grid-box);
  height: var(--doodle-dot-grid-box);
  margin-left: -60px;
}

/* ---- The portrait row: Speak To Solaris --------------------- */

.sol-residential__portrait-frame {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 40px 0 60px;
}

/* The kit's TALL capsule, 0.72 (CA-11.15), with its one shadow (CA-6.9). */
.sol-residential__portrait {
  position: relative;
  width: min(100%, 580px);
  height: auto;
  aspect-ratio: .72;
  object-fit: cover;
  border-radius: var(--radius-pill);
  box-shadow: var(--elevation-capsule);
  background: var(--color-surface-sunken);
}

/* Behind the oval, off its left side, as drawn. */
.sol-residential__doodle--climb-orange {
  left: 0;
  top: 40px;
  width: var(--doodle-climb-box);
  aspect-ratio: 213 / 179;
  color: var(--color-accent-highlight);
}

.sol-residential__doodle--portrait-dots {
  left: 0;
  top: 330px;
  width: var(--doodle-dot-grid-box);
  aspect-ratio: 1;
}

/* THE PERCENT SIGN IS BEHIND THE OVAL, as the prototype paints it. Its
   coordinates put the ink inside the oval's lower-left curve, so at these
   numbers the photograph covers it and only its shadow shows below the
   edge. Lifting it in front was tried and it lands on the laptop in the
   photograph, which reads as a mistake. Left as drawn and flagged to Design.
   Placed off the OVAL's width, not the cell's, so it holds its spot as the
   oval shrinks: the ink's lower-right corner sits 324 in from the oval's
   right edge and 120 up from its foot, on a 580 oval (the design's box at
   right 220, width 155, plus the shadow right of and below the ink). The
   rise is a margin because a margin's percentage is of the WIDTH, where
   bottom's would be of the height. */
.sol-residential__doodle--percent {
  right: calc(min(100%, 580px) * .5586 - var(--doodle-percent-navy-pad-r));
  bottom: calc(-1 * var(--doodle-percent-navy-pad-b));
  margin-bottom: calc(min(100%, 580px) * .2069);
  width: var(--doodle-percent-navy-box);
  aspect-ratio: 155 / 191;
  color: var(--color-illustration-navy);
  transform-origin: calc(100% - var(--doodle-percent-navy-pad-r)) calc(100% - var(--doodle-percent-navy-pad-b));
}

/* ============================================================
   3. The plain refrain
   ============================================================ */

/* 24 between heading, body and buttons, with no extra margin on the
   buttons (CA-1.8). */
.sol-residential__refrain-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-500);
}

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

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

/* ============================================================
   4. Knowledge base
   ============================================================ */

.sol-residential__kb {
  background: var(--color-surface-default);
  /* 112 below the band too (CA-1.5). */
  padding: var(--layout-section-half) 0;
}

/* The band lead is padding on the heading's own wrap, the home sheet's rule:
   a margin on the band is one collapse away from a gap between two grounds. */
.sol-residential__kb-head { padding-bottom: var(--layout-band-lead); }

.sol-residential__kb-intro {
  position: relative;
  text-align: center;
}

/* A collection heading: heading/1, fluid 28 -> 48 below 1024 (CA-2.2,
   CA-2.7). */
.sol-residential__kb-heading {
  position: relative;
  font: var(--type-heading-1);
  font-size: var(--type-heading-1-fluid-size);
  letter-spacing: var(--type-heading-1-tracking);
  max-width: 24ch;
  margin: 0 auto;
  text-wrap: balance;
}

.sol-residential__kb-body {
  position: relative;
  font: var(--type-body-lg);
  color: var(--color-text-secondary);
  max-width: 62ch;
  margin: var(--space-600) auto 0;
}

/* The cap and the book stand on the band's top edge: their boxes end one
   band lead below the intro. They hung 40 and 30 below it when the lead was
   72; at 16 (CA-1.4) that put them in the band.

   Placed by their ink: the cap's drawing starts 85px in and ends 105px above
   the box's foot, the book's ends 88px in from the right and 104px above,
   as they did at the files' own size. The elements are pulled back by the
   shadow at the site's size so the drawings stay there. */
.sol-residential__doodle--cap {
  left: calc(85px - var(--doodle-cap-pad-l));
  bottom: calc(105px - var(--layout-band-lead) - var(--doodle-cap-pad-b));
  width: var(--doodle-cap-box);
  aspect-ratio: 208 / 207;
  color: var(--color-illustration-navy);
}

.sol-residential__doodle--book {
  right: calc(88px - var(--doodle-book-pad-r));
  bottom: calc(104px - var(--layout-band-lead) - var(--doodle-book-pad-b));
  width: var(--doodle-book-box);
  aspect-ratio: 205 / 181;
  color: var(--color-accent-highlight);
}

/* The wiki pair: 24 apart at every width (CA-6.13). */
.sol-residential__kb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: var(--space-500);
}

/* The whole card is the link. The lift is the kit's --motion-lift-card
   (-3px) at the BASE duration (.18s), the token for transform and shadow
   (CA-6.4). */
.sol-residential__wiki {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-600);
  padding: var(--space-600);
  background: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-100);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: transform var(--motion-duration-base) var(--motion-ease),
              box-shadow var(--motion-duration-base) var(--motion-ease);
}

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

.sol-residential__wiki--mirror { grid-template-columns: auto minmax(0, 1fr); }
.sol-residential__wiki--mirror .sol-residential__wiki-art { order: -1; }

.sol-residential__wiki-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-100);
}

/* heading/3, fluid 22 -> 28 below 1024, on the token's own line-height
   (CA-2.4, CA-2.7). */
.sol-residential__wiki-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-residential__wiki-body {
  font: var(--type-body-base);
  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-residential__wiki-art { width: var(--doodle-house-box); height: auto; }
.sol-residential__wiki-art[src*="wiki-panel"] { width: var(--doodle-panel-box); }

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

   The handoff states three rules below desktop — the stack width drops the
   grey panels and the loose doodles, 720px is the phone step, 360px is the
   floor — and lets auto-fit decide where the grids stack. What is added
   here, and why, is beside each rule. The borrowed parts (endorsement, logo walls,
   closing panel) respond through home.css exactly as they do on the home
   page.
   ============================================================ */

/* ---- 1008px: the editorial rows stack ----------------------
   Where the design's auto-fit stops fitting two cells. Three things go with
   it, all of which only make sense side by side:
     - the visual flip, so every row reads heading, copy, picture;
     - the offset panels, which are built to bleed out of a half-column and
       in a full one would run off the page on one side;
     - the steps and pulls that line copy up against a panel or a gutter.
   The art centres, because a mockup held to one edge of a full-width row
   reads as misaligned rather than as alternation. */
@media (max-width: 1007.98px) {
  .sol-residential__row-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-700); }

  .sol-residential__row--media-left .sol-residential__media { order: 0; }
  .sol-residential__media,
  .sol-residential__row--media-left .sol-residential__media,
  .sol-residential__portrait-frame { justify-content: center; }

  .sol-residential__panel { display: none; }

  .sol-residential__row--inset .sol-residential__copy,
  .sol-residential__row--panel-heading .sol-residential__heading { padding-left: 0; }

  .sol-residential__row--panel-body .sol-residential__body-block,
  .sol-residential__row--panel-heading .sol-residential__body-block { margin-top: var(--space-700); }
  .sol-residential__row--panel-body .sol-residential__body { padding: 0; }

  .sol-residential__mockup--pull { margin-left: 0; }
}

/* ---- 968px: the hero stacks and loses its panel ------------
   The site's one hero stack width (CA-5.3). The panel goes with it — at a
   single column it would sit behind the photograph rather than the
   headline — and becomes a grey box around the hero copy, Public
   Liability's treatment, with the card radius on all four corners; the
   hero's own ground stays white.

   The loose line art goes at the same width (CA-11.9): the dot grids,
   the orange climb beside the portrait, and the cap and the book, which
   would otherwise sit on the knowledge-base heading (at the site's sizes
   they clear it down to here). The percent sign and the hero's climb and grid are on
   the artwork, not beside it, so they stay and take the site's one .8
   (--doodle-scale, on .sol-residential__doodle).

   With the hero's dot grid gone, the top 127/560 of its frame is empty; the
   frame is pulled up by most of that (a margin percentage is of the width,
   so this is 18% of the frame's width, i.e. 111 of its 616 units). */
@media (max-width: 967.98px) {
  .sol-residential__offset { display: none; }
  .sol-residential__hero-grid { grid-template-columns: minmax(0, 1fr); }
  .sol-residential__hero-copy {
    background: var(--color-surface-offset);
    border-radius: var(--radius-lg);
    padding: var(--space-600);
  }

  .sol-residential__doodle--dots,
  .sol-residential__body-dots,
  .sol-residential__doodle--portrait-dots,
  .sol-residential__doodle--climb-orange,
  .sol-residential__doodle--cap,
  .sol-residential__doodle--book { display: none; }

  .sol-residential__stack { margin-top: calc(min(100%, 616px) * -.18); }

  /* The climb and the percent sign changed size, so each drawing is pinned
     where the old box, scaled about its centre, put it: the old place plus
     10% of the old box on each axis. */
  .sol-residential__doodle--climb { left: 17.0454%; top: 65.0436%; }
  .sol-residential__doodle--percent {
    right: calc(min(100%, 580px) * .5494 - var(--doodle-percent-navy-pad-r));
    margin-bottom: calc(min(100%, 580px) * .1984);
  }
}

/* ---- 720px: phone ------------------------------------------
   The section pads, the band inset and the hero top take their one step
   here in the tokens (CA-1.9), so nothing below restates them. What is left
   is internal spacing and the cards. */
@media (max-width: 720px) {
  .sol-residential__hero-copy { padding: var(--space-500); }
  .sol-residential__hero-copy .sol-home__ctas { margin-top: var(--space-600); }

  /* Phone buttons are full width (CA-4.10). home.css stacks the pair; the
     hero copy and the refrain both align their children to one side or the
     centre, so the row has to be told to take the column. */
  .sol-residential__hero-copy .sol-home__ctas,
  .sol-residential__refrain .sol-home__ctas { align-self: stretch; }
  .sol-residential__body,
  .sol-residential__row--panel-body .sol-residential__body-block,
  .sol-residential__row--panel-heading .sol-residential__body-block { margin-top: var(--space-500); }
  .sol-residential__row-grid { gap: var(--space-600); }

  .sol-residential__portrait-frame { padding: var(--space-400) 0 var(--space-700); }

  .sol-residential__kb-body { margin-top: var(--space-400); }
  /* Wiki cards 32 / 24, the kit's one phone step for them (CA-6.12). */
  .sol-residential__wiki { padding: var(--space-600) var(--space-500); gap: var(--space-500); }
}

/* ---- Motion -------------------------------------------------
   home.css already stops every transition inside .sol-home. The wiki lift is
   this sheet's, so its transform is stopped here too: a card that jumps 3px
   with no tween is worse than one that does not move (CA-6.4). */
@media (prefers-reduced-motion: reduce) {
  .sol-residential__wiki:hover { transform: none; }
}