/* collection component — GENERATED by tools/make-fixtures.py --emit-components
   from the same source ranges as widgets/collection/fixture.html
   (../../site/css/shared-responsive.css + ../../site/css/blocks-responsive.css + build/css/responsive.css via fixtures.config.json). Byte-identical rules are
   the contract: edit the stage-2 source and regenerate, never this file. */
/* == collection (block) == STAGE 2. A phone stacks the panel over the swatch grid; from 900 the row returns
   (panel left, grid right, centred against each other) with the grid holding 2 / 3 / 4 columns of 146px
   swatches at 900 / 1200 / 1600; at 1600+ the stage-1 pins apply (panel and copy heights, band height) so
   1600 reproduces stage 1 exactly. The five sections' options live HERE (the stage-1 option sheets are not
   loaded in stage 2). */
/* Options, as stage 1: --panel-min is the design's own frame height as a FLOOR (the file hand-sizes three of
   the five a pixel or two off their own content, and the swatch column centres against the panel, so that
   pixel lands as a half-pixel on every board photo); --copy-advance gives back the pixels the file's copy
   TEXT node advances short of its own six lines. Both scale with the copy — nothing is capped. */
.s-collection-atelier    { --panel: var(--c-atelier);    --panel-min: 559px; }
.s-collection-heritage   { --panel: var(--c-heritage);   --panel-min: 560px; --copy-w: 647px; }
.s-collection-elements   { --panel: var(--c-elements);   --panel-min: 558px; --copy-advance: -1px; }
.s-collection-luxe       { --panel: var(--c-luxe);       --panel-min: 558px; --copy-advance: -2px; }
.s-collection-commercial { --panel: var(--c-commercial); --panel-min: 786px; --collection-gap: var(--gap-section-lg); }

.s-collection { padding-bottom: var(--collection-gap, var(--gap-section)); }
.collection { display: flex; flex-direction: column; gap: var(--gap-48); }
.collection__panel { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: var(--pad-35);   /* stacked, the panel fills the container: the design's 715 is a ROW width (developer ticket 9 found a white strip beside it at 860) */ background: var(--panel, var(--c-atelier)); color: var(--c-white); }
.collection__logo { width: min(260px, 100%); height: auto; aspect-ratio: 260 / 87; }
.collection__copy { margin-top: var(--gap-30); width: 100%; font-weight: 500; white-space: pre-wrap; }   /* stacked, the copy fills the panel: the design's 645 text box is a ROW measure (developer, ticket 4 — the capped copy left the right of a full-width panel empty) */
/* the pills are circles at the design width and stadiums if a label outgrows them — never a clipped box */
.collection__pills { display: flex; flex-wrap: wrap; gap: 20px; margin-top: var(--gap-30); }
.collection__pill { min-width: 74px; padding: 22px 12px 21px; border-radius: 37px; box-shadow: inset 0 0 0 1px var(--c-white); font-weight: 600; text-align: center; white-space: nowrap; line-height: 31px; }
.collection__cta { margin-top: var(--gap-30); }
.collection > :nth-child(2) { width: 100%; }   /* the right column: the swatch grid, or commercial's brief + grid */
/* minmax, not a flat 146: fixed tracks leave the remainder as dead space at the right of the grid — at 390
   two 146 tracks and one 31 gap fill 323 of a 350 column, and the developer saw the swatches stop short of
   the panel above them (#10). The tracks now take the leftover; 1600 pins the design's four 146s below. */
.collection__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); column-gap: 31px; row-gap: 30px; }
.swatch__photo { width: 100%; height: auto; aspect-ratio: 146 / 78; object-fit: cover; }   /* height:auto is load-bearing: the img carries height="78" as an attribute, a presentational hint CSS must override, and `width:100%` only overrides the WIDTH one. With both dimensions set, aspect-ratio is ignored — the moment the track grew past 146 the board stretched to 159x78 and object-fit cropped it. */
.swatch__name { display: block; margin-top: 5px; font-weight: 500; color: var(--c-black); }
@media (min-width: 900px) {
  .collection { flex-direction: row; align-items: center; }
  .collection__panel { flex: 1 1 0; max-width: 715px; }
  .collection__copy { max-width: var(--copy-w, 645px); }   /* the design's text box, from the row layout up */
  .collection > :nth-child(2) { flex: none; width: 323px; }   /* two columns: 2 × 146 + 31 */
}
@media (min-width: 1200px) {
  .collection > :nth-child(2) { width: 500px; }   /* three columns */
}
@media (min-width: 1600px) {
  .s-collection { padding-bottom: var(--collection-gap, 80px); }   /* the white under the row: 80, commercial 100 */
  .collection { gap: 48px; }
  .collection__panel { flex: 1 1 0; max-width: 715px; min-height: var(--panel-min, 559px); padding: 35px; }   /* the row's remainder beside the 677 column = 715 at 1440 */
  .collection__copy { margin-top: 30px; margin-bottom: var(--copy-advance, 0px); }
  .collection__pills, .collection__cta { margin-top: 30px; }
  .collection > :nth-child(2) { width: 677px; }   /* four columns: 4 × 146 + 3 × 31 */
  .collection__swatches { grid-template-columns: repeat(4, 146px); align-content: center; }
}


