/* ==========================================================
   _08-HERO-A.CSS — "mall A", gemensam heromall
   Markup: template-parts/hero-block.php, inkluderad av
     hero-section-subpage.php (Tjänster, Artists)  #hero-section-subpage
     frontpage-hero.php (startsidan)               #hero-slideshow-section
   Wrappern har .hero--a. hero-section.php (Kontakt/Artiklar) berörs inte.

   Prefixet .hero-section:is(#…, #…).hero--a ger ID-specificitet plus två
   klasser, så att reglerna vinner mot de äldre ID-reglerna i _06-hero.css
   och _mobile.css (som laddas efter) utan fler !important.
   ========================================================== */

/* ── Tokens ── */
.hero--a {
    --hero-scrim:        0.55;   /* nedre toningens styrka, 0 = av */
    --hero-scrim-reach:  62%;    /* hur högt upp den nedre toningen når */
    --hero-a-bottom:     72px;
    --hero-a-title-max:  760px;  /* "Banbrytande visioner." = 734px; Artists bryts efter "work" */
    --hero-a-lead-size:  18px;
    --hero-a-lead-width: 480px;
    --hero-a-link-size:  21px;
    --hero-a-row-gap:    48px;   /* rubrikblock → kategorirad */
}
.hero--a.hero--no-scrim { --hero-scrim: 0; }
.hero-a--front {
    --hero-a-bottom:    104px;   /* metaraden ligger under */
    --hero-a-title-max: 1080px;  /* lång rubrik: max 3 rader i 1440 */
}
.hero-a--has-row {
    --hero-a-bottom:    40px;    /* kategoriraden längst ned (Tjänster) */
}

/* ── Toning: ersätter herons tidigare ::after-toningar ──
   Nedre lagret: steget vid 35 % är proportionellt mot --hero-scrim
   (.25/.55) och mot --hero-scrim-reach (35/62). Övre lagret (.3) är fast. */
.hero-section:is(#hero-section-subpage, #hero-slideshow-section).hero--a .hero-image-area::after {
    content: '';
    position: absolute;
    inset: 0;
    height: auto;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(to top,
            rgba(0,0,0,var(--hero-scrim)) 0%,
            rgba(0,0,0,calc(var(--hero-scrim) * 0.4545)) calc(var(--hero-scrim-reach) * 0.5645),
            rgba(0,0,0,0) var(--hero-scrim-reach)),
        linear-gradient(to bottom,
            rgba(0,0,0,0.3) 0%,
            rgba(0,0,0,0) 18%);
}

/* ── Innehållsblocket: en kolumn, vänsterställd, nere i heron ── */
.hero-section:is(#hero-section-subpage, #hero-slideshow-section).hero--a .hero-a {
    position: absolute;
    left: var(--padding-x);
    right: var(--padding-x);
    bottom: var(--hero-a-bottom);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--color-dark-text);
}
.hero-a__main {
    min-width: 0;
    max-width: 100%;
}
.hero-a__row {
    align-self: stretch;
    margin-top: var(--hero-a-row-gap);
}

/* Rubrik: inga plattor, ingen Space Mono, inga versaler */
.hero--a .hero-a__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-transform: none;
    color: inherit;
    background: none;
    padding: 0;
    margin: 0;
    max-width: var(--hero-a-title-max);
    text-wrap: balance;           /* jämna rader, t.ex. "Bring your work / into public space." */
}

/* Ingress */
.hero--a .hero-a__lead {
    font-family: var(--font-display);
    font-size: var(--hero-a-lead-size);
    font-weight: 400;
    line-height: 1.45;
    max-width: var(--hero-a-lead-width);
    opacity: 0.9;
    color: inherit;
    margin: 28px 0 0;
}

/* Textlänk: linjen bara under text + pil */
.hero--a .hero-a__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
    font-family: var(--font-display);
    font-size: var(--hero-a-link-size);
    font-weight: 500;
    line-height: 1.25;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 6px;
}
.hero--a .hero-a__arrow {
    width: 0.9em;
    height: 0.9em;
    flex-shrink: 0;
    transition: transform 200ms ease;
}
.hero--a .hero-a__link:is(:hover, :focus-visible) .hero-a__arrow {
    transform: translateX(6px);
}
/* Pil nedåt för #-ankare; hover flyttar den nedåt */
.hero--a .hero-a__link--down .hero-a__arrow {
    transform: rotate(90deg);
}
.hero--a .hero-a__link--down:is(:hover, :focus-visible) .hero-a__arrow {
    transform: translateY(6px) rotate(90deg);
}

/* ── Startsidans metarad (infolist) — samma sidomarginal som blocket ── */
.hero-section#hero-slideshow-section.hero--a .hero-infolist {
    position: absolute;
    left: var(--padding-x);
    right: var(--padding-x);
    bottom: 32px;
    z-index: 3;
}

/* ── Mobil: block och metarad i flödet, heron växer vid behov ──
   Bilden (.hero-slideshow-container, absolut inset:0 i .hero-image-area)
   och toningen följer med när ytan växer — ingen grå kant. */
@media (max-width: 767px) {
    .hero--a {
        --hero-a-lead-size: 16px;
    }

    .hero-section:is(#hero-section-subpage, #hero-slideshow-section).hero--a {
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }
    .hero-section:is(#hero-section-subpage, #hero-slideshow-section).hero--a .hero-image-area {
        flex: 1 0 auto;
        min-height: inherit;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: calc(var(--header-h) + var(--sp-10)) var(--padding-x) 40px;
        box-sizing: border-box;
    }
    .hero-section:is(#hero-section-subpage, #hero-slideshow-section).hero--a .hero-a {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
    }
    .hero--a .hero-a__title {
        font-size: var(--text-2xl);
    }

    /* Startsidan: metaraden under blocket, 32px från underkanten */
    .hero-section#hero-slideshow-section.hero--a .hero-image-area {
        padding-bottom: 32px;
    }
    .hero-section#hero-slideshow-section.hero--a .hero-a {
        margin-bottom: 32px;
    }
    .hero-section#hero-slideshow-section.hero--a .hero-infolist {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
    }
}