/* ============================================================
   SUKOON — Layout scaffolds (Phase 4)
   Page-level composition classes. Polarity rules and breakpoint
   collapses per DESIGN-sentry.md; recipes in docs/PHASE-4-LAYOUTS.md.
   ============================================================ */

/* ---- Mobile sticky CTA bar (W4/W5/W8/W16/W17): replaces bottom nav on commerce pages <768px ---- */
.sk-mobile-cta-bar { display: none; }
@media (max-width: 767px) {
  .sk-mobile-cta-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 75;
    display: flex;
    align-items: center;
    gap: var(--sk-space-md);
    background: var(--sk-surface-canvas-light);
    border-top: 1px solid var(--sk-hairline-cloud);
    padding: var(--sk-space-md) var(--sk-space-lg) calc(var(--sk-space-md) + env(safe-area-inset-bottom, 0px));
  }
  .sk-mobile-cta-bar .sk-cta-price { display: grid; line-height: 1.2; }
  .sk-mobile-cta-bar .sk-cta-price strong { font-size: 18px; font-weight: 600; }
  .sk-mobile-cta-bar .sk-btn { flex: 1; }
  body.sk-has-cta-bar { padding-bottom: 84px; }
  /* the CTA bar replaces (never stacks on) the bottom nav */
  body.sk-has-cta-bar .sk-bottom-nav { display: none; }
}

/* ---- Page title band (light transactional pages) ---- */
.sk-page-head {
  padding: var(--sk-space-xxl) 0;
  display: grid;
  gap: var(--sk-space-md);
}

/* ============ SHOP LAYOUT: filter sidebar + grid ============ */
.sk-layout-shop {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--sk-space-xxl);
  align-items: start;
}
.sk-filter-panel {
  position: sticky;
  top: var(--sk-space-lg);
  display: grid;
  gap: var(--sk-space-xl);
}
.sk-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sk-space-xl);
}
.sk-shop-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sk-space-lg);
  margin-bottom: var(--sk-space-xl);
}
@media (max-width: 1151px) { .sk-product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991px) {
  .sk-layout-shop { grid-template-columns: 1fr; }
  .sk-filter-panel { position: static; }
}
@media (max-width: 575px) { .sk-product-grid { grid-template-columns: 1fr; } }

/* ============ PRODUCT LAYOUT: gallery + buy panel ============ */
.sk-layout-product {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--sk-space-section);
  align-items: start;
}
.sk-product-gallery { display: grid; gap: var(--sk-space-md); }
.sk-product-gallery .sk-gallery-main { border-radius: var(--sk-rounded-xxl); overflow: hidden; aspect-ratio: 1 / 1; background: var(--sk-surface-press-light); }
.sk-product-gallery .sk-gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sk-space-sm); }
.sk-product-gallery .sk-gallery-thumbs button { border: 1px solid var(--sk-hairline-cloud); border-radius: var(--sk-rounded-md); overflow: hidden; padding: 0; background: none; cursor: pointer; aspect-ratio: 1/1; }
.sk-product-gallery .sk-gallery-thumbs button[aria-pressed="true"] { border-color: var(--sk-primary); box-shadow: inset 0 0 0 1px var(--sk-primary); }
.sk-buy-panel { display: grid; gap: var(--sk-space-lg); position: sticky; top: var(--sk-space-lg); }
@media (max-width: 991px) {
  .sk-layout-product { grid-template-columns: 1fr; gap: var(--sk-space-xxl); }
  .sk-buy-panel { position: static; }
}

/* ============ CONSULTATION LAYOUT ============ */
/* dark service hero band + light transactional zone; bands never blend */
.sk-service-hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--sk-space-section);
  align-items: center;
}
@media (max-width: 991px) { .sk-service-hero { grid-template-columns: 1fr; gap: var(--sk-space-xxl); } }

