/* Copyright (c) 2025-2026 Systèmes Calibre Inc. All rights reserved.
   Proprietary and confidential. See LICENSE at the repository root. */

/*
Work & projects page only (work.html). The work page builder owns this file. Linked after style.css.
Round 1 (2026-09-23): built against copy/site-copy-v3.md section 4, as a portfolio.
The cards are style.css's shared .card-grid / .card; this file adds only:
  1  the hero's width and the notes under it
  2  .card-wide: a card that spans both columns, image left, words right (card 1 opens the list; card 10,
     whose inclusion is open, closes it). With every card showing, the pairs fall as 2+3, 4+5 (side by side, as the
     copy's design note asks), 6+7, 8+9; with the notes hidden (?clean, the recommended cut) as 2+3, 4+9
  3  the wide card's cover, a size up
Round 2 (2026-09-23, review 07): the tile compositions (.tile-over, .tile-fig, .tile-edit, .tile-say) moved to
style.css, so Home's tiles wear the same covers; the phone tile floor moved with them.
*/

/* ---------- 1  Hero ---------- */
.work-hero .page-title { max-width: 12ch; }
.work-hero .page-lede { max-width: 34rem; }
.work-hero .note-row { display: flex; flex-wrap: wrap; gap: 10px; }
.work-hero .note-block { margin-top: 18px; }

.work-list .card-grid { row-gap: 96px; }
.work-list .card-title { font-size: 1.875rem; line-height: 1.12; }

/* ---------- 2  Wide card: spans the grid, image 7 / words 5 ---------- */
.card-wide {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: 64px; align-items: center;
}
.card-wide .card-media { margin-bottom: 0; }
.card-wide .card-text { min-width: 0; }
.card-wide .card-title { font-size: clamp(2rem, 2.9vw, 2.625rem); line-height: 1.08; letter-spacing: -0.018em; margin-top: 20px; }
.card-wide .card-body { margin-top: 18px; }
.card-wide .card-body p { font-size: 1.125rem; }

/* Card 10 sits apart: its place on the page is open (OPEN 30) */
.card-apart { padding-top: 96px; border-top: 1px solid var(--line); }
.card-apart .card-text > .note-row { margin-top: 0; margin-bottom: 18px; }

/* ---------- 3  The wide card's cover, a size up ---------- */
.card-wide .tile-say { font-size: clamp(3rem, 5.2vw, 4.625rem); max-width: 11ch; }
/* The cap is the size the text reaches when the container stops growing (about 1,424 px): past it the tile stays the
   same size, and a vw-sized cover kept growing until the four lines of the French card 9 (« Un pas‑à‑pas écrit… »)
   ran out of the top of its tile from 1,552 px up (Phil, 2026-10-19). */

/* ---------- Tablet and phone ---------- */
@media (max-width: 960px) {
  .card-wide { display: flex; flex-direction: column; align-items: flex-start; }
  .card-wide .card-media { margin-bottom: 24px; }
  .card-wide .card-title { font-size: 2rem; }
  .card-wide .tile-say { font-size: clamp(2.75rem, 8vw, 5rem); }  /* the tile is full width here */
}
@media (max-width: 720px) {
  .work-list .card-grid { row-gap: 64px; }
  .work-list .card-title, .card-wide .card-title { font-size: 1.625rem; line-height: 1.15; }
  .card-apart { padding-top: 64px; }
  .card-wide .tile-say { font-size: 2.375rem; }
  .work-list .card-body p, .card-wide .card-body p { font-size: 1.0625rem; }
}
@media (max-width: 400px) {
  .card-wide .tile-say { font-size: 2.125rem; }
}