/**
 * Front page (redesign phase 4) — templates/home.html + patterns/home-*.php.
 * Tokens only. Section order: hero, Utvalgte, Kategorier, Fordeler, Scene og rigg,
 * Slik leier du, Om Dryhire, Bli kunde, Spørsmål og svar.
 */
.dh-home {
    display: grid;
    gap: var(--dh-gap);
    width: 100%;
    max-width: calc(var(--content-width) + 2 * 2rem);
    margin: 0 auto !important;
    padding: var(--dh-gap) var(--dh-gutter) 2rem;
    box-sizing: border-box;
}

.dh-home > *,
.dh-home .dh-section > *,
.dh-home .dh-sh > * {
    margin-block: 0 !important;
}

@media (min-width: 768px) {
    .dh-home { padding-inline: 1.5rem; }
}

@media (min-width: 1024px) {
    .dh-home { padding-inline: 2rem; }
}

.dh-home em {
    font-family: var(--dh-font-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.dh-label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dh-muted-foreground);
}

.dh-section {
    display: grid;
    gap: var(--dh-gap);
    margin-top: 1.5rem !important;
}

/* Section header: title + link */
.dh-sh {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.dh-sh__title {
    font-family: var(--dh-font-heading);
    font-size: 1.15rem !important;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--dh-foreground);
}

.dh-sh__link {
    font-size: 14px;
}

.dh-home a {
    color: var(--dh-foreground);
    text-underline-offset: 3px;
}

/* ---------- Hero ----------
   SPEC 5.2: photo on the right (desktop) / on top (mobile), solid --dh-hero where the text
   sits, fading out towards the Dryhire case. Same in light and dark. */
.dh-hero {
    position: relative;
    display: grid;
    align-content: end;
    gap: 28px;
    min-height: 520px;
    margin: 0;
    padding: 48px;
    box-sizing: border-box;
    border-radius: var(--dh-radius-2xl);
    background: var(--dh-hero) url(../assets/images/hero-dryhire-regn.webp) right 60% / auto 104% no-repeat;
    color: var(--dh-ink-foreground);
    isolation: isolate;
}

/* The page's only gradient (no overflow: hidden, so the «Hva» popover can leave the card) */
.dh-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(90deg,
        var(--dh-hero) 0%,
        var(--dh-hero) 28%,
        color-mix(in oklch, var(--dh-hero) 80%, transparent) 36%,
        color-mix(in oklch, var(--dh-hero) 50%, transparent) 44%,
        color-mix(in oklch, var(--dh-hero) 22%, transparent) 52%,
        color-mix(in oklch, var(--dh-hero) 6%, transparent) 60%,
        transparent 66%);
}

/* Desktop: the photo is its own layer, as wide as it is at this height and pinned right, and
   fades in from its own left edge. So the edge never shows, whatever the card's width/height. */
@media (min-width: 1025px) {
    .dh-hero {
        background: var(--dh-hero);
    }

    .dh-hero::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: -2;
        aspect-ratio: 1448 / 1086;
        max-width: 100%;
        border-radius: inherit;
        background: url(../assets/images/hero-dryhire-regn.webp) right 60% / auto 104% no-repeat;
        /* eased fade over half the photo, so the lit stage left of the case melts into the background */
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 6%) 8%, rgb(0 0 0 / 20%) 16%, rgb(0 0 0 / 42%) 25%, rgb(0 0 0 / 68%) 34%, rgb(0 0 0 / 88%) 43%, #000 52%);
        mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 6%) 8%, rgb(0 0 0 / 20%) 16%, rgb(0 0 0 / 42%) 25%, rgb(0 0 0 / 68%) 34%, rgb(0 0 0 / 88%) 43%, #000 52%);
    }
}

.dh-hero > * {
    max-width: 720px;
    margin: 0 !important;
}

.dh-hero__title {
    font-family: var(--dh-font-heading);
    font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4rem) !important;
    font-weight: 600;
    line-height: 1 !important;
    letter-spacing: -0.045em;
    color: var(--dh-ink-foreground) !important;
    text-wrap: balance;
}

