/* technical component — GENERATED by tools/make-fixtures.py --emit-components
   from the same source ranges as widgets/technical/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. */
/* == technical == STAGE 2. A phone stacks the text column over the photo (the photo goes full-width into a
   capped landscape box, object-fit: cover); from 900 the design's row returns with a flexible text column and
   a photo whose width scales and still bleeds to the FRAME edge (the negative margin is --gutter, which IS the
   design's 80 at 1600); from 1500 the stage-1 composition is pinned exactly — 854 column, 606x681 photo,
   -80px bleed, the 18.5 half-pixel that centring the 644 column on the 681 row produces, and every stage-1
   height. The three radius cards are FIXED 244x123 design objects at every width (like the collection pills):
   their gradient ring and dashed-circle svgs are positioned against that box, so the box may not fluid-scale;
   they wrap instead (1 per row on a phone, 2 from ~900, 3 once the column reaches 798 = 3x244 + 2x33). */

.s-technical {
  /* Frame 203 sits 81 below the band top (5474 − 5393) and 79 above its bottom (6234 − 6155). Both are
     SECTION padding, never a child margin — a child margin collapses through and moves the whole page. */
  padding-top: clamp(40px, 3.38843vw + 26.8351px, 81px);
  padding-bottom: clamp(40px, 3.22314vw + 27.4798px, 79px);
  background: var(--c-cream);
  --c-fade: rgb(255 255 255 / 0);   /* the card stroke's far stop is WHITE at alpha 0; the keyword `transparent` is BLACK at alpha 0 and would grey the fade */
}

.technical { display: flex; flex-direction: column; gap: var(--gap-48); }
.technical__col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

/* stacked, the text blocks take the whole column; their stage-1 854 widths return with the pins at 1500 */
.technical__title, .technical__guarantee, .technical__note { width: 100%; }
/* No h3 override here (stage 1 needed one): shared-responsive.css already gives h3–h6
   `font-size/line-height: inherit`, so this subhead is the body's Montserrat 16/31 at body tracking. */
.technical__subhead { margin-top: clamp(12px, 0.413223vw + 10.4384px, 17px); }
.technical__guarantee { margin-top: clamp(12px, 0.413223vw + 10.4384px, 17px); }
.technical__note { margin-top: clamp(20px, 0.909091vw + 16.5045px, 31px); }
/* The guarantee paragraph wraps naturally at every width. Its six \n in the node are wrap positions (every line
   fills 87–92% of the 854 box), not breaks — developer ticket 6; the first build shipped them as <br>. */
.technical__cta { margin-top: var(--gap-30); }   /* the design's 30 — the shared token peaks there */

/* Frame 150: three cards, design gap 33. A grid of tracks at least 244 wide that SHARE the column: one card
   per row fills a phone, two or three fill a tablet — the first build held every card at 244 and left the rest
   of the row empty (developer ticket 9). */
.technical__radii {
  width: 100%;   /* the column is align-items: flex-start, so without it the list shrink-wraps and the grid never sees the full width */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(244px, 100%), 1fr));
  gap: clamp(20px, 1.07438vw + 15.8599px, 33px);
  margin-top: clamp(20px, 0.661157vw + 17.4715px, 28px);
}

