/* SELÈ STUDIO — case pages /projects/<slug>/ (SPEC §5.3, Addendum A7.2). Owner: P2. Prefix: case-.
   Logical properties only; the grid follows dir, so "cols 1–6" is the start side (right in Hebrew).
   Frames get their definite width here (SPEC §3.4); their radii come only from css/base.css. */

.case{ display:block }

/* ------------------------------------------------------------------ 1. hero — full layout (stone-oak-kitchen, dark-oak-bedroom) */
.case-hero--full{ padding-block-start:var(--header-h) }
.case-hero--full .case-hero__figure{ width:100%; max-width:1440px; margin-inline:auto }
.case-hero--full .case-hero__media{ aspect-ratio:4/5 }
@media (min-width:768px){
  .case-hero--full .case-hero__media{ aspect-ratio:auto; block-size:min(82svh, 56vw) }
}

/* the plate + synopsis under a full hero */
.case-intro{ position:relative; z-index:1; row-gap:var(--s-5); padding-block-end:var(--s-6) }
.case-intro > .case-plate, .case-intro > .case-synopsis{ grid-column:1 / -1 }
.case-intro > .case-plate{ padding-block-start:var(--s-5) }
@media (min-width:768px){
  .case-intro > .case-plate{ grid-column:1 / 6 }
  .case-intro > .case-synopsis{ grid-column:6 / -1; padding-block-start:var(--s-6) }
}
@media (min-width:1100px){
  .case-intro{ padding-block-end:var(--s-7) }
  .case-intro > .case-plate{
    grid-column:1 / 7;
    margin-block-start:-96px;                 /* overlaps the image bottom by 96px (SPEC §5.3) */
    margin-inline-start:calc(-1 * var(--margin));
    padding-inline-start:var(--margin);       /* the paper tab bleeds to the viewport edge; the text stays on the grid */
    padding-inline-end:var(--s-5);
    padding-block-start:var(--s-5);
    background:var(--grain) repeat, var(--paper);
  }
  .case-intro > .case-synopsis{ grid-column:8 / -1; padding-block-start:var(--s-7) }
}

/* ------------------------------------------------------------------ 1. hero — split layout (oak-living-room, travertine-bathroom, dark-oak-kitchen) */
.case-hero--split{
  padding-block:calc(var(--header-h) + var(--s-4)) var(--s-6);
  row-gap:var(--s-5);
  align-items:start;
}
.case-hero--split > *{ grid-column:1 / -1 }
.case-hero--split .case-hero__figure{
  width:min(100%, var(--max-w));             /* definite width, capped at 86svh tall (SPEC §5.3) */
  justify-self:end;
}
@media (max-width:1099px){
  .case-hero--split .case-hero__figure{ justify-self:center }
}
@media (min-width:1100px){
  .case-hero--split{ padding-block:calc(var(--header-h) + var(--s-5)) var(--s-7); row-gap:var(--s-6) }
  .case-hero--split .case-hero__figure{ grid-column:6 / -1; grid-row:1 / span 2 }
  .case-hero--split .case-plate{ grid-column:1 / 6; grid-row:1 }
  .case-hero--split .case-synopsis{ grid-column:1 / 6; grid-row:2 }
}

/* ------------------------------------------------------------------ 2. the plate */
.case-plate .crumbs{ margin-block-end:var(--s-4) }
.case-plate__num{
  font-family:var(--f-he-display); font-weight:300;
  font-size:var(--t-mega); line-height:.9;
  color:var(--taupe);                        /* decorative (aria-hidden), SPEC §3.1 */
  margin-block-end:var(--s-3);
}
html[lang="en"] .case-plate__num{ font-family:var(--f-lat-display); font-weight:400; letter-spacing:.01em }
.case-plate__h1{ font-family:var(--f-display); font-weight:300; font-size:var(--t-d1); line-height:1.06 }
.case-plate__h1 > span:first-child{ display:block }
.h1-sub{
  display:block;
  font-family:var(--f-display); font-weight:300; font-size:var(--t-d4); line-height:1.4;
  color:var(--fg-2);
  margin-block-start:var(--s-2);
}
/* EN: --f-display is Bodoni, whose hairlines break apart at --t-d4 ("Li ving"); a sub-line is a text-weight line, so
   it takes the Latin text face (SPEC: Jost 300 for leads >= 20px). */