.dh-hero__title em {
    display: block;
    letter-spacing: -0.015em;
}

/* Search pill: Når · Hva · Søk */
.dh-find {
    display: flex;
    align-items: stretch;
    gap: 6px;
    max-width: 620px;
    margin: 0;
    padding: 6px;
    background: var(--dh-card);
    color: var(--dh-foreground);
    border-radius: var(--dh-radius-pill);
    box-shadow: var(--dh-shadow-pop);
}

.dh-find__field {
    display: grid;
    align-content: center;
    gap: 0;
    min-width: 0;
    height: 52px;
    padding: 0 18px;
    border-radius: var(--dh-radius-pill);
    background: var(--dh-background);
    line-height: 1.2;
    cursor: text;
}

.dh-find__when {
    flex: 0 0 auto;
    cursor: pointer;
}

.dh-find__what {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
}

.dh-find__field:focus-within {
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--dh-ring) 50%, transparent);
}

.dh-find__label {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--dh-muted-foreground);
}

.dh-find .dh-i {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dh-find__cat {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    border: 0;
    font: inherit;
    color: var(--dh-foreground);
    text-align: left;
    cursor: pointer;
    transition: background var(--dh-ease);
}

.dh-find__cat:hover {
    background: var(--dh-accent);
}

.dh-find__cat > .dh-i:first-child {
    color: var(--dh-muted-foreground);
}

.dh-find__cat > .dh-i:last-child {
    margin-left: auto;
    color: var(--dh-muted-foreground);
    transition: transform var(--dh-ease);
}

.dh-find__cat[aria-expanded="true"] > .dh-i:last-child {
    transform: rotate(180deg);
}

.dh-find__text {
    display: grid;
    min-width: 0;
}

.dh-find__val {
    overflow: hidden;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Category list: opens upwards over the title */
.dh-catpop {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    z-index: 4;
    display: grid;
    width: max(100%, 260px);
    padding: 6px;
    box-sizing: border-box;
    background: var(--dh-card);
    color: var(--dh-foreground);
    border: 1px solid var(--dh-border);
    border-radius: 1.3rem;
    box-shadow: var(--dh-shadow-pop);
}

.dh-catpop[hidden] {
    display: none;
}

.dh-catpop [role="option"] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 10px;
    border: 0;
    border-radius: 0.9rem;
    background: none;
    font: 400 14.5px/1 var(--dh-font-sans);
    color: var(--dh-foreground);
    text-align: left;
    cursor: pointer;
}

.dh-catpop [role="option"]:hover,
.dh-catpop [role="option"]:focus-visible {
    background: var(--dh-accent);
    outline: 0;
}

.dh-catpop [aria-selected="true"] {
    font-weight: 500;
}

.dh-catpop [aria-selected="true"]::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-radius: var(--dh-radius-full);
    background: var(--dh-primary);
}

.dh-catpop .dh-tile {
    width: 32px;
    height: 32px;
    border-radius: 0.7rem;
    color: var(--dh-muted-foreground);
}

.dh-catpop .dh-tile .dh-i {
    width: 18px;
    height: 18px;
}

.dh-find__go {
    flex: none;
    height: 52px;
    padding: 0 28px;
    border: 0;
    border-radius: var(--dh-radius-pill);
    background: var(--dh-primary);
    color: var(--dh-primary-foreground);
    font: 500 15px/1 var(--dh-font-sans);
    cursor: pointer;
    transition: filter var(--dh-ease);
}

.dh-find__go:hover {
    filter: brightness(0.92);
}

.dh-find :is(button, input):focus-visible {
    outline: 3px solid color-mix(in oklch, var(--dh-ring) 50%, transparent);
    outline-offset: 1px;
}

/* The date selector's own button sits inside «Når» as plain text */
.dh-find__when .date-selector-container,
.dh-find__when .rental-picker,
.dh-find__when .date-grid {
    display: block;
    width: auto;
}

.dh-find__when .delivery-return-wrapper,
.dh-find__when [class^="icon-"] {
    display: none !important;
}