.radius-card {
  position: relative;
  /* NOT overflow: hidden. Tried for QA 12.3 and MEASURED as a no-op — 12 differing pixels over the whole
     corner — because the ring overhangs the card by 0.5px, not by the visible amount. What reads as a bleed
     is the dashed arc crossing the gold corner INSIDE the card, which no clip can reach; the design erases
     that with seventeen white boxes (12640:294–310, our __motif) and we reproduce them. Left here so the
     next reader does not spend the same hour on it. */
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;   /* Figma centres the stack: one 31 line at 46, the 3x3 pair (31 + 62) at 15; the names are auto-width in the tree */
  min-height: 123px;                     /* the design's card height as a floor; the width is the grid track's (the rings are anchored right) */
  padding-left: 17px;                    /* the design insets its text 18px; 1px of that is the border below */
  /* The 1px INSIDE stroke is a LINEAR GRADIENT — gold from the right edge to 83% across, fading to white/0
     by 97.6% — and no box-shadow ring can paint a gradient. A transparent border with the gradient clipped
     to border-box under a cream padding-box fill is the only CSS ring that can. Unchanged from stage 1:
     verify's paint-config compares backgroundImage/borderRadius/borderTopWidth on this element at 1600. */
  border: 1px solid transparent;
  border-radius: 0 27px 27px 0;          /* rectangleCornerRadii [0,27,27,0] — square at the open left end */
  background:
    linear-gradient(var(--c-cream), var(--c-cream)) padding-box,
    linear-gradient(to left, var(--c-gold) 83.004%, var(--c-fade) 97.596%) border-box;
}
/* .radius-card__name: 12640:283/:288/:292 — Montserrat 300 16/31 black, the body default; one line by line-height */
.radius-card__note {
  max-width: calc(100% - 63px);          /* 12640:284 — the design's 162 box in the 225 inside of a 244 card, i.e. the card's width less the 63 its ring side keeps clear: exactly 162 at 244, and a full-width stacked card gives the note its room (developer, ticket 4) */
  font-size: 14px; line-height: 31px; letter-spacing: var(--ls-body);   /* tracking is −1% of EACH size */
}
/* The dashed gold circles. Figma geometry boxes inside their cards: 39x39 at [203,3], 58x58 at [186,0],
   75x76 at [169,1]. Each svg is RENDER bounds — a 1px CENTER stroke overhangs 0.5px — so each file is a
   pixel larger than its geometry box and sits half a pixel up and left of it. Every offset below is that
   render-bounds position MINUS 1 on both axes: the card's 1px transparent border makes its PADDING box the
   containing block, and without the −1 all three rings and the motif measure a pixel right and a pixel low. */
.radius-card__ring { position: absolute; }
/* anchored to the card's RIGHT edge (the design's circles sit at the open right end), so the card can be any
   width: at 244 these are exactly the design offsets — 3x3 40px svg at 201.5 → right 0.5; 4x4 59px at 184.5 →
   right −1.5; 6x6 76px at 167.5 → right −1.5 — each measured from the PADDING box (the 242px inside the 1px
   transparent border) */
.radius-card--3x3 .radius-card__ring { right: 0.5px; top: 1.5px; }
.radius-card--4x4 .radius-card__ring { right: -1.5px; top: -1.5px; }
.radius-card--6x6 .radius-card__ring { right: -1.5px; top: -0.5px; }
/* RECTANGLEs 12640:294–310: seventeen white 1–10px boxes over the 6x6 ring, union [213,2 33x42] in the card. */
.radius-card__motif { position: absolute; right: -3px; top: 1px; }   /* 33px svg at 212 in the 242 padding box → right −3, anchored like the rings */

/* The photo bleeds to the frame edge in the design. Stacked, it goes full-width into a SHORTER landscape box
   — 260 on a phone growing to 520 — and object-fit: cover crops the tall 606x681 portrait top and bottom;
   letting it keep its own aspect would hand a 390 phone a 393-tall slab under an already long column. */
.technical__photo {
  width: 100%; height: clamp(260px, 55vw, 520px); min-height: 0;   /* min-height:0 — aspect-ratio loses to a loaded image in a flex item (GOTCHAS) */
  object-fit: cover;
}

@media (min-width: 900px) {
  /* Frame 192 [80,5474 1520x681] H gap60, counter-axis CENTER — the row returns, the column flexes. */
  .technical { flex-direction: row; align-items: center; gap: clamp(32px, 2.31405vw + 23.0252px, 60px); }
  .technical__col { flex: 1 1 auto; }
  .technical__photo {
    flex: none;
    width: clamp(270px, 48vw - 162px, 606px);   /* 270 at 900 → the design's 606 at 1600 (slope (606−270)/7vw) */
    /* the text column is much taller here than at 1600 (wrapped copy, two rows of cards); a photo at its own
       aspect would float in the middle of the row with a third of the band left as empty cream (measured in
       the 1024 shot), so it STRETCHES to the row height and object-fit: cover takes a centre slice */
    align-self: stretch; height: auto; aspect-ratio: auto;
    object-fit: cover;
    margin-right: calc(-1 * var(--bleed));       /* the photo meets the frame edge at every width (= the design's −80 at 1600, the viewport edge above it) */
  }
}

