/* ============================================================
   About Us — shared styles for all five publication templates
   Class prefix: ab- (avoids conflicts with existing theme classes)
   ============================================================ */

/* ── Shared section chrome ─────────────────────────────── */
.ab-section {
	padding-top:    var(--space-9);
	padding-bottom: var(--space-9);
}
.ab-section-label {
	font-family:    var(--font-ui);
	font-size:      var(--text-sm);
	font-weight:    700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color:          var(--brand);
	margin-bottom:  var(--space-3);
}
.ab-section-heading {
	font-family:    var(--font-display);
	font-size:      var(--text-7xl);
	font-weight:    700;
	line-height:    1.08;
	letter-spacing: -1px;
	color:          var(--ink);
	margin-bottom:  var(--space-5);
}
.ab-section-intro {
	font-family:    var(--font-body);
	font-size:      var(--text-xl);
	color:          var(--ink-soft);
	line-height:    1.6;
	max-width:      640px;
	margin-bottom:  var(--space-7);
}

/* ── 1. Hero ────────────────────────────────────────────── */
.ab-hero {
	background:    var(--ink);
	color:         #fff;
	padding:       var(--space-9) var(--gutter) 80px;
	text-align:    center;
	overflow:      hidden;
	position:      relative;
}
.ab-hero::before {
	content:     '';
	position:    absolute;
	inset:       0;
	background:  radial-gradient(ellipse 80% 60% at 50% 0%, rgba(192,57,43,.18) 0%, transparent 70%);
	pointer-events: none;
}
.ab-hero-inner {
	position:  relative;
	max-width: 820px;
	margin:    0 auto;
}
.ab-eyebrow {
	font-family:    var(--font-ui);
	font-size:      var(--text-sm);
	font-weight:    700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color:          var(--brand);
	margin-bottom:  var(--space-3);
}
.ab-pub-title {
	font-family:    var(--font-display);
	font-size:      clamp(48px, 8vw, 96px);
	font-weight:    700;
	line-height:    1;
	letter-spacing: -3px;
	color:          #fff;
	margin-bottom:  var(--space-4);
}
.ab-pub-tagline {
	font-family:    var(--font-body);
	font-size:      var(--text-3xl);
	color:          rgba(255,255,255,.65);
	line-height:    1.35;
	max-width:      580px;
	margin:         0 auto var(--space-6);
}
.ab-brand-rule {
	width:        64px;
	height:       3px;
	background:   var(--brand);
	margin:       0 auto var(--space-6);
	border-radius: 2px;
}
.ab-hero-intro {
	font-family: var(--font-body);
	font-size:   var(--text-xl);
	color:       rgba(255,255,255,.8);
	line-height: 1.65;
	max-width:   640px;
	margin:      0 auto;
}

/* ── 2. Mission ─────────────────────────────────────────── */
.ab-mission {
	background:     var(--bg-cream);
	border-top:     1px solid var(--line);
	border-bottom:  1px solid var(--line);
}
.ab-mission-layout {
	display:               grid;
	grid-template-columns: 1fr 280px;
	gap:                   var(--space-8);
	align-items:           start;
}
.ab-mission-body .ab-section-heading {
	font-size: var(--text-6xl);
}
.ab-mission-content p {
	font-family:   var(--font-body);
	font-size:     var(--text-xl);
	line-height:   1.7;
	color:         var(--ink-soft);
	margin-bottom: var(--space-4);
}
.ab-mission-content p:last-child { margin-bottom: 0; }
.ab-mission-content strong { color: var(--ink); font-weight: 600; }

/* Sidebar stats */
.ab-stat-block {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-4);
}
.ab-pub-stat {
	padding:          var(--space-5) var(--space-5);
	background:       var(--bg);
	border:           1px solid var(--line);
	border-left:      3px solid var(--brand);
	border-radius:    2px;
}
.ab-stat-num {
	display:        block;
	font-family:    var(--font-display);
	font-size:      var(--text-5xl);
	font-weight:    700;
	color:          var(--ink);
	line-height:    1;
	margin-bottom:  4px;
}
.ab-stat-label {
	display:        block;
	font-family:    var(--font-ui);
	font-size:      var(--text-sm);
	color:          var(--muted);
	letter-spacing: 0.5px;
}

