/* PsyFind — logo & brand identity case study.
   Source: https://www.behance.net/gallery/197429813/PsyFind-therapy-consulting-logo-branding

   Unlike High Pines / Madison & Beyond, PsyFind's assets are NOT pre-composed
   1920px slide exports — they are isolated components at their own native
   sizes (a 327px badge, a 640px wordmark, a 525px pattern tile, a 1323px
   specimen sheet, three ~1560px application mockups). Stretching those to
   100% of a 1920px canvas the way the slide-deck pages do would blow up a
   327px logo 6x and look exactly like the blurry/oversized problem this
   rebuild exists to fix. So this page is real layout composition instead of
   full-bleed: every image is shown at a controlled, roughly-native-to-
   downscaled size. Nothing here is stretched past its native resolution.

   Section headings and section IMAGES are deliberately in separate
   wrappers, not nested: headings sit in .pf-container (capped width,
   left-anchored at --h-margin, matching the hero's text column), while
   images are full-width siblings that centre on the true viewport via
   their own margin:auto / justify-content:center. Nesting them together
   under one earlier draft meant images were "centred" within the
   left-anchored container instead of the page — correct for the heading,
   wrong for the imagery, which is why the two are split apart here.

   Palette sampled pixel-by-pixel from the supplied PNGs (not eyeballed):
     blue  #2543e3  — wordmark, logo ring, Instagram background
     cream #fff0e6  — badge disc, pattern tile, page "paper" tone
     coral #f99b9b  — pin mark accent (decorative only — see contrast note)
     white #ffffff  — wordmark/spec-sheet plates

   Contrast, computed (WCAG relative-luminance formula), not eyeballed:
     cream #fff0e6 on blue #2543e3   → 6.31:1
     white #ffffff on blue #2543e3   → 7.02:1
     blue  #2543e3 on cream #fff0e6  → 6.31:1
     blue  #2543e3 on white #ffffff  → 7.02:1
     ink   #23262d on cream #fff0e6  → 13.60:1
     ink   #23262d on white #ffffff  → 15.14:1
     muted #5a6270 on cream #fff0e6  → 5.52:1
     muted #5a6270 on white #ffffff  → 6.15:1
     coral #f99b9b on blue #2543e3   → 3.41:1  (FAILS — coral never used for text)
     coral #f99b9b on cream/white    → 1.85 / 2.06:1 (FAILS — decorative only)
   Every text colour used below is one of the passing pairs above.

   Nav, footer and .page-nav-btn come from shared.css. Scoped to
   .psyfind-page throughout. */

body.psyfind-page {
  --pf-blue:   #2543e3;
  --pf-cream:  #fff0e6;
  --pf-coral:  #f99b9b;
  --pf-white:  #ffffff;
  --pf-ink:    #23262d;
  --pf-muted:  #5a6270;

  --h-margin: max(1.5rem, 7vw);
  --content-max: 1180px;

  /* Per feedback: plain white throughout, not the cream tint. --pf-cream
     stays defined because it's still a real colour baked into the pattern
     tile and badge disc assets — just no longer used for page background. */
  background: var(--pf-white);
}

/* Opaque so page content never shows through the fixed nav. */
body.psyfind-page .nav {
  background: var(--pf-white);
}

body.psyfind-page .pf-case {
  display: block;
  width: 100%;
  /* clears the fixed nav; the gap is cream-on-cream (matches the nav bg),
     then the hero's own blue band begins right after it. */
  padding-top: 4rem;
}

/* Shared container rule for every non-hero section. Deliberately NOT
   full-bleed — see file header. Left-anchored (no auto-centering) rather
   than centred as a block: on wide viewports `margin:0 auto` was leaving
   equal empty gutters on both sides, which made headings read as centred
   on the page instead of aligned to the left the way the hero's text is.
   Anchoring here instead keeps every section's heading starting at the
   same left edge as the hero. */
body.psyfind-page .pf-container {
  max-width: var(--content-max);
  margin: 0;
  padding: 0 var(--h-margin);
}

