/* ==========================================================================
   LOWES — MYHOME APPLIANCES
   Page-specific layout for work/appliance-organization.html.

   Design source : Figma "PORTFOLIO_CASE-STUDY-LAYOUT"
                   frame 675:11899 "LOWES - MYHOME APPLIANCES"
                   1920 x 7334, reference width 1920px

   Depends on: tokens.css, base.css, components.css, case-study.css

   WHAT IS REUSED, AND WHY
   This page is the sixth case study and the third built on the shared
   --cs-* layer. It reuses .cs-hero__inner (the bled panel + rail grid),
   .cs-hero__meta (ROLE / TEAM / SHIPPED), .cs-hero__kicker/__headline/
   __lede, .cs-quote, .cs-figure, .section and .media wholesale — the frame
   draws all of them at values the shared tokens already carry. Only the
   colours and the frame's own composition are set here.

   BREAKPOINTS  (the ladder declared in tokens.css; mobile-first throughout)
     (base)   0     - 480px    mobile
     481px    - 767px          large mobile
     768px    - 1023px         tablet
     1024px   - 1439px         desktop      <- two-column layouts begin
     1440px   +                large desktop -> approaches the 1920 frame
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. PAGE
   -------------------------------------------------------------------------- */

/* This frame sets its section eyebrows at #6C6C6C, a step darker than the
   #8A857F the Alaska and WayFinder frames use. Scoped to the page so the
   shared token is left alone. */
.appliances .section__eyebrow { color: var(--ap-eyebrow); }

/* Two joins in the frame depart from the flat 110 rhythm that
   case-study.css applies to every band. Both are drawn, not inferred:
   SITUATION ends at 1492 and the KEY INSIGHTS band starts at 1550 (58);
   PRE-FILTERED ends at 6014 and the closing photograph starts at 6155
   (141). */
.appliances .page > article > .ap-insight  { margin-top: var(--ap-join-insight); }
.appliances .page > article > .ap-closing  { margin-top: var(--ap-join-closing); }


/* --------------------------------------------------------------------------
   2. HERO
   Frame: a 1519 x 755 gradient panel running from the content column off the
   right edge of the artboard, with the ROLE / TEAM / SHIPPED rail beside it.
   The panel is bled by .cs-hero__inner (case-study.css) exactly as the other
   two case studies bleed theirs.

   Inside the panel, measured from its own top-left corner:
     +75   the device cluster's top edge
     +265  the copy block's top edge
     -6    the laptop's bottom edge, clear of the panel's
   -------------------------------------------------------------------------- */

.ap-hero__panel {
  background-image: var(--ap-gradient-hero);
  padding: var(--ap-hero-pad-top)
           var(--page-gutter)
           var(--ap-hero-pad-bottom)
           var(--ap-hero-pad-x);
}

/* Stacked, the panel's 6px floor would clip the laptop's reflection against
   the fold, so it opens up until the two-column layout takes over. */
@media (max-width: 1023px) {
  .ap-hero__panel { padding-bottom: var(--ap-hero-pad-top); }
  /* Bleed left as well, so the hero reads edge to edge on a phone rather
     than as a floating slab — the same treatment case-study.css gives the
     Alaska panel. */
  .ap-hero__panel { margin-inline-start: calc(-1 * var(--page-gutter)); }
}

/* --- Panel copy ----------------------------------------------------------
   The type sizes, weights and tracking are the shared --cs-* hero values and
   are inherited from case-study.css. This frame differs only in colour: it
   sets the hero on a dark blue ground rather than a pale one.
   ------------------------------------------------------------------------ */

.appliances .cs-hero__kicker   { color: var(--ap-hero-kicker); }
.appliances .cs-hero__headline { color: var(--color-text-strong); }
.appliances .cs-hero__lede     { color: var(--ap-hero-lede); }

/* The frame runs the lede to 526 of the copy column's 528 — i.e. the full
   measure — so no cap is needed, but it does open a wider gap above it than
   the 8px the Alaska hero uses. */