/* ── 3. Coverage Topics ─────────────────────────────────── */
.ab-coverage { background: var(--bg); }
.ab-topics {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   var(--space-4);
}
.ab-topic {
	padding:    var(--space-5);
	border:     1px solid var(--line);
	border-top: 3px solid var(--brand);
	border-radius: 2px;
	background: var(--bg);
	transition: border-color var(--ease-quick), box-shadow var(--ease-quick), transform var(--ease-quick);
}
.ab-topic:hover {
	border-color: var(--brand);
	box-shadow:   0 4px 20px rgba(0,0,0,.08);
	transform:    translateY(-2px);
}
.ab-topic-icon {
	width:         40px;
	height:        40px;
	border-radius: 8px;
	background:    var(--bg-soft);
	display:       flex;
	align-items:   center;
	justify-content: center;
	color:         var(--brand);
	margin-bottom: var(--space-3);
	flex-shrink:   0;
}
.ab-topic-icon svg { width: 20px; height: 20px; display: block; }
.ab-topic-name {
	font-family:   var(--font-ui);
	font-size:     var(--text-base);
	font-weight:   700;
	color:         var(--ink);
	margin-bottom: var(--space-2);
	letter-spacing: 0.2px;
}
.ab-topic-desc {
	font-family: var(--font-ui);
	font-size:   var(--text-sm);
	color:       var(--muted);
	line-height: 1.5;
}

/* ── 4. Editorial Standards ─────────────────────────────── */
.ab-standards {
	background:  var(--bg-soft);
	border-top:  1px solid var(--line);
}
.ab-standards-grid {
	display:               grid;
	grid-template-columns: repeat(5, 1fr);
	gap:                   var(--space-5);
}
.ab-standard {
	padding:       var(--space-5) var(--space-4);
	background:    var(--bg);
	border:        1px solid var(--line);
	border-radius: 2px;
	text-align:    center;
}
.ab-standard-icon {
	width:           48px;
	height:          48px;
	border-radius:   50%;
	background:      var(--bg-soft);
	border:          1px solid var(--line);
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin:          0 auto var(--space-3);
	color:           var(--brand);
}
.ab-standard-icon svg { width: 22px; height: 22px; }
.ab-standard-title {
	font-family:   var(--font-ui);
	font-size:     var(--text-base);
	font-weight:   700;
	color:         var(--ink);
	margin-bottom: var(--space-2);
}
.ab-standard-text {
	font-family: var(--font-ui);
	font-size:   var(--text-sm);
	color:       var(--muted);
	line-height: 1.5;
}

/* ── 5. Audience ────────────────────────────────────────── */
.ab-audience { background: var(--bg); border-top: 1px solid var(--line); }
.ab-audience-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   var(--space-5);
}
.ab-audience-card {
	padding:       var(--space-6);
	border:        1px solid var(--line);
	border-radius: 2px;
	background:    var(--bg);
}
.ab-audience-card-icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           48px;
	height:          48px;
	border-radius:   50%;
	background:      var(--brand);
	color:           #fff;
	margin-bottom:   var(--space-4);
}
.ab-audience-card-icon svg { width: 22px; height: 22px; }
.ab-audience-card-title {
	font-family:   var(--font-ui);
	font-size:     var(--text-md);
	font-weight:   700;
	color:         var(--ink);
	margin-bottom: var(--space-2);
}
.ab-audience-card-text {
	font-family: var(--font-ui);
	font-size:   var(--text-sm);
	color:       var(--ink-soft);
	line-height: 1.6;
}

/* ── 6. Newsletter CTA ──────────────────────────────────── */
.ab-cta {
	background: var(--brand);
	padding:    var(--space-9) var(--gutter);
	text-align: center;
}
.ab-cta-inner {
	max-width: 640px;
	margin:    0 auto;
}
.ab-cta-label {
	color:          rgba(255,255,255,.7);
	margin-bottom:  var(--space-3);
}
.ab-cta-heading {
	font-family:    var(--font-display);
	font-size:      var(--text-7xl);
	font-weight:    700;
	line-height:    1.05;
	letter-spacing: -1px;
	color:          #fff;
	margin-bottom:  var(--space-4);
}
.ab-cta-desc {
	font-family:   var(--font-body);
	font-size:     var(--text-xl);
	color:         rgba(255,255,255,.8);
	line-height:   1.55;
	margin-bottom: var(--space-6);
}
.ab-cta-form {
	display:       flex;
	gap:           var(--space-3);
	max-width:     480px;
	margin:        0 auto;
}
.ab-cta-form input[type="email"] {
	flex:           1;
	padding:        12px 16px;
	font-family:    var(--font-ui);
	font-size:      var(--text-base);
	border:         none;
	border-radius:  2px;
	background:     rgba(255,255,255,.15);
	color:          #fff;
	outline:        none;
	min-width:      0;
}
.ab-cta-form input[type="email"]::placeholder { color: rgba(255,255,255,.55); }
.ab-cta-form input[type="email"]:focus { background: rgba(255,255,255,.22); }
.ab-cta-btn {
	padding:       12px 24px;
	background:    #fff;
	color:         var(--brand);
	font-family:   var(--font-ui);
	font-size:     var(--text-base);
	font-weight:   700;
	letter-spacing: 0.5px;
	border:        none;
	border-radius: 2px;
	cursor:        pointer;
	white-space:   nowrap;
	transition:    opacity var(--ease-quick);
}
.ab-cta-btn:hover { opacity: .88; }