html[lang="en"] .h1-sub{ font-family:var(--f-lat-text); font-weight:300; letter-spacing:0 }

.case-credits{ margin-block-start:var(--s-5); max-inline-size:34rem; border-block-start:1px solid var(--line) }
.case-credits__row{
  display:grid; grid-template-columns:6.5rem minmax(0, 1fr); column-gap:var(--s-3); align-items:baseline;
  padding-block:12px;
  border-block-end:1px solid var(--line);
}
.case-credits dt{ margin:0 }
.case-credits dd{ margin:0; font-size:var(--t-body); line-height:1.6; color:var(--fg) }

/* ------------------------------------------------------------------ 3. synopsis */
.case-synopsis__lead{
  font-family:var(--f-display); font-weight:400; font-size:var(--t-lead); line-height:1.75;
  color:var(--fg);
  max-inline-size:var(--measure);
}
html[lang="en"] .case-synopsis__lead{ font-family:var(--f-lat-text); font-weight:300 }
.case-synopsis__body{ margin-block-start:var(--s-4); color:var(--fg-2); max-inline-size:var(--measure) }
.case-hero--split .case-synopsis{ max-inline-size:40rem }

/* ------------------------------------------------------------------ related line (Addendum A7.2) */
.case-related{ padding-block:0 var(--s-6) }
.case-related__list{ display:grid; gap:0; border-block:1px solid var(--line) }
.case-related__row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-2) var(--s-4); padding-block:14px }
.case-related__row + .case-related__row{ border-block-start:1px solid var(--rule-soft) }
.case-related dt{ margin:0; min-inline-size:11rem }
.case-related dd{ margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:16px .25em }  /* row-gap: wrapped lines' 44px targets never overlap */
/* 44px touch targets (SPEC §9) without moving the layout or the hairline: the padding grows the hit box
   to 44px, the negative margin gives the space back, and the underline is lifted to the text's own
   baseline (2px under the line box, where .link draws it at rest). */
.case-related .link, .case-next__back .link{
  --tap-pad:max(2px, calc((44px - 1.4em) / 2));
  padding-block:var(--tap-pad); margin-block:calc(2px - var(--tap-pad));
  background-position:left 0 bottom calc(var(--tap-pad) - 2px);
}
.case-related .link::after, .case-next__back .link::after{ inset-block-end:calc(var(--tap-pad) - 2px) }
.case-related__sep{ color:var(--fg-3) }
@media (max-width:767px){
  .case-related__row{ flex-direction:column; align-items:flex-start; gap:6px }
  .case-related dt{ min-inline-size:0 }
}
@media (min-width:768px){
  .case-related__list{ grid-template-columns:1fr 1fr }
  .case-related__row + .case-related__row{ border-block-start:0; border-inline-start:1px solid var(--rule-soft); padding-inline-start:var(--s-4) }
}

/* ------------------------------------------------------------------ 4. plates */
.case-plates{ row-gap:var(--s-7); padding-block:var(--s-6) var(--s-7) }
.case-plates__item{ grid-column:1 / -1; margin:0 }
@media (min-width:768px){
  .case-plates__item--wide{ grid-column:1 / 8 }
  .case-plates__item--tall{ grid-column:3 / 9 }
  .case-plates__item--detail{ grid-column:2 / 8 }
  .case-plates__item--door{ grid-column:3 / 8 }
}
@media (min-width:1100px){
  .case-plates__item--wide{ grid-column:1 / 10 }
  .case-plates__item--tall{ grid-column:7 / 13 }
  .case-plates__item--detail{ grid-column:4 / 11 }
  .case-plates__item--door{ grid-column:5 / 11 }
}

