/*
 * Rizve Joarder — Responsive CSS
 * Mobile-first breakpoints for all rj- components
 * Companion to rizve-design-system.css
 */

/* ─── BREAKPOINTS
 *   --rj-bp-xl:   1280px  (large desktops)
 *   --rj-bp-lg:   1024px  (laptops / tablets landscape)
 *   --rj-bp-md:    768px  (tablets portrait)
 *   --rj-bp-sm:    640px  (large phones)
 *   --rj-bp-xs:    480px  (small phones)
 * ─────────────────────────────────────────────────────────────────────────── */

/* ─── 1280px — constrain wide layouts ───────────────────────────────────── */
@media (max-width: 1280px) {
  .rj-footer__grid {
    grid-template-columns: 1.2fr repeat(4, 1fr);
  }

  .rj-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── 1024px — collapse nav, adjust grids ───────────────────────────────── */
@media (max-width: 1024px) {
  /* Nav → hamburger */
  .rj-nav-desktop {
    display: none;
  }

  .rj-hamburger {
    display: flex;
  }

  /* Grids: 3/4-col → 2-col */
  .rj-grid-3,
  .rj-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer: 5-col → 2+2+1 layout */
  .rj-footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(20px, 3vw, 32px);
  }

  /* Brand col goes full-width first row */
  .rj-footer__col--brand {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px 32px;
    align-items: start;
  }

  .rj-footer__brand-desc {
    grid-column: 1 / -1;
    max-width: 100%;
  }

  .rj-footer__cta {
    grid-column: 1;
    margin-top: 0;
    margin-bottom: 0;
    justify-self: start;
  }

  .rj-footer__social {
    grid-column: 2;
    justify-self: end;
    align-self: center;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .rj-footer__availability {
    grid-column: 1 / -1;
    margin-top: 8px;
  }

  .rj-footer__brand-actions {
    grid-column: 1;
    margin-top: 0;
    align-self: center;
  }

  /* CTA band */
  .rj-cta-band {
    padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 48px);
  }

  /* Dashboard mockup KPI grid */
  .rj-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Mega menu — position relative on mobile handled by drawer instead */
  .rj-mega-menu {
    position: static;
    width: 100%;
    transform: none;
    box-shadow: none;
    border-radius: var(--rj-r-md);
    padding: 12px;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--rj-border);
    background: rgba(10, 26, 44, 0.60);
  }
}

/* ─── 768px — tablet portrait ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .rj-footer__newsletter {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
    margin-bottom: 40px;
  }
  .rj-footer__newsletter-form {
    flex-direction: column;
  }
  .rj-footer__newsletter-form .rj-btn {
    width: 100%;
    justify-content: center;
  }
  /* Section spacing — mobile: 56–72px normal, 40–56px tight */
  .rj-section {
    padding-block: clamp(56px, 7vw, 72px);
  }

  .rj-section--tight,
  .rj-section-tight {
    padding-block: clamp(40px, 5.5vw, 56px);
  }

  .rj-section-hero {
    padding-block: clamp(64px, 9vw, 80px);
  }

  /* Header height */
  .rj-header {
    height: 64px;
  }

  .rj-header__inner {
    height: 64px;
  }

  /* Footer grid: 2 columns */
  .rj-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Section header */
  .rj-section-head {
    margin-bottom: clamp(24px, 3vw, 40px);
  }

  /* Form row */
  .rj-form-row {
    grid-template-columns: 1fr;
  }

  /* Stat card grid */
  .rj-grid-4.rj-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Card padding */
  .rj-card--lg {
    padding: 24px;
  }

  /* Heading sizes — reduce further on tablet */
  .rj-heading--xl { font-size: clamp(36px, 6vw, 56px); }
  .rj-heading--lg { font-size: clamp(30px, 5vw, 48px); }

  /* CTA band */
  .rj-cta-band__actions {
    flex-direction: column;
    align-items: center;
  }

  .rj-cta-band__actions .rj-btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
}

/* ─── 640px — large phones ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* All multi-col grids → single column */
  .rj-grid-2,
  .rj-grid-3 {
    grid-template-columns: 1fr;
  }

  /* 4-col → 2-col on small phone */
  .rj-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer → single column */
  .rj-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .rj-footer__col--brand {
    display: flex;
    flex-direction: column;
    grid-column: auto;
  }

  .rj-footer__social,
  .rj-footer__cta {
    grid-column: auto;
    justify-self: auto;
    align-self: auto;
  }

  .rj-footer__brand-desc {
    max-width: 100%;
  }

  /* Footer bottom — stack */
  .rj-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Cards */
  .rj-card,
  .rj-service-card,
  .rj-stat-card {
    padding: 22px;
  }

  .rj-card--lg {
    padding: 22px;
  }

  /* Testimonial */
  .rj-testimonial-card {
    padding: 22px;
  }

  /* Case card body */
  .rj-case-card__body {
    padding: 18px;
  }

  /* Blog card body */
  .rj-blog-card__body {
    padding: 18px 20px;
  }

  /* Section heading */
  .rj-heading--xl { font-size: clamp(32px, 8vw, 48px); }
  .rj-heading--lg { font-size: clamp(28px, 7vw, 40px); }
  .rj-heading--md { font-size: clamp(24px, 6vw, 34px); }

  /* Subheading */
  .rj-subheading {
    font-size: clamp(15px, 4vw, 18px);
  }

  /* Buttons */
  .rj-btn-primary,
  .rj-btn-secondary {
    height: 46px;
    font-size: 14px;
  }

  /* CTA band */
  .rj-cta-band {
    padding: 36px 24px;
    border-radius: var(--rj-r-xl);
  }

  /* FAQ */
  .rj-faq__q {
    padding: 16px 20px;
  }

  .rj-faq__a-inner {
    padding: 0 20px 16px;
  }

  /* Dashboard mockup KPIs */
  .rj-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rj-kpi__value {
    font-size: 22px;
  }

  /* Form row already 1-col */
  .rj-form-row {
    grid-template-columns: 1fr;
  }

  /* Section head */
  .rj-section-head {
    text-align: left;
  }

  /* Header actions — hide CTA text on mobile */
  .rj-header__actions .rj-btn-primary {
    padding: 0 16px;
    height: 40px;
    font-size: 13.5px;
  }
}

/* ─── 480px — small phones ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* 4-col → 1-col */
  .rj-grid-4 {
    grid-template-columns: 1fr;
  }

  /* KPI grid */
  .rj-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Brand name — optionally hide on very small */
  .rj-brand__name {
    display: none;
  }

  /* Mega menu */
  .rj-mega-menu {
    grid-template-columns: 1fr;
  }

  /* Heading sizes */
  .rj-heading--xl { font-size: clamp(28px, 9vw, 40px); }

  /* CTA actions stack */
  .rj-cta-band__actions .rj-btn {
    max-width: 100%;
  }

  /* Service card icon + text */
  .rj-service-card__title {
    font-size: 17px;
  }

  /* Chips */
  .rj-chip {
    font-size: 10.5px;
    padding: 4px 10px;
  }

  /* Stat card value */
  .rj-stat-card__value {
    font-size: clamp(24px, 7vw, 32px);
  }

  /* Footer social */
  .rj-footer__social a {
    width: 40px;
    height: 40px;
  }
}

/* ─── REDUCED MOTION — already in design-system, reinforced here ─────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .rj-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ─── PRINT ──────────────────────────────────────────────────────────────── */
@media print {
  .rj-header,
  .rj-hamburger,
  .rj-drawer,
  .rj-footer__social,
  .rj-btn {
    display: none !important;
  }

  .rj-canvas {
    background: #fff !important;
    color: #000 !important;
  }

  .rj-canvas::before,
  .rj-canvas::after {
    display: none !important;
  }

  .rj-card,
  .rj-glass,
  .rj-service-card,
  .rj-stat-card,
  .rj-blog-card,
  .rj-case-card {
    background: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}