/*
  FILE: mateset.css
  PURPOSE: Styles specific to the Yerba Mate Set project page only, not
  reused by any other project (see project.css for the shared patterns
  every project page uses: header/Role/full-size image/Collaborators/
  Similar projects/etc, linked before this file). Covers: the Intro
  section's vertically-centred text, the Full size image section's
  inset padding, the "A note on development" section (text stacked
  above the image instead of beside it, overlaid slightly, a new
  pattern for this site), the Design section's fixed-height image, a
  heading-less row-group section for Final designs with edge-to-edge
  images (same idea as thekey.css/dfg.css, plus this page's own
  edge-to-edge/no-radius/wider-gap treatment), a fix for <picture>
  elements breaking inside a flex row (same fix as those 2 files), and
  the Conclusion section's image + customer quote stack.
*/

/* ---- Section, Intro: text vertically centred instead of a fixed 50px
   top offset ---- */
/* Every other .project-role section on the site starts its text 50px
   below the top of the image (see .project-role__copy-spacer in
   project.css), Intro centres it against the image's height instead,
   per Lucrecia's request. Scoped to desktop only: on mobile the image
   and text stack instead of sitting side by side, so there's no shared
   height left to centre within, project.css's own mobile rule already
   hides the spacer there. */
@media (min-width: 769px) {
  .mateset-intro {
    align-items: center;
  }

  .mateset-intro .project-role__copy-spacer {
    display: none;
  }

  /* "Container" read as the whole section box, not just the image: the
     section has a standard 50px top/bottom padding (.project-role,
     project.css), so the section's own height = image height + 100px.
     Capping the image at 500px makes the section total exactly 600px.
     width: auto lets the image shrink proportionally rather than being
     squashed. max-width repeats the same fix as
     .mateset-conclusion__image-col last round: a height-only cap doesn't
     shrink further as the viewport narrows the way the shared width
     formula does, so without it this would overflow the page at
     intermediate viewport widths (confirmed with a fine-grained sweep
     after the first pass missed a gap between two tested breakpoints).
     Capping width to the same formula the row's own sizing is based on
     means whichever constraint is tighter wins, so it can never
     overflow, while still landing at a clean 600px section on any
     normal desktop width. */
  .mateset-intro__image {
    max-height: 500px;
    width: auto;
    max-width: calc((min(100vw, 1200px) - 112px) * 0.5101);
  }

  /* Same bug and same fix as .mateset-design further down: row-reverse's
     justify-content: flex-end packs the [copy, image] group toward the
     LEFT, so once the image was capped narrower than the row, it ended
     up sitting next to the text instead of against the section's right
     edge. space-between pushes text flush-left and image flush-right. */
  .mateset-intro {
    justify-content: space-between;
  }
}

/* ---- Section, Full size image: inset on all sides ---- */
/* Every other full-width image on this page (and every "Full size
   image" section on every other project page) is deliberately edge to
   edge, this one is the one exception, per Lucrecia's request. Exact
   padding wasn't specified, matched to the site's standard 50px/40px
   section padding for consistency, flag if a different amount was
   wanted. */
.mateset-full-size {
  padding: 50px 40px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .mateset-full-size {
    padding: 50px 20px;
  }

  /* Every "Full size image" section on every project page masks its
     mobile image to a fixed 296px crop (see .project-full-image's mobile
     rule in project.css), this is the one exception per feedback: shows
     the whole image uncropped instead, same technique already used
     elsewhere on the site (The Key, DfG) for this exact request. */
  .mateset-full-size .project-full-image {
    height: auto;
    object-fit: initial;
  }
}

/* ---- Section, A note on development: desktop is now text beside
   image 1, then image 2 full width directly below with 0px gap ---- */
/* Used to be a single image with the text stacked above it, overlapping
   slightly (see git history) -- that one image didn't resize well, so
   Lucrecia split it into 2. Desktop only, mobile keeps its own separate
   single image + stacked layout below, unchanged from before. */
.mateset-development {
  padding: 50px 40px 0;
  box-sizing: border-box;
}

.mateset-development__row {
  display: flex;
  align-items: flex-start;
  gap: 30px; /* matches .project-role's own text+image gap elsewhere on the site, not specified otherwise so borrowed for consistency, flag if a different gap was wanted */
}

