/* =========================================================
   JAGROOK — Page-level layout (filled in Phase 2)
   ========================================================= */

/* ---- Style guide (components.html only) ---- */
.sg-h { font-size: var(--jg-fs-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--jg-text-muted); border-top: 1px dashed var(--jg-border); padding-top: var(--jg-s5); margin: var(--jg-s7) 0 var(--jg-s4); }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--jg-s3); align-items: center; }
.sg-list { list-style: none; }
.sg-dark { background: #333; padding: 8px; border-radius: 4px; }
.sg-h1-demo { font-size: var(--jg-fs-2xl); }
.sg-h2-demo { font-size: var(--jg-fs-2xl); color: var(--jg-primary); font-weight: 500; }
.sg-partners-h, .sg-side-h { font-size: var(--jg-fs-md); font-weight: 500; }
.sg-feature-h { font-size: var(--jg-fs-xl); font-weight: 500; }
.sg-band-h { font-size: var(--jg-fs-xl); }

/* =========================================================
   Shared page helpers
   ========================================================= */
.jg-h-display { font-size: var(--jg-fs-3xl); font-weight: 500; color: var(--jg-primary); letter-spacing: -.01em; }
.jg-section--tight-top { padding-top: 0; }
.jg-section--alt { background: var(--jg-surface-alt); }
.jg-empty { padding: var(--jg-s5); text-align: center; color: var(--jg-text-muted); border: 1px dashed var(--jg-border); border-radius: var(--jg-radius); margin-top: var(--jg-s4); }
.jg-sechead__tools { display: flex; flex-direction: column; align-items: flex-start; gap: var(--jg-s4); }
@media (min-width: 768px) { .jg-sechead__tools { align-items: flex-end; } }
.jg-page-head { padding-block: var(--jg-s5) var(--jg-s4); }
.jg-page-head .jg-breadcrumb { margin-bottom: var(--jg-s4); }
.jg-stack > * + * { margin-top: var(--jg-s5); }
.jg-list-reset { list-style: none; }

/* =========================================================
   P1 Home
   ========================================================= */
.jg-partners { padding-block: var(--jg-s6) var(--jg-s5); }
.jg-siat { display: grid; gap: var(--jg-s6); align-items: start; }
.jg-siat__text { font-size: var(--jg-fs-sm); color: var(--jg-primary); max-width: 44ch; }
@media (min-width: 1024px) { .jg-siat { grid-template-columns: 5fr 7fr; gap: var(--jg-s8); padding-inline: 64px; } }

/* =========================================================
   P3 Learn (modules listing)
   ========================================================= */
.jg-learn-tools { display: grid; gap: var(--jg-s5); margin-top: var(--jg-s5); }
.jg-learn-grid { list-style: none; }

/* =========================================================
   P4 Module detail
   ========================================================= */
.jg-chapters-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--jg-s2); margin: var(--jg-s6) 0 var(--jg-s4); }
.jg-chapters-head h2 { font-size: var(--jg-fs-xl); color: var(--jg-primary); margin: 0; }
.jg-chapters-head p { margin: 0; font-size: var(--jg-fs-sm); }

/* =========================================================
   P5/P6 Chapter
   ========================================================= */
.jg-chapter-page .jg-video { margin-top: var(--jg-s4); border-radius: 0; }
.jg-chapter-body { padding-block: var(--jg-s6); }
.jg-chapter-foot { padding-bottom: var(--jg-s6); }
.jg-chapter-foot .jg-nextbar { margin-top: var(--jg-s6); }

/* =========================================================
   P7 Blog listing
   ========================================================= */
