/* ========================================================================================
* section.css - page-structure primitives (L2 layer): .section, .container, .hero, .split.
*
* .section/.container port the padding/max-width pattern every section in the design
* source repeats inline (search "padding:var(--cd-section) var(--cd-5)" and
* "max-width:var(--cd-container);margin:0 auto" in docs/design-source/homepage-template.html).
*
* .hero and .split have no dedicated file in the brief's file list; they are placed here
* because both are page-structural layout primitives in the same family as .section, and
* the design source's own hero (.cd-hero) is itself just a section with a wash background
* (background-image:var(--cd-wash)), i.e. the same idea as .section--wash below.
* ======================================================================================== */
/* --- section --------------------------------------------------------------------------- */
.section{padding-block:var(--cd-section);padding-inline:var(--cd-gutter);background:var(--cd-ground)}
.section--tight{padding-block:var(--cd-7)}
/* Continues the section above it on the same ground (e.g. course tiles directly under the
course video): no top padding, and the section above closes with the kit's grid gap
(--cd-5, the tile and card gutter), so the two read as one grid. */
.section--flush-top{padding-top:0}
.section:has(+ .section--flush-top){padding-bottom:var(--cd-5)}
.section--tint{background:var(--cd-ground-tint)}
.section--deep{background:var(--cd-ground-deep);color:var(--cd-ink-invert)}
.section--raised{background:var(--cd-ground-raised)}
.section--wash{background-color:var(--cd-ground);background-image:var(--cd-wash)}
/* padding-inline:0: the parent's framework.css pads every .container 15px, which set section
content 15px inside the hero, footer and header content edges. The section's own
padding-inline is the gutter, so every band lines up on one --cd-container edge. */
.container{max-width:var(--cd-container);margin-inline:auto;padding-inline:0}
.container--narrow{max-width:820px}
/* --center: centers a .section > .container's flex-column children (Who we serve's
heading + card grid, docs/design-source/homepage-template.html "WHO WE SERVE"). Task 10. */
.container--center{align-items:center}
/* A grid inside a centered column keeps its full width (align-items:center would
otherwise shrink it to its content). */
.container--center > .grid{width:100%}
/* Every section in the design source wraps its content in exactly this stack (search
"display:flex;flex-direction:column;gap:var(--cd-7)" in docs/design-source/
homepage-template.html); scoped to a direct .container child of .section so a
.container used elsewhere (e.g. a header row) is unaffected. */
.section > .container{display:flex;flex-direction:column;gap:var(--cd-7)}
/* --- hero: white ground, split, cutout photography ------------------------------------
* The signature opening. White stays white; the photograph is the subject, not a
* background. --home/--patients trim the bottom padding to match the design source's
* per-page hero variants; --page is for a plain interior-page hero (no split media).
* Parts: .hero__grid (the two-column layout wrapper, one column until 900px),
* .hero__content (copy column) and .hero__media (photo column, order:-1 so it comes
* first in source order below 900px).
* ----------------------------------------------------------------------------------------- */
/* position:relative (containing block for .hero__bg/.hero__bg-wash) + isolation:isolate
(a guaranteed new stacking context, regardless of z-index quirks elsewhere on the
page) so the explicit z-index scale below (0 for the background layers, 1 for the
content) is the only thing that decides paint order inside a hero. */
.hero{position:relative;isolation:isolate;overflow:hidden;background-color:var(--cd-ground);background-image:var(--cd-wash);padding-block:var(--cd-7);padding-inline:var(--cd-gutter)}
.hero--home,.hero--patients{padding-bottom:var(--cd-7)}
/* Fix round 3: .hero__grid needs to be a POSITIONED element for z-index to do
anything at all - without position set here, it is a plain in-flow block, and an
in-flow, non-positioned element always paints BELOW a positioned sibling with
z-index:auto (.hero__bg/.hero__bg-wash below), no matter what z-index says or what
the source order is. That was the bug: the bg/wash layers were painting on top of
the H1/eyebrow/lede/buttons, washing them out to pale gray despite their computed
color being correct. position:relative + z-index:1 puts .hero__grid (and by
extension .hero__content/.hero__media, which paint within their positioned
ancestor's stacking context) above the bg layers' z-index:0. */
.hero__grid{position:relative;z-index:1;display:grid;gap:var(--cd-6);align-items:center;grid-template-columns:minmax(0,1fr);max-width:var(--cd-container);margin-inline:auto}
@media (min-width:900px){
.hero__grid{grid-template-columns:1fr 1fr;gap:var(--cd-8)}
}
.hero__content{display:flex;flex-direction:column;gap:var(--cd-5);max-width:56ch;min-width:0}
.hero__content h1{margin:0}
.hero__media{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;min-width:0;order:-1}
@media (min-width:900px){.hero__media{order:0}}
/* --solo: a page hero with no media column (e.g. a course with no photo) stays one column
at every width instead of leaving the right half of the two-column grid empty. */
@media (min-width:900px){.hero__grid.hero__grid--solo{grid-template-columns:minmax(0,1fr)}}
/* --photo: a rectangular course photo (not a cutout) in a page hero: framed like a card,
cropped to 4:3 whatever the source ratio, and kept after the copy on small screens. */
.hero__media--photo{order:0;align-items:center}
.hero__media.hero__media--photo img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--cd-r-lg);box-shadow:var(--cd-shadow-2)}
/* A landscape photo with text or a logo in it (Upcoming Courses): shown at its own shape. */
.hero__media.hero__media--wide img{aspect-ratio:auto}
/* :not(--collage) so this generic "the hero photo fills its column" rule (0,1,1
specificity) never outranks .hero__collage-photo's own absolute positioning
(0,1,0) below - without it, a bare `img` type selector here always wins over a
single class selector regardless of source order. */
.hero__media:not(.hero__media--collage) img{position:relative;width:100%;height:auto}
/* --- hero__bg: the masked full-bleed photo wash behind a hero's copy column ------------
* Ported verbatim from both design templates' hero (identical values in homepage-template.html
* and patients-template.html, search "mask-image:linear-gradient(to bottom"): a low-opacity
* photo, masked to fade out toward the bottom, plus a white scrim on top so body copy never
* sits directly on the photo. Two stacked aria-hidden divs, siblings of .hero__grid, both
* absolutely positioned within .hero (already position:relative;overflow:hidden;isolation:
* isolate). z-index:0 keeps both firmly behind .hero__grid's z-index:1 (Fix round 3);
* pointer-events:none is defensive - these are purely decorative and must never intercept
* a click meant for the H1/buttons/links stacked on top of them.
* ----------------------------------------------------------------------------------------- */
.hero__bg{
position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:var(--media);background-size:cover;background-position:center right;opacity:.45;
-webkit-mask-image:linear-gradient(to bottom,rgb(0 0 0 / 1) 0%,rgb(0 0 0 / .85) 45%,rgb(0 0 0 / .35) 78%,rgb(0 0 0 / 0) 100%);
mask-image:linear-gradient(to bottom,rgb(0 0 0 / 1) 0%,rgb(0 0 0 / .85) 45%,rgb(0 0 0 / .35) 78%,rgb(0 0 0 / 0) 100%);
}
.hero__bg-wash{position:absolute;inset:0;z-index:0;pointer-events:none;background:rgb(255 255 255 / .45)}
/* --- hero__collage: the Patients hero's 4-photo diamond arrangement --------------------
* Ported from patients-template.html's hero media (search 'alt="Woman holding her jaw in
* pain"'): four square photos, each 47% wide, offset into a diamond so they overlap at the
* center. .hero__media--collage overrides .hero__media's flex centering (the collage sizes
* itself via aspect-ratio, not flex alignment); .hero__collage is the positioning context,
* sized in JS-free CSS only (max-width matches the source's 560px cap).
* Each tile's slot is an explicit modifier set in the markup (--top/--left/--right/
* --bottom), never :nth-child(): WP Rocket's LazyLoad inserts a
* sibling after every lazy , which shifts child indexes (photos land on 1,3,5,7) and
* scrambled the diamond when this used nth-child. Modifiers are immune to injected siblings.
* ----------------------------------------------------------------------------------------- */
.hero__media--collage{display:block}
.hero__collage{position:relative;width:100%;max-width:560px;aspect-ratio:1;margin-inline:auto;padding-block:var(--cd-5)}
.hero__collage-photo{position:absolute;width:47%;height:auto;display:block}
.hero__collage-photo--top{top:0;left:26.5%}
.hero__collage-photo--left{top:26.5%;left:0}
.hero__collage-photo--right{top:26.5%;left:53%}
.hero__collage-photo--bottom{top:53%;left:26.5%}
/* Hover lift: the design source's equivalent hover (.pt-diamond, "rotate(45deg)
* translateY(-6px)") assumes tiles already rotated 45deg into diamonds; ours are plain
* square photos arranged INTO a diamond layout (not individually rotated), so adding the
* rotate on hover would suddenly turn a square photo into a diamond rather than lift it.
* translateY-only is the faithful equivalent for this shape. */
.hero__collage-photo{transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.hero__collage-photo:hover{transform:translateY(-6px)}
/* --- split: two-column media/text (the "become a centre" / "why airway" pattern) ------- */
.split{position:relative;display:grid;gap:var(--cd-6);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:900px){
.split{grid-template-columns:minmax(0,min(620px,100%)) minmax(0,1fr);gap:var(--cd-8)}
.split--reverse{grid-template-columns:minmax(0,1fr) minmax(0,min(620px,100%))}
/* --narrow: first column shrinks to a label/prompt width instead of the 620px media
cap, second column takes the rest (the FAQ section's "Before you register" prompt
beside its accordion list, docs/design-source/homepage-template.html, search
"FAQ + CTA"). --top overrides .split's default vertical centering for a short
prompt beside a much taller column. */
.split--narrow{grid-template-columns:minmax(0,min(340px,100%)) minmax(0,1fr)}
/* --even: two equal columns (course "Who is this designed for": copy beside a video
gallery that needs half the panel for its player and a full thumbnail strip). */
.split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.split--top{align-items:start}
.split__media{position:relative;min-width:0}
.split__content{display:flex;flex-direction:column;gap:var(--cd-5);min-width:0}
/* --- bleed: masked full-bleed photo behind a dark section, content grid on top -----------
* Ported from three identical inline patterns across both design templates (Become a
* Centre / homepage-template.html "BECOME A CENTRE"; Pediatric Airway and Why / patients-
* template.html "PEDIATRIC AIRWAY" and "WHY / GLOBAL KNOWLEDGE" - search "mask-image:linear
* -gradient(to right,rgb(0 0 0" for the shared gradient stops). Pair with .section--deep.
* on-dark and a .split for the content grid (its second column stays an empty aria-hidden
* spacer; the photo is the section's own background, not a boxed .split__media). --reverse
* flips both the photo to the opposite edge and its mask/scrim direction, for a section
* whose content sits on the right instead of the left.
* ----------------------------------------------------------------------------------------- */
.bleed{position:relative;overflow:hidden;isolation:isolate}
.bleed__photo{
position:absolute;inset:0 0 0 30%;z-index:-2;
background-image:var(--media);background-size:cover;background-position:center;
-webkit-mask-image:linear-gradient(to right,rgb(0 0 0 / 0) 0%,rgb(0 0 0 / .35) 22%,rgb(0 0 0 / .85) 48%,rgb(0 0 0 / 1) 70%);
mask-image:linear-gradient(to right,rgb(0 0 0 / 0) 0%,rgb(0 0 0 / .35) 22%,rgb(0 0 0 / .85) 48%,rgb(0 0 0 / 1) 70%);
}
.bleed__scrim{
position:absolute;inset:0;z-index:-1;
background-image:linear-gradient(to right,var(--cd-ground-deep) 0%,color-mix(in srgb,var(--cd-ground-deeper) 92%,transparent) 34%,color-mix(in srgb,var(--cd-ground-deeper) 62%,transparent) 58%,color-mix(in srgb,var(--cd-ground-deeper) 45%,transparent) 100%);
}
.bleed--reverse .bleed__photo{
inset:0 30% 0 0;
-webkit-mask-image:linear-gradient(to left,rgb(0 0 0 / 0) 0%,rgb(0 0 0 / .35) 22%,rgb(0 0 0 / .85) 48%,rgb(0 0 0 / 1) 70%);
mask-image:linear-gradient(to left,rgb(0 0 0 / 0) 0%,rgb(0 0 0 / .35) 22%,rgb(0 0 0 / .85) 48%,rgb(0 0 0 / 1) 70%);
}
.bleed--reverse .bleed__scrim{
background-image:linear-gradient(to left,var(--cd-ground-deep) 0%,color-mix(in srgb,var(--cd-ground-deeper) 92%,transparent) 34%,color-mix(in srgb,var(--cd-ground-deeper) 62%,transparent) 58%,color-mix(in srgb,var(--cd-ground-deeper) 45%,transparent) 100%);
}
/* --- section--photo + panel: a deep content panel inset over a full-bleed photo ---------
* The live course pages' "Who is this designed for" section: a classroom photo fills the
* section, dimmed, and a deep-green panel sits over it holding the two-column content.
* The photo is --media on the section (style="--media:url('...')").
* ----------------------------------------------------------------------------------------- */
.section--photo{position:relative;isolation:isolate;background:var(--cd-ground-deep) var(--media) center/cover no-repeat}
.section--photo::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--cd-ground-deeper) var(--scrim,45%),transparent)}
/* --scrim sets how much the photo is dimmed (default 45%, enough under a .panel). --strong is
for copy set straight on the photo with no panel (course "Reserve your seat"): ~74% keeps
white headings and form text readable over a busy photo. */
.section--photo--strong{--scrim:74%}
.panel{border-radius:var(--cd-r-lg);padding:clamp(var(--cd-5),4vw,var(--cd-7));background:var(--cd-ground-deep);box-shadow:var(--cd-shadow-2)}
/* --- hero--cutout: a cut-out photo standing on the band below (home) --------------------
* The figures in the photo run to its bottom edge, so the hero drops its bottom padding and
* the media column sits on the grid's bottom edge: the photo meets the next section's top
* edge with no gap (the home page follows it with the deep contact banner). The copy
* column keeps its own bottom spacing. Below 900px the copy comes first and the photo
* follows it, still on the hero's bottom edge. .hero__bg/.hero__bg-wash are untouched.
* ::before is the brand mark (assets/img/tmj-mark.svg, used as a mask so the kit's brand
* ink paints it) as a watermark behind the figures: inside .hero__media's own stacking
* context (position:relative;z-index:1), so z-index:-1 puts it under the photo but still
* above the hero's background layers. No parallax here: a transform would lift the photo
* off the band.
* ----------------------------------------------------------------------------------------- */
.hero--cutout{padding-bottom:0}
.hero--cutout .hero__media--cutout{order:0;align-self:end}
.hero__media--cutout img{display:block;max-width:640px}
/* The brand-mark watermark is shared by the home cutout and the course heroes
* (.hero__media--mark): one rule, so the two can never drift to different artwork. */
.hero__media--cutout::before,
.hero__media--mark::before{
content:"";position:absolute;z-index:-1;left:50%;top:48%;width:min(88%,560px);aspect-ratio:61.52 / 60.2;
transform:translate(-50%,-50%);pointer-events:none;
background-color:var(--cd-ink-brand);opacity:.16;
-webkit-mask:url('../../img/tmj-mark.svg') center / contain no-repeat;
mask:url('../../img/tmj-mark.svg') center / contain no-repeat;
}
@media (min-width:900px){
.hero--cutout .hero__content{padding-bottom:var(--cd-7)}
}
/* --- hero--course: a course page hero (live Mini Residency Toronto) ---------------------
* Copy + registration on the left, a cut-out photo over the brand mark on the right.
* .hero__head (ribbon, eyebrow, H1) and .hero__body (lede, registration, note) are the two
* halves of .hero__content; below 900px .hero__content dissolves (display:contents) so the
* photo can sit BETWEEN them (headline, photo, then lede and form), centered, as the live
* page does on phones.
* ----------------------------------------------------------------------------------------- */
.hero--course{padding-bottom:var(--cd-6)}
.hero__head,.hero__body{display:flex;flex-direction:column;gap:var(--cd-4)}
.hero__media--mark{align-items:flex-end}
.hero--course .hero__media img.hero__photo{width:100%;height:auto;max-width:620px}
@media (max-width:899px){
.hero--course .hero__grid{display:flex;flex-direction:column;gap:var(--cd-5)}
.hero--course .hero__content{display:contents}
.hero--course .hero__head{order:1;align-items:center;text-align:center}
.hero--course .btn-row{justify-content:center}
.hero--course .hero__media{order:2}
.hero--course .hero__body{order:3;align-items:center;text-align:center}
}
/* A course hero with a cut-out photo (.hero--cutout, Pediatric OSA): the figures stand on the
hero's bottom edge like the home cutout, so on phones the photo comes last (after the
lede and registration) instead of between the headline and the lede. */
.hero--course.hero--cutout{padding-bottom:0}
@media (max-width:899px){.hero--course.hero--cutout .hero__media{order:4}}
/* --- hero__media--diamond: a cut-out photo on the brand diamond ----------------------------
* The CSS twin of the diamond baked into home/hero-photo.webp (Toronto, For Doctors): a solid
* teal square turned 45deg with two thin outline diamonds around it, so any transparent
* cut-out can sit on the same frame without a pre-composed image. .diamond-frame wraps the
* and sizes the diamond to the photo, not to the column; the media column centres it
* vertically against the copy. Markup:
*
* ----------------------------------------------------------------------------------------- */
.hero__media--diamond{align-items:center;align-self:center}
/* padding-block (a % of the width) makes room above and below a wide photo for the diamond's
full height, so on phones the frame never runs into the headline or the lede. */
.diamond-frame{position:relative;display:block;width:100%;max-width:620px;margin-inline:auto;padding-block:16%;isolation:isolate}
.diamond-frame::before,
.diamond-frame::after{
content:"";position:absolute;z-index:-1;left:50%;top:50%;aspect-ratio:1;pointer-events:none;
transform:translate(-50%,-50%) rotate(45deg);
}
.diamond-frame::before{width:var(--diamond-size,62%);background:var(--cd-teal-500)}
.diamond-frame::after{
width:calc(var(--diamond-size,62%) + 6%);
border:1.5px solid var(--cd-teal-500);outline:1px solid var(--cd-teal-300);outline-offset:10px;
}
.diamond-frame img{position:relative;display:block;width:100%;height:auto}
/* --- section--side-photo: a photo filling the right half behind the section's content ---
* The head sits in the left half and the rest of the content (a card row) flows over the
* photo's lower part, so the photo reads as a backdrop, not a column (Pediatric OSA "What is
* a Pediatric OSA Course?"). Meant for a photo that already fades to the section ground at
* its edges. The photo is positioned against the container (the content width), not the
* full-bleed section, so its right edge lines up with the cards. Below 900px it is a
* centered picture above the head instead. Markup:
*
*
...
...cards...
*
* ----------------------------------------------------------------------------------------- */
.section--side-photo{overflow:hidden}
.section--side-photo > .container{position:relative;isolation:isolate}
.section__side-photo{display:block;width:min(100%,420px);height:auto;margin:0 auto var(--cd-5)}
@media (min-width:900px){
.section__side-photo{position:absolute;z-index:-1;top:0;right:0;width:50%;max-width:760px;margin:0}
.section--side-photo .section-head{max-width:50%}
.section--side-photo .section-head + *{margin-top:var(--cd-8)}
}
/* hero__media--cover: a book or product cover beside the hero copy (Buy the Book): kept to a
cover's natural size, centred against the copy, with a card shadow. */
.hero__media--cover{align-items:center}
.hero__media--cover img{width:100%;max-width:220px;height:auto;border-radius:var(--cd-r-sm);box-shadow:var(--cd-shadow-2)}
@media (min-width:900px){.hero__media--cover img{max-width:340px}}
/* hero__media--card: a kit card, form, stats block or testimonial (not a photo) filling the
* hero's right column, for a page whose strongest right-hand content is functional rather
* than pictorial (a contact card, a signup form, a next-steps card, a stats card, a featured
* quote/video). Stretches its child to the column's full width instead of flex-centering a
* fixed-size image; the child supplies its own padding/background (.card, .card--tint, ...). */
.hero__media--card{align-items:stretch;width:100%}
.hero__media--card > *{width:100%}
/* split__photo: a framed photo filling a .split__media column (course pages' "What is MNRT"
* style image-beside-copy rows). */
.split__photo{display:block;width:100%;height:auto;border-radius:var(--cd-r-lg);box-shadow:var(--cd-shadow-2)}
/* split__mosaic: several framed photos filling a .split__media column beside long copy
* (The Olmos System's "What it is"): the first spans the full width at 16:10, the rest sit
* two across as squares. Images are cropped by object-fit, so any source shape works. */
.split__mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cd-4)}
.split__mosaic img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--cd-r-lg);box-shadow:var(--cd-shadow-2)}
.split__mosaic img:first-child{grid-column:1 / -1;aspect-ratio:16 / 10}
/* Brand lead-in inside a hero H1 (home page): the eyebrow's look, on its own line, spaced from the
headline like the separate eyebrow paragraph it replaced (.hero__content gap). */
.hero__content h1 .hero__brand{display:block;margin-bottom:var(--cd-5);font-family:var(--cd-font);line-height:1.4}
/* Hero photo that fades out toward the bottom, so a cut-out figure melts into the band below it
(Mini Residency hero above the contact banner; the old in-person page's photo did the same).
Same curve family as .hero__bg. */
.hero__media--fade img{
-webkit-mask-image:linear-gradient(to bottom,rgb(0 0 0 / 1) 0%,rgb(0 0 0 / 1) 58%,rgb(0 0 0 / .45) 82%,rgb(0 0 0 / 0) 100%);
mask-image:linear-gradient(to bottom,rgb(0 0 0 / 1) 0%,rgb(0 0 0 / 1) 58%,rgb(0 0 0 / .45) 82%,rgb(0 0 0 / 0) 100%);
}