.appliances .cs-hero__lede { margin-block-start: var(--space-8); }

/* --- Device cluster ------------------------------------------------------
   A laptop and a phone, each a transparent-screened mockup with its screen
   content behind it. Four layers in one 880 x 674 stage, every child placed
   as a percentage of that stage so the composition holds at any width
   instead of only at 1920.

   Frame boxes, absolute on the artboard, and their share of the stage
   (stage = x 960..1840, y 216..889.94):

     laptop frame   960.00, 216.00   862.81 x 673.94    0%      0%
     laptop screen 1072.04, 244.33   640.88 x 409.08   12.73%   4.20%
     phone frame   1640.00, 435.00   200.00 x 386.00   77.27%  32.50%
     phone screen  1656.00, 447.00   167.41 x 362.72   79.09%  34.28%

   Screen content sits BEHIND its mockup: both device PNGs were confirmed to
   carry a fully transparent screen aperture (alpha 0 at the centre), which
   is how the frame composites them.
   ------------------------------------------------------------------------ */

.ap-hero__devices {
  position: relative;
  aspect-ratio: 880 / 674;
  margin-block-start: var(--space-32);
}

.ap-hero__device { position: absolute; }

.ap-hero__device--laptop-screen {
  left: 12.7314%;
  top: 4.2038%;
  width: 72.8278%;
  height: 60.7005%;
}
.ap-hero__device--laptop {          /* mockup, over the screen above */
  left: 0;
  top: 0;
  width: 98.0468%;
  height: 100%;
}
.ap-hero__device--phone-screen {
  left: 79.0909%;
  top: 34.2764%;
  width: 19.0240%;
  height: 53.8215%;
  border-radius: var(--ap-phone-radius);
  overflow: hidden;
}
.ap-hero__device--phone {           /* mockup, over the screen above */
  left: 77.2727%;
  top: 32.4956%;
  width: 22.7273%;
  height: 57.2753%;
}

/* --- Two-up from 1024 ----------------------------------------------------
   The frame's copy column is 528 and its device stage 880, side by side
   inside the panel. Expressed as fr so the proportions survive; the copy
   track is floored at min-content so the headline is never broken mid-word
   as the panel narrows — the same guard the Alaska hero uses, and the reason
   the two-up can start at 1024 rather than waiting for 1440.
   ------------------------------------------------------------------------ */

@media (min-width: 1024px) {
  .ap-hero__top {
    display: grid;
    grid-template-columns: minmax(min-content, 528fr) minmax(0, 880fr);
    align-items: start;
  }
  /* The devices lead the panel vertically; the copy is dropped against them
     by the frame's 190. */
  .ap-hero__copy    { margin-block-start: var(--ap-hero-copy-offset); }
  .ap-hero__devices { margin-block-start: 0; }
}


/* --------------------------------------------------------------------------
   3. SITUATION
   A 486 x 486 photograph of a pile of appliance manuals, then 887px of
   40/56 copy, the two centred against each other.
   -------------------------------------------------------------------------- */

.ap-situation__body {
  display: grid;
  gap: var(--ap-situation-gap);
}

.ap-situation__shot {
  aspect-ratio: 1 / 1;
  /* Stacked, the square would otherwise run the full content column and
     tower over the copy. The frame's own 486 is the natural ceiling. */
  max-width: 486px;
}

.ap-situation__copy {
  color: var(--ap-ink-situation);
  font-size: var(--fs-cs-situation);
  line-height: var(--lh-cs-situation);
  letter-spacing: var(--ls-cs-situation);
}

/* The frame sets the closing sentence — the one that states the problem — in
   Semi Bold and a step darker. */
.ap-situation__copy strong {
  color: var(--ap-ink-situation-strong);
  font-weight: var(--fw-semibold);
}

@media (min-width: 1024px) {
  .ap-situation__body {
    grid-template-columns: 486fr 887fr;
    align-items: center;
  }
  .ap-situation__shot { max-width: none; }
}