/* ============ BLOG LAYOUT ============ */
.sk-article { max-width: 720px; margin-inline: auto; }
.sk-article .sk-article-body { font-weight: 400; line-height: 2.0; font-size: 16px; }
.sk-article .sk-article-body h2 { font-size: var(--sk-heading-lg-size); font-weight: 500; line-height: 1.25; margin: var(--sk-space-xxl) 0 var(--sk-space-md); }
.sk-article .sk-article-body img { border-radius: var(--sk-rounded-xxl); }
.sk-article-meta { display: flex; align-items: center; gap: var(--sk-space-md); margin-block: var(--sk-space-lg); }
.sk-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sk-space-xl); }
.sk-blog-featured { display: grid; grid-template-columns: 1.2fr 1fr; }
.sk-blog-featured > img { height: 100%; object-fit: cover; aspect-ratio: auto; }
@media (max-width: 767px) {
  .sk-blog-featured { grid-template-columns: 1fr; }
  .sk-blog-featured > img { aspect-ratio: 16 / 9; height: auto; }
}
@media (max-width: 991px) { .sk-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .sk-blog-grid { grid-template-columns: 1fr; } }

/* ============ DASHBOARD / ADMIN LAYOUT ============ */
.sk-layout-dash {
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100vh;
  align-items: stretch;
}
.sk-layout-dash > .sk-dash-main {
  background: var(--sk-surface-canvas-light);
  color: var(--sk-ink);
  padding: var(--sk-space-xxl);
  min-width: 0; /* allow tables to scroll instead of blowing out the grid */
}
.sk-dash-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sk-space-lg);
  margin-bottom: var(--sk-space-xxl);
}
.sk-widget-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sk-space-xl); }
@media (max-width: 1151px) { .sk-widget-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991px) {
  .sk-layout-dash { grid-template-columns: 1fr; }
  .sk-layout-dash .sk-layout-sidebar { display: none; } /* replaced by drawer + bottom nav on mobile */
  .sk-layout-dash > .sk-dash-main { padding: var(--sk-space-lg); }
}
@media (max-width: 575px) { .sk-widget-grid { grid-template-columns: 1fr; } }

/* mobile dashboard sidebar drawer variant */
.sk-sidebar-drawer { width: min(300px, 85vw); left: 0; right: auto; transform: translateX(-100%); background: var(--sk-surface-night); color: var(--sk-on-primary); }
.sk-sidebar-drawer.is-open { transform: none; }
.sk-sidebar-drawer .sk-sidebar { width: 100%; min-height: 0; }

/* ============ CHECKOUT LAYOUT ============ */
.sk-layout-checkout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--sk-space-section);
  align-items: start;
}
.sk-order-summary { position: sticky; top: var(--sk-space-lg); display: grid; gap: var(--sk-space-lg); }
.sk-summary-row { display: flex; justify-content: space-between; gap: var(--sk-space-lg); font-size: 16px; font-weight: 500; }
.sk-summary-row.sk-summary-total { font-weight: 600; font-size: 20px; border-top: 1px solid var(--sk-hairline-cloud); padding-top: var(--sk-space-lg); }
@media (max-width: 991px) {
  .sk-layout-checkout { grid-template-columns: 1fr; gap: var(--sk-space-xxl); }
  .sk-order-summary { position: static; }
}

/* ============ AUTH LAYOUT ============ */
.sk-layout-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sk-space-xl);
}
.sk-auth-card {
  width: min(440px, 100%);
  display: grid;
  gap: var(--sk-space-lg);
}
/* transparent top bar over the auth starfield: brand + back-to-home */
.sk-auth-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-space-md);
  padding: var(--sk-space-lg) var(--sk-space-xl);
}
.sk-auth-nav .sk-btn .bi { margin-right: var(--sk-space-xs); }
@media (max-width: 479px) {
  .sk-auth-nav { padding: var(--sk-space-md) var(--sk-space-lg); }
}

/* ============ LANDING BANDS ============ */
.sk-band { position: relative; overflow: hidden; } /* clips sticker overlap horizontally only */
.sk-band-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sk-space-section); align-items: center; }
.sk-band-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sk-space-xl); }
.sk-band-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sk-space-xl); }
.sk-band-head { display: grid; gap: var(--sk-space-md); max-width: 720px; margin: 0 auto var(--sk-space-xxl); text-align: center; }
@media (max-width: 991px) {
  .sk-band-grid-2 { grid-template-columns: 1fr; gap: var(--sk-space-xxl); }
  .sk-band-grid-3, .sk-band-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) { .sk-band-grid-3, .sk-band-grid-4 { grid-template-columns: 1fr; } }