/* intro component — GENERATED by tools/make-fixtures.py --emit-components
   from the same source ranges as widgets/intro/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. */
/* == intro == STAGE 2. A phone stacks the copy column over the kitchen photo; from 900 the stage-1 row
   returns with the photo held at the design's share of the container (646/1440) and the copy column
   flexible; from 1500 the stage-1 pins apply (854 column, 646×725 photo, the 462 column centred on the 725
   row for Figma's half pixel, the 248 paragraph box) so 1600 reproduces stage 1 exactly. */

/* the design's 100 above Frame 187 and 100 below it (band 925 − row 725), fluid to 50 on a phone; padding,
   not margin — a first child's margin-top collapses through the section (GOTCHAS) */
.s-intro { padding: var(--gap-section-lg) 0; }
.intro { display: flex; flex-direction: column; gap: var(--gap-48); }
.intro__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-30); width: 100%; }
.intro__title { width: 100%; }
.intro__copy { width: 100%; }
.intro__copy p + p { margin-top: var(--t-body-lh); }   /* the node's \n\n: two paragraphs one blank line apart */
.intro__photo {
  width: 100%; height: auto; aspect-ratio: 646 / 725;
  min-height: 0;      /* a loaded image in a flex item beats aspect-ratio without it (GOTCHAS) */
  /* the cut is a PORTRAIT 646×725 — 1.12 column-heights, i.e. 393px of kitchen on a 390 phone. Capped at
     70vw (273px there) and cropped top/bottom by object-fit so the worktop stays in frame. Phone only. */
  max-height: 70vw; object-fit: cover;
}
@media (min-width: 900px) {
  .intro { flex-direction: row; align-items: center; gap: 20px; }   /* Frame 187: H gap 20, counter axis CENTER */
  .intro__col { flex: 1 1 0; min-width: 0; }
  /* Rectangle 15 is a BLEED photo: at 1600 it takes 566 of the 1440 row (39.3056%) and runs 80 past the column
     to the frame edge. The same share plus --bleed puts it on the frame edge at every width — the first build
     stopped it at the column below 1600 and 160px short of a 1920 viewport (developer ticket 9). The cap and
     crop above are the phone device only; from here the box is the cut's own ratio (verify compares object-fit). */
  .intro__photo { flex: none; width: calc(39.3056% + var(--bleed)); margin-right: calc(-1 * var(--bleed)); max-height: none; object-fit: fill; }
}
@media (min-width: 1600px) {
  .s-intro { padding: 100px 0; }   /* band y860 h925: 100 above Frame 187 and 100 below its 725 row */
  .intro__col { flex: 1 1 0; min-width: 0; gap: 30px; }   /* the row's remainder beside the 646 photo = 854; its content (104 + 30 + 248 + 30 + 50) is the design's 462, centred on the 725 row → top 1091.5, the half pixel Figma itself renders */
  .intro__title { max-width: 610px; }   /* 2 lines × 52, wrapped by the 610 box */
  .intro__copy { max-width: 854px; }    /* 8 lines × 31 */
  /* the photo window is the design's 725 tall from here (566 + 80 = 646 wide at 1600, the cut's own ratio); on a
     wider viewport the bleed widens it and object-fit: cover keeps the row at 725 */
  .intro__photo { height: 725px; }
}
@media (min-width: 1601px) { .intro__photo { object-fit: cover; } }   /* from 1601 only: at 1600 the box IS the cut's ratio, and verify compares object-fit with stage 1 */


/* ==== hand-maintained widget-phase additions (widgets/intro/wp-extra.css) ==== */
/* intro — WIDGET-PHASE rules. Elementor's frontend.css sets `.elementor img { height: auto; max-width: 100% }` at
   (0,1,1), which beats every stage-2 photo height (0,1,0). Measured on the live page: at 1920 the bleed photo
   grew to 806×905 instead of holding the design's 725 window. Restated here one class higher. */
@media (min-width: 1600px) { .elementor .intro__photo { height: 725px; } }