/* =========================================================
   Balo Base Layout (parent) — assets/base/layout.css
   Purpose: structure only (no wallpapers, no colors)
   Safe: no !important on html/body, no background paints
   ========================================================= */

/* 1) Root + box model */
:root{
  --site-max: 1200px;
  --wrap-pad: clamp(14px, 4vw, 28px);
  --section-gap: clamp(28px, 6vw, 64px);
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.15);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

/* Never paint the shell; let page-scoped CSS do it */
html,
body {
  overflow-x: clip;
  background: transparent;
}

/* Keep containers clean, but don't force weird layouts */
.site,
.site-content {
  overflow-x: clip;
  background: transparent;
}

/* 2) Page frame */
.site {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.site-header { position: relative; z-index: 10; background: transparent; }
.site-content { flex: 1 0 auto; display: block; background: transparent; }
.site-footer { flex: 0 0 auto; background: transparent; }

/* 3) Wrappers & containers */
.page-shell,
.wrap,
.container{
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
}


.section{
  position: relative;
  margin-block: var(--section-gap);
}

/* 4) Hero (full-bleed wrapper that can host page wallpapers) */
.hero-wrap{
  position: relative;
  width: 100%;
  margin: 0;
  padding: clamp(48px, 10vw, 120px) var(--wrap-pad);
  display: grid;
  place-items: center;
  text-align: center;
  background: transparent; /* do not paint here */
}

/* Keep inner hero content constrained when needed */
.hero, .hero-inner{
  width: 100%;
  max-width: min(var(--site-max), 90ch);
  margin-inline: auto;
  background: transparent;
}

/* 5) Content areas */
.content-area{
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
}

/* 6) Media blocks (images/cards can clip their own overflow) */
.media, .card .media, .tile .media { overflow: hidden; border-radius: var(--radius); }

/* 7) Simple grid utilities */
.grid-2{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 28px);
}
.grid-3{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 28px);
}

@media (min-width: 720px){
  .grid-2{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px){
  .grid-3{ grid-template-columns: 1fr 1fr 1fr; }
}

/* 8) Card primitive (neutral; no color) */
.card{
  display: block;
  border-radius: var(--radius);
  background: transparent;
  box-shadow: var(--shadow);
  overflow: clip;
}
.card > .card-body{ padding: clamp(14px, 2.5vw, 24px); }

/* 9) Buttons (layout only: spacing + radius) */
.button, .btn, .wp-block-button__link, .elementor-button, a.cta-gem{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 1.2rem;
  border-radius: calc(var(--radius) - 6px);
  text-decoration: none;
  line-height: 1.1;
}

/* 10) Full-bleed helper (use on a wrapper you want edge-to-edge) */
.full-bleed{
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* 11) Spacing utilities */
.stack > * + * { margin-top: clamp(10px, 1.8vw, 18px); }
.section .stack > * + * { margin-top: clamp(12px, 2.2vw, 22px); }

/* 12) Forms (layout spacing only) */
form .field, form .input, form input, form select, form textarea{
  width: 100%;
  border-radius: calc(var(--radius) - 8px);
}
form .row{ display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px){
  form .row.cols-2{ grid-template-columns: 1fr 1fr; }
}

/* 13) Accessibility niceties */
:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* 14) Login layout hooks (structure only; colors come from login.css) */
.login-shell,
.login-hero,
.login-main{
  background: transparent;
}
.login-shell{
  width: 100%;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.login-main{
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 48px) var(--wrap-pad);
}
.login-card{
  width: 100%;
  max-width: 520px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: transparent; /* color layer lives in login.css */
  padding: clamp(18px, 4vw, 28px);
}
/* =========================================================
   LIVE MEETINGS PAGE (Balo Live Classroom shell)
   ========================================================= */

body.live-page {
  /* keep background handled by global zen/balo-night styles */
}

body.live-page .live-shell {
  max-width: 1280px;
  margin: clamp(60px, 10vh, 100px) auto;
  padding: 0 16px 80px;
  box-sizing: border-box;
}

body.live-page .live-inner {
  display: flex;
  justify-content: center;
}

body.live-page .live-inner #balo-live {
  width: 100%;
  max-width: 1200px;
}

/* Tighten spacing on smaller screens */
@media (max-width: 768px) {
  body.live-page .live-shell {
    margin-top: 40px;
    padding-bottom: 60px;
  }
}