/* ============================================================
   RRANWAT RESPONSIVE — v2.0
   File: assets/css/responsive.css

   All media queries live here. No breakpoints in other files.
   Mobile-first philosophy with max-width overrides.

   Breakpoints:
     0–479px   → Mobile small (iPhone SE)
     480–767px  → Mobile large
     768–1023px → Tablet
     1024px+    → Desktop (default styles)
   ============================================================ */


/* ============================================================
   DESKTOP DEFAULTS — 1024px and above
   Most styles are written for desktop in components.css and
   sections.css. Only exceptions and adjustments here.
   ============================================================ */

@media (min-width: 1024px) {

  /* Ensure accordion never shows on desktop */
  .rw-services__accordion {
    display: none !important;
  }

  /* Ensure tab panel always shows on desktop */
  .rw-services__panel {
    display: flex !important;
  }

}


/* ============================================================
   TABLET — 768px to 1023px
   ============================================================ */

@media (max-width: 1023px) {

  /* ── Nav ───────────────────────────────────────────── */

  .rw-nav__links {
    display: none;
  }

  .rw-nav__cta {
    display: none;
  }

  .rw-nav__mobile-trigger {
    display: flex;
  }

  /* ── Hero ──────────────────────────────────────────── */

  .rw-hero__inner {
    flex-direction: column;
    gap:            var(--space-12);
    min-height:     auto;
    padding-top:    calc(68px + var(--space-16));
    padding-bottom: var(--space-10);
    align-items:    flex-start;
  }

  .rw-hero__copy {
    flex:      none;
    max-width: none;
    width:     100%;
    padding-top: 0;
  }

  /* Visual at tablet — show first, full width */
  .rw-hero__visual {
    flex:      none;
    max-width: none;
    width:     100%;
    order:     -1;
  }

  /* Hero frame — reduced height at tablet */
  .rw-hero__frame {
    height: 260px;
  }

  /* ── Featured project media ──────────────────────────── */

  .rw-projects__media {
    flex:  0 0 220px;
    width: 220px;
  }

  /* ── Stats ─────────────────────────────────────────── */

  .rw-stats__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* ── Services (switch to accordion at tablet) ──────── */

  .rw-services__panel {
    display: none;
  }

  .rw-services__accordion {
    display: block;
  }

  /* ── Why ────────────────────────────────────────────── */

  .rw-why__col-headers {
    display: none; /* column headers don't make sense stacked */
  }

  .rw-why__row {
    flex-direction: column;
    gap:            var(--space-4);
  }

  .rw-why__inner {
    max-width: none;
  }

  .rw-why__cell--left p {
    font-style:    italic;
    position:      relative;
    padding-left:  var(--space-5);
  }

  .rw-why__cell--left p::before {
    content:    '';
    position:   absolute;
    left:       0;
    top:        0;
    bottom:     0;
    width:      3px;
    background: var(--border-mid);
  }

  /* ── Contact ────────────────────────────────────────── */

  .rw-contact__inner {
    flex-direction: column;
    gap:            var(--space-12);
  }

  .rw-contact__statement {
    flex:      none;
    max-width: none;
    width:     100%;
  }

  .rw-contact__form-wrap {
    width: 100%;
  }

  /* ── Footer ─────────────────────────────────────────── */

  .rw-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-10);
  }

  .rw-footer__brand {
    grid-column: 1 / -1; /* Brand spans full width */
  }

  .rw-footer__bottom-inner {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-2);
  }

}


/* ============================================================
   MOBILE — 0px to 767px
   ============================================================ */