/* ═══ HERO ══════════════════════════════════════════════════════════════
   Text on the left at the page's normal --h-margin; the pattern tile fills
   the right column and bleeds flush to the browser's right edge — .pf-hero
   has NO right padding, and `justify-content: space-between` guarantees
   the pattern column always reaches that edge regardless of viewport
   width, even once the text column has hit its own max-width and stopped
   growing.

   Per feedback the pattern is shown FULL, not cropped: no object-fit:cover,
   no overflow:hidden, no forced height — width:100% of its (flexible)
   column, height:auto, so the whole image is always visible at whatever
   width its column gets. `align-items:center` (not stretch) because the
   two columns no longer need to share a forced height now that neither is
   being cropped to fit the other. */
body.psyfind-page .pf-hero {
  background: var(--pf-white);
  width: 100%;
  padding: 4.5rem 0 4.5rem var(--h-margin);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 4rem);
}

body.psyfind-page .pf-hero-text {
  max-width: 28rem;
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 0;
}

/* The wordmark image this time is hand-cropped by the owner so the "P"
   sits at column 0 with zero baked-in padding (verified pixel-by-pixel) —
   it can be dropped in directly with no alignment offset needed, unlike
   the earlier asset. */
body.psyfind-page .pf-hero-title-img {
  display: block;
  width: min(280px, 58vw);
  height: auto;
  margin-bottom: 1.4rem;
}

body.psyfind-page .pf-hero .project-label {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pf-blue);
}

body.psyfind-page .pf-hero .project-tags {
  display: flex;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--pf-blue);
  margin: 1rem 0 1.5rem;
}
body.psyfind-page .pf-hero .project-tags span + span::before {
  content: '|';
  margin: 0 0.6rem;
  opacity: 0.5;
}

/* Per feedback: every text element below the title is blue now, the
   description included (previously kept in the muted/ink pairing). */
body.psyfind-page .pf-hero .project-desc {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--pf-blue);
}
body.psyfind-page .pf-hero .project-desc strong {
  font-weight: 700;
}

body.psyfind-page .pf-hero-pattern {
  flex: 1 1 420px;
  margin: 0;
}
body.psyfind-page .pf-hero-pattern img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 700px) {
  /* No horizontal padding on the container at all — .pf-hero-pattern below
     needs to span the true full width with a plain width:100%, and a
     negative-margin "cancel the parent's padding" trick doesn't actually
     do that: a flex item's explicit width:100% is a FIXED size (not auto),
     so margins only shift its position, they don't stretch it — a
     negative margin on one side alone shifts it flush that side while
     leaving it exactly one h-margin short on the other (the original
     bug), and equal negative margins on BOTH sides (tried next) still
     don't stretch a fixed-width box, so it stayed centred but still short
     on the right (confirmed by measuring its rendered rect: pattern's
     width came out to viewport − 2×h-margin either way). Madison's own
     mobile hero — proven working — sidesteps the whole problem the same
     way: zero padding on the hero itself, with .pf-hero-text carrying its
     own inset below, so .pf-hero-pattern's width:100% is already the true
     full width with no margin math needed. */
  body.psyfind-page .pf-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 3rem 0 0;
  }
  body.psyfind-page .pf-hero-text {
    max-width: 26rem;
    width: 100%;
    padding: 0 var(--h-margin) 2.5rem;
  }
  /* Per feedback: above the text on narrow screens (order:-1, DOM stays
     text-then-pattern so desktop is untouched). Full width, uncropped —
     the img's own height:auto (set in the base rule above) determines the
     height, no fixed-height crop here either. */
  body.psyfind-page .pf-hero-pattern {
    order: -1;
    flex: 0 0 auto;
    width: 100%;
    margin: 0 0 1.75rem;
  }
}

/* ═══ SECTION HEADINGS ═════════════════════════════════════════════════ */
body.psyfind-page .pf-section {
  padding-top: 5rem;
}
body.psyfind-page .pf-section:last-of-type {
  padding-bottom: 1rem;
}

body.psyfind-page .section-heading {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--pf-blue);
}

