/* /projects — page-specific styles. Mirrors the design handoff
 * inline CSS from imaginando-3-0/project/Imaginando Projects.html.
 *
 * Sections:
 *   .projects-head   — page header: lede grid + 4-cell .hero-stats
 *                       (same shape as .about-head — duplicated here
 *                        scoped under its own qualifier since a 3rd
 *                        page would warrant a proper hoist)
 *   .feat-list/.feat — alternating "Featured project" cards
 *   .why             — Why-these-exist 2-col grid + numbered list
 *
 * `.cta-block` lives in public/style.css (hoisted from about-us
 * in this commit since projects is the second page using it).
 */

/* ---------- Page-head: lede grid + stats ---------- */

/* Match the handoff `.hero h1` size exactly — the same override the
 * about-us page uses, scoped under `.projects-head` so it doesn't lean
 * on the smaller global `.page-head h1` clamp. */
.projects-head h1 {
  font-size: clamp(56px, 8.4vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.035em;
}

.projects-head .hero-lede {
  margin-top: 48px;
}
.projects-head .hero-lede .lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 48ch;
  margin: 0;
  text-wrap: pretty;
}

/* ---------- Featured projects ---------- */

.feat-section { padding-bottom: 120px; }
/* Space the mono eyebrow off the display heading — the shared `.sec-head`
 * chrome leaves the `.index` label flush against the h2 (matches the
 * `.faq-head .index` treatment in style.css). */
.feat-section .sec-head .index {
  display: block;
  margin-bottom: 14px;
}
.feat-list {
  display: flex;
  flex-direction: column;
  gap: 96px;
}
@media (max-width: 900px) { .feat-list { gap: 64px; } }

/* Alternating layout. `.flip` swaps the grid columns and reorders the
 * children so the cover sits on the right for odd-indexed cards. */
.feat {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: stretch;
}
.feat.flip { grid-template-columns: 0.85fr 1.15fr; }
.feat.flip .feat-media { order: 2; }
.feat.flip .feat-body { order: 1; }
@media (max-width: 900px) {
  .feat,
  .feat.flip { grid-template-columns: 1fr; gap: 24px; }
  .feat.flip .feat-media,
  .feat.flip .feat-body { order: initial; }
}

/* Cover anchor — image with dark gradient overlay, corner index pill,
 * bottom-left "Read project" CTA that fades up on hover. */
.feat-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  border: 0.5px solid var(--line);
  background: var(--bg);
  isolation: isolate;
}
.feat-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
}
.feat-media:hover img {
  transform: scale(1.04);
  filter: brightness(1.08);
}
/* Mobile single-column stack — MUST come after the base `.feat-media img`
   rule above: both selectors have identical specificity, so source order
   decides and the later one wins. When placed before, the base
   `position: absolute; height: 100%` clobbered this override, the box
   collapsed to 0 height and the cover vanished on iOS/WebKit (Chrome fell
   back to the container's aspect-ratio and hid the bug). In the single
   column the cover has no sibling to stretch against, so its height must
   come from its own content — put the <img> back in normal flow so it gives
   the box a real, reliable height in every engine; the gradient overlay,
   index pill and CTA stay absolutely positioned over it. */
@media (max-width: 900px) {
  .feat-media { aspect-ratio: auto; }
  .feat-media img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}
.feat-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}
.feat-index {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 6px 10px;
  border-radius: 999px;
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  /* Force light text — the pill always sits on a dark image overlay,
   * regardless of the page theme. */
  color: #f4f1ea !important;
  letter-spacing: 0.14em;
}
.feat-cta {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  transform: translateY(6px);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.feat-cta .arrow { transition: transform 0.25s ease; }
.feat-media:hover .feat-cta { transform: none; opacity: 1; }
.feat-media:hover .feat-cta .arrow { transform: translateX(3px); }

/* Body — meta chip row + display-h3 tagline + summary + open button +
 * slug caption. Centred vertically against the cover via flex. */
.feat-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
  padding: 8px 4px;
}
.feat-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--fg-faint);
}
.feat-meta span {
  padding: 4px 9px;
  border: 0.5px solid var(--line);
  border-radius: 999px;
}
.feat-meta .dot-sep {
  border: none;
  padding: 0;
  color: var(--fg-faint);
}
/* The city tail (last span) renders without the pill chrome. */
.feat-meta span:last-child {
  border: none;
  padding: 0;
  color: var(--fg-dim);
}
.feat-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 6px 0 0;
  text-wrap: balance;
}
.feat-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.feat-sum {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--fg-dim);
  max-width: 52ch;
  margin: 0;
  text-wrap: pretty;
}
.feat-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.feat-slug { color: var(--fg-faint); }

/* ---------- Why these exist ---------- */

.why {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 1000px) {
  .why { grid-template-columns: 1fr; gap: 32px; }
}
/* Left section heading — index label + display h2. Scrolls with the
 * page alongside the body (no longer pinned). */
.why-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.why-side h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
  text-wrap: balance;
}
.why-side h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.why-body p {
  margin: 0 0 22px;
  color: var(--fg-dim);
  font-size: 17px;
  line-height: 1.65;
  max-width: 60ch;
  text-wrap: pretty;
}
.why-body p strong { color: var(--fg); font-weight: 500; }

/* Numbered list — divider rows with mono index + display title + body.
 * Markup uses an extra `.b` wrapper around `<strong>` + `<p>` to keep
 * them grouped in the right column of the 2-col grid. */
.why-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 0.5px solid var(--line);
}
.why-list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 0.5px solid var(--line);
}
.why-list li .num {
  color: var(--fg-faint);
  padding-top: 4px;
  letter-spacing: 0.1em;
}
.why-list li strong {
  font-family: var(--display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--fg);
  display: block;
}
.why-list li p {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--fg-dim);
  max-width: 54ch;
  text-wrap: pretty;
}