/* ==========================================================================
   Rufino Studio · Cinéma Gallery — Design System v6.0 · DEFINITIVO
   utilities.css — type scale · spacing · layout · cinéma · responsive helpers
   --------------------------------------------------------------------------
   Loads last. Utilities win over components by cascade-layer order.
   Breakpoints: 320 · 375 · 768 · 1024 · 1440
   ========================================================================== */

@layer utilities {

  /* ======================================================================
     TYPE SCALE  ·  apply a role to any element
     ====================================================================== */

  .rf-text-hero,
  .rf-text-display,
  .rf-text-h2,
  .rf-text-h3,
  .rf-text-tagline {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    text-transform: uppercase;
    line-height: var(--rf-lh-tight);
  }
  .rf-text-hero {
    font-size: var(--rf-fs-hero);
    line-height: var(--rf-lh-hero);
    letter-spacing: var(--rf-ls-hero);
    text-wrap: balance;
  }
  .rf-text-display {
    font-size: var(--rf-fs-display);
    letter-spacing: var(--rf-ls-display);
    text-wrap: balance;
  }
  .rf-text-h2 {
    font-size: var(--rf-fs-h2);
    letter-spacing: var(--rf-ls-h2);
    text-wrap: balance;
  }
  .rf-text-h3 { font-size: var(--rf-fs-h3); }
  .rf-text-tagline { font-size: var(--rf-fs-tagline); letter-spacing: 0.01em; }

  .rf-text-lead {
    font-family: var(--rf-font-body);
    font-size: var(--rf-fs-lead);
    font-weight: var(--rf-w-light);
    line-height: 1.45;
    text-wrap: pretty;
  }
  .rf-text-body    { font-size: var(--rf-fs-body);    font-weight: var(--rf-w-light); line-height: var(--rf-lh-body); }
  .rf-text-body-sm { font-size: var(--rf-fs-body-sm); font-weight: var(--rf-w-light); line-height: 1.55; }
  .rf-text-caption { font-size: var(--rf-fs-caption); letter-spacing: 0.02em; }
  .rf-text-micro   { font-size: var(--rf-fs-micro); }
  .rf-text-overline {
    font-family: var(--rf-font-body);
    font-size: var(--rf-fs-overline);
    font-weight: var(--rf-w-medium);
    letter-spacing: var(--rf-ls-overline);
    text-transform: uppercase;
  }

  /* ---- color & weight --------------------------------------------------- */
  .rf-ink        { color: var(--rf-ink); }
  .rf-ink-muted  { color: var(--rf-ink-muted); }
  .rf-ink-faint  { color: var(--rf-ink-faint); }
  .rf-gold       { color: var(--rf-gold); }
  .rf-w-light    { font-weight: var(--rf-w-light); }
  .rf-w-medium   { font-weight: var(--rf-w-medium); }
  .rf-italic     { font-style: italic; }
  .rf-balance    { text-wrap: balance; }
  .rf-pretty     { text-wrap: pretty; }
  .rf-nowrap     { white-space: nowrap; }

  /* ======================================================================
     LAYOUT  ·  stacks, clusters, grids
     ====================================================================== */

  /* vertical rhythm — owl-less, gap-based stack */
  .rf-stack    { display: flex; flex-direction: column; gap: var(--rf-sp-md); }
  .rf-stack-sm { display: flex; flex-direction: column; gap: var(--rf-sp-2xs); }
  .rf-stack-lg { display: flex; flex-direction: column; gap: var(--rf-sp-lg); }
  .rf-stack-xl { display: flex; flex-direction: column; gap: var(--rf-sp-xl); }

  /* horizontal group that wraps */
  .rf-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rf-sp-xs);
  }
  .rf-cluster--between { justify-content: space-between; }

  /* responsive auto grids */
  .rf-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rf-sp-md); }
  .rf-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rf-sp-md); }
  .rf-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--rf-sp-md);
  }

  .rf-center      { text-align: center; }
  .rf-center-x    { margin-inline: auto; }
  .rf-items-center{ align-items: center; }

  /* margin helpers (use sparingly — prefer stack gaps) */
  .rf-mt-sm { margin-block-start: var(--rf-sp-sm); }
  .rf-mt-md { margin-block-start: var(--rf-sp-md); }
  .rf-mt-lg { margin-block-start: var(--rf-sp-lg); }
  .rf-mb-md { margin-block-end: var(--rf-sp-md); }
  .rf-mb-lg { margin-block-end: var(--rf-sp-lg); }

  /* ======================================================================
     CINÉMA  ·  aspect ratios, photo framing, grain, scrim
     ====================================================================== */

  .rf-aspect-cinema  { aspect-ratio: var(--rf-cinemascope); }
  .rf-aspect-3-2     { aspect-ratio: 3 / 2; }
  .rf-aspect-4-5     { aspect-ratio: 4 / 5; }
  .rf-aspect-square  { aspect-ratio: 1; }
  :where(.rf-aspect-cinema, .rf-aspect-3-2, .rf-aspect-4-5, .rf-aspect-square) > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* the single shadow — photographs only */
  .rf-photo {
    border-radius: var(--rf-r-md);
    overflow: clip;
    box-shadow: var(--rf-shadow-photo);
  }
  .rf-photo--hero { box-shadow: var(--rf-shadow-photo-hero); }
  .rf-photo--frame { border: 1px solid var(--rf-hairline); }

  /* film-grain — heavier / softer variants of the component-layer .rf-grain */
  .rf-grain--strong::after { opacity: 0.09; }
  .rf-grain--soft::after   { opacity: 0.03; }

  /* legibility scrim for text over imagery */
  .rf-scrim {
    position: relative;
    isolation: isolate;
  }
  .rf-scrim::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top,
      rgba(9,9,11,.9) 0%, rgba(9,9,11,.45) 45%, transparent 80%);
  }

  /* ======================================================================
     SCROLL REVEAL  ·  fade-up on entry — progressive enhancement, no JS
     ====================================================================== */

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      @keyframes rf-reveal-in {
        from { opacity: 0; transform: translateY(34px); }
      }
      .rf-reveal {
        animation-name: rf-reveal-in;
        animation-duration: auto;          /* timeline drives progress */
        animation-timing-function: linear;
        animation-fill-mode: both;
        animation-timeline: view();
        animation-range: entry 0% entry 88%;
      }
    }
  }

  /* ======================================================================
     ACCESSIBILITY & VISIBILITY
     ====================================================================== */

  .rf-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .rf-skip-link {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--rf-gold);
    color: var(--rf-on-gold);
    font-family: var(--rf-font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    translate: 0 -120%;
    transition: translate var(--rf-dur-base) var(--rf-ease);
  }
  .rf-skip-link:focus-visible { translate: 0 0; }

  /* ======================================================================
     RESPONSIVE VISIBILITY  ·  768 breakpoint
     ====================================================================== */

  @media (max-width: 48em) {
    .rf-hide-mobile { display: none !important; }
    .rf-grid-2,
    .rf-grid-3 { grid-template-columns: 1fr; }
  }
  @media (min-width: 48.0625em) {
    .rf-hide-desktop { display: none !important; }
  }

  /* coarse-pointer touch-target bump */
  @media (pointer: coarse) {
    .rf-nav__link { padding-block: 0.75rem; }
  }
}