/* ============================================================
   Protectly - page styles: Deep Dive package (auto-linked)
   Page-specific only; shared components live in main.css.
   Values come from tokens.css; no raw hex/px.
   ============================================================ */

/* Hero: dark band, text-first, eyebrow pill above the H1 */
.deepdive-hero { padding-block: var(--space-2xl); }
.deepdive-hero__eyebrow { margin-bottom: var(--space-md); }
.deepdive-hero__headline { margin-bottom: var(--space-sm); }
.deepdive-hero__sub { font-size: var(--text-lg); color: var(--ink-inverse-muted); max-width: var(--container-narrow); margin-bottom: var(--space-lg); }
.deepdive-hero__cta-group { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xl); }

/* Hero: text left, week tiles right on wide screens (base: components/hero-visual.css) */
.deepdive-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: center; margin-bottom: var(--space-xl); }
.deepdive-hero__cta-group { margin-bottom: 0; }
.dweeks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.dweek { display: grid; gap: var(--space-xs); padding: var(--space-sm); background: var(--surface-50); border: 1px solid var(--line-200); border-radius: var(--radius-md); }
.dweek__name { font-family: var(--font-display); font-weight: 600; color: var(--ink-900); }
.dweek__track { display: block; height: var(--space-xs); background: var(--blue-100); border-radius: var(--radius-full); overflow: hidden; }
.dweek__fill { display: block; width: 100%; height: 100%; background: var(--blue-500); border-radius: var(--radius-full); transform-origin: left center; }
@media (min-width: 1024px) {
    .deepdive-hero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-2xl); }
}

.deepdive-hero .breadcrumb { color: var(--ink-inverse-muted); }
.deepdive-hero .breadcrumb__trail a { color: var(--ink-inverse-muted); }
.deepdive-hero .breadcrumb__trail a:hover { color: var(--surface-0); }
.deepdive-hero .breadcrumb__trail [aria-current="page"] { color: var(--ink-inverse); }
.deepdive-hero .breadcrumb__sep { color: var(--ink-inverse-muted); opacity: .6; }

/* Offer at a glance */
.deepdive-facts { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.deepdive-facts__item {
    display: flex; flex-direction: column; gap: var(--space-3xs);
    padding: var(--space-md);
    border: 1px solid var(--ink-inverse-muted);
    border-radius: var(--radius-md);
}
.deepdive-facts__value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: 1.2; color: var(--surface-0); }
.deepdive-facts__label { color: var(--ink-inverse-muted); }

@media (min-width: 768px) {
    .deepdive-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .deepdive-hero { padding-block: var(--space-3xl); }
}

/* Lead under a centered section heading */
.deepdive-lead {
    text-align: center; color: var(--ink-600);
    max-width: var(--container-narrow);
    margin: calc(-1 * var(--space-md)) auto var(--space-xl);
}

/* Components as cards */
.deepdive-incl { background: var(--surface-50); }
.deepdive-cards { list-style: none; padding: 0; display: grid; gap: var(--space-md); }
.deepdive-card {
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
}
.deepdive-card__icon { display: inline-flex; color: var(--blue-700); margin-bottom: var(--space-sm); }
.deepdive-card__title { margin-bottom: var(--space-xs); }
.deepdive-card__tag { font-size: var(--text-sm); font-weight: 600; color: var(--blue-700); margin-bottom: var(--space-xs); }
.deepdive-card__body { color: var(--ink-600); }
@media (min-width: 768px) {
    .deepdive-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Check lists (who, result) */
.deepdive-who { background: var(--surface-0); }
.deepdive-result { background: var(--surface-50); }
.deepdive-checklist { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.deepdive-checklist li { display: flex; align-items: baseline; gap: var(--space-xs); }

/* Hosting line */
.deepdive-hosting { background: var(--blue-100); text-align: center; }
.deepdive-hosting h2 { margin-bottom: var(--space-md); }
.deepdive-hosting p { color: var(--ink-600); margin-bottom: var(--space-sm); }
.deepdive-hosting__link { color: var(--blue-700); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }