/* ============================================================
   responsive.css — Mobile-first breakpoints
   ============================================================ */

/* ── Mobile base (< 768px) ──────────────────────── */
.hamburger      { display: flex; }
.nav-cta        { display: none; }
.nav-close-btn  { display: none; }

.hero-ctas { flex-direction: column; align-items: flex-start; }
.hero-ctas .btn-primary,
.hero-ctas .btn-secondary { width: 100%; justify-content: center; }

.footer-inner { text-align: center; }
.footer-links { align-items: center; }
.footer-socials { justify-content: center; }

/* ── sm: 480px ──────────────────────────────────── */
@media (min-width: 480px) {
  .hero-ctas { flex-direction: row; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary { width: auto; }
}

/* ── md: 768px ──────────────────────────────────── */
@media (min-width: 768px) {
  .hamburger  { display: none; }
  .nav-links  { display: flex; }
  .nav-cta    { display: inline-flex; }

  .footer-inner { text-align: start; }
  .footer-links { align-items: flex-start; }
  .footer-socials { justify-content: flex-start; }
}

/* ── lg: 1024px ─────────────────────────────────── */
@media (min-width: 1024px) {
  :root {
    --container-pad: 3rem;
    --space-3xl: 6rem;
  }
}

/* ── xl: 1280px ─────────────────────────────────── */
@media (min-width: 1280px) {
  :root { --container-pad: 4rem; }
}

/* ── Mobile nav overlay (animated drawer) ───────── */
@media (max-width: 767px) {

  /* Hidden by default — use visibility+transform, NOT display:none */
  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: min(80vw, 320px);
    height: 100dvh;
    background: var(--bg-primary);
    border-inline-start: 1px solid var(--border);
    z-index: var(--z-overlay);
    padding-block-start: 5rem;
    padding-block-end: var(--space-xl);
    padding-inline: var(--space-xl);
    gap: var(--space-xl);
    overflow-y: auto;
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.18);
    /* Initial hidden state */
    visibility: hidden;
    opacity: 0;
    transform: translateX(100%);
    transition:
      transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      opacity   0.35s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s   linear 0.35s;
    pointer-events: none;
  }

  /* RTL — drawer opens from the left side of the screen (inline-end = left in RTL) */
  [dir="rtl"] .nav-links {
    inset-inline-end: 0;
    inset-inline-start: auto;
    border-inline-start: none;
    border-inline-end: 1px solid var(--border);
    transform: translateX(-100%);
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.18);
  }

  /* Open state */
  .nav-links.mobile-open {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    transition:
      transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      opacity   0.35s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s   linear 0s;
  }

  .nav-links .nav-link {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    width: 100%;
    padding-block: var(--space-xs);
    border-bottom: 1px solid var(--border);
  }

  .nav-links .nav-link:last-of-type {
    border-bottom: none;
  }

  /* ── Backdrop ─────────────────────────────────── */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    /* Must be BELOW the navbar stacking context (--z-sticky = 100)
       so the drawer and its links are never blocked by the backdrop */
    z-index: calc(var(--z-sticky) - 1);
    visibility: hidden;
    opacity: 0;
    transition:
      opacity   0.35s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s   linear 0.35s;
  }

  .nav-backdrop.active {
    visibility: visible;
    opacity: 1;
    transition:
      opacity   0.35s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0s   linear 0s;
  }

  /* ── In-drawer close button ──────────────────── */
  .nav-close-btn {
    position: absolute;
    inset-block-start: var(--space-md);
    inset-inline-end: var(--space-md);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
    align-self: flex-start;
    transition: border-color var(--transition-fast), color var(--transition-fast);
  }

  .nav-close-btn:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
  }
}

/* ── Touch targets ─────────────────────────────── */
@media (hover: none) {
  .btn-primary,
  .btn-secondary,
  .lang-btn,
  .theme-btn,
  .hamburger,
  .social-btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ── Ensure no overflow ─────────────────────────── */
img { max-width: 100%; }
.carousel { overflow: hidden; }