/*
 * responsive.css
 * ReyBelen Standalone Theme — All Breakpoint Overrides
 *
 * Authority: REYBELEN-COMPONENT-BLUEPRINT-SYSTEM.md §19 (Responsive Blueprint)
 *            REYBELEN-VISUAL-SYSTEM-ARCHITECTURE.md §04.5 (Responsive Behavior)
 *            REYBELEN-ARCHITECTURAL-AMENDMENTS.md AM-02, AM-06, AM-08, AM-11, AM-13
 *            PHASE-05-BUILD-EXECUTION-PLAN.md §C12
 *
 * This is the only CSS file in the theme permitted to contain @media queries.
 * Exception: base.css contains @media (prefers-reduced-motion: reduce) —
 * an accessibility feature query, not a layout breakpoint. Permitted per CBS §01.3.
 *
 * Two breakpoints only:
 *   max-width: 1120px — Medium range; clamp governs, no structural rules required
 *   max-width: 768px  — Small viewport; all single-column collapses and padding reductions
 *
 * CBS §19: "No layout remains two-column below 768px. No exceptions."
 *
 * Mobile padding reduction rules (CBS §19 Spacing Scaling):
 *   Container horizontal:     var(--rb-pad-h) 48px → var(--rb-pad-h-m) 24px
 *   Hero:                     120px top → 80px top; 96px bottom → var(--sp-8) 64px
 *   Dark feature sections:    96px → var(--sp-8) 64px
 *   Light content sections:   80–96px → var(--sp-7) 56px
 *   Archive / page heros:     80px → var(--sp-8) 64px top; 64px → var(--sp-6) 48px bottom
 *   Footer outer padding-top: var(--sp-10) 80px → var(--sp-8) 64px
 *
 * No hardcoded hex values. No !important. No selectors absent from compiled CSS files.
 * No GeneratePress selectors.
 */


/* ══════════════════════════════════════════════════════════════════════════
   MEDIUM VIEWPORT  768px – 1120px
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Clamp-based typography governs this range without explicit rules:
 *   T1: clamp(52px, 6.5vw, 80px)  T2: clamp(36px, 4.5vw, 56px)
 *   T3: clamp(24px, 2.8vw, 36px)  Quote: clamp(24px, 3vw, 36px)
 * Two-column grid layouts compress within the 1120px container without
 * structural changes. Nav desktop layout maintained throughout this range.
 * This block is reserved — no layout rules required at this range.
 */

@media (max-width: 1120px) {

}