/* == collection-commercial == STAGE 2. The collection block itself (panel, pills, CTA, swatch grid and the
   stack→row switch at 900) is responsive in site/blocks/collection.responsive.css, which also carries this
   section's option tokens (--panel, --panel-min 786, --collection-gap) and
   owns the right column's WIDTH via `.collection > :nth-child(2)` — for commercial that selector IS .cm-side
   (100% below 900, then 323 / 500 / 677). Nothing here redeclares that width.
   This sheet is only the two things unique to commercial: the two-part panel copy, and the "IDEAL FOR:"
   list + colour note stacked above the swatch grid. Every number kept at 1600 comes from
   09-collection-commercial.css; all of them are small enough (10 / 20 / 29) to hold at phone width, so no
   clamp() is needed in this sheet — the fluid work is in the block and in shared-responsive.css. */

/* -- the panel copy (Frame 134, 12640:600): a 500-weight lede line, gap 10, then the body.
      The block puts white-space: pre-wrap on .collection__copy for the design's double spaces; here that
      class is a WRAPPER around two paragraphs and pre-wrap would render the markup's own indentation as
      blank lines (stage 1 measured the lede 62px low, the body 124px). The pre-wrap belongs on the text
      that carries the double spaces, so it moves down one level. Both stages need this. */
.s-collection-commercial .collection__copy { white-space: normal; }
.s-collection-commercial .cm-body { margin-top: 10px; white-space: pre-wrap; }   /* Frame 134 itemSpacing */

/* -- the right column (Frame 133, 12640:611): one flex column, gap 20. Figma nests it Frame 133 > Frame 121
      > {Frame 118, Frame 120}; both levels carry the same 20px gap, so the three visible blocks sit in one
      column here at every width. Width is the block's (see the header comment). */
.s-collection-commercial .cm-side { display: flex; flex-direction: column; gap: 20px; }
.s-collection-commercial .cm-title { --label-c: var(--c-commercial); }   /* .label's face and weight, the panel's navy in place of bronze */

/* Frame 118 (12640:613): the "IDEAL FOR:" line, the list, and the gradient rule under it.
   Figma fills the list's columns top-down and so does the DOM order, so the flow is `column` wherever there
   is more than one column and the explicit row count is what sets the wrap. Mobile-first: ONE column. */
.s-collection-commercial .cm-list {
  display: grid; grid-auto-flow: row; grid-template-columns: 1fr;
  column-gap: 20px; row-gap: 16px; margin-top: 10px; color: var(--c-commercial);
}
.s-collection-commercial .cm-rule {
  /* LINE 12640:626: a 1px GRADIENT stroke, the panel navy to 78.5% then a fade to white. Drawn as a CSS gradient
     (developer ticket 8), not the exported svg: the stops are the design's and the rule stretches with its box. */
  display: block; width: min(503px, 100%); height: 1px; margin-top: 29px;   /* the 0-height LINE at y4764 paints on row y−1 (GOTCHAS), so 30 − 1 */
  background: linear-gradient(90deg, var(--c-commercial) 78.5095%, var(--c-white) 100%);
}
/* The six items are a Figma BULLETED list (lineTypes UNORDERED, lineIndentations 1 on every node, 12640:618–625):
   the tree carries the list type, not its geometry, and the first build dropped the dots (developer ticket 3 —
   the export assembly dropped them too, so the floor had absorbed the omission). Measured on the reference
   render: a 2px dot 10px into the item, 16–17px down the 31px line, and the text 21px in. */
.s-collection-commercial .cm-list li { position: relative; padding-left: 21px; }
.s-collection-commercial .cm-list li::before { content: ""; position: absolute; left: 10px; top: calc(var(--t-15-lh) / 2 + 0.5px);   /* the line's middle: 16 on the 31px line at 1600 */ width: 2px; height: 2px; background: currentColor; }


/* Frame 120 (12640:627): 10px of padding above and below its two lines. */
.s-collection-commercial .cm-note { padding: 10px 0; color: var(--c-commercial); }
.s-collection-commercial .cm-note__copy { margin-top: 10px; }   /* Frame 119 itemSpacing; two 31px lines by line-height */

@media (min-width: 600px) {
  /* two columns, 3 per column — the side column is still the full container here (the block widens it only
     from 900), so equal fluid tracks read cleanly. */
  .s-collection-commercial .cm-list { grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); }
}
@media (min-width: 1200px) {
  /* three columns, 2 per column — the design's grouping (Frames 113 / 114 / 115). Tracks stay fluid: the
     block's column is 500 here, too narrow for the stage-1 210/234/191. */
  .s-collection-commercial .cm-list { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); }
}
@media (min-width: 1600px) {
  /* the desktop composition: the stage-1 track widths (the three frames' own, 2px of slack at the right as
     designed) and the pinned line-box rows / two-line note height, so 1600 reproduces stage 1 exactly. */
  .s-collection-commercial .cm-list { grid-template-columns: 210px 234px 191px; grid-template-rows: repeat(2, auto); }   /* two rows of one 31px line each */
}