/* STUDIO BORIS — Explore further: typografische variant op alle schermen.
 * INHOUD: content/pages/home.js → exploreFurther.*
 * OPBOUW/LINKS/BEELDEN: js/pages/home.js → MobileExploreFurther
 * KABELVORM: js/components/patches.js → ExploreFurtherPatch
 * 1. Compositie · 2. Linkrijen · 3. Reactie · 4. Compact · 5. Minder beweging
 * De historische sb-mobile-explore-* namen gelden ook op desktop.
 */

/* 1. Compositie: vaste vrije ruimte voor de kabel, onafhankelijk van de taal. */
.sb-mobile-explore-further {
    --explore-accent: #799781;
    --explore-heading-size: clamp(48px, 5vw, 68px);
    --explore-cable-width: 136px;
    padding: 0 0 56px;
    border-bottom: 1px solid var(--line);
    overflow: clip;
}
.sb-mobile-explore-further > .container { width: min(880px, calc(100% - 32px)); }
.sb-mobile-explore-heading { position: relative; min-height: 224px; padding: 48px 180px 30px 0; display: flex; align-items: flex-end; }
.sb-mobile-explore-heading h2 {
    margin: 0; font-size: var(--explore-heading-size); font-weight: 800;
    line-height: .96; letter-spacing: -.065em; text-transform: uppercase;
}
.sb-mobile-explore-heading h2 > span { display: block; }
.explore-further-patch {
    position: absolute; top: 0; right: 28px; width: var(--explore-cable-width);
    height: auto; aspect-ratio: 120 / 148; color: var(--text); pointer-events: none;
}

/* 2. Linkrijen: nummer, tekst, beeld en pijl. */
.sb-mobile-explore-list { border-top: 1px solid var(--line); }
.sb-mobile-explore-link {
    position: relative; display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 112px 40px;
    gap: 24px; align-items: center; min-height: 144px; padding: 16px 0;
    border-bottom: 1px solid var(--line); color: var(--text);
}
.sb-mobile-explore-number { grid-column: 1; grid-row: 1; align-self: start; padding-top: 7px; color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.sb-mobile-explore-copy { grid-column: 2; grid-row: 1; min-width: 0; }
.sb-mobile-explore-copy strong { display: block; font-size: 1.12rem; font-weight: 750; line-height: 1.2; letter-spacing: -.035em; text-transform: uppercase; }
.sb-mobile-explore-copy > span { display: block; margin-top: 8px; color: var(--muted); font-size: .9rem; line-height: 1.55; max-width: 32rem; }
.sb-mobile-explore-thumb { grid-column: 3; grid-row: 1; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--surface-soft); }
.sb-mobile-explore-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.sb-mobile-explore-arrow { grid-column: 4; grid-row: 1; justify-self: center; font-size: 1.7rem; line-height: 1; transition: transform .25s ease; }

/* 3. Link reageert: dunne lijn, pijl en minimale beeldzoom. Geen JS-timer. */
.sb-mobile-explore-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--explore-accent); transform: scaleX(0); transform-origin: left;
    transition: transform .35s ease; pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
    .sb-mobile-explore-link:hover::after { transform: scaleX(1); }
    .sb-mobile-explore-link:hover .sb-mobile-explore-arrow { transform: translate(4px, -4px); }
    .sb-mobile-explore-link:hover img { transform: scale(1.035); }
}
.sb-mobile-explore-link:focus-visible::after,
.sb-mobile-explore-link:active::after { transform: scaleX(1); }
.sb-mobile-explore-link:focus-visible .sb-mobile-explore-arrow,
.sb-mobile-explore-link:active .sb-mobile-explore-arrow { transform: translate(4px, -4px); }
.sb-mobile-explore-link:focus-visible img { transform: scale(1.035); }
.sb-mobile-explore-link:focus-visible { outline: 2px solid var(--text); outline-offset: 5px; border-radius: 4px; }

/* 4. Compact: zoals het gekozen voorbeeld zonder thumbnails of ronde knoppen. */
@media (max-width: 1080px) {
    .sb-mobile-explore-further { --explore-heading-size: clamp(34px, 6vw, 48px); --explore-cable-width: 110px; padding-bottom: 36px; }
    .sb-mobile-explore-heading { min-height: 182px; padding: 36px 132px 28px 0; }
    .explore-further-patch { right: 8px; }
    .sb-mobile-explore-link { grid-template-columns: 28px minmax(0, 1fr) 36px; gap: 18px; min-height: 124px; }
    .sb-mobile-explore-thumb { display: none; }
    .sb-mobile-explore-arrow { grid-column: 3; }
    .sb-mobile-explore-copy strong { font-size: 1rem; }
    .sb-mobile-explore-copy > span { font-size: .84rem; }
}
@media (max-width: 520px) {
    .sb-mobile-explore-further { --explore-heading-size: clamp(30px, 8.7vw, 38px); --explore-cable-width: 100px; }
    .sb-mobile-explore-heading { padding-right: 114px; min-height: 182px; }
    .explore-further-patch { right: 2px; }
    .sb-mobile-explore-link { grid-template-columns: 22px minmax(0, 1fr) 28px; gap: 12px; min-height: 128px; }
    .sb-mobile-explore-copy strong { font-size: .94rem; }
}
@media (orientation: landscape) and (max-width: 1080px) and (max-height: 600px) {
    .sb-mobile-explore-further { --explore-heading-size: 34px; --explore-cable-width: 92px; padding-bottom: 24px; }
    .sb-mobile-explore-heading { min-height: 140px; padding-top: 26px; padding-bottom: 22px; }
    .sb-mobile-explore-link { min-height: 94px; padding-block: 12px; }
}

/* 5. Respecteer de systeeminstelling: geen verplaatsing/zoom, lijn blijft feedback. */
@media (prefers-reduced-motion: reduce) {
    .sb-mobile-explore-link::after, .sb-mobile-explore-arrow, .sb-mobile-explore-thumb img { transition: none; }
    .sb-mobile-explore-link:is(:hover, :focus-visible, :active) .sb-mobile-explore-arrow,
    .sb-mobile-explore-link:is(:hover, :focus-visible, :active) img { transform: none; }
}