@media (max-width: 767px) {

  /* ── Hero ──────────────────────────────────────────── */

  .rw-hero__inner {
    gap:            var(--space-8);
    padding-top:    calc(68px + var(--space-12));
    padding-bottom: var(--space-8);
  }

  .rw-hero__headline {
    font-size: clamp(2.5rem, 10vw, 3.5rem);
  }

  .rw-hero__subtext {
    font-size: var(--text-base);
    max-width: none;
  }

  .rw-hero__actions {
    flex-direction: column;
    align-items:    flex-start;
  }

  .rw-hero__actions .rw-btn {
    width: 100%;
    justify-content: center;
  }

  /* Hero frame — reduced height on mobile */
  .rw-hero__frame {
    height: 260px;
  }

  /* ── Ticker ─────────────────────────────────────────── */

  .rw-ticker__content {
    font-size: var(--text-xs);
    gap:       var(--space-4);
  }

  /* ── Statement ──────────────────────────────────────── */

  .rw-statement__quote {
    font-size: var(--text-3xl);
  }

  .rw-statement__label {
    justify-content: flex-start;
  }

  /* ── Stats ─────────────────────────────────────────── */

  .rw-stats__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .rw-stats__count {
    font-size: var(--text-5xl);
  }

  .rw-stats__feature-caption {
    max-width: none;
  }

  /* ── Projects ───────────────────────────────────────── */

  .rw-projects__entry {
    flex-direction: column;
    gap:            var(--space-4);
    padding:        var(--space-6) 0;
  }

  /* Metadata goes above body — hidden on small mobile */
  .rw-projects__meta {
    flex:      none;
    width:     auto;
  }

  /* Amber bar becomes top accent on mobile */
  .rw-projects__bar {
    display: none;
  }

  .rw-projects__value {
    margin-left: 0;
  }

  /* Featured entry media — full width above body */
  .rw-projects__entry--featured {
    flex-direction: column;
  }

  .rw-projects__media {
    width:  100%;
    height: 200px;
  }

  /* ── Sectors ────────────────────────────────────────── */

  .rw-sectors__cloud {
    gap: var(--space-2);
  }

  /* ── Why ────────────────────────────────────────────── */

  .rw-why__cell--right p {
    padding-left: var(--space-6);
  }

  /* ── Contact ─────────────────────────────────────────── */

  .rw-contact__copy {
    max-width: none;
  }

  .rw-contact__headline {
    font-size: var(--text-3xl);
  }

  .rw-contact__inner {
    gap: var(--space-10);
  }

  /* ── Footer ─────────────────────────────────────────── */

  .rw-footer__grid {
    grid-template-columns: 1fr;
    gap:                   var(--space-10);
    padding-block:         var(--space-12) var(--space-10);
  }

  .rw-footer__bottom-inner {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-2);
  }

  /* ── Mobile menu — larger touch targets ────────────── */

  .rw-mobile-menu__link {
    font-size:   var(--text-3xl);
    padding:     var(--space-3) 0;
  }

}


/* ============================================================
   SMALL MOBILE — 0px to 479px
   ============================================================ */

@media (max-width: 479px) {

  /* ── Nav ───────────────────────────────────────────── */

  .rw-nav {
    height: 56px;
  }

  .rw-nav__inner {
    height: 56px;
  }

  /* Adjust hero offset for shorter nav on small devices */
  .rw-hero__inner {
    padding-top: calc(56px + var(--space-10));
  }

  /* ── Hero ──────────────────────────────────────────── */

  .rw-hero__headline {
    font-size: clamp(2.2rem, 12vw, 3rem);
  }

  /* ── Stats ─────────────────────────────────────────── */

  .rw-stats__count {
    font-size: var(--text-4xl);
  }

  .rw-stats__num {
    font-size: var(--text-2xl);
    min-width: 4rem;
  }

  /* ── Statement ──────────────────────────────────────── */

  .rw-statement__quote {
    font-size: var(--text-2xl);
  }

  /* ── Projects ───────────────────────────────────────── */

  .rw-projects__title {
    font-size: var(--text-3xl);
  }

  /* ── Services ───────────────────────────────────────── */

  .rw-services__title {
    font-size: var(--text-3xl);
  }

  /* ── Why ────────────────────────────────────────────── */

  .rw-why__title {
    font-size: var(--text-3xl);
  }

  /* ── Contact ─────────────────────────────────────────── */

  .rw-contact__headline {
    font-size: var(--text-2xl);
  }

  /* ── Footer ─────────────────────────────────────────── */

  .rw-footer__grid {
    padding-block: var(--space-10) var(--space-8);
  }

}


/* ============================================================
   WIDE DESKTOP — 1280px and above
   Fine-tuning for large screens.
   ============================================================ */

@media (min-width: 1280px) {

  /* Hero frame gets more presence on large screens */
  .rw-hero__frame {
    height: 600px;
  }

  /* Why section — tighter max-width for optimal reading */
  .rw-why__inner {
    max-width: 980px;
  }

}


/* ============================================================
   REDUCED MOTION — accessible preference
   All transitions and animations disabled.
   Elements shown in final state immediately.
   ============================================================ */

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

  .rw-btn,
  .rw-nav__link,
  .rw-ticker__track,
  .rw-mobile-menu,
  .rw-projects__bar,
  .rw-projects__cta-arrow,
  .rw-mobile-menu__link,
  .rw-services__acc-content,
  .rw-services__acc-icon::before,
  .rw-services__acc-icon::after {
    transition: none;
    animation:  none;
  }

  .rw-ticker__track {
    animation: none;
  }

  .rw-mobile-menu {
    transition: none;
    transform:  none; /* fallback if JS is delayed */
  }

  /* Hero/project field photos — show first image statically,
     no scale/cycle animation */
  .rw-field-photo__img {
    transition: none;
    transform:  none;
  }

}