.jg-hero-blog .jg-eyebrow { color: var(--jg-text); letter-spacing: .02em; text-transform: none; font-size: var(--jg-fs-sm); }
.jg-hero-blog .jg-lead { margin: 0 auto var(--jg-s5); color: var(--jg-text); font-size: var(--jg-fs-sm); }
.jg-hero-blog__filters { margin-top: var(--jg-s6); }
.jg-hero-blog__filters p { font-weight: 500; margin-bottom: var(--jg-s3); }
.jg-blog-feature { margin-top: calc(-1 * var(--jg-s6)); position: relative; z-index: 1; }
.jg-blog-grid { list-style: none; }
.jg-loadmore { display: flex; justify-content: center; margin-top: var(--jg-s6); }
/* Persona colour tiles used as blog card art until real images arrive */
.jg-art { display: flex; align-items: flex-end; padding: var(--jg-s4); aspect-ratio: 16 / 9; color: #fff; font-style: italic; font-size: var(--jg-fs-xs); }
.jg-art span { background: rgba(0,0,0,.35); padding: 6px 10px; border-radius: 4px; max-width: 60%; }
.jg-art--blue { background: linear-gradient(160deg, #0B5AAE, #062F5E); }
.jg-art--orange { background: linear-gradient(160deg, #C8531E, #7A2A08); }
.jg-art--purple { background: linear-gradient(160deg, #5B2A8C, #2F0F52); }

/* =========================================================
   P8 Blog article
   ========================================================= */
.jg-article-head { text-align: center; padding-block: var(--jg-s7) var(--jg-s5); }
.jg-article-head h1 { font-size: var(--jg-fs-2xl); font-weight: 500; }
.jg-article-head .jg-lead { margin-inline: auto; font-size: var(--jg-fs-sm); }
.jg-article-meta { display: flex; justify-content: center; gap: var(--jg-s4); font-size: var(--jg-fs-sm); color: var(--jg-text-subtle); }
.jg-article-meta span { display: inline-flex; align-items: center; gap: 6px; }
.jg-article-meta .jg-icon { color: var(--jg-primary); }
.jg-article-hero img { width: 100%; max-height: 520px; object-fit: cover; object-position: center 30%; }
.jg-article { display: grid; gap: var(--jg-s6); padding-block: var(--jg-s6); }
.jg-article .jg-prose { margin: 0; max-width: none; }
@media (min-width: 1024px) {
  .jg-article { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--jg-s7); }
  .jg-article__aside { position: sticky; top: 96px; align-self: start; }
}

/* =========================================================
   P9/P10 Collaborate forms
   ========================================================= */
.jg-form-hero { background: #BFE0F5; padding-block: var(--jg-s6); }
.jg-form-hero__inner { display: grid; gap: var(--jg-s5); align-items: center; }
.jg-form-hero .jg-chalkboard h1 { font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem); margin-bottom: var(--jg-s3); }
.jg-form-hero .jg-chalkboard p { margin: 0; font-size: var(--jg-fs-sm); }
.jg-form-hero__intro .jg-eyebrow { color: #9A3309; } /* A3: 5.3:1 on #BFE0F5 */
.jg-form-hero__intro h2 { color: var(--jg-primary); font-size: var(--jg-fs-2xl); font-weight: 500; }
.jg-form-hero__intro p { font-size: var(--jg-fs-sm); }
@media (min-width: 1024px) { .jg-form-hero__inner { grid-template-columns: 1fr 1fr; gap: var(--jg-s7); } }
.jg-form-wrap { padding-block: var(--jg-s6) var(--jg-s7); }
.jg-form-wrap .jg-form { max-width: 880px; }
.jg-consent { background: #FBF3E4; border: 1px solid #EBD9B4; border-radius: var(--jg-radius); padding: var(--jg-s4); }

/* =========================================================
   Collaborate chooser, About, 404, Sitemap
   ========================================================= */
.jg-choice { display: flex; flex-direction: column; gap: var(--jg-s3); padding: var(--jg-s5); border: 1px solid var(--jg-border); border-radius: var(--jg-radius); position: relative; }
.jg-choice:hover { box-shadow: var(--jg-shadow); }
.jg-choice:focus-within { box-shadow: var(--jg-focus); }
.jg-choice h2 { font-size: var(--jg-fs-xl); color: var(--jg-primary); margin: 0; }
.jg-choice h2 a { text-decoration: none; color: inherit; }
.jg-choice h2 a::after { content: ""; position: absolute; inset: 0; }
.jg-choice h2 a:focus-visible { box-shadow: none; }
.jg-choice p { margin: 0; font-size: var(--jg-fs-sm); }
.jg-sitemap ul { list-style: disc; padding-left: 1.2em; }
.jg-sitemap li { margin-bottom: var(--jg-s2); }
.jg-notfound { text-align: center; padding-block: var(--jg-s9); }
.jg-notfound .jg-h-display { font-size: clamp(4rem, 3rem + 5vw, 7rem); color: var(--jg-accent-text); margin-bottom: 0; }
.jg-eyebrow--light { color: #fff; opacity: .9; }
.jg-transcript { margin-top: var(--jg-s3); border: 1px solid var(--jg-border); border-radius: var(--jg-radius-sm); }
.jg-transcript summary { cursor: pointer; padding: var(--jg-s3) var(--jg-s4); font-weight: 500; color: var(--jg-primary); min-height: 44px; }
.jg-transcript__body { padding: 0 var(--jg-s4) var(--jg-s3); font-size: var(--jg-fs-sm); }
a.jg-chip { display: inline-flex; align-items: center; text-decoration: none; color: var(--jg-text); }
.jg-chips--small a.jg-chip[aria-current="page"] { background: var(--jg-primary-tint); color: var(--jg-primary); border-color: var(--jg-primary); }
.jg-breadcrumb--center ol { justify-content: center; margin-bottom: var(--jg-s4); }
.jg-aside-title { font-size: var(--jg-fs-md); font-weight: 500; color: var(--jg-primary); margin-bottom: var(--jg-s3); }
.jg-chalkboard .jg-chalk-display { font-family: var(--jg-font-chalk); font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem); line-height: 1.25; margin-bottom: var(--jg-s3); }
.jg-form-hero__title { color: var(--jg-primary); font-size: var(--jg-fs-2xl); font-weight: 500; }
.jg-form-hero .jg-breadcrumb { margin-bottom: var(--jg-s4); }
.jg-hint--inline { display: inline; font-weight: 400; }
.jg-form-wrap > .jg-form__note { margin-bottom: var(--jg-s5); }
.jg-notfound .jg-lead { margin-inline: auto; }
.jg-prose--left { margin-inline: 0; }
.jg-form-hero .jg-chalkboard { padding: var(--jg-s6) var(--jg-s5); min-height: 200px; display: flex; flex-direction: column; justify-content: center; }
.jg-hero-campaign__transcript { position: relative; z-index: 2; margin: var(--jg-s3) 0 0; font-size: var(--jg-fs-sm); }
.jg-form-hero .jg-breadcrumb [aria-current="page"] { color: #9A3309; }