/**
 * ============================================================
 * EduLab Interaktif
 * File        : assets/css/layout.css
 * Deskripsi   : Layout utama aplikasi EduLab Interaktif.
 * Versi       : 1.0.0
 * Author      : EduLab Interaktif
 * ============================================================
 *
 * Fungsi file:
 * - Mengatur app shell utama.
 * - Mengatur background dekoratif.
 * - Mengatur header dan navigasi utama.
 * - Mengatur hero section.
 * - Mengatur area breadcrumb / konteks navigasi.
 * - Mengatur area konten dinamis.
 * - Mengatur grid umum halaman.
 * - Mengatur footer.
 *
 * Catatan:
 * - Variabel tema berasal dari assets/css/themes.css
 * - Reset dan fondasi elemen berasal dari assets/css/base.css
 * - Detail komponen UI diletakkan di assets/css/components.css
 */

/* ============================================================
   1. App Document Layout
============================================================ */

body {
  position: relative;
  isolation: isolate;
}

.app-shell {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.site-main {
  position: relative;
  z-index: var(--z-content);
  flex: 1 0 auto;
  width: 100%;
}

.site-main:focus {
  outline: none;
}

/* ============================================================
   2. Decorative Background
============================================================ */

.app-background {
  position: fixed;
  inset: 0;
  z-index: var(--z-background);
  overflow: hidden;
  pointer-events: none;
  background:
    var(--gradient-hero),
    var(--color-background);
}

.app-background__gradient {
  position: absolute;
  width: clamp(260px, 34vw, 520px);
  height: clamp(260px, 34vw, 520px);
  border-radius: var(--radius-full);
  filter: blur(18px);
  opacity: 0.52;
  transform: translate3d(0, 0, 0);
}

.app-background__gradient--one {
  top: -14%;
  left: -8%;
  background:
    radial-gradient(
      circle,
      rgba(37, 99, 235, 0.3) 0%,
      rgba(37, 99, 235, 0.16) 38%,
      transparent 72%
    );
}

.app-background__gradient--two {
  right: -10%;
  bottom: -18%;
  background:
    radial-gradient(
      circle,
      rgba(124, 58, 237, 0.26) 0%,
      rgba(6, 182, 212, 0.16) 42%,
      transparent 74%
    );
}

.app-background__grid {
  position: absolute;
  inset: 0;
  opacity: 0.32;
  background-image:
    linear-gradient(var(--color-border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border-soft) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 82%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 82%);
}

html[data-theme="dark"] .app-background__grid,
body[data-theme="dark"] .app-background__grid {
  opacity: 0.18;
}

html[data-theme="soft"] .app-background__grid,
body[data-theme="soft"] .app-background__grid {
  opacity: 0.22;
}

/* ============================================================
   3. Header Layout
============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  width: 100%;
  min-height: var(--header-height);
  border-bottom: 1px solid var(--header-border);
  color: var(--header-text);
  background: var(--header-bg);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.site-header.is-compact {
  min-height: var(--header-height-compact);
}

.site-header.is-compact .site-header__inner {
  min-height: var(--header-height-compact);
}

/* ============================================================
   4. Brand Layout
============================================================ */

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-3);
  color: var(--header-text);
  text-decoration: none;
}

.brand:hover {
  color: var(--header-text);
}

.brand__logo {
  display: inline-grid;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  font-size: 1.55rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)),
    var(--gradient-brand);
  box-shadow: var(--shadow-sm);
}

.brand__text {
  display: grid;
  min-width: 0;
  line-height: 1.05;
}

.brand__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-strong);
}

.brand__tagline {
  margin-top: 0.18rem;
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-soft);
}

/* ============================================================
   5. Navigation Layout
============================================================ */

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
}

.site-nav__link,
.site-nav__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  gap: var(--space-2);
  padding: 0.65rem 0.95rem;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  line-height: 1;
  color: var(--color-text-muted);
  background: transparent;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.site-nav__link:hover,
.site-nav__button:hover {
  color: var(--color-text-brand);
  background: var(--button-ghost-bg-hover);
}

