/* =========================================================
   Learning Rewired Lab — Home (business-first redesign)
   Page-specific styles. Pairs with global.css + home.js.
   Most layout is inline on the elements; this file holds
   only what inline styles can't express (keyframes, media
   queries, hover states).
   ========================================================= */

/* ---- base ---- */
.lr-home { box-sizing: border-box; }
.lr-home *, .lr-home *::before, .lr-home *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.lr-home main { overflow: hidden; }
.lr-home ::selection { background: rgba(22,184,217,.22); }

/* ---- keyframes ---- */
@keyframes lr-pulse  { 0%,100% { opacity:.4; } 50% { opacity:1; } }
@keyframes lr-sheen  { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes lr-float  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (prefers-reduced-motion: reduce) {
  .lr-float { animation: none !important; }
}

/* ---- button hover states ---- */
.h-cyan:hover       { background:#0ea5c2 !important; }
.h-mint:hover       { background:#ffffff !important; }
.h-ink:hover        { background:#0d2238 !important; }
.h-blue:hover       { background:#1d4fd7 !important; }
.h-teal:hover       { background:#0b5e57 !important; }
.h-gold:hover       { background:#ecbb45 !important; }
.h-glass:hover      { background:rgba(255,255,255,.14) !important; }
.h-bright:hover     { filter:brightness(1.08); }
.h-ghost-hero:hover { border-color:#16b8d9 !important; color:#0789a2 !important; }
.h-link-ink:hover   { color:#07111f !important; }
.h-quest:hover      { background:#f3fafb; }

/* ---- four-path decision surface ---- */
.lr-path { position: relative; }
.lr-path::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pl);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.lr-path:hover::after { opacity: 1; }
.lr-path .lr-path-cta { transition: gap .2s ease; }
.lr-path:hover .lr-path-cta { gap: 11px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px) {
  [data-r="hero"], [data-r="lab"], [data-r="studio"], [data-r="advisory"], [data-r="companion"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  [data-r="paths"] { grid-template-columns: 1fr 1fr !important; }
  [data-r="paths"] > a:nth-child(1),
  [data-r="paths"] > a:nth-child(3) { border-right: 1px solid #e6ebf1 !important; }
  [data-r="paths"] > a:nth-child(1),
  [data-r="paths"] > a:nth-child(2) { border-bottom: 1px solid #e6ebf1 !important; }
  [data-r="problem"] { grid-template-columns: 1fr !important; }
  [data-r="h1"] { font-size: 48px !important; }
  [data-r="companion"] { grid-template-columns: 1fr !important; }
  [data-r="companion"] > div:last-child { min-height: 300px !important; order: -1; }
}

@media (max-width: 640px) {
  [data-r="h1"] { font-size: 38px !important; }
  [data-r="paths"] {
    grid-template-columns: 1fr !important;
  }
  [data-r="paths"] > a {
    border-right: 0 !important;
    border-bottom: 1px solid #e6ebf1 !important;
  }
  [data-r="paths"] > a:last-child { border-bottom: 0 !important; }
}
/* =========================================================
   Home Mobile Fix — Owned Workspace Cards
   ========================================================= */

@media (max-width: 760px) {
  .lr-home [data-screen-label="Owned Workspace"] {
    padding: 64px 0 72px !important;
  }

  .lr-home [data-screen-label="Owned Workspace"] > div {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .lr-home [data-screen-label="Owned Workspace"] [data-reveal] {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    align-items: start !important;
  }

  .lr-home [data-screen-label="Owned Workspace"] [data-reveal] h2 {
    font-size: 34px !important;
    line-height: 1.08 !important;
  }

  .lr-home [data-screen-label="Owned Workspace"] [data-reveal] p {
    max-width: none !important;
  }

  .lr-home [data-screen-label="Owned Workspace"] article {
    width: 100% !important;
    min-width: 0 !important;
    padding: 26px 22px !important;
    border-radius: 22px !important;
  }

  .lr-home [data-screen-label="Owned Workspace"] article h3 {
    font-size: 22px !important;
    line-height: 1.18 !important;
  }

  .lr-home [data-screen-label="Owned Workspace"] article p {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
}
/* =========================================================
   Mobile Header Drawer Fix
   ========================================================= */

@media (max-width: 760px) {
  .lr-mobile-panel,
  .site-mobile-panel,
  [data-mobile-panel],
  .mobile-nav-panel {
    width: min(92vw, 420px) !important;
    max-width: calc(100vw - 28px) !important;
    left: 14px !important;
    right: auto !important;
    overflow-x: hidden !important;
  }

  .lr-mobile-panel a,
  .site-mobile-panel a,
  [data-mobile-panel] a,
  .mobile-nav-panel a {
    color: #0f172a !important;
  }

  .lr-mobile-panel a[aria-current="page"],
  .site-mobile-panel a[aria-current="page"],
  [data-mobile-panel] a[aria-current="page"],
  .mobile-nav-panel a[aria-current="page"] {
    color: #0789a2 !important;
    background: rgba(22, 184, 217, 0.1) !important;
    border-color: rgba(22, 184, 217, 0.28) !important;
  }

  .lr-mobile-panel .featured-card,
  .site-mobile-panel .featured-card,
  [data-mobile-panel] .featured-card,
  .mobile-nav-panel .featured-card {
    color: #ffffff !important;
  }

  .lr-mobile-panel .featured-card *,
  .site-mobile-panel .featured-card *,
  [data-mobile-panel] .featured-card *,
  .mobile-nav-panel .featured-card * {
    color: #ffffff !important;
    opacity: 1 !important;
  }

  .lr-mobile-panel .featured-card p,
  .site-mobile-panel .featured-card p,
  [data-mobile-panel] .featured-card p,
  .mobile-nav-panel .featured-card p {
    color: rgba(226, 242, 247, 0.82) !important;
  }
}