/*
  FILE: thekey.css
  PURPOSE: Styles specific to The Key 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). The Final designs section
  reuses project.css's .project-showcase pattern (already built for
  SPYSCAPE Museum) almost as-is, this file covers: a heading-less
  row-group section (Final designs has one overall title instead of
  one per zone), a fix for <picture> elements (needed for 3 of the
  Final designs images' mobile crops) breaking inside a flex row, the
  homepage/logo/photo/pricing row treatments (fixed sizes, centring,
  vertical dashed dividers on desktop, horizontal ones on mobile), the
  desktop-only Full size image treatment, and the height cap on
  Release and feedback's image.
*/

/* ---- Section, Full size image: fixed height, padded, centred (desktop),
   unmasked with 30px side padding (mobile) ---- */
@media (min-width: 769px) {
  /* Per the brief: 40px side padding, a fixed 600px section height,
     image centred inside it. */
  .thekey-full-size {
    height: 600px;
    padding: 0 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  /* Same <picture> unwrapping technique as the Final designs grid
     below, needed here too since the image sits inside a flex
     container (this wrapper) via a <picture> for its mobile crop. */
  .thekey-full-size picture {
    display: contents;
  }

  .thekey-full-size .project-full-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
}

@media (max-width: 768px) {
  /* Per the brief: the shared .project-full-image mobile rule (see
     project.css) masks this to a fixed 296px height, cropping the
     portrait mobile image. height: auto shows it in full instead, and
     30px side padding is added since this section otherwise sits edge
     to edge with no padding at all. */
  .thekey-full-size {
    padding: 0 30px;
    box-sizing: border-box;
  }

  .thekey-full-size .project-full-image {
    height: auto;
    object-fit: initial;
  }
}

/* ---- Section, Final designs: row-groups with no heading of their own ---- */
/* .project-showcase__grid normally sits below a .project-showcase__heading
   and carries its own 30px top margin for that gap (see project.css).
   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 (same fix chabad.css made for its own
   headingless gallery section). */
.thekey-final__row-section .project-showcase__grid {
  margin-top: 0;
}

/* Per the brief: the gap between the title and the first row-group
   should be 50px, at every width. Padding can't go negative, so the
   title's own bottom padding is zeroed, letting its H2's own 15px
   bottom margin (.project-copy__title, shared) collapse through and
   sit right after the title text instead of being absorbed by
   padding. The first row's top padding then only needs to make up the
   remaining 35px (15 + 35 = 50). */
.thekey-final__title-section {
  padding-bottom: 0;
}

.thekey-final__row-1 {
  padding-top: 35px;
}

/* 3 of the Final designs images (10, 11, 12) have a dedicated mobile
   crop, wired up via <picture><source media="(max-width: 768px)">. A
   plain <picture> breaks inside a flex row/grid though: the <picture>
   itself becomes the actual flex item instead of the <img> inside it,
   so any flex-basis/flex-grow/height sizing meant for the image gets
   applied to the wrong element. display: contents makes the <picture>
   invisible to layout, so its <img> becomes the real flex item, and
   <source> (normally invisible on its own, but exposed as a real
   element by that same display: contents on its parent) is hidden
   explicitly so it doesn't add a phantom empty grid/row item. Same fix
   already proven on chabad.css's .project-final-design__row picture. */
.project-showcase__grid picture {
  display: contents;
}

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

/* ---- Row 1: homepage screenshot ---- */
/* Desktop and mobile now show different images entirely, per
   Lucrecia's request: desktop uses one combined image with both the
   laptop and phone mockups already composed together in a single
   graphic (replacing the previous two separate laptop/phone crops,
   which needed their own flex-ratio math to line up); mobile is
   unchanged, still just the laptop crop alone, full width -- the
   previous phone crop was already hidden on mobile before this
   change, so nothing there was lost. */
.thekey-final__hero-row img {
  height: auto;
  aspect-ratio: auto;
  border-radius: var(--radius-image);
}

/* display set directly on each image below via a 2-class selector, not
   on the shared "img" rule above -- both this row's own img rule and
   project.css's .project-showcase__grid img rule set width/display at
   class+type specificity, which beats a plain single-class selector
   regardless of media query, so a single class here isn't enough to
   win the cascade. */
.thekey-final__hero-row .thekey-final__img1 {
  display: block;
  width: 100%;
}

.thekey-final__hero-row .thekey-final__hero-desktop {
  display: none;
}

@media (min-width: 769px) {
  .thekey-final__hero-row .thekey-final__img1 {
    display: none;
  }

  /* Same 50px inset the old two-image group had on both its outer
     edges, kept for the new single image so it lines up the same way
     against the rest of the page. */
  .thekey-final__hero-row .thekey-final__hero-desktop {
    display: block;
    width: calc(100% - 100px);
    margin: 0 50px;
  }
}

/* ---- Row 2: the 4 "K" logo marks ---- */
/* Desktop per the brief: 170px tall each, 120px apart, and the
   4-image group centred as a whole within the section rather than
   stretched to fill it (the default .project-showcase__row/img
   behaviour). Fixed height + width: auto (not the shared square/cover
   treatment) so each mark keeps its own real proportions. */
.thekey-final__logos-row img {
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
}

@media (min-width: 769px) {
  .thekey-final__logos-row {
    justify-content: center;
    gap: 120px;
  }

  /* 170px is the max, not a flat value: found while checking this
     round's other feedback, not something reported, but the same bug
     as rows 1/3/5 above, a fixed height with no-shrink was overflowing
     the page below roughly 1215px wide (4 marks + 3 fixed 120px gaps
     needed more width than the row had). min() shrinks the height only
     once the viewport actually needs it to. 442px = 80px section side
     padding + 2px page border + the 3 gaps' 360px; 3.3753 = the 4
     marks' real aspect ratios added together (~0.845 each), recalculate
     both if the images, their count, or the 120px gap ever change. */
  .thekey-final__logos-row img {
    flex: 0 0 auto;
    height: min(170px, calc((min(100vw, 1200px) - 442px) / 3.3753));
    width: auto;
  }
}

/* Mobile per the brief: a 2x2 grid instead of one column, so 2 marks
   share each row with spacing between them and the section's own side
   padding. */
@media (max-width: 768px) {
  /* Per the brief: 40px between the first and second row of marks
     (row-gap), the 20px between the 2 marks on the same row
     (column-gap) is unchanged. */
  .thekey-final__logos-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 20px;
  }

  /* Per the brief: 130px tall each, own real width (not stretched to
     fill the grid cell), centred within its cell. */
  .thekey-final__logos-row img {
    height: 130px;
    width: auto;
    justify-self: center;
  }
}

