/* Home: hero card (.front-hero).
   Flat ink-1 bg, ruled border. Article col padded; image col flush
   right at full card height. Card lives inside .site-container so
   gutters stay. */

.front-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    /* Stretch keeps text + image at the same height for matching col bottoms. */
    align-items: stretch;
    padding: 0;
    border: 1px solid var(--rule-strong);
    border-radius: 4px;
    overflow: hidden;
    background-color: transparent;
    margin: 2rem 0 1.75rem;
}
.front-hero.no-image {
    grid-template-columns: 1fr;
}
.front-hero__article {
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
    min-width: 0;
    padding: 2.5rem 2.25rem 2.25rem;
    align-self: center;
}
.front-hero__kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
}
.front-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--paper-0);
}
.front-hero__title a {
    color: inherit;
    text-decoration: none;
    transition: color 150ms ease;
}
.front-hero__title a:hover,
.front-hero__title a:hover em {
    color: var(--accent);
}
.front-hero__title em {
    font-weight: 400;
    color: var(--paper-1);
    font-style: italic;
    transition: color 150ms ease;
}
.front-hero__dek {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--paper-1);
    margin: 0;
    max-width: 56ch;
}
.front-hero__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 0.5rem;
    padding: 11px 22px;
    background-color: var(--accent);
    color: var(--paper-0);
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 150ms ease, transform 100ms ease;
}
.front-hero__cta:hover,
.front-hero__cta:focus-visible {
    background-color: #c12222;
    color: var(--paper-0);
    outline: none;
    transform: translateY(-1px);
}
.front-hero__cta-arrow { transition: transform 150ms ease; }
.front-hero__cta:hover .front-hero__cta-arrow { transform: translateX(3px); }
.front-hero__media {
    /* Image col stretches with the card so it always fills its half. No
       empty space below image when translations make the text taller.
       Card height is bounded below via dek clamp so cropping differences
       across EN/FR/DE/ES stay small. */
    display: block;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    width: 100%;
    height: 100%;
    min-height: 360px;
    background-color: transparent;
}
.front-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform 400ms ease;
}
/* Cap dek so a verbose FR/DE excerpt doesn't grow the card a lot. With
   the image stretching, a tall card means the photo gets cropped more
   per-language. 3 lines absorbs most translation variance. */
.front-hero__dek {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.front-hero__media:hover img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
    .front-hero__media:hover img,
    .front-hero__cta:hover { transform: none; }
}
@media (max-width: 1024px) {
    .front-hero { margin: 1rem 0 1.25rem; }
    .front-hero__article {
        gap: 0.65rem;
        padding: 1.1rem 1rem 1.1rem;
    }
    .front-hero__title { font-size: clamp(1.3rem, 4.6vw, 1.8rem); line-height: 1.1; }
    .front-hero__dek { font-size: 0.88rem; }
    .front-hero__cta { padding: 9px 16px; font-size: 0.82rem; }
    .front-hero__media { min-height: 0; aspect-ratio: 1/1; }
}
@media (max-width: 480px) {
    /* Mobile reorder: kicker → title → image → dek → cta.
       The image sits between title and dek, so the user reads the headline,
       then sees the photo, then the lede.  display: contents on the
       article makes its children participate in the hero's grid so they
       can interleave with .front-hero__media (which is article's sibling
       in DOM, not a child). Padding migrates from article to hero since
       contents removes article's box. */
    .front-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "kicker"
            "title"
            "media"
            "dek"
            "cta";
        gap: 0.65rem;
        padding: 1.1rem 1rem;
    }
    .front-hero.no-image {
        grid-template-areas:
            "kicker"
            "title"
            "dek"
            "cta";
    }
    .front-hero__article {
        display: contents;
    }
    .front-hero__kicker { grid-area: kicker; }
    .front-hero__title { grid-area: title; }
    .front-hero__media {
        grid-area: media;
        aspect-ratio: 16/10;
        align-self: stretch;
        margin: 0.25rem 0;
    }
    .front-hero__dek { grid-area: dek; }
    .front-hero__cta { grid-area: cta; justify-self: flex-start; }
}