/*
 * REAL.PRO Studios · Mobile Quality V1.1
 * Audit + runtime-revalidation driven authority layer.
 *
 * V1.1 preserves the successful mobile brand correction from V1,
 * but removes its inner-hero regression.
 *
 * Design rule:
 * fixed header + internal hero = one usable first fold.
 * If content genuinely needs more room, the hero may grow naturally.
 */

:root {
  --rp-mq-header-current:
    var(--rp-hp-header-h, 82px);

  --rp-mq-first-fold:
    calc(100svh - var(--rp-mq-header-current));
}


/* ==========================================================
   1. INTERNAL PAGE · HEADER / HERO SYNCHRONIZATION
   ========================================================== */

@media (max-width: 1024px) {

  :root {
    --realpro-header-h:
      var(--rp-mq-header-current) !important;

    --rp-hero-header-h:
      var(--rp-mq-header-current) !important;

    --rp-hero-height:
      var(--rp-mq-first-fold) !important;

    --rp-page-hero-min:
      var(--rp-mq-first-fold) !important;
  }


  html body.rp-standardized-page {
    padding-top:
      var(--rp-mq-header-current) !important;
  }

  html:has(body.rp-standardized-page) {
    scroll-padding-top:
      var(--rp-mq-header-current) !important;
  }

  body.rp-standardized-page [id] {
    scroll-margin-top:
      calc(var(--rp-mq-header-current) + 16px) !important;
  }


  /*
   * Keep the parent and structural content aligned to the usable
   * viewport. Height remains auto so short-landscape content is
   * never clipped simply to satisfy a viewport formula.
   */

  html body.rp-standardized-page:not(.rp-page-contact)
  main#main > section.rp-page-hero {
    box-sizing: border-box !important;

    height: auto !important;
    min-height:
      var(--rp-mq-first-fold) !important;

    overflow: clip !important;
  }


  html body.rp-standardized-page:not(.rp-page-contact)
  main#main > section.rp-page-hero
  > .rp-page-hero__content {
    box-sizing: border-box !important;

    height: auto !important;
    min-height:
      var(--rp-mq-first-fold) !important;
  }


  /*
   * Contact owns a distinct hero system, therefore it receives
   * the same viewport discipline without inheriting generic copy rules.
   */

  html body.rp-page-contact
  main#main > section.rp-contact-hero[data-rp-surface="dark"] {
    box-sizing: border-box !important;

    height: auto !important;
    min-height:
      var(--rp-mq-first-fold) !important;

    overflow: clip !important;
  }


  html body.rp-page-contact
  main#main > section.rp-contact-hero[data-rp-surface="dark"]
  > .rp-contact-hero__content {
    box-sizing: border-box !important;

    height: auto !important;
    min-height:
      var(--rp-mq-first-fold) !important;
  }
}


/* ==========================================================
   2. TRUE MOBILE HEADER / SYMBOL SCALE
   ========================================================== */

@media (max-width: 760px) {

  :root {
    --rp-mq-header-current:
      var(
        --rp-hp-header-h-mobile,
        clamp(74px, 19vw, 88px)
      );

    --rp-mobile-hero-height:
      var(--rp-mq-first-fold) !important;

    --rp-hero-height:
      var(--rp-mq-first-fold) !important;

    --rp-page-hero-min:
      var(--rp-mq-first-fold) !important;
  }


  /*
   * These selectors intentionally match the historical V41
   * specificity so its fixed 100svh height can no longer win.
   */

  html body.rp-standardized-page:not(.rp-page-contact)
  main#main > section.rp-page-hero {
    height: auto !important;
    min-height:
      var(--rp-mq-first-fold) !important;
  }


  html body.rp-standardized-page:not(.rp-page-contact)
  .rp-page-hero__content {
    height: auto !important;
    min-height:
      var(--rp-mq-first-fold) !important;
  }


  html body.rp-page-contact
  main#main > section.rp-contact-hero[data-rp-surface="dark"] {
    height: auto !important;
    min-height:
      var(--rp-mq-first-fold) !important;
  }


  html body.rp-page-contact
  .rp-contact-hero__content {
    height: auto !important;
    min-height:
      var(--rp-mq-first-fold) !important;
  }


  /*
   * Brand asset geometry.
   * The symbol is deliberately sized independently from the
   * horizontal wordmark.
   */

  html body .site-header[data-header] .header-logo,
  html body .site-header[data-header].is-scrolled .header-logo {
    width: auto !important;
    min-width: 0 !important;

    max-width:
      calc(100vw - 94px) !important;

    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;

    flex: 0 0 auto !important;
    overflow: visible !important;
  }


  html body
  .site-header[data-header]
  .header-logo
  img[src*="realpro-logo-symbol"] {
    width:
      clamp(58px, 16vw, 68px) !important;

    min-width:
      clamp(58px, 16vw, 68px) !important;

    max-width:
      clamp(58px, 16vw, 68px) !important;

    height: auto !important;
    max-height: 46px !important;

    object-fit: contain !important;
    object-position: left center !important;
  }


  html body
  .site-header[data-header]
  .header-logo
  img[src*="realpro-logo-horizontal"] {
    width:
      clamp(150px, 42vw, 188px) !important;

    min-width: 0 !important;

    max-width:
      min(188px, calc(100vw - 100px)) !important;

    height: auto !important;
    max-height: 44px !important;

    object-fit: contain !important;
    object-position: left center !important;
  }
}


/* Approved short-phone landscape header mode. */

@media
  (max-width: 760px)
  and (max-height: 560px)
  and (orientation: landscape) {

  :root {
    --rp-mq-header-current: 68px;
  }

  html body
  .site-header[data-header]
  .header-logo
  img[src*="realpro-logo-symbol"] {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
  }
}


/* ==========================================================
   3. TABLET LOGO LINK TOUCH AREA
   ========================================================== */

@media (min-width: 761px) and (max-width: 1024px) {

  html body .site-header[data-header] .header-logo {
    min-height: 44px !important;
    align-items: center !important;
  }
}


/* ==========================================================
   4. VIDEO PRODUCTION · TOUCH-SAFE CONTROLS
   ========================================================== */

@media (max-width: 1024px), (pointer: coarse) {

  /*
   * 46px is intentional. Chromium device emulation measured
   * a 44px CSS box at ~43.78px, so 46px provides a real
   * >=44px rendered interaction area.
   */

  html body .rp-v65-stage__arrow {
    width: 46px !important;
    min-width: 46px !important;

    height: 46px !important;
    min-height: 46px !important;
  }


  html body .rp-v65-stage__pager {
    gap: 0 !important;
    padding: 4px 6px !important;
  }


  html body .rp-v65-stage__dot,
  html body .rp-v65-stage__dot.is-active {
    position: relative !important;

    width: 46px !important;
    min-width: 46px !important;

    height: 46px !important;
    min-height: 46px !important;

    padding: 0 !important;

    background: transparent !important;
  }


  html body .rp-v65-stage__dot::before {
    content: "" !important;

    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    width: 5px !important;
    height: 5px !important;

    border-radius: 999px !important;

    background:
      rgba(255,255,255,.42) !important;

    transform:
      translate(-50%, -50%) !important;

    transition:
      width .22s ease,
      background .22s ease !important;
  }


  html body .rp-v65-stage__dot.is-active::before {
    width: 22px !important;

    background:
      var(--rp-v65-red, #d32f2f) !important;
  }
}


/* ==========================================================
   5. REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  html body .rp-v65-stage__dot::before {
    transition: none !important;
  }
}