/* composites.css (asset-scout)
   Sets only the --comp-* custom properties consumed by the baseline .comp
   rules in css/sections.css. Values are measured by
   toddler-university/.claude/skills/photo-layer-composer/scripts/compose.py
   against the actual cropped cutouts and ground photos in assets/, then
   confirmed by a Playwright screenshot pass at 1440 and 390. No new
   properties are invented; a property left out here means the sections.css
   default already matched the measured/intended value, or the recipe this
   composite is based on has no equivalent layer.

   hero      -> hero-composite recipe, cutout assets/cutouts/student-a.webp
   free      -> card-halo recipe,      cutout assets/cutouts/student-b.webp
   testimonial -> overflow-card recipe, cutout assets/cutouts/faculty-a.webp

   Card-fill colours below match the --var card-fill passed to compose.py;
   the halo and scrim colours are left unset because the sections.css
   defaults (rust halo rgb(255 178 152), blue scrim rgb(0 74 117 / .5))
   already are the intended brand colours. */

/* ================================================================ */
/* hero: full-bleed background of #hero (.hero__still .comp forces
   aspect-ratio:auto, width/height:100%, so these percentages are of the
   whole hero section, not a 1202x440 card). */
/* ================================================================ */

[data-composite="hero"] {
  --comp-fill: #B7410E;
  --comp-cutout-w: 27.876%;
  --comp-cutout-h: 106.359%;
  --comp-cutout-right: 17.1%;
  --comp-halo-size: 16.1875rem;
  --comp-halo-x: 70%;
  --comp-halo-y: 50%;
  --comp-scrim-w: 77.12%;
  --comp-scrim-h: 213.18%;
}

@media (max-width: 767px) {
  [data-composite="hero"] {
    /* recipe's 390 pass: scrim off, cutout widens to 104%, halo re-centres */
    --comp-scrim-w: 0%;
    --comp-scrim-h: 0%;
    --comp-cutout-w: 104%;
    --comp-cutout-h: auto;
    --comp-halo-x: 61%;
    --comp-halo-y: calc(100% - 8.79375rem);
  }
}

/* ================================================================ */
/* free: a normal card, .comp default aspect (measured 2.729, close to the
   2.732 fallback already in sections.css). Ground photo covers the card
   fully, so no scrim: the card-halo recipe this is based on has none, and
   the plan's own section-7 description lists ground photo + halo + cutout
   only. Mobile geometry (104% / -2% / 112%) is already set by sections.css
   at 900px (.free__grid .comp__cutout), so nothing to add here at 767px. */
/* ================================================================ */

[data-composite="free"] {
  --comp-aspect: 1.85;
  --comp-fill: #FFF2EE;
  --comp-cutout-w: 54.74%;
  --comp-cutout-h: 99.89%;
  --comp-cutout-right: 0%;
  --comp-halo-size: 16.1875rem;
  --comp-halo-x: 70%;
  --comp-halo-y: 50%;
  --comp-scrim-w: 0%;
  --comp-scrim-h: 0%;
}

/* ================================================================ */
/* testimonial: sections.css already fixes .testimonial-card--featured
   .comp to aspect-ratio 3/4 (a small featured-card badge, not the
   overflow-card recipe's own 584x518 box), so --comp-aspect is left unset
   on purpose: setting it would have no effect and would misstate what was
   actually measured. No halo override either: the overflow-card recipe
   this is based on has no halo layer, so the sections.css default halo
   sits mostly hidden behind the near-full-bleed cutout. */
/* ================================================================ */

[data-composite="testimonial"] {
  --comp-fill: #004A75;
  --comp-cutout-w: 100%;
  --comp-cutout-h: 102.6%;
  --comp-cutout-right: 0%;
}

@media (max-width: 767px) {
  [data-composite="testimonial"] {
    /* recipe's 390 pass: cutout widens to 107% and breaks the right edge
       only. The baseline .comp__cutout anchors from the right, so a
       negative right offset (rather than switching to a left anchor) is
       the equivalent translation: right edge overflows by 7%, left edge
       stays flush. */
    --comp-cutout-w: 107%;
    --comp-cutout-right: -7%;
  }
}

/* orchestrator 2026-09-15: the testimonial cut-out stands on the card edge without a tinted tile */
[data-composite="testimonial"] { --comp-fill: transparent; }