.site-nav__link.is-active,
.site-nav__link[aria-current="page"] {
  color: var(--color-text-brand);
  border-color: var(--color-border-soft);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.site-nav__button {
  width: 42px;
  padding-inline: 0;
  border-color: var(--color-border-soft);
  background: var(--color-surface);
}

.site-nav__button:active,
.site-nav__link:active {
  transform: translateY(1px);
}

/* ============================================================
   6. Optional Header Control Roots
   Dipakai nanti oleh language-switcher dan theme-switcher.
============================================================ */

.header-controls,
.site-header__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

#language-switcher-root,
#theme-switcher-root {
  display: contents;
}

/* ============================================================
   7. Hero Section Layout
============================================================ */

.hero-section {
  position: relative;
  overflow: hidden;
  padding-block:
    clamp(var(--space-14), 9vw, var(--space-24))
    clamp(var(--space-10), 6vw, var(--space-16));
}

.hero-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  align-items: center;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
}

.hero-section__content {
  display: grid;
  align-content: center;
  gap: var(--space-5);
  min-width: 0;
}

.hero-title {
  max-width: 900px;
  font-size: clamp(2.5rem, 6.8vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: -0.07em;
  color: var(--color-text-strong);
}

.hero-description {
  max-width: 680px;
  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.hero-section__visual {
  position: relative;
  display: grid;
  min-height: clamp(320px, 42vw, 520px);
  place-items: center;
}

/* ============================================================
   8. Hero Orbit Layout
============================================================ */

.hero-orbit {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  background:
    radial-gradient(circle at center, var(--glass-bg-strong), transparent 58%),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.28), transparent 42%),
    var(--gradient-glass);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

.hero-orbit::before,
.hero-orbit::after {
  position: absolute;
  content: "";
  inset: 11%;
  border: 1px dashed var(--color-border-strong);
  border-radius: inherit;
  opacity: 0.72;
}

.hero-orbit::after {
  inset: 25%;
  opacity: 0.48;
}

.hero-orbit__center {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  display: grid;
  width: clamp(118px, 16vw, 154px);
  height: clamp(118px, 16vw, 154px);
  place-items: center;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 2.4vw, var(--text-3xl));
  font-weight: var(--font-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--button-primary-text);
  background: var(--gradient-brand);
  box-shadow: var(--shadow-button);
  transform: translate(-50%, -50%);
}

.hero-orbit__item {
  position: absolute;
  z-index: 3;
  display: grid;
  width: clamp(58px, 8vw, 78px);
  height: clamp(58px, 8vw, 78px);
  place-items: center;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  background: var(--glass-bg-strong);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

.hero-orbit__item--one {
  top: 4%;
  left: 50%;
  transform: translateX(-50%) rotate(-8deg);
}

.hero-orbit__item--two {
  top: 50%;
  right: 3%;
  transform: translateY(-50%) rotate(8deg);
}

.hero-orbit__item--three {
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%) rotate(8deg);
}

.hero-orbit__item--four {
  top: 50%;
  left: 3%;
  transform: translateY(-50%) rotate(-8deg);
}

/* ============================================================
   9. Navigation Context / Breadcrumb Area
============================================================ */

.navigation-context {
  position: relative;
  z-index: var(--z-content);
  padding-block: var(--space-2);
}

.breadcrumb-root {
  min-height: 42px;
}

.breadcrumb-root:empty {
  display: none;
}

/* ============================================================
   10. App Content Section
============================================================ */

.app-content-section {
  position: relative;
  z-index: var(--z-content);
  padding-block:
    clamp(var(--space-6), 4vw, var(--space-10))
    clamp(var(--space-14), 8vw, var(--space-20));
}

.app-root {
  display: grid;
  gap: var(--space-8);
  min-height: 260px;
}

/* ============================================================
   11. Generic Page Layouts Rendered by JavaScript
============================================================ */

.view {
  display: grid;
  gap: var(--space-8);
  animation: edulab-view-in var(--duration-slow) var(--ease-standard) both;
}

.view__header {
  display: grid;
  gap: var(--space-3);
  max-width: 820px;
}

.view__header--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

.view__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: var(--space-2);
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--badge-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  line-height: 1;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--badge-text);
  background: var(--badge-bg);
}

.view__title {
  font-size: clamp(var(--text-3xl), 4.4vw, var(--text-5xl));
  color: var(--color-text-strong);
}