.mateset-development__copy {
  max-width: 500px;
  flex-shrink: 0;
}

/* Wrapper (not the <img> itself) so it can act as a container query
   subject -- establishes inline-size containment here, on the PARENT,
   so the <img>'s own height: calc() below can reference it via cqw
   with no circularity. (Putting both the containment AND the cqw
   height calc on the SAME element resolves the container's own inline
   size against the viewport instead, since that element's height
   would depend on a containment size that itself isn't settled yet --
   confirmed while testing this, the numbers matched 100vw, not this
   element's actual ~588px rendered width, until split like this.)
   aspect-ratio alone can express a proportional height, but not
   "proportional height minus a fixed 30px" -- cqw lets the calc()
   reference the container's resolved inline size (fluid, matches
   whatever the flex row gives it) the same way a percentage would,
   but usable inside a calc alongside a flat px subtraction, which
   percentages alone can't do relative to width for a height property.
   1058/876 is mate-development-desktop-1.png's real intrinsic size. */
.mateset-development__image-mask {
  flex: 1;
  min-width: 0;
  container-type: inline-size;
  overflow: hidden;
}

.mateset-development__image--1 {
  display: block;
  width: 100%;
  height: calc(100cqw * 876 / 1058 - 30px);
  object-fit: cover;
  object-position: bottom; /* crops the TOP 30px away, keeps the bottom of the photo visible */
}

/* Bleeds past this section's 40px side padding to reach the full page
   width, same escape-hatch technique used below for the mobile image.
   0 margin/padding here plus the section's own 0 bottom padding above
   is what gives the literal 0px gap Lucrecia asked for between this
   and the row above it. */
.mateset-development__image--2 {
  display: block;
  width: calc(100% + 80px);
  height: auto;
  margin: 0 -40px;
}

.mateset-development__image-mobile {
  display: none; /* shown only on mobile, see below */
}

@media (max-width: 768px) {
  .mateset-development {
    padding: 50px 20px 0;
  }

  .mateset-development__row {
    display: block; /* image 1 is hidden below, no row layout needed */
  }

  .mateset-development__image-mask,
  .mateset-development__image--2 {
    display: none;
  }

  /* Per feedback: plain separation between the text and the image,
     using this page's established 30px mobile spacing unit (also used
     for Leaflet's row-to-image gap). */
  .mateset-development__copy {
    max-width: none;
    margin-bottom: 30px;
  }

  /* Bleeds past the section's 20px side padding to fill the full
     viewport width, same technique as the Leaflet gif. width: auto
     already means the container matches the image's own height exactly. */
  .mateset-development__image-mobile {
    display: block;
    width: calc(100% + 40px);
    margin-left: -20px;
    height: auto;
  }
}

/* ---- Section, Design: image capped at a fixed height instead of the
   shared width formula ---- */
/* Scoped to desktop only, same reasoning as .mateset-intro above: on
   mobile the image already goes back to natural full-width stacking
   (see project.css's mobile rule for .project-role__image), a fixed
   desktop height shouldn't carry over there. width: auto lets it keep
   its own real aspect ratio at that height, rather than stretching.
   .project-role--reverse's justify-content: flex-end (already set)
   collects the leftover space this creates between text and image, so
   nothing else needs to change. */
@media (min-width: 769px) {
  /* height changed to max-height, and max-width added, as a preventive
     fix: this is the exact same overflow bug just found and fixed on
     .mateset-intro__image below (a height-only cap doesn't shrink
     further at narrower viewports the way the row's own width formula
     does). max-height still renders at a clean 450px on any normal
     desktop width, same as before, it can now also shrink below that
     if the row is ever too narrow to fit it. */
  .mateset-design__image {
    max-height: 450px;
    width: auto;
    max-width: calc((min(100vw, 1200px) - 112px) * 0.5101);
    flex-shrink: 0;
  }

  /* Bug fix, not just a style choice: .project-role--reverse (project.css)
     sets flex-direction: row-reverse + justify-content: flex-end. In a
     row-reverse row, "end" is the LEFT edge (the reversed axis's start is
     on the right), so flex-end packs the [copy, image] group against the
     LEFT, leaving any leftover space stranded on the RIGHT, past the
     image, instead of between the text and the image as intended. This
     only became visible once the image above was capped narrower than
     the row. Scoped to Design only (not the shared rule, which other
     --reverse sections rely on and don't have this complaint):
     space-between pushes text flush-left and image flush-right, with the
     leftover gap landing between them instead. */
  .mateset-design {
    justify-content: space-between;
  }
}

/* Mobile: text before the image, reversing the default DOM-order stacking
   (project.css's mobile rule forces flex-direction: column, which stacks
   children in DOM order regardless of --reverse, so this section would
   otherwise show image-then-text like every other --reverse section).
   order (not reordering the HTML) so desktop's row-reverse visual order,
   which depends on that same DOM order, isn't affected. */
@media (max-width: 768px) {
  .mateset-design .project-copy {
    order: -1;
  }
}

/* ---- The 2 full-width images below the Leaflet section ---- */
/* No extra rules needed for the images themselves (.project-full-image
   already handles full-bleed width/height), this just documents that
   they're deliberately edge to edge like every other Full size image on
   the site, not an oversight. Desktop only: padding above the first
   image and a gap between the two, per feedback. No exact px was given,
   30px matches the Final designs grid gap below for consistency, flag
   if a different amount was wanted. Scoped to desktop since mobile hides
   image 2 entirely (see below), so there's nothing to space out there. */
@media (min-width: 769px) {
  .mateset-leaflet__images {
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
}

/* Same <picture>-inside-flex fix used throughout this file: makes the
   <picture> invisible to layout so the <img> inside is the flex item
   (and its own width: 100% governs sizing), not the <picture> itself. */
.mateset-leaflet__images picture {
  display: contents;
}

.mateset-leaflet__images picture source {
  display: none;
}

/* Mobile: text before the gif, same technique and reasoning as
   .mateset-design above (order instead of reordering the HTML, so
   desktop's row-reverse visual order isn't affected). */
@media (max-width: 768px) {
  .mateset-leaflet .project-copy {
    order: -1;
  }

  /* Image 2 (the design-iterations image) hidden on mobile per feedback,
     image 3 (companion-3, below it) keeps showing its own dedicated
     mobile crop via its existing <picture><source>. */
  .mateset-leaflet__img2 {
    display: none;
  }

  /* Gif widened to bleed past the section's 20px side padding (project.css's
     .project-role mobile rule), per feedback. width: 100% of the padded
     content box + 40px (20px each side) = the full outer width,
     margin-left: -20px shifts it left by exactly that padding so it lands
     flush with both edges instead of only extending past the right one. */
  .mateset-leaflet img.project-role__image {
    width: calc(100% + 40px);
    margin-left: -20px;
  }

  /* Reduces the row's own bottom padding (50px, shared .project-role
     rule) to 30px, per feedback, so the gap between the gif (the row's
     last visible element on mobile, text is now first) and image 3 below
     matches this page's established 30px mobile spacing unit. */
  .mateset-leaflet {
    padding-bottom: 30px;
  }

  /* Bug fix, and a repeat request from last round that wasn't actually
     addressed then: image 3's dedicated mobile crop file was wired up
     correctly, but nothing overrode the shared .project-full-image mobile
     rule (project.css) that masks every full-width image's mobile view to
     a fixed 296px crop. The mobile crop is its own portrait shape (roughly
     780x1034px), so cropping it to 296px tall was cutting off about half
     of it. Only the picture wrapping image 3 has this fix applied here
     (image 2's plain <img>, hidden above, doesn't need it, matches the
     same technique already used for the Full size image section). */
  .mateset-leaflet__images picture img {
    height: auto;
    object-fit: initial;
  }
}

/* ---- Section, Final designs: row-groups with no heading of their own ---- */
/* Same fix as thekey.css/dfg.css: .project-showcase__grid normally sits
   below a .project-showcase__heading and carries its own 30px top
   margin for that gap, every row-group here is just a bare grid with no
   heading above it, so that margin would leave an unwanted 30px gap at
   the top of each one, zeroed out here instead. */
.mateset-final__row-section .project-showcase__grid {
  margin-top: 0;
}

/* No more page-specific gap override here: used to be a wider 30px
   (desktop only) per the original brief, now matches project.css's
   shared 20px default instead, same as Chabad's own photo grid, per
   Lucrecia's request. Mobile already matched the shared 10px
   convention before this change and still does. */

/* Wraps all 5 row-groups so the SAME gap governs the spacing BETWEEN
   row-groups too, not just between images within one (per feedback:
   spacing was inconsistent, every row-section previously had its own
   50px top/bottom padding, so two adjacent ones added up to a 100px gap
   between them). Each row-section's own vertical padding is zeroed below
   so this wrapper is the only source of that spacing. padding-bottom is
   unscoped (40px on both desktop and mobile, per feedback, no smaller
   mobile figure was given so it matches the desktop value asked for).
   gap and padding-top are scoped per breakpoint below: desktop uses this
   page's own 30px unit and a 40px title gap (reduced from 50px, per
   feedback), mobile uses the sitewide 10px grid-gap convention (see the
   comment above) and keeps its own already-reduced title gap from last
   round. */
.mateset-final__rows {
  display: flex;
  flex-direction: column;
  padding-bottom: 40px;
}

@media (min-width: 769px) {
  /* Gap between row-groups now matches the shared 20px used within a
     single row-group's own grid (see the gap-removal comment above),
     so every vertical gap in Final designs reads as one consistent
     unit instead of some being visibly wider than others. Was 30px. */
  .mateset-final__rows {
    gap: 20px;
    padding-top: 15px; /* was 40px, see .mateset-final__title-section's own comment above */
  }

  /* The one divider that's back, below image 1, per feedback: its own
     margin plus the wrapper's 20px gap add up to 30px above and below
     (20 + 10 = 30), horizontal inset (40px sides) is the same as every
     other dashed divider on the site, unchanged from the shared rule. */
  .mateset-final__divider {
    margin: 10px 40px;
  }
}

@media (max-width: 768px) {
  .mateset-final__rows {
    gap: 10px;
    padding-top: 15px; /* was 25px, see .mateset-final__title-section's own comment above */
  }

  /* Image 4 (the outdoor lifestyle photo) is hidden on mobile per
     feedback, corrects an earlier mix-up where image 1 was hidden
     instead. :has() targets image 4's own row-section so the whole
     (now-empty) section is removed from the flex flow, not just the
     image inside it, that avoids it still contributing an orphan gap
     where it used to be. project.css already uses :has() elsewhere
     (.project-collaborators__list), so this is a proven-safe technique
     for this codebase, not a novel risk. Image 1 and its divider are
     visible on mobile again, the divider just loses its desktop-only
     40px margin override and falls back to the normal mobile 10px
     wrapper gap instead. */
  .mateset-final__row-section:has(.mateset-final__img4) {
    display: none;
  }
}

.mateset-final__row-section {
  padding-top: 0;
  padding-bottom: 0;
}

/* Removes this section's corner rounding entirely (project.css's shared
   .project-showcase__grid img rule gives every image a 10px radius by
   default). Matches "img" in the selector, not just the class alone,
   same specificity reasoning as project.css's own utility overrides. */
.mateset-final__row-section .project-showcase__grid img {
  border-radius: 0;
}

/* Removes the section's own 40px side padding so its image(s) run edge
   to edge, applied to every row except the leaflet front/back row (the
   one row that keeps the normal padding, per the brief, so it's left
   without this class in the HTML). Works at both desktop and mobile
   widths without a media query: this rule loads after project.css's own
   (including its mobile-width padding override), so it wins the
   cascade regardless of which one is currently active. */
.mateset-final__row-section--bleed {
  padding-left: 0;
  padding-right: 0;
}

/* Reduces the title-to-first-image gap to 30px, both breakpoints, per
   Lucrecia's request (previously 40px desktop / 40px mobile, before
   that up to ~100px). Same margin-collapse technique used on other
   project pages (The Key/DfG): zeroing the title section's own bottom
   padding lets its H2's existing 15px margin-bottom
   (.project-copy__title, project.css) collapse through instead of
   stacking underneath a separate padding value -- previously only
   done on mobile, desktop's title-section padding-bottom (50px, from
   the shared .project-showcase__section default) was adding on top of
   .mateset-final__rows's own padding-top uncollapsed, unscoped here
   now so both breakpoints get the same treatment. .mateset-final__rows's
   own padding-top (15px, both breakpoints, set above) makes up the
   remainder: 15 + 15 = 30px total. */
.mateset-final__title-section {
  padding-bottom: 0;
}

/* Image 1: capped and centred on desktop only, per feedback. width: auto
   lets the browser scale it down proportionally once max-height kicks in
   (no distortion/cropping), margin: 0 auto centres the now-narrower image
   horizontally in the row.
   Bug fix: this was previously written as .mateset-final__img1 (a class
   alone, specificity 0,1,0), which loses to project.css's shared
   .project-showcase__grid img rule (0,1,1, class + element type) that
   sets width: 100% and object-fit: cover. width:100% kept winning, so
   max-height clipped a box that no longer matched the image's own ratio,
   and object-fit: cover cropped it to fill that mismatched box: the
   image looked "masked" despite this rule appearing to apply. project.css
   itself already documents this exact trap. Matching "img" in the
   selector fixes it, same fix the shared file's own utility classes use
   throughout. */
@media (min-width: 769px) {
  img.mateset-final__img1 {
    width: auto;
    max-height: 800px;
    margin: 0 auto;
    display: block;
  }
}

/* The shop shelf photo + caption, the one row with a caption underneath
   its image. The <figure> just needs its default browser margin reset,
   the caption text stays inset (unlike the now edge-to-edge image above
   it) so it's never flush with the page's outer border, matching how
   every other block of text on this site always has side padding. */
.mateset-final__figure {
  margin: 0;
}

.mateset-final__caption {
  margin: 15px 40px 0;
  font-family: var(--font-body);
  font-size: var(--font-size-small);
  line-height: 1.4;
  color: var(--color-text-dark);
}

@media (max-width: 768px) {
  .mateset-final__caption {
    margin: 15px 20px 0;
  }
}

/* Same fix as thekey.css/dfg.css: some of the Final designs images have
   a dedicated mobile crop via <picture><source media="(max-width: 768px)">,
   which breaks inside a flex row/grid otherwise (the <picture> itself
   becomes the flex item instead of the <img> inside it). display:
   contents makes the <picture> invisible to layout, <source> is hidden
   explicitly since it becomes a visible phantom flex item once its
   parent is display: contents. */
.project-showcase__grid picture {
  display: contents;
}

.project-showcase__grid picture source {
  display: none;
}

/* ---- Section, Conclusion: image + customer quote stacked below it ---- */
/* Wraps the image and the quote so the quote sits below the image
   specifically (not spanning the whole section), plus an extra element
   stacked underneath. 470px per the brief (used to follow project.css's
   .project-role__image width formula instead, which would give ~555px
   at the page's full 1200px width). A literal fixed 470px overflowed
   the page between roughly 769px and 1033px viewport width, the range
   where the old formula would have been narrower than 470px anyway (a
   plain fixed width can't shrink to make room the way every other
   image column on this site does), confirmed by testing every
   breakpoint. min() keeps it at exactly 470px from 1033px up (matching
   the brief everywhere that matters) and lets it shrink below that,
   same responsive behaviour as the rest of the page. */
.mateset-conclusion__image-col {
  width: min(470px, calc((min(100vw, 1200px) - 112px) * 0.5101));
  flex-shrink: 0;
}

.mateset-conclusion__image-col .project-role__image {
  width: 100%;
}

.mateset-conclusion__quote {
  margin: 20px 0 0;
  padding: 20px 0 0 20px;
  border-left: 2px solid var(--color-text-dark);
}

/* Body font per the brief (was the heading font before, paired with an
   italic "pull quote" look that doesn't read as well against the plain
   body typeface), sized and weighted to match the rest of this page's
   body copy rather than keeping the old heading-scale size. */
.mateset-conclusion__quote p {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-project-body);
  line-height: var(--line-height-project-body);
  font-weight: var(--weight-regular);
  font-style: normal;
  color: var(--color-text-dark);
}

@media (max-width: 768px) {
  .mateset-conclusion__image-col {
    width: 100%;
  }

  /* Text before the image + testimonial on mobile, per feedback, same
     technique as Design/Leaflet above (order instead of reordering the
     HTML, so desktop's row-reverse visual order isn't affected). */
  .mateset-conclusion .project-copy {
    order: -1;
  }
}

/* ---- Role image and Conclusion image: 5px corner radius, per
   Lucrecia's request -- scoped since .project-role__image is also
   shared by the Leaflet section on this page, which wasn't asked for
   the same treatment. ---- */
section[aria-labelledby="section-role-title"] .project-role__image,
.mateset-conclusion__image-col .project-role__image {
  border-radius: 5px;
}