/* Institutional pages, articles, guide shortcuts and article tables. */

.content-page { display: grid; gap: var(--cp-space-32); max-width: 48rem; }
.content-head { display: grid; gap: var(--cp-space-12); }
.content-head h1 { font-size: clamp(2rem, 7vw, 3rem); line-height: 1.02; text-wrap: balance; }
.content-lead { font-size: 1.125rem; line-height: 1.55; color: var(--cp-text-muted); }

.prose { display: grid; gap: var(--cp-space-16); line-height: 1.65; }
.prose h2 { font-size: clamp(1.25rem, 4vw, 1.625rem); line-height: 1.15; margin-top: var(--cp-space-16); }
.prose h3 { font: 800 1.125rem/1.3 var(--cp-font-body); letter-spacing: -0.01em; }
.prose ul { display: grid; gap: var(--cp-space-8); margin: 0; padding-left: 1.25rem; }
.prose a { color: var(--cp-guava-strong); font-weight: 600; }
.prose strong { font-weight: 700; }

.faq-group { display: grid; gap: var(--cp-space-8); }
.faq-group h2 { font-size: clamp(1.25rem, 4vw, 1.625rem); line-height: 1.15; }
.faq-group .faq-list p + p { margin-top: calc(-1 * var(--cp-space-8)); }
.faq-group .text-link { min-height: 2.75rem; color: var(--cp-guava-strong); }

.guide-shortcuts { border-top: 1px solid var(--cp-border); }
.guide-shortcuts h2 { font-size: clamp(1.375rem, 4vw, 1.75rem); line-height: 1.1; margin-bottom: var(--cp-space-24); }
.shortcut-columns { display: grid; gap: var(--cp-space-24); }
.shortcut-columns h3 { font: 500 0.6875rem/1.4 var(--cp-font-data); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cp-text-muted); margin-bottom: var(--cp-space-8); }
.shortcut-columns ul { display: grid; list-style: none; margin: 0; padding: 0; }
.shortcut-columns li { display: flex; align-items: center; gap: var(--cp-space-8); }
.shortcut-columns a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--cp-text); text-decoration: none; font-weight: 600; }
.shortcut-columns a:hover { text-decoration: underline; text-underline-offset: 3px; }
.shortcut-columns small { font: 500 0.75rem var(--cp-font-data); color: var(--cp-text-muted); }
@media (min-width: 768px) { .shortcut-columns { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }

/* Articles, sections and the Squad CP page. */
.article-kicker { font: 500 0.75rem/1.4 var(--cp-font-data); letter-spacing: 0.1em; text-transform: uppercase; }
.article-kicker a { color: var(--cp-guava-strong); text-decoration: none; }
.article-kicker a:hover { text-decoration: underline; }
.article-meta { font-size: 0.9375rem; color: var(--cp-text-muted); }
.article-summary { display: grid; gap: var(--cp-space-8); padding: var(--cp-space-24); background: var(--cp-surface-sand); border-radius: var(--cp-radius-md); }
.article-summary h2 { font: 500 0.75rem/1.4 var(--cp-font-data); letter-spacing: 0.1em; text-transform: uppercase; }
.article-summary p { font-size: 1.0625rem; line-height: 1.55; }
.article-author { display: grid; gap: var(--cp-space-12); padding-top: var(--cp-space-24); border-top: 1px solid var(--cp-border); }
.article-author h2 { font-size: 1.25rem; }
.article-list { display: grid; gap: var(--cp-space-32); list-style: none; margin: 0; padding: 0; }
.article-list li { display: grid; gap: var(--cp-space-8); }
.article-list h2, .article-list h3 { font-size: clamp(1.25rem, 4vw, 1.5rem); line-height: 1.15; }
.article-list h2 a, .article-list h3 a { color: var(--cp-text); text-decoration: none; }
.article-list h2 a:hover, .article-list h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.article-sections { display: grid; gap: var(--cp-space-12); padding-top: var(--cp-space-24); border-top: 1px solid var(--cp-border); }
.article-sections ul { display: flex; flex-wrap: wrap; gap: var(--cp-space-8) var(--cp-space-16); list-style: none; margin: 0; padding: 0; }
.article-sections ul a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; color: var(--cp-text); }
.section-quote { margin: 0; padding-left: var(--cp-space-16); border-left: 3px solid var(--cp-guava); font-family: var(--cp-font-editorial); font-size: 1.125rem; line-height: 1.4; }
.squad-list { display: grid; gap: var(--cp-space-32); list-style: none; margin: 0; padding: 0; }
.squad-list li { display: grid; gap: var(--cp-space-8); padding-bottom: var(--cp-space-24); border-bottom: 1px solid var(--cp-border); }
.squad-list h2 { font-size: 1.375rem; }

/* Tables inside articles scroll sideways on phones instead of widening the page. */
.table-scroll { overflow-x: auto; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-md); background: var(--cp-surface); }
.table-scroll table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }
.table-scroll caption { caption-side: top; text-align: left; padding: var(--cp-space-12) var(--cp-space-16); font-weight: 700; }
.table-scroll th, .table-scroll td { padding: var(--cp-space-8) var(--cp-space-16); text-align: left; vertical-align: top; border-top: 1px solid var(--cp-border); }
.table-scroll th { font: 500 0.75rem/1.4 var(--cp-font-data); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cp-text-muted); background: var(--cp-surface-sand); }

/* Tournaments, coaches and arenas for events: their pages and the home band. */
.showcase-list { display: grid; gap: var(--cp-space-24); list-style: none; margin: 0; padding: 0; }
.showcase-item { display: grid; gap: var(--cp-space-8); padding-bottom: var(--cp-space-24); border-bottom: 1px solid var(--cp-border); }
.showcase-item h2, .showcase-item h3 { font-size: clamp(1.125rem, 3.6vw, 1.375rem); line-height: 1.2; }
.showcase-item .text-link { min-height: 2.75rem; }
.showcase-list-compact { gap: var(--cp-space-16); }
.showcase-list-compact .showcase-item { padding-bottom: var(--cp-space-16); }
.showcase-list-compact .showcase-item h3 { font: 800 1.0625rem/1.3 var(--cp-font-body); letter-spacing: -0.01em; }
.showcase-columns { display: grid; gap: var(--cp-space-48); }
.showcase-column { display: grid; gap: var(--cp-space-16); align-content: start; }
.showcase-column > h2 { font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.05; }
.showcase-column .showcase-item { border-color: color-mix(in srgb, var(--cp-plum) 18%, transparent); }
.band-lavender .article-kicker, .band-lavender .article-kicker a { color: var(--cp-plum); }
@media (min-width: 960px) { .showcase-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cp-space-32); } }
.state-message { padding: var(--cp-space-16) var(--cp-space-24); background: var(--cp-surface); border-left: 3px solid var(--cp-guava); border-radius: var(--cp-radius-sm); font-weight: 600; }
.check-row { display: flex; gap: var(--cp-space-12); align-items: flex-start; font-weight: 500; }
.check-row input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; flex: none; accent-color: var(--cp-plum); }
