/*
  FILE: chabad.css
  PURPOSE: Styles specific to the Chabad 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 three new patterns
  this page needed: Basic Seder Kit (a row of 4 icon + title + text
  items), the text + image row used by each of the 4 Final designs
  sub-sections (.project-final-design__row), and the photo gallery
  (.project-gallery), which needed its own padding/corner treatment
  instead of reusing .project-showcase__section as-is. The dashed
  dividers between the Final designs sub-sections and the gallery
  grid/row layout both still reuse the existing .project-showcase
  pattern from project.css (already built for SPYSCAPE Museum).
*/

/* ---- Section, Basic Seder Kit: row of 4 icon + title + text items ---- */
/* New pattern, no existing section on the site does this. Desktop shows
   each item's own icon; mobile swaps in one pre-composed image
   (project-kit__mobile-image, laid out by hand already, all 4 objects
   together) above the 4 stacked captions instead of shrinking 4 icons
   into an unreadable row, see the mobile query below. */
.project-kit {
  padding: 50px 40px;
  box-sizing: border-box;
}

.project-kit__mobile-image {
  display: none; /* shown only at mobile widths, see below */
}

/* Equal-width columns (icon and its caption share the same width,
   since both are just block-level content inside the same column),
   with a real 20px gap between columns. flex: 1 means the 4 columns
   always divide the section's available width between them, at any
   viewport, so this can't overflow the way a fixed pixel width could. */
.project-kit__items {
  margin-top: 30px;
  display: flex;
  gap: 20px;
}

.project-kit__item {
  flex: 1;
  min-width: 0;
}

.project-kit__icon {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.project-kit__item-title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: var(--weight-bold);
  color: var(--color-text-dark);
}

.project-kit__item-text {
  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);
  color: var(--color-text-dark);
}

/* ---- Section, A note on development: text only, no image beside it ---- */
/* Unlike CSA Mobile's "A note on development" (project-role--reverse,
   image + text side by side), Chabad's version is just the title and
   body copy on their own, followed by the supporting sketch image
   (Chabad-full-size-1.jpg) below as its own plain .project-full-image
   section. The text itself is capped to the same width as every other
   "text sits above/beside a full size image" section on this page
   (Role, and the Final designs rows below), reusing the exact same
   responsive width formula project.css's .project-role uses for its
   own text column, so they all line up to the same width convention. */
.project-note {
  padding: 50px 40px;
  box-sizing: border-box;
}

.project-note__copy {
  width: calc((min(100vw, 1200px) - 112px) * 0.4899);
}

/* ---- Section, Final designs: 4 sub-sections split by a dashed line ---- */
/* Each sub-section reuses .project-showcase__section (padding) from
   project.css. Companion book and Board show text on the left, image
   on the right (the default row order below); Cards and Afikomen gift
   show image on the left instead (.project-final-design__row--reverse
   flips it via flex-direction, keeping the same [text, image] markup
   order for all 4, same technique as .project-role--reverse). The
   dashed dividers between sub-sections reuse
   .project-showcase__divider-dashed as-is (there's no divider between
   the "Final designs" title and Companion book, just the 3 between
   the sub-sections themselves). */
