/**
 * Shizzy Layout System
 * Full-width responsive shell with intelligent gutters.
 * Preserves line/border card design — expands grids, not prose.
 */

:root {
  /* Horizontal gutters scale with viewport; capped for ultra-wide displays */
  --shz-gutter-min: 18px;
  --shz-gutter-max: 72px;
  --shz-gutter-x: clamp(var(--shz-gutter-min), 4vw + 8px, var(--shz-gutter-max));
  --shz-gutter-x-compact: clamp(14px, 3vw + 6px, 48px);
  --shz-gutter-y: 22px;

  /* Legacy token — shell is now full viewport width */
  --maxw: 100%;

  /* Intentional readability caps for body copy (not layout shells) */
  --shz-prose-narrow: 680px;
  --shz-prose: 720px;
  --shz-prose-wide: 900px;
  --shz-prose-hero: 820px;
}

@media (max-width: 980px) {
  :root {
    --shz-gutter-min: 14px;
    --shz-gutter-max: 48px;
    --shz-gutter-y: 20px;
  }
}

@media (max-width: 640px) {
  :root {
    --shz-gutter-y: 18px;
  }
}

/* ── Primary shell ─────────────────────────────────────────────── */

.shell {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-block: var(--shz-gutter-y);
  padding-inline: var(--shz-gutter-x);
}

/* Header / footer inner alignment — matches main content gutters */
.shell.hz-shell,
.hz-shell.shell {
  padding-block: 14px;
  padding-inline: var(--shz-gutter-x);
}

@media (max-width: 980px) {
  .shell.hz-shell,
  .hz-shell.shell {
    padding-block: 12px;
    padding-inline: var(--shz-gutter-x-compact);
  }
}

/* ── Shell modifiers ───────────────────────────────────────────── */

/** Narrow centered column — legal pages, forms */
.shell--narrow {
  max-width: min(800px, 100%);
}

/** Full-bleed — portfolio immersive views, landing pages */
.shell--flush {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

/** Zero vertical padding — when page manages its own vertical rhythm */
.shell--no-vpad {
  padding-block: 0;
}

/* ── Prose width utilities ─────────────────────────────────────── */

.shz-prose-narrow { max-width: var(--shz-prose-narrow); }
.shz-prose        { max-width: var(--shz-prose); }
.shz-prose-wide   { max-width: var(--shz-prose-wide); }
.shz-prose-hero   { max-width: var(--shz-prose-hero); }

.shz-prose-narrow,
.shz-prose,
.shz-prose-wide,
.shz-prose-hero {
  width: 100%;
}

/* Center prose blocks when used with auto margins */
.shz-prose-center {
  margin-inline: auto;
}

/* ── Legal / terms pages ───────────────────────────────────────── */

.terms-page {
  box-sizing: border-box;
  width: 100%;
  max-width: min(800px, 100%);
  margin-inline: auto;
  padding-block: 40px;
}

/* ── Full-width inner panels (bordered card containers) ────────── */

.shz-panel {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

/* ── Mobile: drop outer frames, keep inner card borders ────────── */
/*
 * On small screens, shell gutter + section.hs-card border + inner .hs-s-card
 * border stacks into a narrow "border-in-border" column. Strip only the
 * outermost layer; pills, thumbs, fit-cards, etc. keep their borders.
 */

@media (max-width: 640px) {
  :root {
    --shz-mobile-inset: clamp(12px, 4vw, 16px);
  }

  /* Main content uses full viewport width */
  main.shell:not(.shell--flush) {
    padding-inline: 0;
  }

  /* Top-level section shells (home, about, what-we-do, landing pages) */
  main.shell:not(.shell--flush) > [id] > section.hs-card,
  main.shell:not(.shell--flush) > [id] > section.hs-section.hs-card,
  main.shell:not(.shell--flush) > [id] > section.hs-section,
  main.shell:not(.shell--flush) > [id] > section.card,
  main.shell:not(.shell--flush) > [id] > section.sec.card,
  main.shell:not(.shell--flush) > [id] > section.hs-section.card {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-inline: var(--shz-mobile-inset);
  }

  /* Nested section cards inside page roots (home #home-shizzy, etc.) */
  main.shell:not(.shell--flush) [id] > section.hs-card,
  main.shell:not(.shell--flush) [id] > section.hs-section.hs-card {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* About-style: section wrapper + inner .card shell */
  main.shell:not(.shell--flush) > [id] > section:not(.card) > .card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding-inline: var(--shz-mobile-inset);
  }

  /* Shared proof panel outer frame */
  main.shell:not(.shell--flush) .shz-proof-panel {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding-inline: var(--shz-mobile-inset);
  }

  /* Contact, team, blog hero blocks */
  main.shell:not(.shell--flush) > [id] > section.hero,
  main.shell:not(.shell--flush) > [id] .c-hero,
  main.shell:not(.shell--flush) > [id] .b-hero {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-inline: var(--shz-mobile-inset);
  }

  /* Portfolio page outer wrappers */
  .wp-shell,
  .wp-tech {
    border: none !important;
    border-radius: 0 !important;
    padding-inline: var(--shz-mobile-inset);
  }
}