/* ══════════════════════════════════════════════════════════════════════════
   SMALL VIEWPORT  < 768px
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {


  /* ── Container ─────────────────────────────────────────────────────────── */

  /* Overrides base.css. CBS §19: horizontal padding 48px → 24px (--rb-pad-h-m). */

  .rb-container {
    padding-inline: var(--rb-pad-h-m);
  }


  /* ══════════════════════════════════════════════════════════════════════════
     NAVIGATION — overrides nav.css
     ══════════════════════════════════════════════════════════════════════════ */

  /* Desktop links and CTA hidden; hamburger toggle shown. CBS §19, CBS §02. */

  .rb-nav__links {
    display: none;
  }

  .rb-nav__cta {
    display: none;
  }

  /* nav.css sets display: none by default — responsive.css activates it. */
  .rb-nav__toggle {
    display: flex;
  }

  /* Container height reduces from 72px (desktop) to 64px (mobile). */
  .rb-nav__container {
    height: 64px;
  }

  /* Subtitle hidden on mobile — 335px rendered width pushes toggle off-screen. */
  .rb-nav__subtitle {
    display: none;
  }


  /* ══════════════════════════════════════════════════════════════════════════
     HERO — overrides hero.css
     ══════════════════════════════════════════════════════════════════════════ */

  /* CBS §19 verbatim: "Padding: 80px top, 64px bottom." CTAs stack full-width. */

  .rb-hero {
    padding-top: 80px;
    padding-bottom: var(--sp-8);
    align-items: flex-start;
  }

  /* Two-column grid (1fr 420px) → single column; portrait col hidden on mobile. */
  .rb-hero__inner {
    grid-template-columns: 1fr;
  }

  .rb-hero__right {
    display: none;
  }

  .rb-hero__ctas {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }

  .rb-hero__ctas .rb-btn {
    width: 100%;
    justify-content: center;
  }


  /* ══════════════════════════════════════════════════════════════════════════
     PROOF BAR — overrides sections.css
     ══════════════════════════════════════════════════════════════════════════ */

  /* Flex row with large gap → wrapped column. Tighter vertical gaps. */

  .rb-proof__inner {
    flex-wrap: wrap;
    gap: var(--sp-5);
  }


  /* ══════════════════════════════════════════════════════════════════════════
     PROBLEM SECTION — overrides sections.css
     ══════════════════════════════════════════════════════════════════════════ */


  /* ══════════════════════════════════════════════════════════════════════════
     PROBLEM SECTION — overrides sections.css
     ══════════════════════════════════════════════════════════════════════════ */

  /* Light section: 80px → 56px (--sp-7). Two-column grid → single column. */

  .rb-problem {
    padding-top: var(--sp-7);
    padding-bottom: var(--sp-7);
  }

  /* 1fr 1fr grid → single column. */
  .rb-problem__inner {
    grid-template-columns: 1fr;
  }

  .rb-problem__body {
    max-width: 100%;
  }


  /* ══════════════════════════════════════════════════════════════════════════
     PIPELINE — overrides sections.css
     ══════════════════════════════════════════════════════════════════════════ */

  /*
   * Dark feature section: 96px → 64px (--sp-8).
   * Flow diagram wraps naturally (flex-wrap: wrap already set in sections.css).
   * Three-column gap grid → single column.
   */

  .rb-pipeline {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }

  .rb-pipeline__gaps {
    grid-template-columns: 1fr;
  }


  /* ══════════════════════════════════════════════════════════════════════════
     AUTHORITY BREAK — overrides sections.css
     ══════════════════════════════════════════════════════════════════════════ */

  /*
   * Dark feature section: 96px → 64px (--sp-8).
   * Grid collapses to block; proof column stacks above narrative.
   * Proof number fixed at 48px — CBS §19 verbatim (replaces clamp).
   * No countup animation — AM-13 §13.5 prohibition governs. Numbers are static.
   */

  .rb-auth-break {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }

  .rb-auth-break__grid {
    display: block;
  }

  .rb-auth-break__proof {
    margin-bottom: var(--sp-5);
  }

  .rb-proof-item__number {
    font-size: 48px;
  }


  /* ══════════════════════════════════════════════════════════════════════════
     WHAT I DO — overrides sections.css
     ══════════════════════════════════════════════════════════════════════════ */

  /* Light section: 96px → 56px (--sp-7). Three-column pillars → single column. */

  .rb-what-i-do {
    padding-top: var(--sp-7);
    padding-bottom: var(--sp-7);
  }

  .rb-what-i-do__pillars {
    grid-template-columns: 1fr;
  }


  /* ══════════════════════════════════════════════════════════════════════════
     QUOTE — overrides sections.css
     ══════════════════════════════════════════════════════════════════════════ */

  /* Dark feature section: 96px → 64px (--sp-8). CBS §19: "Font at 24px fixed." */

  .rb-quote {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }

  .rb-quote__inner {
    max-width: 100%;
  }

  /* clamp(24px, 3vw, 36px) → fixed 24px per CBS §19 derived rule. */
  .rb-quote__text {
    font-size: 24px;
  }


  /* ══════════════════════════════════════════════════════════════════════════
     FROM THE WORK — overrides sections.css
     ══════════════════════════════════════════════════════════════════════════ */

  /*
   * Light section: 96px → 56px (--sp-7).
   * Two-column grid → single column. Portrait container placed at grid-row: 1
   * (above content) per CBS §19 "Portrait: above body content at mobile."
   *
   * .rb-ftw__image is the wrapper div (direct grid child) — targeted for
   * structural layout overrides (grid-row, min-height, margin).
   * .rb-ftw__portrait is the img element inside it — targeted for img-specific
   * overrides (height: auto releases the height: 100% from sections.css).
   * The aspect-ratio: 3/4 on the container maintains the portrait proportion.
   */

  .rb-ftw {
    padding-top: var(--sp-7);
    padding-bottom: var(--sp-7);
  }

  .rb-ftw__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Portrait container above content — direct grid child. */
  .rb-ftw__image {
    grid-row: 1;
    min-height: 0;
    margin-bottom: var(--sp-5);
  }

  .rb-ftw__content {
    grid-row: 2;
  }

  /* height: auto releases sections.css height: 100%; aspect-ratio holds proportion. */
  .rb-ftw__portrait {
    height: auto;
    aspect-ratio: 3 / 4;
  }


  /* ══════════════════════════════════════════════════════════════════════════
     WHO THIS IS FOR — overrides sections.css
     ══════════════════════════════════════════════════════════════════════════ */

  /* Light section: 80px → 56px (--sp-7). Two-column audience grid → single column. */

  .rb-who-for {
    padding-top: var(--sp-7);
    padding-bottom: var(--sp-7);
  }

  .rb-who-for__grid {
    grid-template-columns: 1fr;
  }


  /* ══════════════════════════════════════════════════════════════════════════
     NEWSLETTER — overrides sections.css
     ══════════════════════════════════════════════════════════════════════════ */

  /*
   * Light section: 80px → 56px (--sp-7).
   * max-width: 560px released — form fills available container width.
   * CBS §19 derived: "Form at full width."
   * Submit button width: 100% — Vbout does not inject inline width; no !important required.
   */

  .rb-newsletter {
    padding-top: var(--sp-7);
    padding-bottom: var(--sp-7);
  }

  .rb-newsletter__inner {
    max-width: 100%;
  }

  .rb-newsletter__form input[type="submit"],
  .rb-newsletter__form button[type="submit"] {
    width: 100%;
  }


  /* ══════════════════════════════════════════════════════════════════════════
     FAQ SECTION — overrides sections.css  (AM-08: light surface Class 2)
     ══════════════════════════════════════════════════════════════════════════ */

  /*
   * Light section: 80px → 56px (--sp-7). Single-column stacked — no grid to collapse.
   * max-width constraints on header (680px) and items (760px) released.
   */

  .rb-faq-section {
    padding-top: var(--sp-7);
    padding-bottom: var(--sp-7);
  }

  .rb-faq-section__header {
    max-width: 100%;
    margin-bottom: var(--sp-6);
  }

  .rb-faq-section__items {
    max-width: 100%;
  }


  /* ══════════════════════════════════════════════════════════════════════════
     CTA SECTION — overrides sections.css
     ══════════════════════════════════════════════════════════════════════════ */

  /*
   * Dark feature section: 96px → 64px (--sp-8).
   * max-width: 640px on inner released. CBS §19 derived: "Button full-width."
   */

  .rb-cta-section {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }

  .rb-cta-section__inner {
    max-width: 100%;
  }

  .rb-cta-section__cta .rb-btn {
    width: 100%;
    justify-content: center;
  }


  /* ══════════════════════════════════════════════════════════════════════════
     CTA STRIP — overrides components.css
     ══════════════════════════════════════════════════════════════════════════ */

  /*
   * Interior page closing strip. CBS §19: stacks to column; button below heading.
   * No padding reduction — strip padding (--sp-6 = 48px) is already strip-scale.
   */

  .rb-cta-strip__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .rb-cta-strip__inner .rb-btn {
    width: 100%;
    justify-content: center;
  }


  /* ══════════════════════════════════════════════════════════════════════════
     FOOTER — overrides footer.css
     ══════════════════════════════════════════════════════════════════════════ */

  /*
   * CBS §19: "Single column; tagline full-width; nav below."
   * Tagline clamp override: clamp(28px, 3.5vw, 44px) → clamp(28px, 8vw, 36px).
   * Nav margin-top: --sp-6 (48px) — CBS §19 verbatim.
   */

  .rb-footer__outer {
    padding-top: var(--sp-8);
  }

  .rb-footer__grid {
    display: block;
  }

  .rb-footer__tagline {
    max-width: 100%;
  }

  .rb-footer__line1,
  .rb-footer__line2 {
    font-size: clamp(28px, 8vw, 36px);
  }

  .rb-footer__nav {
    margin-top: var(--sp-6);
  }


  /* ══════════════════════════════════════════════════════════════════════════
     ARCHIVE — overrides archive.css
     ══════════════════════════════════════════════════════════════════════════ */

  /*
   * Archive hero (dark): 80px top → 64px; 64px bottom → 48px.
   * Archive listing (light): 64px/80px → 56px/56px (--sp-7).
   * Insight card: grid "64px 1fr" → single column.
   * Number column padding-top reset; margin-bottom creates gap before body.
   * CBS §19: "Number indicator moves above body content."
   */

  .rb-archive-hero {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-6);
  }

  .rb-archive-listing {
    padding-top: var(--sp-7);
    padding-bottom: var(--sp-7);
  }

  .rb-insight-card {
    grid-template-columns: 1fr;
  }

  .rb-insight-card__number {
    padding-top: 0;
    margin-bottom: var(--sp-2);
  }


  /* ══════════════════════════════════════════════════════════════════════════
     ARTICLE — overrides article.css
     ══════════════════════════════════════════════════════════════════════════ */

  /*
   * Article hero: raise padding-top from 64px to 80px — nav is 64px tall,
   * leaving no visible space between nav and meta row at 64px.
   * Body inner: max-width 680px released — fills container at 24px padding.
   * CBS §19: "Article Body: Full container width with 24px padding."
   * Article nav: two-column → single column. Each link fills available width.
   * .rb-article-nav__next: right-alignment normalized to left on mobile.
   */

  .rb-article-hero {
    padding-top: var(--sp-10);
  }

  .rb-article-body__inner {
    max-width: 100%;
  }

  .rb-article-nav__inner {
    flex-direction: column;
    gap: var(--sp-4);
  }

  .rb-article-nav__prev,
  .rb-article-nav__next {
    max-width: 100%;
  }

  .rb-article-nav__next {
    text-align: left;
    align-items: flex-start;
  }


  /* ══════════════════════════════════════════════════════════════════════════
     INTERIOR PAGES — overrides page.css
     ══════════════════════════════════════════════════════════════════════════ */

  /*
   * About two-column (AM-11: 1fr 340px): single column at mobile.
   * Portrait col receives order: -1 — portrait above body. CBS §19 verbatim.
   *
   * Contact two-column (1fr 400px): single column at mobile.
   * DOM order is copy → form; single column produces copy above form.
   * CBS §19: "Form below copy." No order manipulation required.
   *
   * Case listing: dark section. Padding 80px → 64px (--sp-8).
   * Case block internal gap reduced accordingly.
   */

  .rb-two-column__grid {
    grid-template-columns: 1fr;
  }

  /* order: -1 moves portrait-col before content-col in the single column. */
  .rb-two-column__portrait-col {
    order: -1;
  }

  .rb-contact__grid {
    grid-template-columns: 1fr;
  }

  /* ── Work page ── */

  .rb-work-hero {
    padding-top: var(--sp-10);
    padding-bottom: var(--sp-8);
  }

  .rb-work-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .rb-work-hero__headline {
    font-size: clamp(32px, 9vw, 46px);
  }

  .rb-signals {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }

  .rb-signal {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .rb-pulse {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }

  .rb-pulse__flow {
    flex-direction: column;
  }

  .rb-pulse__step {
    border-right: none;
    border-bottom: 1px solid var(--rb-border);
  }

  .rb-pulse__step:last-child {
    border-bottom: none;
  }

  .rb-pulse__step::after {
    content: '↓';
    right: auto;
    left: var(--sp-4);
    top: auto;
    bottom: -14px;
  }

  .rb-models {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }

  .rb-models__header {
    margin-bottom: var(--sp-7);
  }

  .rb-model {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .rb-model--primary .rb-model__left {
    border-left: none;
    border-top: 3px solid var(--rb-cognac);
    padding-left: 0;
    padding-top: 16px;
  }

  .rb-outcomes {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }

  /* ── Contact page ── */

  .rb-contact-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .rb-contact-hero__headline {
    font-size: clamp(34px, 9vw, 48px);
  }

  .rb-contact-frame {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }

  .rb-frame-row {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .rb-frame-row__label-col {
    padding-top: 0;
  }

  .rb-frame-row__headline {
    font-size: clamp(17px, 5vw, 22px);
    margin-bottom: 10px;
  }

  .rb-frame-row__body {
    font-size: 15px;
    line-height: 1.7;
  }

  .rb-contact-action {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }

  .rb-contact-action__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .rb-cf7-wrap {
    padding: var(--sp-5);
  }

  .rb-expect__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .rb-case-listing {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }

  .rb-case-listing__grid {
    gap: var(--sp-8);
  }

  .rb-case-block {
    padding-bottom: var(--sp-8);
  }


  /* ══════════════════════════════════════════════════════════════════════════
     ABOUT PAGE — mobile padding reductions (CBS §19 spacing scaling)
     ══════════════════════════════════════════════════════════════════════════ */

  .rb-about-hero {
    padding-top: var(--sp-10);
    padding-bottom: var(--sp-8);
  }

  .rb-about-hero__inner {
    grid-template-columns: 1fr;
  }

  .rb-context-strip__inner {
    flex-direction: column;
    gap: var(--sp-4);
  }

  .rb-context-item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0 0 var(--sp-3);
  }

  .rb-context-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .rb-personal__inner,
  .rb-origin__inner {
    grid-template-columns: 1fr;
  }

  .rb-vantages {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }

  .rb-vantages__grid {
    grid-template-columns: 1fr;
  }

  .rb-positions {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }

  .rb-position-row {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .rb-position-row__label {
    padding-top: 0;
  }

  .rb-position-row__title {
    font-size: clamp(18px, 5vw, 22px);
  }

  .rb-position-row__body {
    font-size: 15px;
    line-height: 1.7;
  }

  .rb-evidence {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }

  .rb-evidence__header {
    grid-template-columns: 1fr;
  }

  .rb-evidence__stats {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .rb-evidence__narrative {
    grid-template-columns: 1fr;
  }

  .rb-about-who__grid {
    grid-template-columns: 1fr;
  }


  /* ══════════════════════════════════════════════════════════════════════════
     INSIGHTS PAGE — mobile overrides
     ══════════════════════════════════════════════════════════════════════════ */

  .rb-insights-hero {
    padding-top: var(--sp-10);
    padding-bottom: var(--sp-8);
  }

  .rb-insights-hero__inner {
    grid-template-columns: 1fr;
  }

  .rb-filter-bar {
    top: 64px; /* match reduced nav height on mobile */
  }

  .rb-article-grid {
    grid-template-columns: 1fr;
  }

  .rb-article-wide {
    grid-template-columns: 1fr;
  }

  .rb-nl__inner {
    grid-template-columns: 1fr;
  }


}