/* ── 7. Contact ─────────────────────────────────────────── */
.ab-contact {
	background:  var(--bg-soft);
	border-top:  1px solid var(--line);
}
.ab-contact-grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   var(--space-5);
}
.ab-contact-card {
	padding:       var(--space-5);
	background:    var(--bg);
	border:        1px solid var(--line);
	border-radius: 2px;
}
.ab-contact-icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           40px;
	height:          40px;
	border-radius:   50%;
	background:      var(--bg-soft);
	color:           var(--brand);
	margin-bottom:   var(--space-3);
}
.ab-contact-icon svg { width: 18px; height: 18px; }
.ab-contact-type {
	font-family:   var(--font-ui);
	font-size:     var(--text-base);
	font-weight:   700;
	color:         var(--ink);
	margin-bottom: var(--space-2);
}
.ab-contact-desc {
	font-family:   var(--font-ui);
	font-size:     var(--text-sm);
	color:         var(--muted);
	line-height:   1.5;
	margin-bottom: var(--space-3);
}
.ab-contact-link {
	font-family: var(--font-ui);
	font-size:   var(--text-sm);
	font-weight: 600;
	color:       var(--brand);
}
.ab-contact-link:hover { text-decoration: underline; }

/* ── Optional: page-content block (Elementor / custom) ─── */
.ab-custom-content {
	padding:    var(--space-8) 0;
	border-top: 1px solid var(--line);
}
.ab-custom-content-inner {
	max-width:   720px;
	font-family: var(--font-body);
	font-size:   var(--text-xl);
	line-height: 1.7;
	color:       var(--ink-soft);
}
.ab-custom-content-inner p { margin-bottom: var(--space-4); }
.ab-custom-content-inner h2,
.ab-custom-content-inner h3 {
	font-family:   var(--font-display);
	color:         var(--ink);
	margin-bottom: var(--space-3);
	margin-top:    var(--space-6);
}
.ab-custom-content-inner a { color: var(--brand); }

/* ── Dark mode ──────────────────────────────────────────── */
[data-theme="dark"] .ab-hero           { background: #050505; }
[data-theme="dark"] .ab-hero::before   { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(192,57,43,.28) 0%, transparent 70%); }
[data-theme="dark"] .ab-mission        { background: var(--bg-soft); }
[data-theme="dark"] .ab-pub-stat       { background: var(--bg); }
[data-theme="dark"] .ab-topic          { background: var(--bg-soft); }
[data-theme="dark"] .ab-topic-icon     { background: var(--bg); }
[data-theme="dark"] .ab-standards      { background: var(--bg); }
[data-theme="dark"] .ab-standard       { background: var(--bg-soft); }
[data-theme="dark"] .ab-standard-icon  { background: var(--bg); }
[data-theme="dark"] .ab-audience       { background: var(--bg-soft); }
[data-theme="dark"] .ab-audience-card  { background: var(--bg); }
[data-theme="dark"] .ab-contact        { background: var(--bg); }
[data-theme="dark"] .ab-contact-card   { background: var(--bg-soft); }
[data-theme="dark"] .ab-contact-icon   { background: var(--bg); }
[data-theme="dark"] .ab-cta-form input[type="email"] { background: rgba(255,255,255,.1); }
[data-theme="dark"] .ab-cta-btn        { background: var(--ink); color: var(--bg); }
/* Hero is intentionally always-dark — pin it so it doesn't go light in dark mode */
[data-theme="dark"] .ab-hero          { background: #111111; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
	.ab-topics { grid-template-columns: repeat(3, 1fr); }
	.ab-standards-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	.ab-section-heading { font-size: var(--text-5xl); }
	.ab-mission-layout  { grid-template-columns: 1fr; }
	.ab-mission-body .ab-section-heading { font-size: var(--text-5xl); }
	.ab-stat-block      { flex-direction: row; flex-wrap: wrap; }
	.ab-pub-stat        { flex: 1; min-width: 140px; }
	.ab-topics          { grid-template-columns: repeat(2, 1fr); }
	.ab-standards-grid  { grid-template-columns: repeat(2, 1fr); }
	.ab-audience-grid   { grid-template-columns: 1fr 1fr; }
	.ab-contact-grid    { grid-template-columns: 1fr 1fr; }
	.ab-cta-heading     { font-size: var(--text-5xl); }
}
@media (max-width: 600px) {
	.ab-pub-title   { letter-spacing: -1px; }
	.ab-pub-tagline { font-size: var(--text-xl); }
	.ab-topics      { grid-template-columns: 1fr; }
	.ab-standards-grid { grid-template-columns: 1fr 1fr; }
	.ab-audience-grid  { grid-template-columns: 1fr; }
	.ab-contact-grid   { grid-template-columns: 1fr; }
	.ab-cta-form       { flex-direction: column; }
	.ab-cta-form input,
	.ab-cta-btn        { width: 100%; }
}