/* ============================================================
   Kareem Studio — desktop.css
   Tablet (≥768px) and desktop (≥1024px) layer.
   Loaded last; undoes the mobile 430px app-shell and builds
   the true desktop layouts from the redesign brief.
   ============================================================ */

/* ================= TABLET UP (≥768px) ================= */

@media (min-width: 768px) {

  /* Kill the phone-width shell — fluid container everywhere */
  body:not(.is-admin) .page {
    width: min(1180px, calc(100% - clamp(2rem, 6vw, 5rem)));
    max-width: none;
    padding: 2rem 0 4rem;
  }

  body:not(.is-admin) .topbar {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.8rem clamp(1.5rem, 5vw, 4rem);
  }

  /* Landing overlay bar goes full-width */
  body.is-landing .topbar {
    left: 0;
    transform: none;
    padding-top: calc(0.8rem + env(safe-area-inset-top));
  }
  body.is-landing .topbar.is-hidden { transform: translateY(-110%); }

  /* Drawer anchors under the full-width bar */
  .nav-drawer { top: calc(3.6rem + env(safe-area-inset-top)); }

  /* Type scale restored to editorial sizes */
  body:not(.is-admin) h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
  body:not(.is-admin) h2 { font-size: 1.5rem; }
  body:not(.is-admin) .lede { font-size: 1rem; max-width: 40rem; }
  body:not(.is-admin) .kicker { font-size: 0.75rem; }

  /* Buttons get comfortable desktop hit areas, not full-width mobile bars */
  body:not(.is-admin) .gold-btn.lg,
  body:not(.is-admin) .ghost-btn.lg { width: fit-content; padding: 0.9rem 1.6rem; font-size: 0.95rem; }

  /* Grids open up */
  body:not(.is-admin) .cats,
  body:not(.is-admin) .cats6 { grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
  body:not(.is-admin) .cat { min-height: 190px; border-radius: 16px; }

  body:not(.is-admin) .pose-grid { columns: 3; column-gap: 0.9rem; }
  body:not(.is-admin) .flow-grid,
  body:not(.is-admin) .flow-grid:has(> .card) { grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
  .card .pic { height: auto; }

  /* Feature splits become true two-column editorial rows again */
  body:not(.is-admin) .split,
  body:not(.is-admin) .split.reverse {
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    margin: 0 0 3.5rem;
    align-items: center;
  }
  body:not(.is-admin) .split.reverse { grid-template-columns: 1fr 1.1fr; }
  body:not(.is-admin) .split.reverse img { order: 2; }
  body:not(.is-admin) .split img,
  body:not(.is-admin) .split.reverse img {
    min-height: 340px;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    border: 1px solid var(--line-soft);
    object-position: center 20%;
  }
  body:not(.is-admin) .split > div { padding: 0; }

  /* Landing hero becomes a desktop split hero */
  .ui-hero.hero-full {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    height: auto;
    min-height: 0;
    margin: 0 0 4rem;
    padding: 1rem 0 0;
  }
  .hero-full .ui-hero-photo {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 5;
    max-height: 660px;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    /* Blend the photo into the charcoal background — strongest fade
       on the left edge so image and text column feel merged. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 12%, #000 28%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 12%, #000 28%);
  }
  .hero-full .ui-hero-photo::after {
    background:
      linear-gradient(to top, rgba(11, 11, 12, 0.6), transparent 24%),
      linear-gradient(to bottom, rgba(11, 11, 12, 0.45), transparent 18%),
      linear-gradient(to left, rgba(11, 11, 12, 0.4), transparent 14%);
  }
  .hero-full .slide-dots { bottom: 2.4rem !important; right: 1.8rem; z-index: 3; }
  .hero-full .ui-hero-copy { position: static; }
  .hero-full .ui-hero-copy h1 { font-size: clamp(2.4rem, 4.6vw, 3.8rem); text-shadow: none; }
  .hero-full .ui-hero-copy .lede,
  .hero-full .ui-hero-copy .pain-line { text-shadow: none; }
  .hero-full .ui-hero-actions .gold-btn.lg,
  .hero-full .ui-hero-actions .ghost-btn.lg { flex: 0 0 auto; }
  .hero-full .ui-hero-actions .ghost-btn.lg { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* Landing sections widen */
  .ui-cats { grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
  .ui-cats .cat { min-height: 220px; }
  .ui-flow { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem; }
  .ui-flow::before { display: none; }
  .ui-flow img { height: auto; }
  .ui-stuck { padding: 1.4rem 1.5rem; }
  .ui-stuck-top strong { font-size: 1.1rem; }
  .ui-stuck-top p { font-size: 0.88rem; }
  .ui-chips button { font-size: 0.85rem; padding: 0.55rem 1rem; }
  .ui-stuck-cta { width: fit-content; padding: 0.85rem 1.6rem; border-radius: 12px; }
  .ui-pose { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .ui-pose-pic img { height: auto; }
  .ui-pose-copy { padding: 1.5rem 1.5rem 1.5rem 0; }
  .ui-pose-copy li { font-size: 0.85rem; }
  .ui-pose-actions a { font-size: 0.85rem; padding: 0.7rem 0.8rem; }
  .ui-price-grid strong { font-size: 1.9rem; }
  .ui-price-grid p { font-size: 0.82rem; }

  /* Landing content needs clearance under the fixed overlay bar */
  body.is-landing .page { padding-top: 4.5rem; }

  /* Waitlist box breathes */
  .ui-waitlist-box { padding: 2rem; }
  .waitlist-form { flex-direction: row; }
  .waitlist-form input { flex: 1; }
  .waitlist-form .gold-btn { width: auto; }

  /* Marketing footer widens into columns */
  .site-foot {
    width: min(1180px, calc(100% - clamp(2rem, 6vw, 5rem)));
    padding: 2.5rem 0 3rem;
  }
  .sf-cols { grid-template-columns: repeat(3, minmax(0, 200px)); gap: 2rem; }
  .sf-col:last-child { grid-column: auto; }

  /* Pose / flow detail pages use wide two-column editorial layouts */
  .pose-wrap { grid-template-columns: 1.1fr 0.9fr !important; gap: 2rem !important; align-items: start; }
  .rel-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 0.9rem !important; }
  .hero-shot img { height: auto !important; max-height: 80vh !important; }
  .flow-pic img { height: auto; max-height: 80vh; width: auto; max-width: 100%; margin: 0 auto; }
  .meta-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .tip-grid { grid-template-columns: 1fr 1fr !important; gap: 1rem; }
  .article img { height: auto !important; max-height: 70vh !important; }

  /* Learn tile / stuck banner rows become comfortable */
  .learn-tile { padding: 1.2rem 1.4rem; }

  /* Auth / account / pay cards center at a readable width */
  body:not(.is-admin) .auth-box,
  body:not(.is-admin) .acct,
  body:not(.is-admin) .pay { max-width: 560px; margin: 0 auto; }

  /* Pricing comparison keeps flex rows, slightly larger cards */
  .price-card { padding: 26px; }
}

/* ================= DESKTOP (≥1024px) ================= */

@media (min-width: 1024px) {

  body:not(.is-admin) .topbar { padding: 0.9rem clamp(2rem, 5vw, 4rem); }
  body:not(.is-admin) .topbar .logo { font-size: 0.95rem; }

  /* Refined desktop top navigation replaces the hamburger */
  .desk-nav { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; margin-right: 1.6rem; }
  .desk-nav a {
    color: #a3a3ab;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
  }
  .desk-nav a:hover { color: #f5f4f1; }
  .desk-nav a.is-on { color: #eab308; }
  .desk-nav a.desk-stuck { color: #eab308; font-weight: 700; }
  .desk-nav a.desk-stuck:hover { color: #f7c948; }

  .nav-toggle, .nav-drawer { display: none; }

  /* Denser, richer grids */
  body:not(.is-admin) .cats,
  body:not(.is-admin) .cats6 { grid-template-columns: repeat(4, 1fr); }
  body:not(.is-admin) .pose-grid { grid-template-columns: repeat(4, 1fr) !important; }
  body:not(.is-admin) .flow-grid,
  body:not(.is-admin) .flow-grid:has(> .card) { grid-template-columns: repeat(4, 1fr); }

  /* Pricing: 4-column comparison */
  .price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .price-card { min-width: 0; }

  /* I'm Stuck: focused emergency panel */
  body:not(.is-admin) .hello { max-width: 720px; }
  .chip-row a { padding: 12px 18px; font-size: 0.9rem; }

  /* Pose detail hierarchy */
  .pose-wrap { gap: 32px; }
  .hero-shot img { height: auto !important; max-height: 80vh !important; }

  /* Login / register split-screen */
  .auth-split {
    display: grid;
    grid-template-columns: minmax(380px, 460px) 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: stretch;
    max-width: 1080px;
    margin: 1.5rem auto 0;
  }
  .auth-split .auth-box { max-width: none; margin: 0; width: 100%; }
  .auth-side {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--line-soft);
    background: #141416;
    min-height: 520px;
  }
  .auth-side img {
    position: absolute;
    inset: 0;
    object-position: center 20%;
  }
  .auth-side::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.15) 55%, transparent);
  }
  .auth-side-copy {
    position: absolute;
    left: 1.75rem;
    right: 1.75rem;
    bottom: 1.75rem;
    z-index: 2;
  }
  .auth-side-copy h2 { font-size: 1.4rem; margin: 0 0 0.5rem; }
  .auth-side-copy p { color: #cfcfd4; font-size: 0.9rem; line-height: 1.6; margin: 0; }
}

/* Auth side panel is desktop-only */
.auth-side { display: none; }
@media (min-width: 1024px) {
  .auth-side { display: block; }
}

/* Desktop nav hidden below desktop widths */
.desk-nav { display: none; }
@media (min-width: 1024px) {
  .desk-nav { display: flex; }
}