/* ------------------------------------------------------------------ 5. film */
.case-film{ padding-block:0 var(--s-7) }
.case-film__fig{ grid-column:1 / -1 }
@media (min-width:768px){ .case-film__fig{ grid-column:2 / 7 } }
@media (min-width:1100px){ .case-film__fig{ grid-column:3 / 9 } }

/* ------------------------------------------------------------------ (owner-gated) render → built pair */
.case-pair__text{ margin-block:var(--s-3) var(--s-5); max-inline-size:var(--measure); color:var(--fg-2) }
.case-pair__grid{ row-gap:var(--s-5) }
.case-pair__fig{ grid-column:1 / -1 }
@media (min-width:768px){ .case-pair__fig:first-child{ grid-column:1 / 5 } .case-pair__fig:last-child{ grid-column:5 / 9 } }
@media (min-width:1100px){ .case-pair__fig:first-child{ grid-column:1 / 7 } .case-pair__fig:last-child{ grid-column:7 / 13 } }

/* ------------------------------------------------------------------ 6. light study (the page's single night section) */
.case-light__grid{ row-gap:var(--s-5); align-items:center }
.case-light__opener, .case-light__text{ grid-column:1 / -1 }
.case-light__text{
  font-family:var(--f-display); font-weight:400; font-size:var(--t-lead); line-height:1.75;
  color:var(--fg);
  max-inline-size:34ch;
}
html[lang="en"] .case-light__text{ font-family:var(--f-lat-text); font-weight:300; max-inline-size:40ch }
.case-light__fig{ grid-column:1 / -1; justify-self:end; margin:0 }   /* width: inline, ≤ 1.2 × the crop (SPEC §5.3) */
.case-light__caption .caption__status::after{ content:none }       /* a status alone: no trailing dash */
@media (min-width:768px){
  .case-light__opener{ grid-column:1 / 6; grid-row:1; align-self:end }
  .case-light__text{ grid-column:1 / 6; grid-row:2; align-self:start }
  .case-light__fig{ grid-column:6 / -1; grid-row:1 / span 2; justify-self:center }
}
@media (min-width:1100px){
  .case-light__opener, .case-light__text{ grid-column:1 / 6 }
  .case-light__fig{ grid-column:7 / 13; justify-self:end; margin-inline-end:calc(100% / 6) }
}

/* ------------------------------------------------------------------ 7. materials of this space */
.case-materials{ padding-block:var(--section) var(--s-7); row-gap:0 }
.case-materials > *{ grid-column:1 / -1 }
.case-materials__h2{ font-size:var(--t-d2); margin-block-end:var(--s-5) }
@media (min-width:1100px){
  .case-materials__h2{ grid-column:1 / 5; grid-row:1; margin:0 }
  .case-materials__note{ grid-column:1 / 5; grid-row:2; align-self:start }
  .case-materials__list{ grid-column:5 / -1; grid-row:1 / span 2 }
}
.case-materials__list{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--s-5) var(--gap);
  margin:0; padding:0; list-style:none;
}
@media (min-width:768px){ .case-materials__list{ grid-template-columns:repeat(3, minmax(0, 1fr)) } }
.case-mat__tile{ display:block; width:min(100%, 176px) }              /* never wider than the narrowest tile crop (176px) */
.case-mat__name{ margin-block-start:var(--s-3); font-size:var(--t-d4); font-weight:400; line-height:1.3 }
.case-mat__line{ margin-block-start:var(--s-2); font-size:var(--t-small); line-height:1.6; color:var(--fg-2); max-inline-size:30ch }
.case-materials__note{
  margin-block-start:var(--s-6); padding-block-start:var(--s-3);
  max-inline-size:min(var(--measure), 40ch);
  border-block-start:1px solid var(--line);
  font-size:var(--t-small); line-height:1.6; color:var(--fg-3);
}

