/* ==========================================================================
   doodles.css — intro + 3-column masonry image grid
   Layout/copy measured off "Doodles.pdf" (the user-supplied design spec);
   images + their order sourced from the live saimalshafi.framer.website
   /doodles page. Intro title/subtitle reuse the exact same pattern as
   .pg-hero on the AI Playground page (same grid position, same "medium"
   18px settings established site-wide) rather than inventing new rules.
   ========================================================================== */

/* ---------- intro ---------- */
.doodles-hero {
  padding-inline: var(--margin);
  padding-top: 10.25rem; /* same as .pg-hero — matches the AI Playground page's intro spacing */
}

.doodles-hero__inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}

.doodles-hero__title {
  grid-column: 1 / 13;
  font-size: 8.75rem; /* 140px, trying a layout experiment per direct request (matching AI Playground) — was 5rem/80px */
  font-weight: 500; /* medium — reverted back from 600 semibold per direct request */

  line-height: 1.25; /* was 1.1 — bumped to fix Satoshi descender clipping; see DESIGN note in ai-playground.css's .pg-hero__title for the metric reasoning */
  letter-spacing: -0.01em;
}

.doodles-hero__subtitle {
  grid-column: 8 / 13; /* trying a layout experiment per direct request (matching AI Playground) — was 5/12 */
  font-size: 1rem; /* 16px, per direct request — was 1.125rem/18px, the site's new standard body text size */
  font-weight: 500; /* medium — matches the site-wide standard */
  color: #bababa; /* per direct request — was inheriting the default (near-white) text color */
  line-height: 1.3; /* per direct request — was 1.22 */
  max-width: 26rem; /* same width as .pg-hero__subtitle — reads as 4 lines here given the longer copy, matching the PDF's proportions */
  margin-top: 1rem; /* 16px, trying a layout experiment per direct request (matching AI Playground) — was 1.5rem/24px */
}

/* ---------- masonry image grid ----------
   True packed masonry (columns fill independently, unlike CSS Grid's
   row-locked auto-sizing) — 3 explicit flex-column wrapper divs
   (.doodles-grid__col, see the markup) rather than CSS multi-column
   (column-count). An earlier version of this used column-count:3 with
   a forced break-before to pin specific images as each column's first
   item, but forcing a column break interacts badly with the browser's
   own balanced-height estimate in an unconstrained-height container —
   in testing it collapsed almost the entire grid into the last column,
   leaving the first two columns nearly empty. Explicit wrappers avoid
   that failure mode entirely: each column's contents are just listed
   directly in the markup, so there's no auto-balance step left to
   break. Still reads as "packs top-to-bottom on its own, columns don't
   line up image-for-image" per the original Doodles.pdf reference —
   each column is its own independent flex stack, sized purely by its
   own images' aspect ratios. */
.doodles-grid {
  display: flex;
  align-items: flex-start;
  column-gap: var(--gutter);
  padding-inline: var(--margin);
  margin-top: 6.5rem; /* measured gap: subtitle bottom -> first row of images, off the PDF */
  padding-bottom: var(--margin);
}

.doodles-grid__col {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0; /* lets flex children shrink below their image's intrinsic width instead of overflowing the column */
}

.doodle-item {
  position: relative;
  display: block;
  overflow: hidden;
  margin-bottom: var(--gutter);
}

.doodle-item img {
  display: block;
  width: 100%;
  height: auto; /* fit width, adjust height to preserve the image's own aspect ratio — no cropping */
  transform: scale(1.35); /* reveal start state — see Common.initImageReveal in common.js */
  will-change: transform;
}

/* Curtain — same mechanism as .pg-card__image-cover / .work__image-item__cover:
   a solid, page-colored panel covering the image at rest, slid up and off
   as it scrolls into view. Sits on top via z-index, sized to the mask's
   own (auto, image-driven) height via inset:0 rather than any fixed
   aspect-ratio box. */
.doodle-item .doodle-item__cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--white);
  will-change: transform;
}

html.dark-mode .doodle-item .doodle-item__cover {
  background: #0B0A0B;
}

/* ==========================================================================
   mobile breakpoint (<=768px) — see style.css's "mobile breakpoint"
   comment for the shared root-font-freeze this all builds on. Same
   pattern as ai-playground.css's own mobile block: left-aligned intro
   (title 40px, subtitle full-width/16px), images stacked one per "row"
   below it — here that just means collapsing the 3-column masonry down
   to a single column, since each item is already its own full-width
   block once column-count:1 removes the other two columns.
   ========================================================================== */
@media (max-width: 768px) {
  .doodles-hero {
    padding-inline: 1.5rem; /* 24px, per direct spec — was var(--margin)/40px */
    padding-top: 7.5rem; /* 120px — matches the homepage/AI Playground's own mobile hero clearance */
  }

  .doodles-hero__title {
    font-size: 2.5rem; /* 40px — was 80px, matches every other page's mobile hero-text scale */
  }

  .doodles-hero__subtitle {
    /* Was grid-column:5/12 — a deliberate desktop-only indent under the
       title, same as .pg-hero__subtitle. Collapses to the same 1/13
       span as the title so both sit flush against the same left edge on
       mobile. */
    grid-column: 1 / 13;
    max-width: none;
  }

  .doodles-grid {
    flex-direction: column; /* was column-count:1 — one image per row, matches the AI Playground grid's own mobile collapse */
    padding-inline: 1.5rem; /* 24px, per direct spec */
    margin-top: 12.5rem; /* 200px, per direct spec — was 6.5rem/104px, matches the AI Playground grid's own mobile spacing */
  }

  /* Unwraps each column's children into direct flex items of
     .doodles-grid itself, so the inline order:N style already set on
     every .doodle-item (see doodles.html) takes effect and restores the
     correct 1-25 sequence on mobile — desktop's 3 independent-column
     masonry stagger doesn't apply on a single-column mobile layout. */
  .doodles-grid__col {
    display: contents;
  }
}