.project-final-design__row {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.project-final-design__row--reverse {
  flex-direction: row-reverse;
}

/* Companion book's image sits in a <picture> (it has a dedicated
   mobile crop, see the HTML), the other 3 sub-sections use a plain
   <img> directly. display: contents makes the <picture> invisible to
   layout, so its <img> becomes the row's actual flex item either way,
   and the sizing rules below apply the same regardless of which
   sub-section it is. Without this, the image was sizing itself off
   its own real pixel dimensions instead of the row's available space,
   and overflowing past the page's right edge. */
.project-final-design__row picture {
  display: contents;
}

/* <source> is normally invisible (browsers give it display: none by
   default), but display: contents on its <picture> parent above
   exposes its children as real flex items instead, including this
   one, adding a phantom zero-height item that ate an extra 30px of
   flex gap between the text and the image. Hidden explicitly here to
   stop that. */
.project-final-design__row picture source {
  display: none;
}

/* Same width convention as .project-role's text column and
   .project-note__copy above, so every text block on this page that
   sits beside/above a full image lines up at the same width. */
.project-final-design__row .project-copy {
  flex: 0 0 auto;
  width: calc((min(100vw, 1200px) - 112px) * 0.4899);
}

/* The image takes up whatever's left of the row instead of a fixed
   width, since the 4 sub-sections' images are all different aspect
   ratios (a book mockup, a fanned card deck, a wide placemat, a
   narrow gift card). flex-basis: 0 + flex-grow means it's sized purely
   by the space available, not its own intrinsic size, and height:
   auto (inherited from the plain .project-final-design__image rule
   below) keeps it from distorting. */
.project-final-design__row .project-final-design__image {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  margin-top: 0; /* only the stacked full-width images below need the 30px top gap, not images already spaced by the row's own 30px gap */
}

.project-final-design__image {
  display: block;
  margin-top: 30px;
  width: 100%;
  height: auto;
  border-radius: var(--radius-image);
}

/* ---- Section, Grid of images: own padding/corners, not
   .project-showcase__section's ---- */
/* Desktop: no padding at all, images run edge to edge within the
   page's own 1200px outline, and square corners instead of the
   shared rounded --radius-image ones. Existing 20px gap between
   images (.project-showcase__grid/__row in project.css) is untouched,
   so the spacing between photos stays the same, only the outer inset
   and corners change. */
.project-gallery {
  padding: 0;
  box-sizing: border-box;
}

/* .project-showcase__grid normally sits below a heading (see the Final
   designs zones on SPYSCAPE Museum) and carries its own 30px top
   margin for that gap. This section has no heading, so that margin
   would leave an unwanted 30px gap above the first photo even with
   the section's own padding zeroed out above (and would double up
   with the mobile padding below), zeroed out here instead so this
   section's own padding is the only source of top/bottom spacing. */
.project-gallery .project-showcase__grid {
  margin-top: 0;
}

.project-gallery .project-showcase__grid img {
  border-radius: 0;
}

/* ---- Mobile (768px and narrower) ---- */
@media (max-width: 768px) {
  .project-kit,
  .project-note {
    padding: 50px 20px;
  }

  .project-kit__mobile-image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 30px;
  }

  .project-kit__icon {
    display: none;
  }

  .project-kit__items {
    flex-direction: column;
    gap: 30px;
  }

  /* Per the brief: captions restack as 6 special foods, Wine, Haggadah,
     Matzah. DOM order stays [6 special foods, Wine, Matzah, Haggadah]
     (matches the desktop icon row, unaffected by this), only the
     mobile stacking order changes, via the flex order property rather
     than physically reordering the HTML. */
  .project-kit__items > *:nth-child(1) {
    order: 1; /* 6 special foods */
  }

  .project-kit__items > *:nth-child(2) {
    order: 2; /* Wine */
  }

  .project-kit__items > *:nth-child(3) {
    order: 4; /* Matzah */
  }

  .project-kit__items > *:nth-child(4) {
    order: 3; /* Haggadah */
  }

  .project-note__copy {
    width: auto;
  }

  /* Per the brief: mobile always stacks text above image, regardless
     of which sub-section is a --reverse (image-left) one on desktop. */
  .project-final-design__row,
  .project-final-design__row--reverse {
    flex-direction: column;
  }

  .project-final-design__row .project-copy {
    width: auto;
  }

  /* Width only here, no margin-top: the row itself already has a 30px
     gap (see .project-final-design__row above), which applies to the
     stacked column direction too, adding a separate margin-top on top
     of that would double it to 60px. */
  .project-final-design__row .project-final-design__image {
    width: 100%;
  }

  /* Final designs 2 (the second Companion book image, stacked below
     its text+image row) is desktop only. */
  .project-final-design__image--hide-mobile {
    display: none;
  }

  /* No padding, per Lucrecia's request: same edge-to-edge look as
     desktop now (was 30px top/bottom, 20px sides). */
  .project-gallery {
    padding: 0;
  }
}

/* ---- Role image: 5px corner radius, per Lucrecia's request ---- */
.project-role__image {
  border-radius: 5px;
}

/* ---- Final designs title: 50px gap to the dashed divider below it ---- */
/* Scoped to just this title section, since .project-showcase__section
   is shared by every other sub-section on this page. The section's
   own padding-bottom (shared rule: 50px) sits below the H2's own 15px
   margin-bottom (shared, .project-copy__title), a nonzero padding
   safely contains that margin rather than letting it collapse through,
   so the two simply add: reducing padding-bottom to 35px here gives
   15 + 35 = 50px total, no change needed on the divider itself.
   Specificity beats both the shared desktop rule and the mobile
   media-query override, so this applies at every width. */
section[aria-labelledby="section-final-designs-title"] {
  padding-bottom: 35px;
}