/* BCB page CSS — Mother and Child Collection
   Drop this file into:
     wp-content/themes/bcb-child-theme/assets/pages/mother-and-child-collection.css
   The child theme auto-loads it on the matching page.
   See /build/BUILD_GUIDE.md for details. */

  /* ═══════════════════════════════════════════════════════════
     PAGE GRADIENT — match Homepage / Insurance (umbre wash)
     ═══════════════════════════════════════════════════════════ */
  body.page-mother-and-child-collection {
    background: var(--grad-page-v3) no-repeat;
    background-attachment: fixed;
  }

  /* Sections become transparent over the page gradient */
  .hero, .statement, .section, .departure, .prints, .footer {
    background: transparent !important;
  }
  /* Cards lift on the gradient canvas */
  .piece__frame {
    background: var(--card-lift-bg) !important;
    backdrop-filter: blur(4px);
  }

  /* ─── Hero ────────────────────────────────────────────── */
  .hero {
    padding: clamp(72px, 12vw, 140px) 32px clamp(56px, 8vw, 96px);
    text-align: center;
  }
  .hero__eyebrow {
    font-family: var(--font-accent);
    font-weight: 700; font-size: 13px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--pink-500); margin: 0 0 24px;
  }
  .hero__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(40px, 6.5vw, 76px);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--pink-500);
    margin: 0 0 24px;
    text-wrap: balance;
  }
  .hero__title em {
    font-style: italic; font-weight: 500; color: var(--navy-500);
    font-family: 'Manrope', serif;
  }
  .hero__sub {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.5;
    color: var(--navy-500);
    margin: 0 auto;
    max-width: 640px;
  }
  /* Framed "artist at work" photo under the hero headline (2026-06-06).
     Centered to keep the gallery feel; bridges into the artist statement. */
  .hero__portrait {
    margin: clamp(40px, 5.5vw, 64px) auto 0;
    max-width: 540px;
  }
  .hero__portrait img {
    width: 100%; height: auto; display: block;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-photo);
  }
  .hero__portrait figcaption {
    margin-top: 14px;
    font-family: var(--font-accent);
    font-weight: 700; font-size: 12px;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--navy-400);
  }

  /* ─── Artist statement band ──────────────────────────── */
  .statement {
    padding: clamp(56px, 8vw, 96px) 32px;
    background: var(--cream);
  }
  .statement__inner {
    max-width: 880px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 2fr; gap: clamp(32px, 5vw, 64px);
    align-items: start;
  }
  .statement__label {
    font-family: var(--font-accent);
    font-weight: 700; font-size: 12px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--pink-500);
  }
  .statement__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--navy-500);
    margin: 8px 0 0;
  }
  .statement__body p {
    font-size: 18px; line-height: 1.6;
    color: var(--navy-500); margin: 0 0 18px;
  }
  .statement__body p:last-child { margin-bottom: 0; }
  .statement__signature {
    margin-top: 28px;
    font-family: var(--font-accent);
    font-weight: 700; font-size: 14px;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--pink-500);
  }
  .statement__signature small {
    display: block; font-weight: 500; font-size: 11px;
    letter-spacing: 0.18em; color: var(--fg-subtle); margin-top: 4px;
  }
  @media (max-width: 720px) {
    .statement__inner { grid-template-columns: 1fr; }
  }

  /* ─── Section header ─────────────────────────────────── */
  .section {
    padding: clamp(64px, 9vw, 112px) 32px;
  }
  .section--alt, .section--cream, .section--pink {
    /* Tint variants no longer needed — gradient handles atmosphere */
  }
  .section__head {
    max-width: 1200px; margin: 0 auto clamp(40px, 6vw, 64px);
    display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: end;
    border-bottom: 1px solid rgba(62, 80, 104, 0.18);
    padding-bottom: 24px;
  }
  .section__num {
    font-family: var(--font-accent);
    font-weight: 800;
    font-size: clamp(56px, 8vw, 96px);
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--pink-500);
  }
  .section__heading h2 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(28px, 3.5vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.022em;
    color: var(--navy-500);
    margin: 0 0 8px;
  }
  .section__heading p {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.55;
    color: var(--navy-500);
    margin: 0;
    max-width: 580px;
  }
  @media (max-width: 720px) {
    .section__head { grid-template-columns: 1fr; gap: 12px; }
  }

  /* ─── Centerpiece (Strong Mom) ───────────────────────── */
  .centerpiece {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 5fr 4fr; gap: clamp(32px, 5vw, 80px);
    align-items: center;
  }
  .centerpiece__img {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
  }
  .centerpiece__img::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 80px 12px rgba(31, 45, 64, 0.32);
    background: radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 55%,
      rgba(31, 45, 64, 0.18) 100%
    );
  }
  .centerpiece__img img { width: 100%; }
  .centerpiece__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--pink-500);
    margin: 0 0 24px;
  }
  .centerpiece__sub {
    font-family: var(--font-accent);
    font-weight: 700; font-size: 12px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--navy-400);
    margin: 0 0 16px;
  }
  .centerpiece__body {
    font-size: 18px; line-height: 1.65;
    color: var(--navy-500); margin: 0 0 16px;
  }
  @media (max-width: 860px) {
    .centerpiece { grid-template-columns: 1fr; }
  }

  /* ─── Gallery grid ───────────────────────────────────── */
  .grid {
    max-width: 1200px; margin: 0 auto;
    display: grid; gap: clamp(24px, 3vw, 40px);
  }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--5 { grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2vw, 28px); }
  @media (max-width: 980px) {
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .grid--5 { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 580px) {
    .grid--3, .grid--2 { grid-template-columns: 1fr; }
    .grid--5 { grid-template-columns: repeat(2, 1fr); }
  }

  .piece { display: flex; flex-direction: column; gap: 14px; }
  .piece__frame {
    aspect-ratio: 3 / 4;
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
    cursor: zoom-in;
  }
  .piece__frame img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .piece:hover .piece__frame { box-shadow: var(--shadow-xl); transform: translateY(-3px); }
  .piece:hover .piece__frame img { transform: scale(1.03); }
  .piece__frame--landscape { aspect-ratio: 4 / 3; }
  .piece__frame--square { aspect-ratio: 1 / 1; }

  .piece__title {
    font-family: var(--font-display);
    font-weight: 700; font-size: 19px;
    letter-spacing: -0.012em;
    color: var(--navy-500);
    margin: 0;
  }
  .piece__series {
    font-family: var(--font-accent);
    font-weight: 700; font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--pink-500);
    margin: 0 0 -6px;
  }
  .piece__caption {
    font-size: 14px; line-height: 1.5;
    color: var(--navy-400);
    margin: 0;
  }

  /* ─── Diptych presentation ───────────────────────────── */
  .diptych {
    max-width: 1100px; margin: 0 auto;
  }
  .diptych__caption {
    text-align: center;
    margin: 32px auto 0;
    max-width: 620px;
    font-family: var(--font-sans);
    font-style: italic; font-weight: 500;
    font-size: 17px; line-height: 1.55;
    color: var(--navy-500);
  }

  /* ─── Closing band: Reef School + prints inquiry ─────── */
  /* Departure section → LIGHT; the page dissolves into the navy footer via the
     Case-A blend (enabled below). Was a navy gradient band. */
  .departure {
    padding: clamp(64px, 9vw, 112px) 32px clamp(80px, 10vw, 140px);
    color: var(--navy-500);
    background: transparent !important;
  }
  .footer-ombre-blend { display: block; }
  .departure__inner {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 5fr 4fr; gap: clamp(32px, 5vw, 80px);
    align-items: center;
  }
  .departure__img {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
  }
  .departure__img::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 80px 12px rgba(31, 45, 64, 0.32);
    background: radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 55%,
      rgba(31, 45, 64, 0.18) 100%
    );
  }
  .departure__eyebrow {
    font-family: var(--font-accent);
    font-weight: 700; font-size: 12px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--pink-600); margin: 0 0 16px;
  }
  .departure__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--navy-700);
    margin: 0 0 20px;
  }
  .departure__body {
    font-size: 18px; line-height: 1.65;
    color: var(--navy-500);
    margin: 0 0 16px;
  }
  .departure__cta {
    margin-top: clamp(24px, 3vw, 36px);
    padding-top: clamp(20px, 2.5vw, 28px);
    border-top: 1px solid rgba(41,52,72,0.15);
  }
  .departure__cta-eyebrow {
    font-family: var(--font-accent);
    font-weight: 700; font-size: 11px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--pink-600); margin: 0 0 12px;
  }
  .departure__cta-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.2;
    color: var(--navy-700);
    margin: 0 0 14px;
  }
  .departure__cta-body {
    font-size: 16px; line-height: 1.55;
    color: var(--navy-500);
    margin: 0 0 22px;
  }
  .btn--inquire {
    background: var(--pink-500); color: var(--white);
    padding: 0 32px; height: 52px;
    border-radius: 999px;
    font-family: var(--font-accent);
    font-weight: 700; font-size: 13px;
    letter-spacing: 0.12em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, transform 0.2s;
  }
  .btn--inquire:hover { background: var(--pink-600); transform: translateY(-1px); }
  @media (max-width: 860px) {
    .departure__inner { grid-template-columns: 1fr; }
    /* Mobile only: stacked, the section drops into the dark ombré band, so its
       text + button go light for contrast. Desktop keeps the dark-on-light look. */
    .departure { color: rgba(255, 255, 255, 0.85); }
    .departure__eyebrow,
    .departure__cta-eyebrow { color: #f4a6c4; }
    .departure__title,
    .departure__cta-title { color: var(--white); }
    .departure__body,
    .departure__cta-body { color: rgba(255, 255, 255, 0.88); }
    .departure__cta { border-top-color: rgba(255, 255, 255, 0.22); }
    .btn--inquire {
      background: var(--white); color: var(--navy-700);
      box-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.45);
    }
    .btn--inquire:hover { background: var(--white); color: var(--pink-600); }
  }

  /* ─── Footer placeholder (navy footer) ─── */
  .footer-ph {
    background: var(--navy-700);
    padding: 60px 32px;
    text-align: center;
    color: rgba(255,255,255,0.5);
    font-family: var(--font-accent);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.6;
  }
  .footer-ph strong {
    display: block;
    color: var(--white);
    font-size: 13px;
    margin-bottom: 6px;
  }

  /* ─── Lightbox ───────────────────────────────────────── */
  .lightbox {
    position: fixed; inset: 0;
    background: rgba(16, 21, 31, 0.94);
    display: none; align-items: center; justify-content: center;
    z-index: 100; padding: 32px;
    cursor: zoom-out;
    backdrop-filter: blur(4px);
  }
  .lightbox.is-open { display: flex; }
  .lightbox__inner {
    max-width: 90vw; max-height: 90vh;
    display: flex; flex-direction: column; gap: 16px;
    align-items: center;
  }
  .lightbox img {
    max-width: 100%; max-height: 80vh;
    border-radius: var(--radius-md);
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  }
  .lightbox__caption {
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 700; font-size: 20px;
    text-align: center;
  }
  .lightbox__caption small {
    display: block; margin-top: 6px;
    font-family: var(--font-accent);
    font-weight: 500; font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.6);
  }