/* ------------------------------------------------------------------ 8. mini CTA */
.case-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s-4) var(--s-5);
  padding-block:var(--s-5);
  border-block:1px solid var(--line);
}
.case-cta__line{ font-family:var(--f-display); font-weight:400; font-size:var(--t-d3); line-height:1.25 }   /* --t-d3 < 28px → FRL 400 */
@media (min-width:1200px){ html:not([lang="en"]) .case-cta__line{ font-weight:300 } }                    /* FRL 300 once it is >= 28px */

/* ------------------------------------------------------------------ 9. next space */
.case-next{ padding-block:var(--s-7) var(--section) }
.case-next__link{
  display:grid; grid-template-columns:minmax(0, 1fr); row-gap:var(--s-4);
  color:inherit; text-decoration:none;
}
.case-next__text{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-2) }
.case-next__num{   /* numeral + title at --t-d2 (SPEC §5.3 item 9); below 64px the numeral cannot be taupe (SPEC §3.1) */
  font-family:var(--f-he-display); font-weight:300; font-size:var(--t-d2); line-height:1;
  color:var(--fg-3);
  transition:translate var(--d-ui) var(--ease-paper);
}
html[lang="en"] .case-next__num{ font-family:var(--f-lat-display); font-weight:400 }
.case-next__title{
  font-family:var(--f-display); font-weight:300; font-size:var(--t-d2); line-height:1.1;
  color:var(--fg-2);
  transition:color var(--d-ui) var(--ease-paper);
}
html[lang="en"] .case-next__title{ font-weight:400 }
.case-next__fig{ display:block; width:100% }
.case-next__arrow{ inline-size:28px; block-size:28px; margin-block-start:var(--s-3); stroke-width:1.25; color:var(--fg-2); transition:translate var(--d-ui) var(--ease-paper), color var(--d-ui) var(--ease-paper) }
.case-next__link:is(:hover, :focus-visible) .case-next__arrow{ color:var(--fg) }
.case-next__link:is(:hover, :focus-visible) .case-next__title{ color:var(--fg) }
.case-next__link:is(:hover, :focus-visible) .case-next__arrow{ translate:6px 0 }
[dir="rtl"] .case-next__link:is(:hover, :focus-visible) .case-next__arrow{ translate:-6px 0 }
/* the numeral sits at the link's inline-start edge: it nudges inward (toward inline-end), never past the focus ring */
.case-next__link:is(:hover, :focus-visible) .case-next__num{ translate:8px 0 }
[dir="rtl"] .case-next__link:is(:hover, :focus-visible) .case-next__num{ translate:-8px 0 }
.case-next__back{ margin-block-start:var(--s-5) }
@media (min-width:1100px){
  .case-next__link{ grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--gap); align-items:end }
  .case-next__text{ grid-column:1 / 5; grid-row:1; padding-block-end:var(--s-3) }
  .case-next__fig{ grid-column:5 / 13; grid-row:1 }
}

/* ------------------------------------------------------------------ 10. mobile float (case.js shows it after 60% scroll, < 1100 px) */
.case-float{
  position:fixed; z-index:var(--z-float);
  inset-block-end:16px; inset-inline-end:16px;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--paper) 70%, transparent);
  opacity:0; translate:0 8px;
  transition:opacity var(--d-micro) var(--ease-paper), translate var(--d-micro) var(--ease-paper);
}
.case-float.is-shown{ opacity:1; translate:0 0 }
html.is-menu-open .case-float{ visibility:hidden }
@media (min-width:1100px){ .case-float{ display:none !important } }
/* below 400 px the fixed header already shows the short "צרו קשר" CTA (chrome.css), so the float would put the same
   label on screen twice and cover the bottom inline-end corner; one contact control is enough (lead decision, SPEC §2.2) */
@media (max-width:399px){ .case-float{ display:none !important } }

/* span-based frames (inside links / list items): the clip must be a block for its aspect-ratio to apply */
.case-mat__tile > .frame__clip, .case-next__fig > .frame__clip{ display:block }