.dh-find__when .date-picker-button {
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none !important;
    color: var(--dh-foreground);
    font-size: 15px;
    font-weight: 500;
}

.dh-find__when .date-picker-button:focus-visible {
    outline-offset: 4px;
}

.dh-find__when .date-selector-placeholder .date-selector-text {
    font-weight: 300;
    color: var(--dh-muted-foreground);
}

/* ---------- Categories ---------- */
.dh-cats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--dh-gap);
}

.dh-cat {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 22px 12px 18px;
    background: var(--dh-card);
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius-2xl);
    box-shadow: var(--dh-shadow-card);
    text-align: center;
    text-decoration: none;
}

.dh-cat__ico {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 1rem;
    background: var(--dh-muted);
    color: var(--dh-foreground);
    transition: background var(--dh-ease);
}

.dh-cat__ico .dh-i {
    width: 32px;
    height: 32px;
}

.dh-cat__name {
    font-family: var(--dh-font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--dh-foreground);
}

.dh-cat:hover .dh-cat__ico {
    background: var(--dh-accent);
}

.dh-cat:focus-visible {
    outline: 3px solid color-mix(in oklch, var(--dh-ring) 50%, transparent);
    outline-offset: 2px;
}

/* ---------- Perks ---------- */
.dh-perks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dh-perk {
    display: grid;
    gap: 4px;
    align-content: start;
    padding: 20px 24px;
    background: var(--dh-card);
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius-2xl);
    box-shadow: var(--dh-shadow-card);
}

.dh-perk > * {
    margin: 0 !important;
}

.dh-perk__figure {
    margin-top: 10px !important;
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.dh-perk__line {
    font-size: 14px;
    color: var(--dh-muted-foreground);
}

.dh-perk--primary {
    background: var(--dh-primary);
    border-color: transparent;
    color: var(--dh-primary-foreground);
}

.dh-perk--primary .dh-label,
.dh-perk--primary .dh-perk__line {
    color: var(--dh-primary-foreground);
}

/* ---------- How it works ---------- */
.dh-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--dh-gap);
}

.dh-step {
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 24px;
    background: var(--dh-card);
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius-2xl);
    box-shadow: var(--dh-shadow-card);
}

.dh-step > * {
    margin: 0 !important;
}

.dh-step__n {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: 8px !important;
    border-radius: var(--dh-radius-full);
    background: var(--dh-secondary);
    font-family: var(--dh-font-heading);
    font-size: 14px;
    font-weight: 600;
}

.dh-step__title {
    font-family: var(--dh-font-heading);
    font-size: 1.05rem !important;
    font-weight: 600;
}

.dh-step__text {
    font-size: 14.5px;
    color: var(--dh-muted-foreground);
}

/* ---------- About ---------- */
.dh-about {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    scroll-margin-top: 80px;
}

.dh-about__img {
    position: relative;
    min-height: 320px;
    margin: 0 !important;
    overflow: hidden;
    border-radius: var(--dh-radius-2xl);
    background: var(--dh-ink);
}

/* The image fills the row; the text card sets the height */
.dh-about__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% 50%;
}

.dh-about__text {
    display: grid;
    gap: 14px;
    align-content: center;
    padding: 32px;
    background: var(--dh-card);
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius-2xl);
    box-shadow: var(--dh-shadow-card);
}

.dh-about__text > * {
    margin: 0 !important;
}

.dh-about__title {
    font-family: var(--dh-font-heading);
    font-size: clamp(1.5rem, 1rem + 1.4vw, 2.1rem) !important;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.dh-about__body {
    max-width: 65ch;
    font-size: 15px;
    color: var(--dh-muted-foreground);
}

.dh-about__brands {
    padding-top: 12px;
    border-top: 1px solid var(--dh-border);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dh-muted-foreground);
}

/* ---------- Join (the one dark card) ---------- */
.dh-join {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-top: 1.5rem !important;
    padding: 36px 40px;
    background: var(--dh-ink);
    color: var(--dh-ink-foreground);
    border-radius: var(--dh-radius-2xl);
}