/* ---- Vertical dashed dividers (row 3 and row 5, desktop) ---- */
/* Per the brief: a vertical dashed line between the 2 images in each
   of these row-groups, stretching the full height of the section (so
   it visually touches the horizontal dashed dividers directly above
   and below). position: relative on the section + position: absolute,
   top: 0, bottom: 0 on the divider achieves that: the section's own
   top/bottom edges already sit flush against those horizontal
   dividers, so the vertical line's ends land right at them too. left:
   50% centres it against the SECTION's own width, which lines up with
   the row's visual centre too since both images inside sit
   symmetrically around it either way (flex-filled evenly in row 3,
   centred as a pair in row 5). Desktop only, mobile uses a horizontal
   divider instead (see further down). */
@media (min-width: 769px) {
  .thekey-final__vdivider-section {
    position: relative;
  }

  .thekey-final__vdivider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 0;
    border-left: 1px dashed var(--color-text-dark);
  }

  /* Row 5's pair isn't symmetric (the pricing cards image ends up much
     wider than the icon strip at a shared height, ~669px vs ~81px at
     the full 480px), so centering the PAIR as a group (see
     .thekey-final__pricing-row below) does NOT put the gap between
     them at the section's own 50% mark, unlike row 3's now-equal-width
     pair below. The gap's true centre sits at (cards width − icons
     width) / 2 to the right of the section's centre, which works out
     to the shared image height × 0.6122 (half the two images' real
     aspect ratios, 1.3935 and 0.1692, subtracted). The height itself
     isn't a flat 480px any more (see .thekey-final__pricing-row img
     below, same min() formula repeated here so the offset always
     matches whatever height that resolves to at the current viewport). */
  .thekey-final__vdivider--pricing {
    left: calc(50% + min(480px, calc((min(100vw, 1200px) - 262px) / 1.5627)) * 0.6122);
  }

  /* Row 3's images are equal-width columns now (see img7/img8 below),
     so the gap between them always sits at exactly the section's own
     50% mark, no override needed, unlike the pricing divider above
     (whose pair isn't equal-width). */
}

