/*
  shr-whyshred-page-v3.css — Why Shred 2026 (native) page-specific components.
  (v3 = the new native template; the legacy editor-content file is
  shr-why-shred-page.css, kept only as a revert fallback.)
  Loaded only on landing-pages/template-why-shred-2026.php (dep: shr-sections).
  Everything structural (sections, kickers, rules, h2, blueprint frames +
  corner marks, hover-lift, scroll-reveal, stat tiles, buttons) is reused
  from shr-sections.css / shr-shared.css. Only the genuinely unique bits
  live here — all scoped under .shr-whyshred.
*/

/* ═══════════ Hero ═══════════ */
.shr-whyshred-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
/* Photo sits directly on the page background — no card, border, or shadow.
   A soft radial mask feathers the edges so it visually dissolves into the
   page rather than reading as a pasted-in rectangle. */
.shr-whyshred-hero__media img {
	width: 100%; height: auto; display: block;
	-webkit-mask-image: radial-gradient(ellipse 80% 78% at center, #000 54%, transparent 97%);
	mask-image: radial-gradient(ellipse 80% 78% at center, #000 54%, transparent 97%);
}
.shr-whyshred-hero__title {
	font-family: var(--s2u-font-heading); font-weight: 600;
	font-size: clamp(30px, 3.8vw, 48px); line-height: 1.1; letter-spacing: .01em;
	text-transform: uppercase; color: var(--s2u-text); margin: 18px 0 20px; max-width: 20ch;
}
.shr-whyshred-hero__lead { font-size: 17px; line-height: 1.6; color: var(--s2u-neutral-700); max-width: 68ch; margin: 0 0 28px; }
.shr-whyshred-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* Ghost button on a LIGHT section needs a dark outline (the default ghost
   style assumes a navy/dark background, as used sitewide on hero/CTA bands).
   Selector must out-specificity shr-shared.css's ".s2u-page a.s2u-btn--ghost"
   (element + 2 classes) — ".shr-whyshred-hero__actions .s2u-btn--ghost" alone
   (2 classes) loses that fight and silently reverts to white-on-white. */
.s2u-page .shr-whyshred-hero__actions a.s2u-btn--ghost { border-color: var(--s2u-navy); color: var(--s2u-navy); }
.s2u-page .shr-whyshred-hero__actions a.s2u-btn--ghost:hover { background: var(--s2u-navy); color: #fff; }

/* ═══════════ Stat strip (4 items — 3 numeric + 1 static "PDPA") ═══════════ */
.shr-whyshred-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.shr-whyshred-stats__source { font-size: 12px; color: var(--s2u-neutral-500); margin: 12px 4px 0; }

/* ═══════════ 6 key reasons ═══════════ */
.shr-whyshred-intro { font-size: 15.5px; line-height: 1.6; color: var(--s2u-neutral-700); margin: 0 0 32px; max-width: 62ch; }
.s2u-section--dark .shr-whyshred-intro { color: rgba(255, 255, 255, .68); }
.shr-whyshred-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.shr-whyshred-card { padding: 24px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.shr-whyshred-card__tag { display: block; margin: 0 0 4px; }
.shr-whyshred-card__title {
	font-family: var(--s2u-font-heading); font-weight: 600; font-size: 19px;
	text-transform: uppercase; color: var(--s2u-text); margin: 0;
}
.shr-whyshred-card__desc { font-size: 14.5px; line-height: 1.6; color: var(--s2u-neutral-700); margin: 0; }

/* ═══════════ The risks (dark panel) ═══════════ */
.shr-whyshred-risks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.shr-whyshred-risk { padding: 22px; }
.shr-whyshred-risk .s2u-icon-badge { margin-bottom: 12px; }
.shr-whyshred-risk__title {
	font-family: var(--s2u-font-heading); font-weight: 600; font-size: 17px;
	text-transform: uppercase; color: #fff; margin: 0 0 8px;
}
.shr-whyshred-risk__desc { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .68); margin: 0; }

/* ═══════════ Who needs to shred ═══════════ */
.shr-whyshred-audiences { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.shr-whyshred-audience { padding: 24px; background: #fff; }
.shr-whyshred-audience .s2u-icon-badge { margin-bottom: 14px; }
.shr-whyshred-audience__title {
	font-family: var(--s2u-font-heading); font-weight: 600; font-size: 18px;
	text-transform: uppercase; color: var(--s2u-text); margin: 0 0 14px;
}
.shr-whyshred-audience__title a { color: inherit; text-decoration: none; }
.shr-whyshred-audience__title a:hover { color: var(--s2u-red); }
.shr-whyshred-audience__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.shr-whyshred-audience__list li {
	font-size: 14px; line-height: 1.5; color: var(--s2u-neutral-700);
	padding-left: 16px; position: relative;
}
.shr-whyshred-audience__list li::before {
	content: ''; position: absolute; left: 0; top: 8px;
	width: 6px; height: 6px; background: var(--s2u-accent-700);
}

.shr-whyshred-pdpa {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 24px 28px; background: #fff; flex-wrap: wrap;
}
.shr-whyshred-pdpa__copy { flex: 1 1 480px; }
.shr-whyshred-pdpa__copy .s2u-kicker { margin-bottom: 8px; }
.shr-whyshred-pdpa__copy p { font-size: 14.5px; line-height: 1.6; color: var(--s2u-neutral-700); margin: 0; max-width: 70ch; }
.shr-whyshred-pdpa__link {
	font-size: 14px; font-weight: 600; color: var(--s2u-accent-700); text-decoration: none;
	white-space: nowrap;
}
.shr-whyshred-pdpa__link:hover { color: var(--s2u-red); }

/* ═══════════ CTA band (dark) ═══════════ */
.shr-whyshred-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.shr-whyshred-cta__copy { flex: 1 1 420px; }
.shr-whyshred-cta__copy .s2u-h2 { margin-bottom: 10px; }
.shr-whyshred-cta__copy p { font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .72); margin: 0; max-width: 60ch; }
.shr-whyshred-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ═══════════ Responsive ═══════════ */
@media (max-width: 1000px) {
	.shr-whyshred-hero__grid { grid-template-columns: 1fr; }
	.shr-whyshred-hero__media { max-width: 420px; margin: 0 auto; }
	.shr-whyshred-stats { grid-template-columns: repeat(2, 1fr); }
	.shr-whyshred-reasons { grid-template-columns: repeat(2, 1fr); }
	.shr-whyshred-risks { grid-template-columns: repeat(2, 1fr); }
	.shr-whyshred-audiences { grid-template-columns: 1fr; }
	.shr-whyshred-pdpa { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
	.shr-whyshred-stats { grid-template-columns: 1fr; }
	.shr-whyshred-reasons { grid-template-columns: 1fr; }
	.shr-whyshred-risks { grid-template-columns: 1fr; }
}