/* --------------------------------------------------------------------------
   4. KEY INSIGHTS  —  full-bleed Lowe's blue band
   Frame: 1920 x 360 at #023F84, inset 80 all round, the 200px label and the
   1436px copy justified to the two edges of the 1760 measure.
   -------------------------------------------------------------------------- */

.ap-insight {
  background-color: var(--ap-band-insight);
  padding-block: var(--ap-insight-pad);      /* the frame's 80 */
}

.appliances .ap-insight .section__eyebrow { color: var(--ap-on-band-label); }

.ap-insight__copy {
  color: var(--ap-on-band);
  font-size: var(--fs-ap-insight);
  line-height: var(--lh-ap-insight);
  letter-spacing: var(--ls-ap-insight);
}

/* The frame separates the two statements with a blank line of the same
   leading rather than a paragraph space. --lh-ap-insight is a unitless
   ratio, so it has to be multiplied out into a length here: as a bare
   custom property it is not a valid margin and computes to 0. */
.ap-insight__copy p + p { margin-top: calc(var(--lh-ap-insight) * 1em); }

/* RAIL, NOT THE FRAME'S GAP. The frame sets a 200px label and a 124 gap,
   which puts this copy at x=404 — level with the 401 every other section on
   the artboard starts at. Reproducing the 124 against the site's wider 320
   rail would instead push it to 524 and leave this one band indented past
   its neighbours, so the shared --layout-rail-gap is inherited and the copy
   lands on the same column as the rest of the page. The frame's own number
   is recorded on --ap-insight-gap in tokens.css but is not consumed. */


/* --------------------------------------------------------------------------
   5. APPLIANCES INFORMATION
   The rail carries the eyebrow AND a five-item feature list; the content
   column carries a quote block over a full-width screenshot of the page.
   -------------------------------------------------------------------------- */

/* A rail column that holds more than its label. The eyebrow keeps its own
   colour and offset; whatever follows hangs beneath it. */
.ap-rail {
  display: grid;
  align-content: start;
  gap: var(--space-8);
}

.ap-rail__list {
  margin: 0;
  padding-inline-start: 21px;      /* the frame's marker inset */
  list-style: disc;
  color: var(--ap-ink-bullet);
  font-size: var(--fs-ap-bullet);
  line-height: var(--lh-ap-bullet);
}

/* One item — the AI search line, which is what the case study is about — is
   set in Semi Bold and near-black in the frame. */
.ap-rail__list strong {
  color: var(--ap-ink-bullet-strong);
  font-weight: var(--fw-semibold);
}

/* The frame stacks the quote 32 above the screenshot in both this section
   and PRE-FILTERED. */
.ap-stack {
  display: grid;
  gap: var(--ap-stack-gap);
}

/* 1439 x 1488 in the frame — the tallest asset on the page. */
.ap-page-shot { aspect-ratio: 1415 / 1464; }

/* This quote is the one set in warm grey rather than --color-grey-18. */
.ap-quote--warm { color: var(--ap-ink-quote); }
.ap-quote--warm strong {
  color: var(--ap-ink-quote-strong);
  font-weight: var(--fw-bold);
}


/* --------------------------------------------------------------------------
   6. AI SEARCH  —  full-bleed light band
   Frame: 1920 x 1395 at #EFEEEF, 109 top / 110 bottom, two rows 49 apart.

     row 1   label 210 | screenshot 709 | quote 649,  96 between
     row 2   label 293 (eyebrow + caption) | modal 1439
   -------------------------------------------------------------------------- */

.ap-ai {
  background-color: var(--ap-band-ai);
  padding-block: var(--gap-band);
}

.ap-ai__rows {
  display: grid;
  gap: var(--ap-ai-band-gap);
}

/* --- Row 1 --------------------------------------------------------------- */

.ap-ai__row1-body {
  display: grid;
  gap: var(--ap-ai-col-gap);
}

.ap-ai__screens { aspect-ratio: 709 / 695; }

@media (min-width: 1024px) {
  .ap-ai__row1-body {
    grid-template-columns: 709fr 649fr;
    align-items: start;
  }
}