@media (max-width: 768px) {
  /* Vertical dividers don't make sense once the pair stacks into a
     single column, see the horizontal replacements below instead. */
  .thekey-final__vdivider {
    display: none;
  }
}

/* ---- Row 3: child photo + personalised dashboard, equal-width columns (desktop) ---- */
/* object-fit: contain here (instead of the shared square-crop default)
   matters once these become equal-width columns below: each image
   keeps its own real proportions instead of being cropped to match
   the other's shape. */
img.thekey-final__img7,
img.thekey-final__img8 {
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: var(--radius-image);
}

@media (min-width: 769px) {
  /* Equal flex-grow (not proportional to their real aspect ratios like
     row 1 above) so both columns are exactly the same WIDTH, that's
     what makes the vertical divider between them land in the exact
     middle of the section, per the brief. Each image's own height then
     follows from its own aspect ratio at that shared width, the two
     end up close enough (~549px vs ~539px given these images' real
     proportions) to read as the same height without needing to force
     it, unlike a mismatched-width pair like row 5's pricing/icons. */
  img.thekey-final__img7,
  img.thekey-final__img8 {
    flex: 1 1 0;
    width: auto;
    height: auto;
  }

  /* Per the brief: image 8 (the dashboard) reduced by 10%. transform
     keeps its own box the same size (so the divider above, which
     depends on both columns staying equal width, doesn't move), just
     paints the image smaller within it, centred by default since
     transform-origin is the box's own centre. */
  img.thekey-final__img8 {
    transform: scale(0.9);
  }
}

/* ---- Row 5: pricing tier cards + benefit icons ---- */
.thekey-final__pricing-row img {
  aspect-ratio: auto;
  object-fit: contain;
}

@media (min-width: 769px) {
  /* Per the brief: both images 480px tall (instead of flex-fill to the
     row's full width), with 90px between each image and the vertical
     divider between them (180px gap total, divider sits centred in
     the middle of it, see .thekey-final__vdivider--pricing above).
     Centred as a pair, same reasoning as the logo row above:
     fixed-size content shouldn't default to flex-start alignment when
     the row has spare width left over. */
  .thekey-final__pricing-row {
    justify-content: center;
    gap: 180px;
  }

  /* 480px is the max, not a flat value: at 480px tall the pair plus
     the 180px gap needs more width than the row has below roughly
     1012px wide, which used to overflow the page (found while
     checking this round's other feedback, not something reported).
     The min() shrinks the height only once the viewport actually
     needs it to, same technique already used on the Release and
     feedback image below. 262px = 80px section side padding + 2px
     page border + the 180px gap itself; 1.5627 = the two images' real
     aspect ratios added together (1.3935 + 0.1692), recalculate both
     if either image or the 180px gap ever changes. */
  .thekey-final__pricing-row img {
    flex: 0 0 auto;
    height: min(480px, calc((min(100vw, 1200px) - 262px) / 1.5627));
    width: auto;
  }
}

/* ---- Horizontal dashed dividers between rows 3's and 5's pair (mobile) ---- */
/* Per the brief: a dashed separator between images 7/8 and between
   10/11 once they stack on mobile. A border-bottom on the FIRST image
   of each pair achieves this without needing to calculate a middle-
   of-the-gap position the way the desktop vertical dividers do,
   border always sits exactly at that element's own edge regardless of
   either image's height. */
@media (max-width: 768px) {
  /* Per the brief: the same 50px used for every other top/bottom
     section padding on this page (see project.css's mobile "50px
     top/bottom" rule), on both sides of each divider, not the smaller
     ad hoc 20px this used before. Straight ends on the dashed line:
     both images carry the shared rounded-corner radius, which
     otherwise curves the border-bottom along with the image's own
     bottom corners, zeroed only on the bottom corners so the top of
     each image stays rounded. */
  img.thekey-final__img7,
  img.thekey-final__img10 {
    padding-bottom: 50px;
    border-bottom: 1px dashed var(--color-text-dark);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-sizing: border-box;
  }

  /* 40px margin-top + the row's own 10px mobile gap = the same 50px
     as above the line, on images 8 and 11 (the second image of each
     pair). Margin, not padding, since there's no border here to
     attach to, unlike images 7/10's own padding-bottom + border-bottom
     above. */
  img.thekey-final__img8,
  img.thekey-final__img11 {
    margin-top: 40px;
  }
}

/* ---- Sections, Role and A note on development: text flush with the
   top of the image ---- */
/* Per the brief, Role text normally starts 50px below the image's top
   edge (.project-role__copy-spacer in project.css), calibrated for the
   usual ~650px-tall portrait Role photo. This page's Role and A note
   on development images are both shorter/flatter than that (landscape,
   ~410px and ~488px tall respectively), so that same fixed 50px offset
   reads as an oversized gap here. Zeroed out for just these two
   sections (not Release and feedback below, which keeps the shared
   spacing) via this page-specific modifier class, added alongside the
   shared .project-role classes in the HTML. */
.thekey-flush-top .project-role__copy-spacer {
  display: none;
}

/* ---- Sections, Role and A note on development: 5px image radius ---- */
/* Scoped to just these two sections, not Release and feedback below,
   which shares the same .project-role__image class but wasn't part of
   the brief for this change. */
section[aria-labelledby="section-role-title"] .project-role__image,
section[aria-labelledby="section-development-title"] .project-role__image {
  border-radius: 5px;
}

/* ---- Section, Release and feedback: image capped at 460px tall ---- */
/* Overrides the shared .project-role__image sizing (which is width-
   driven, scaling with the viewport) just for this section, desktop
   only. min() keeps the same responsive safety net as the shared rule
   though: at the page's full width this resolves to exactly 460px,
   but if the viewport gets narrow enough that the shared formula would
   produce less than 460px anyway, this shrinks right along with it
   instead of risking an overflow. Scoped to min-width: 769px so it
   doesn't fight the shared mobile rule, which resets Role images to
   full width there. */
@media (min-width: 769px) {
  /* Per the brief: centred in the whole space between the text and the
     section's right padding, treating that entire region as one
     channel to centre within (not the text's usual fixed 30px gap
     from .project-role, plus a separate centred leftover after it,
     which wouldn't read as evenly centred). Zeroing the gap here folds
     it into that channel: flex: 1 then makes the image's own box span
     the channel's full width (instead of just the height-capped
     image's own narrow content width), and object-fit: contain centres
     the actual picture within that box by default, which now means
     centred in the channel as a whole. */
  .thekey-feedback {
    gap: 0;
  }

  .thekey-feedback .project-role__image {
    flex: 1 1 auto;
    width: auto;
    height: min(460px, calc((min(100vw, 1200px) - 112px) * 0.5966));
    object-fit: contain;
  }
}

.thekey-feedback__list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.thekey-feedback__list li {
  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);
}