/* ─────────────────────────────────────────────────────────────────
   Block: hero2
   Photo hero with checked-list bullets + button row + rating.
   Default scheme = steel (dark) — photo overrides bg.
   ───────────────────────────────────────────────────────────── */

.block-hero2 {
    position: relative;
    isolation: isolate;
    background-color: var(--scheme-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--scheme-fg);
    font-family: var(--ds-font-body);
    padding-top: var(--ds-space-8);
    padding-bottom: var(--ds-space-8);
    overflow: hidden;
}

/* Ink gradient overlay --------------------------------------- */
.block-hero2::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--scheme-bg) 0%, transparent) 0%,
            color-mix(in srgb, var(--scheme-bg) 65%, transparent) 100%
        ),
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--scheme-bg) 70%, transparent) 0%,
            color-mix(in srgb, var(--scheme-bg) 0%, transparent) 60%
        );
    pointer-events: none;
}

.block-hero2 > .container { position: relative; z-index: 1; }

/* Text column ------------------------------------------------- */
.block-hero2 .hero2-text { color: var(--scheme-fg); }

.block-hero2 .hero2-text h1,
.block-hero2 .hero2-text .hero-title {
    font-family: var(--ds-font-display);
    font-size: var(--ds-fs-display-xl);
    line-height: 0.98;
    text-transform: uppercase;
    color: var(--scheme-fg);
    margin: 0 0 var(--ds-space-4) 0;
    letter-spacing: 0.005em;
}
.block-hero2 .hero2-text h2 {
    font-family: var(--ds-font-display);
    font-size: var(--ds-fs-display-lg);
    line-height: 1.02;
    text-transform: uppercase;
    color: var(--scheme-fg);
    margin: 0 0 var(--ds-space-4) 0;
}
.block-hero2 .hero2-text em,
.block-hero2 .hero2-text h1 em,
.block-hero2 .hero2-text h2 em {
    font-family: var(--ds-font-serif);
    font-style: italic;
    color: var(--ds-cta);
}

.block-hero2 .hero2-text p,
.block-hero2 .hero2-text .lead {
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-lg);
    line-height: 1.55;
    color: var(--scheme-fg-soft);
    margin-bottom: var(--ds-space-4);
}

.block-hero2 .hero2-text strong { color: var(--scheme-fg); font-weight: 700; }
.block-hero2 .hero2-text a { color: var(--ds-cta); }

/* Checked list — uses shared .has-list-checked recipe in design-system.css */

/* Buttons ----------------------------------------------------- */
.block-hero2 .hero2-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-3);
    margin: var(--ds-space-4) 0 var(--ds-space-3) 0;
}

/* Rating ------------------------------------------------------ */
.block-hero2 .hero2-rating { gap: var(--ds-space-3); align-items: center; }

.block-hero2 .hero2-avatars { padding-left: var(--ds-space-4); }
.block-hero2 .hero2-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 4px solid var(--scheme-fg);
    margin-left: -1rem;
    object-fit: cover;
    background: var(--scheme-card-bg);
}

.block-hero2 .hero2-rating-stars {
    font-size: var(--ds-fs-body-lg);
    color: var(--scheme-fg);
}
.block-hero2 .hero2-stars-wrap { position: relative; margin-right: var(--ds-space-1); }
.block-hero2 .hero2-stars-mask {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    background-color: var(--scheme-bg);
}
.block-hero2 .hero2-rating-value { color: var(--scheme-fg); font-weight: 700; }
.block-hero2 .hero2-rating-label {
    font-family: var(--ds-font-mono);
    font-size: var(--ds-fs-body-sm);
    color: var(--scheme-fg-mute);
}

/* Media ------------------------------------------------------- */
.block-hero2 .hero2-media { color: var(--scheme-fg); }
.block-hero2 .hero2-media img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ds-radius-lg);
}

/* Responsive -------------------------------------------------- */
@media (max-width: 991.98px) {
    .block-hero2 {
        padding-top: var(--ds-space-7);
        padding-bottom: var(--ds-space-7);
    }
}
@media (max-width: 600px) {
    .block-hero2 {
        padding-top: var(--ds-space-6);
        padding-bottom: var(--ds-space-6);
    }
    .block-hero2 .hero2-text h1,
    .block-hero2 .hero2-text .hero-title { font-size: var(--ds-fs-display-lg); }
    .block-hero2 .hero2-avatar { width: 2.5rem; height: 2.5rem; border-width: 3px; }
    .block-hero2 .hero2-avatars { padding-left: var(--ds-space-3); }
}