.view__description {
  max-width: 760px;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.view__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ============================================================
   12. Grid Layouts
============================================================ */

.grid-auto,
.level-grid,
.subject-grid,
.concept-grid,
.module-grid {
  display: grid;
  gap: var(--space-5);
}

.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.level-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.subject-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.concept-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.module-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.grid-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  gap: var(--space-6);
}

.grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.grid-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.grid-four {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

/* ============================================================
   13. Split Layouts
============================================================ */

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
}

.split-layout--reverse {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

.split-layout__content {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.split-layout__media {
  position: relative;
  min-width: 0;
}

/* ============================================================
   14. Dashboard / Progress Layout
============================================================ */

.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: start;
  gap: var(--space-6);
}

.dashboard-main {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
}

.dashboard-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-5));
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

/* ============================================================
   15. Module Launch Layout
============================================================ */

.module-launch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  align-items: start;
  gap: var(--space-6);
}

.module-launch-main,
.module-launch-aside {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

/* ============================================================
   16. Empty State Layout
============================================================ */

.empty-state {
  display: grid;
  place-items: center;
  justify-items: center;
  gap: var(--space-4);
  min-height: 300px;
  padding: clamp(var(--space-8), 8vw, var(--space-14));
  border: 1px solid var(--card-border);
  border-radius: var(--radius-3xl);
  text-align: center;
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

.empty-state__icon {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  font-size: 2.2rem;
  background: var(--gradient-glass);
  box-shadow: var(--shadow-md);
}

.empty-state__title {
  max-width: 560px;
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
}

.empty-state__description {
  max-width: 620px;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.empty-state--error {
  border-color: var(--badge-danger-border);
}

/* ============================================================
   17. Footer Layout
============================================================ */

.site-footer {
  position: relative;
  z-index: var(--z-content);
  flex-shrink: 0;
  border-top: 1px solid var(--footer-border);
  color: var(--footer-text);
  background: var(--footer-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 74px;
  padding-block: var(--space-5);
}

.site-footer__text,
.site-footer__meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--footer-text);
}

.site-footer__meta {
  flex: 0 0 auto;
  font-weight: var(--font-semibold);
}

/* ============================================================
   18. Sticky Utility Layouts
============================================================ */

.sticky-top {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
  z-index: var(--z-sticky);
}

.stack {
  display: grid;
  gap: var(--space-4);
}

.stack-sm {
  display: grid;
  gap: var(--space-2);
}

.stack-lg {
  display: grid;
  gap: var(--space-6);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cluster-between {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.center {
  display: grid;
  place-items: center;
}

/* ============================================================
   19. Width Utilities
============================================================ */

.width-xs {
  width: min(100%, var(--container-xs));
}

.width-sm {
  width: min(100%, var(--container-sm));
}

.width-md {
  width: min(100%, var(--container-md));
}

.width-lg {
  width: min(100%, var(--container-lg));
}

.width-xl {
  width: min(100%, var(--container-xl));
}

.mx-auto {
  margin-inline: auto;
}

/* ============================================================
   20. Main App State Layouts
============================================================ */

body[data-app-state="loading"] .app-root {
  place-items: center;
}

body[data-app-state="ready"] .loading-state {
  display: none;
}

body[data-current-view="home"] .navigation-context {
  display: none;
}

body[data-current-view="home"] .app-content-section {
  padding-top: var(--space-4);
}

/* ============================================================
   21. Layout Animation Keyframes
============================================================ */

@keyframes edulab-view-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   22. Motion Reduction
============================================================ */

@media (prefers-reduced-motion: reduce) {
  .view {
    animation: none;
  }
}

/* ============================================================
   23. Print Layout
============================================================ */

@media print {
  .site-header,
  .site-footer,
  .navigation-context,
  .hero-section__visual,
  .app-background {
    display: none !important;
  }

  .app-shell,
  .site-main,
  .app-content-section,
  .app-root,
  .view {
    display: block;
    min-height: auto;
    padding: 0;
  }

  .container {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .hero-section {
    padding: 0 0 1rem;
  }

  .hero-section__inner,
  .split-layout,
  .grid-featured,
  .dashboard-layout,
  .module-launch-layout {
    display: block;
  }

  .hero-title {
    font-size: 2rem;
    letter-spacing: normal;
  }

  .hero-description {
    font-size: 1rem;
  }
}