.dh-join > *,
.dh-join__text > *,
.dh-join__action > * {
    margin: 0 !important;
}

.dh-join .dh-label {
    color: color-mix(in oklch, var(--dh-ink-foreground) 72%, transparent);
}

.dh-join__title {
    margin-top: 6px !important;
    font-family: var(--dh-font-heading);
    font-size: clamp(1.6rem, 1rem + 1.8vw, 2.4rem) !important;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--dh-ink-foreground) !important;
}

.dh-join__action {
    display: grid;
    gap: 12px;
    justify-items: start;
}

.dh-join__line {
    font-size: 14px;
    opacity: 0.8;
}

.dh-join__btn {
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--dh-radius-pill);
    background: var(--dh-ink-foreground);
    color: var(--dh-ink);
    font: 500 15px/1 var(--dh-font-sans);
    cursor: pointer;
}

.dh-join__btn:focus-visible {
    outline: 3px solid color-mix(in oklch, var(--dh-ring) 50%, transparent);
    outline-offset: 2px;
}

/* ---------- FAQ ---------- */
.dh-faq {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
    margin-top: 2.5rem !important;
    scroll-margin-top: 80px;
}

.dh-faq__title {
    font-family: var(--dh-font-heading);
    font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem) !important;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.dh-faq__list {
    padding: 4px 24px;
    background: var(--dh-card);
    border: 1px solid var(--dh-border);
    border-radius: var(--dh-radius-2xl);
    box-shadow: var(--dh-shadow-card);
}

.dh-faq__list details {
    border-bottom: 1px solid var(--dh-border);
}

.dh-faq__list details:last-child {
    border-bottom: 0;
}

.dh-faq__list summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
    list-style: none;
    font-size: 15.5px;
    font-weight: 500;
    cursor: pointer;
}

.dh-faq__list summary::-webkit-details-marker {
    display: none;
}

.dh-faq__list summary::after {
    content: "+";
    flex: none;
    font: 300 20px/1 var(--dh-font-sans);
    color: var(--dh-muted-foreground);
}

.dh-faq__list details[open] summary::after {
    content: "\2212";
}

.dh-faq__list summary:focus-visible {
    outline: 3px solid color-mix(in oklch, var(--dh-ring) 50%, transparent);
    border-radius: 8px;
}

.dh-faq__list p {
    max-width: 60ch;
    margin: 0;
    padding: 0 0 16px;
    font-size: 15px;
    color: var(--dh-muted-foreground);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    /* Tablet: too narrow for text beside the case, so photo on top and text below (as on mobile) */
    .dh-hero {
        min-height: 0;
        padding-top: max(280px, 52vw);
        background-position: 50% 0;
        background-size: 100% auto;
    }

    .dh-hero::before {
        background: linear-gradient(180deg,
            transparent 0%,
            transparent 38%,
            color-mix(in oklch, var(--dh-hero) 85%, transparent) 50%,
            var(--dh-hero) 58%);
    }

    .dh-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dh-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .dh-steps,
    .dh-about,
    .dh-faq {
        grid-template-columns: minmax(0, 1fr);
    }

    .dh-about__img {
        min-height: 220px;
    }
}

@media (max-width: 600px) {
    /* Photo on top, text and search below on the dark */
    .dh-hero {
        min-height: 680px;
        padding: 24px 20px;
        background-position: 50% -56px;
        background-size: 150% auto;
    }

    .dh-hero::before {
        background: linear-gradient(180deg,
            transparent 0%,
            transparent 30%,
            color-mix(in oklch, var(--dh-hero) 85%, transparent) 40%,
            var(--dh-hero) 47%);
    }

    .dh-find {
        flex-direction: column;
        border-radius: 1.6rem;
    }

    .dh-find__field {
        height: 52px;
    }

    .dh-find__go {
        width: 100%;
    }

    .dh-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

    .dh-cat { padding: 14px; }

    .dh-perk { padding: 16px 18px; }

    .dh-perk__figure { font-size: 1.3rem; }

    .dh-join { padding: 28px 24px; }

    .dh-about__text,
    .dh-faq__list { padding-inline: 20px; }
}