@media (min-width: 1500px) {
  /* the stage-1 composition, pinned: band 1600x841, row 681, column 854x644 centred on it (the design's
     own half pixel at 18.5), photo 606x681 bleeding the 80 gutter to the frame edge. */
  .s-technical { padding-top: 81px; padding-bottom: 79px; }         /* 81 above Frame 203 and 79 below it = the 841 band */
  .technical { gap: 60px; }                                          /* the row is the photo's 681 */
  .technical__col { flex: 1 1 0; min-width: 0; }                     /* the row's remainder beside the photo = 854; its content is the design's 644, centred on the 681 row at the file's own 18.5 */
  .technical__title { max-width: 854px; }                            /* 12640:276, Cormorant 700 35/52 */
  .technical__subhead { margin-top: 17px; }                          /* 12640:277 / 12640:279 */
  .technical__guarantee { margin-top: 17px; max-width: 854px; }      /* 12640:278 — the design's column; the four NBSP-glued pairs put the six breaks where the design has them (stage 1 carries the measurement) */
  .technical__radii { grid-template-columns: repeat(3, minmax(0, 244px)); gap: 33px; margin-top: 28px; }   /* 3 x 244 + 2 x 33 = 798 in the 854 column, as designed */
  .technical__note { margin-top: 31px; max-width: 854px; }           /* 12640:311 */
  .technical__cta { margin-top: 30px; }
  /* 12640:313 [994,5474 606x681], centred on the row, cut at 2x. The width is the stage-1 606 wherever the
     container can hold the composition, and shrinks with it below that: .container is 100vw − 2·gutter and
     --gutter only reaches 80 at 1600, so a hard 606 here puts the photo's right edge 95px PAST the viewport
     at 1500 (measured) — 95px of photo thrown away instead of bleeding to the frame edge. 100% is
     .technical's width, 914 = the 854 column + the 60 gap, and the gutter comes back as the bleed, so the
     photo meets the frame edge at every width in this band. At 1600 the expression is exactly 606 and the
     margin exactly −80. */
  .technical__photo {
    align-self: auto;
    width: calc(min(526px, 100% - 914px) + var(--bleed));   /* the 526 the photo takes of the 1440 row (606 − 80), plus the bleed: 606 at 1600, the viewport edge above it */
    height: 681px;   /* fixed: the design's photo window (606×681 cut at 2×) — a media box, not content */
    margin-right: calc(-1 * var(--bleed));
  }
}

@media (min-width: 1600px) {
  /* From here the box is the photo's own 606x681 ratio again, so cover and `fill` paint identical pixels —
     but verify's paint-config compares objectFit against stage 1 (which has none, i.e. `fill`), so restore it. */
  .technical__photo { object-fit: fill; }
}
@media (min-width: 1601px) {
  .technical__photo { object-fit: cover; }   /* wider than the 606 cut once the bleed grows past 80: cover keeps the 681 window */
}


/* ==== hand-maintained widget-phase additions (widgets/technical/wp-extra.css) ==== */
/* technical — WIDGET-PHASE rules. Elementor's `.elementor img { height: auto }` (0,1,1) beats the stage-2 photo
   heights (0,1,0): measured on the live page, the stacked photo was 393 tall on a 390 phone (stage 2: 260) and
   861 at 1920 (stage 2: the 681 window). The three stage-2 heights, restated one class higher. */
.elementor .technical__photo { height: clamp(260px, 55vw, 520px); }
@media (min-width: 900px)  { .elementor .technical__photo { height: auto; } }
@media (min-width: 1500px) { .elementor .technical__photo { height: 681px; } }