/* --- Row 2 ---------------------------------------------------------------
   The label column here carries a caption under its eyebrow, so it is a
   two-child block rather than a bare heading. Its track is the shared rail
   width, which keeps it aligned with every other label on the page.
   ------------------------------------------------------------------------ */

.ap-ai__row2 {
  display: grid;
  gap: var(--space-16);
}

.ap-ai__caption {
  color: var(--ap-ink-caption);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.ap-ai__modal { aspect-ratio: 1439 / 432; }

@media (min-width: 1024px) {
  .ap-ai__row2 {
    grid-template-columns: var(--layout-rail) minmax(0, 1fr);
    column-gap: var(--layout-rail-gap);
    align-items: start;
  }
}


/* --------------------------------------------------------------------------
   7. PRE-FILTERED APPLIANCE SHOPPING
   The frame inverts the usual order here: the screenshot leads and the
   quote sits under it.
   -------------------------------------------------------------------------- */

.ap-prefiltered__shot { aspect-ratio: 4096 / 1758; }


/* --------------------------------------------------------------------------
   8. CLOSING PHOTOGRAPH + IMPACT
   The frame runs a full-bleed 1928 x 1069 photograph and drops the IMPACT
   band over its bottom 314px.
   -------------------------------------------------------------------------- */

.ap-closing { position: relative; }

.ap-closing__media {
  /* On a phone the frame's 1.8:1 crop is only ~200px tall and the band would
     cover all of it, so the photograph is given a taller crop and the band
     drops beneath it — the same compromise the Alaska closing makes. */
  aspect-ratio: 4 / 3;
  --crop-h: 100%;
  --crop-fit: cover;
  --crop-pos: 50% 0;
}

.ap-impact {
  background-color: var(--ap-band-impact);
  padding-block: var(--ap-impact-pad);       /* the frame's 100 */
}

.appliances .ap-impact .section__eyebrow { color: var(--ap-on-band-label); }

.ap-impact__body {
  color: var(--cs-on-deep-body);
  font-size: var(--fs-cs-impact-body);
  line-height: var(--lh-cs-impact-body);
  letter-spacing: var(--ls-cs-impact-body);
}

@media (min-width: 1024px) {
  .ap-closing__media {
    /* The frame's exact image box: 100.05% x 107.53%, showing the picture
       from 7.53% above the frame's top edge. */
    aspect-ratio: 1928 / 1069;
    --crop-x: -0.02%;
    --crop-y: -7.53%;
    --crop-w: 100.05%;
    --crop-h: 107.53%;
    --crop-fit: fill;
  }
  .ap-impact {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
  }
  /* As with KEY INSIGHTS, the frame's 112 gap belongs to its narrow 122px
     label. Held against the site's 320 rail it would indent this copy past
     the rest of the page, so the shared rail gap is inherited instead. The
     frame does draw this band's copy further left than its neighbours
     (x=314 against 401) — that difference is deliberately NOT reproduced,
     for the same alignment reason. Flagged for review. */
}


/* --------------------------------------------------------------------------
   9. SCREENSHOT SHADOWS
   The frame lifts each screenshot off the page with its own soft shadow.
   Kept as separate declarations rather than one shared value because the
   four differ, and they differ visibly: the tall page shot carries the
   heaviest, the modal the lightest, and the pre-filtered shot is the only
   one thrown upward.
   -------------------------------------------------------------------------- */

.ap-page-shot         { box-shadow: 0 0 11.8px rgba(0, 0, 0, 0.25); }  /* 688:10154 */
.ap-ai__screens       { box-shadow: 0 0 7.5px  rgba(0, 0, 0, 0.27); }  /* 688:10150 */
.ap-ai__modal         { box-shadow: 0 0 4px    rgba(0, 0, 0, 0.21); }  /* 688:11020 */
.ap-prefiltered__shot { box-shadow: 0 -3px 9.8px rgba(0, 0, 0, 0.25); }/* 706:12941 */