/**
 * Modern Hero Block Frontend Styles
 * Matches reference design from newtheme.css
 * Uses --lwp- CSS variables from dynamic palette system
 */

/* ===== HERO BASE STYLES ===== */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh; /* small viewport height — iOS toolbar friendly (fallback above) */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 40px 24px;
}

.hero-bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.layer-1 {
    background: radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--lwp-accent, #7c5cbf) 15%, transparent) 0%, transparent 60%);
}

.layer-2 {
    background: radial-gradient(ellipse at 70% 80%, color-mix(in srgb, var(--lwp-accent, #7c5cbf) 8%, transparent) 0%, transparent 50%);
}

.layer-3 {
    /* Noise pattern tinted with the palette accent (was a hardcoded purple) */
    background-color: color-mix(in srgb, var(--lwp-accent, #7c5cbf) 3%, transparent);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: center;
    max-width: 1200px;
}

.hero-label {
    font-family: var(--lwp-font-sans, 'Inter', -apple-system, sans-serif);
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--lwp-accent-light, #a382de);
    margin-bottom: 12px;
}

.hero-title {
    font-family: var(--lwp-font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: 16px;
    color: var(--lwp-text-primary, #e8eaf0);
}

.hero-subtitle {
    font-size: 1rem;
    color: var(--lwp-text-secondary, #9aa5b8);
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}

.hero-description {
    font-size: 1.05rem;
    line-height: 1.8;
    /* text-secondary (not text-muted): muted falls just under WCAG AA 4.5:1 on the dark palettes */
    color: var(--lwp-text-secondary, #9aa5b8);
    max-width: 560px;
    margin-bottom: 24px;
}

.hero-cta {
    display: flex;
    gap: 12px;
}

/* ===== ENTRANCE ANIMATION =====
   Subtle, staggered fade-up on load so the hero feels alive.
   Pure CSS (no JS) to keep the "no frontend JS" performance guarantee.
   `both` fill-mode holds the start state (opacity 0) during each delay. */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-label,
.hero-title,
.hero-subtitle,
.hero-description,
.hero-cta {
    animation: heroFadeUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Stagger top-to-bottom for a gentle cascade */
.hero-label       { animation-delay: 0.05s; }
.hero-title       { animation-delay: 0.15s; }
.hero-subtitle    { animation-delay: 0.25s; }
.hero-description { animation-delay: 0.35s; }
.hero-cta         { animation-delay: 0.45s; }

.hero-image-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-portrait {
    width: 360px;
    height: 440px;
    object-fit: cover;
    border-radius: var(--lwp-radius-lg, 20px);
    box-shadow: var(--lwp-shadow-lg, 0 8px 40px rgba(0, 0, 0, 0.7)), -10px 10px 30px rgba(0, 0, 0, 0.5);
    position: relative;
}

/* Side-by-Side: shrink-wrap the wrapper to the portrait and center it in its
   340px grid track (the 360px portrait overhangs ~10px per side either way),
   so the accent glow below hugs the image. */
.hero-layout-side-by-side .hero-image-wrapper {
    width: fit-content;
    margin-inline: auto;
}

/* Accent glow behind the portrait card. This originally lived as an ::after
   on <img class="hero-portrait"> — pseudo-elements don't render on replaced
   elements, so it never actually appeared. Restored on the wrapper instead,
   scoped to the layouts whose portrait fills its wrapper box (side-by-side
   via the shrink-wrap above; split-screen's portrait is width:100%). */
.hero-layout-side-by-side .hero-image-wrapper::after,
.hero-layout-split-screen .hero-image-wrapper::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: var(--lwp-radius-lg, 20px);
    background: linear-gradient(135deg, color-mix(in srgb, var(--lwp-accent, #7c5cbf) 30%, transparent), transparent);
    z-index: -1;
}

.hero-float-badge {
    position: absolute;
    bottom: -20px;
    /* Center with left/right + auto margins (NOT left:50% + translateX).
       With left:50% the shrink-to-fit available width is only 50% of the
       container (~170px), which forced the badge to wrap. left:0/right:0
       gives it the full container width to size against.
       width: fit-content makes it hug its text (narrow for short text) and
       grow only up to max-width, where it wraps — so it's never "giant"
       for a few words, but still fits longer quotes on one line. */
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    z-index: 2; /* sit above the portrait glow + background layers */
    background: var(--lwp-surface-hover, rgba(30, 45, 70, 0.8));
    backdrop-filter: blur(10px);
    border: 1px solid var(--lwp-border, rgba(124, 92, 191, 0.2));
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 0.9rem;
    color: var(--lwp-text-primary, #e8eaf0);
    /* Allow long badge text to wrap instead of overflowing the portrait.
       Wide enough (vs. the 360px portrait) that typical quotes sit on one
       line; very long text still wraps rather than stretching into a pill. */
    white-space: normal;
    max-width: 440px;
    text-align: center;
    line-height: 1.4;
}

/* Reserve bottom space under the portrait so the badge's -20px overhang is
   never clipped by the hero's overflow:hidden. Applies to the badge-capable
   layouts (side-by-side + asymmetric). */
.hero-layout-side-by-side .hero-image-wrapper,
.hero-layout-asymmetric .hero-image-wrapper {
    margin-bottom: 24px;
}

/* ===== Side-by-Side: portrait on the LEFT (toggle) =====
   Default side-by-side is `1fr 340px` (text left, portrait right) and the
   text block is rendered first. When .hero-image-left-side is set, render.php
   emits the image wrapper first, so we just swap the column widths to put the
   narrow portrait track on the left and the text track on the right. */
.hero-layout-side-by-side.hero-image-left-side .hero-content {
    grid-template-columns: 340px 1fr;
}

/* Keep the text left-aligned, but add breathing room on the side that faces the
   portrait so the gap feels like the default (text-left) layout instead of the
   text hugging the image. */
.hero-layout-side-by-side.hero-image-left-side .hero-text {
    padding-left: 48px;
}

.scroll-indicator {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: var(--lwp-text-muted, #6b7a94);
    opacity: 0.6;
    display: inline-flex;
    transition: opacity 0.3s ease;
}

.scroll-indicator:hover {
    opacity: 1;
}

/* Modern "mouse" indicator: a rounded pill with an animated wheel. */
.scroll-mouse {
    display: block;
    width: 26px;
    height: 42px;
    border: 2px solid currentColor;
    border-radius: 14px;
    position: relative;
}

.scroll-mouse-wheel {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    height: 8px;
    border-radius: 2px;
    background: currentColor;
    transform: translateX(-50%);
    animation: scrollWheel 1.8s ease-in-out infinite;
}

@keyframes scrollWheel {
    0%   { opacity: 0; transform: translate(-50%, 0); }
    40%  { opacity: 1; }
    80%  { opacity: 0; transform: translate(-50%, 12px); }
    100% { opacity: 0; transform: translate(-50%, 12px); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .scroll-mouse-wheel {
        animation: none;
    }
    /* Disable the entrance animation — elements simply appear in place. */
    .hero-label,
    .hero-title,
    .hero-subtitle,
    .hero-description,
    .hero-cta {
        animation: none;
    }
}

/* ===== BUTTON STYLES =====
   Buttons now use the shared .lwp-btn system — see css/lwp-modern-buttons.css.
   Hero CTAs render as: lwp-btn lwp-btn--primary lwp-btn--xl / --ghost */

/* Visible keyboard focus (WCAG 2.4.7 Focus Visible) for non-button controls;
   .lwp-btn focus styles live in the shared button stylesheet. */
.scroll-indicator:focus-visible {
    outline: 2px solid var(--lwp-accent-light, #a382de);
    outline-offset: 3px;
}
/* ===== FULL-BLEED LAYOUT ===== */
.hero-layout-full-bleed {
    position: relative;
    /* min-height (not height) so the block's Min-Height setting can override it,
       matching every other layout. */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-layout-full-bleed .hero-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-layout-full-bleed .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--lwp-bg-primary, #0a0e17) 50%, transparent) 0%,
        color-mix(in srgb, var(--lwp-bg-primary, #0a0e17) 80%, transparent) 100%
    );
    z-index: 1;
}

.hero-layout-full-bleed .hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    width: 90%;
    padding: 40px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hero-layout-full-bleed .hero-label {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    margin-bottom: 4px;
}

.hero-layout-full-bleed .hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: 8px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.hero-layout-full-bleed .hero-subtitle {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    margin-bottom: 8px;
}

.hero-layout-full-bleed .hero-description {
    font-size: clamp(0.85rem, 1.2vw, 0.95rem);
    max-width: 600px;
    margin-bottom: 16px;
    /* 3-line clamp: enough room for a fuller sentence without the overlay
       turning into a wall of text over the background image. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-layout-full-bleed .hero-cta {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ===== ASYMMETRIC LAYOUT ===== */
.hero-layout-asymmetric .hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.hero-layout-asymmetric .hero-text-asym-left {
    max-width: 500px;
    padding-right: 20px;
}

.hero-layout-asymmetric .hero-title-asym {
    font-size: clamp(3rem, 7vw, 5.5rem);
    line-height: 1.05;
    margin-bottom: 24px;
}

.hero-layout-asymmetric .hero-image-asym {
    position: relative;
    z-index: 2;
}

.hero-layout-asymmetric .hero-portrait-asym {
    width: 100%;
    max-width: 480px;
    height: auto;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: var(--lwp-radius-lg, 20px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ===== SPLIT SCREEN LAYOUT ===== */
.hero-layout-split-screen .hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    width: 100%;
}

.hero-layout-split-screen .hero-image-left {
    order: -1;
}

.hero-layout-split-screen .hero-portrait-wide {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: var(--lwp-radius-lg, 20px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.hero-layout-split-screen .hero-text-right {
    padding-left: 20px;
}

/* ===== EDITORIAL LAYOUT ===== */
.hero-layout-editorial {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 40px 80px;
    /* Subtle centered accent glow (minimalist-style) instead of a flat solid,
       for warmth/depth without competing with the typography. */
    background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--lwp-accent, #7c5cbf) 10%, transparent) 0%, var(--lwp-bg-primary, #0a0e17) 65%);
}

.hero-layout-editorial .hero-content {
    max-width: 1040px;
    grid-template-columns: 1fr; /* text-only layout — no image column, so .hero-text fills the width */
    text-align: left;
    position: relative;
    z-index: 1;
}

.hero-layout-editorial .hero-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hero-layout-editorial .hero-title {
    font-family: var(--lwp-font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: clamp(3rem, 8vw, 6.5rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--lwp-text-primary, #e8eaf0);
    margin-bottom: 8px;
}

.hero-layout-editorial .hero-subtitle {
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    color: var(--lwp-accent-light, #a382de);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 400;
}

.hero-layout-editorial .hero-description {
    font-family: var(--lwp-font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    line-height: 1.8;
    color: var(--lwp-text-secondary, #9aa5b8);
    max-width: 640px;
    font-style: italic;
}

.hero-layout-editorial .hero-cta {
    margin-top: 32px;
    justify-content: flex-start;
}

.hero-layout-editorial .hero-content::before {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: var(--lwp-accent, #7c5cbf);
    margin-bottom: 24px;
}

/* ===== STACKED LAYOUT ===== */
.hero-layout-stacked {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hero-layout-stacked .hero-image-wrapper {
    width: 100%;
    height: 55vh;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.hero-layout-stacked .hero-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    border-radius: 0;
}

.hero-layout-stacked .hero-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 40px 100px;
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
    align-items: flex-start;
    gap: 16px;
}

.hero-layout-stacked .hero-title {
    font-family: var(--lwp-font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-align: left;
}

.hero-layout-stacked .hero-subtitle {
    font-size: 1rem;
    color: var(--lwp-accent-light, #a382de);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-layout-stacked .hero-description {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--lwp-text-secondary, #9aa5b8);
    max-width: 560px;
}

.hero-layout-stacked .hero-cta {
    margin-top: 16px;
    justify-content: flex-start;
}

.hero-layout-stacked .hero-image-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 160px;
    background: linear-gradient(to top, var(--lwp-bg-primary, #0a0e17), transparent);
    pointer-events: none;
}

/* ===== IMAGE RIGHT LAYOUT ===== */
.hero-layout-image-right .hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
}

.hero-layout-image-right .hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 60px 80px 80px;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.hero-layout-image-right .hero-title {
    font-family: var(--lwp-font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-align: left;
}

.hero-layout-image-right .hero-subtitle {
    font-size: 1rem;
    color: var(--lwp-accent-light, #a382de);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-layout-image-right .hero-description {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--lwp-text-secondary, #9aa5b8);
    max-width: 480px;
}

.hero-layout-image-right .hero-cta {
    margin-top: 16px;
    justify-content: flex-start;
}

.hero-layout-image-right .hero-image-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.hero-layout-image-right .hero-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    border-radius: 0;
}

.hero-layout-image-right .hero-text::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 80px;
    bottom: 80px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--lwp-accent, #7c5cbf), transparent);
}

/* ===== MINIMALIST LAYOUT ===== */
.hero-layout-minimalist {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--lwp-accent, #7c5cbf) 10%, transparent) 0%, var(--lwp-bg-primary, #0a0e17) 65%);
}

.hero-layout-minimalist .hero-content {
    max-width: 680px;
    grid-template-columns: 1fr; /* text-only layout — no image column, so .hero-text fills the width */
    padding: 40px 24px;
    position: relative;
    z-index: 1;
}

.hero-layout-minimalist .hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.hero-layout-minimalist .hero-label {
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    opacity: 0.7;
}

.hero-layout-minimalist .hero-title {
    font-family: var(--lwp-font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: clamp(3.5rem, 9vw, 7rem);
    font-weight: 200;
    line-height: 1;
    letter-spacing: -0.03em;
}

.hero-layout-minimalist .hero-subtitle {
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    color: var(--lwp-text-secondary, #9aa5b8);
    letter-spacing: 0.08em;
}

.hero-layout-minimalist .hero-description {
    font-family: var(--lwp-font-serif, 'Cormorant Garamond', Georgia, serif);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-style: italic;
    color: var(--lwp-text-secondary, #9aa5b8);
    max-width: 520px;
    line-height: 1.8;
}

.hero-layout-minimalist .hero-cta {
    margin-top: 12px;
    justify-content: center;
}

.hero-layout-minimalist::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--lwp-border, rgba(124, 92, 191, 0.2)) 0.5px, transparent 0.5px);
    background-size: 32px 32px;
    opacity: 0.3;
    z-index: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 60px;
    }

    .hero-description,
    .hero-cta,
    .hero-image-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-cta .lwp-btn {
        margin-left: 0 !important;
        width: 100%;
        max-width: 260px;
    }

    .hero-portrait {
        width: 300px;
        height: 400px;
    }

    .hero-layout-editorial .hero-content,
    .hero-layout-editorial .hero-description {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .hero-layout-editorial .hero-content::before {
        margin-left: auto;
        margin-right: auto;
    }
    .hero-layout-editorial .hero-cta {
        justify-content: center;
    }

    .hero-layout-asymmetric .hero-content,
    .hero-layout-split-screen .hero-content,
    .hero-layout-image-right .hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .hero-layout-asymmetric .hero-text-asym-left,
    .hero-layout-split-screen .hero-text-right,
    .hero-layout-image-right .hero-text {
        max-width: 100%;
        padding-right: 0;
        padding-left: 0;
        text-align: center;
    }
    .hero-layout-split-screen .hero-image-left {
        order: unset;
    }
    .hero-layout-image-right .hero-text {
        padding: 40px 24px;
    }
    .hero-layout-image-right .hero-text::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 120px 20px 80px;
    }

    .hero-layout-stacked .hero-image-wrapper {
        height: 40vh;
    }

    .hero-layout-stacked .hero-text {
        padding: 40px 20px 60px;
    }

    .hero-layout-full-bleed {
        padding: 100px 20px;
    }

    /* Button sizing on mobile is handled by the shared .lwp-btn--xl media query. */
    .hero-cta .lwp-btn--ghost {
        margin-left: 0;
        margin-top: 8px;
    }

    .hero-cta {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
        /* Center the (narrower) button box within its parent so the stacked
           buttons are centered, not left-aligned. */
        margin: 0 auto;
    }

    .hero-cta .lwp-btn {
        width: 100%;
    }

    /* Editorial — tablet */
    .hero-layout-editorial {
        padding: 100px 32px 60px;
    }
    .hero-layout-editorial .hero-title {
        font-size: clamp(2.5rem, 7vw, 4rem);
    }
}

@media (max-width: 480px) {
    /* Editorial — mobile */
    .hero-layout-editorial .hero-title {
        font-size: clamp(2.2rem, 9vw, 3.2rem) !important;
    }
    .hero-layout-editorial {
        padding: 80px 24px 50px;
    }
}