/* ═══ LOGO & IDENTITY ══════════════════════════════════════════════════
   The sheet ("the logo") is exempt from the owner's "everything a tiny bit
   smaller" pass and stays at its previous size. The therapist card lives
   here too as a companion figure, shown at the SAME width as the sheet
   (both reuse .pf-figure--sheet-large) and always stacked one under the
   other per feedback — see .pf-identity-row below.

   Two different contexts need two different spacing rules: figures inside
   .pf-identity-row get their gap from the row wrapper and just need
   margin:0 so they don't double up; the standalone .pf-figure--big
   sections (Social media, Print & merch) have no such wrapper, so THEY
   need their own top margin + auto-centering directly. */
body.psyfind-page .pf-figure {
  margin: 0;
}

body.psyfind-page .pf-figure--big {
  margin: 3rem auto 0;
}

/* Per feedback: always stacked one under the other, not side by side —
   flex-direction:column instead of a wrapping row. Both figures already
   share .pf-figure--sheet-large (700px cap), so "same width" already
   holds; this just forces the vertical order regardless of viewport. */
body.psyfind-page .pf-identity-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 3rem;
}

/* Opaque-white assets (the spec sheet, the wordmark) get a matte card so
   their flat white fill reads as an intentional plate on the cream
   background rather than a stray rectangle. */
body.psyfind-page .pf-card-white {
  background: var(--pf-white);
  border-radius: 20px;
  padding: clamp(1rem, 3vw, 2rem);
  box-shadow: 0 10px 30px rgba(37, 67, 227, 0.12);
}

body.psyfind-page .pf-figure--sheet-large {
  width: min(700px, 88vw);
}
body.psyfind-page .pf-figure--sheet-large img {
  display: block;
  width: 100%;
  height: auto;
}

/* ═══ SOCIAL MEDIA / PRINT & MERCH ═════════════════════════════════════
   Each shown large and alone. Capped short of native resolution
   (1561-1578px) so nothing is upscaled. Sized a tiny bit smaller than the
   previous pass, per feedback — everything except the logo sheet above. */
body.psyfind-page .pf-figure--big {
  width: min(980px, 90vw);
}
body.psyfind-page .pf-figure--big img {
  display: block;
  width: 100%;
  height: auto;
}

/* The Instagram export was cropped to remove a large dead-blue margin (see
   psyfind_instagram.png history — its content only filled ~65% of the
   original canvas width), which left it noticeably more portrait than
   Print & merch. At the same width cap it would tower over its neighbour;
   capped narrower so its rendered height lands close to it instead. */
body.psyfind-page .pf-figure--rect.pf-figure--big {
  width: min(560px, 78vw);
}

/* Print & merch only, nudged slightly smaller per feedback — a small trim
   off the 980px base, not the bigger cut Social media already got above. */
body.psyfind-page .pf-figure--merch.pf-figure--big {
  width: min(900px, 88vw);
}

/* meet_the_therapist / mockups: rounded card is already baked into the
   PNG's alpha channel (verified pixel-by-pixel — genuinely transparent
   corners), so a drop-shadow (which follows the alpha shape) sits flush
   with the artwork's own rounded corners — a box-shadow would show as a
   hard rectangle behind the transparent corners instead. */
body.psyfind-page .pf-figure--framed img {
  filter: drop-shadow(0 14px 34px rgba(37, 67, 227, 0.18));
}

/* Instagram export is a true opaque rectangle with square corners, so it
   gets CSS rounding + an ordinary box-shadow instead. */
body.psyfind-page .pf-figure--rect img {
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(37, 67, 227, 0.18);
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  body.psyfind-page .pf-section { padding-top: 4rem; }
}

@media (max-width: 700px) {
  body.psyfind-page .pf-case { padding-top: 3.5rem; }

  /* .pf-hero's own mobile padding is fully specified in the earlier
     @media(max-width:700px) block above (zero horizontal, so
     .pf-hero-pattern can bleed edge-to-edge) — a second, later rule here
     used to reset it back to symmetric h-margin padding, silently undoing
     that fix via normal cascade order. Removed rather than duplicated. */

  body.psyfind-page .pf-section { padding-top: 3.25rem; }

  body.psyfind-page .pf-identity-row { margin-top: 2.25rem; }
}

/* Nav breakpoints and .page-nav button stacking are handled centrally in
   shared.css — deliberately not re-solved here. */