/* ============================================================
   hem-sektioner.css — Homepage scroll sections
   Unified with site-wide pet-boutique design system
   Fonts: Cormorant Garamond (display) + Jost (body)
   ============================================================ */

:root {
    --hs-ink:        #1a1a18;   /* pb-ink */
    --hs-muted:      #8a8680;   /* pb-muted */
    --hs-border:     #e8dfd3;   /* pb-sand */
    --hs-forest:     #2d4a3e;   /* pb-forest */
    --hs-forest-mid: #3d6356;   /* pb-forest-mid */
    --hs-forest-lt:  #e8f0ed;   /* pb-forest-light */
    --hs-gold:       #b8975a;   /* pb-gold */
    --hs-gold-lt:    #d4b483;   /* pb-gold-light */
    --hs-cream:      #f7f3ee;   /* pb-cream */
    --hs-white:      #ffffff;   /* pb-white */
    --hs-card-w:     380px;
    --hs-radius:     6px;       /* pb-radius */
    --hs-ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --hs-font-display: 'Dm Sans', Helvetica, serif;
    --hs-font-body:    'Dm Sans', 'Helvetica Neue', sans-serif;
}

/* ============================================================
   WRAPPER
   ============================================================ */
.hem-sektioner {
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    margin-top: 42px;
    overflow: hidden;
}

/* ============================================================
   SECTION
   ============================================================ */
.hem-sektion {
    position: relative;
    padding: 52px 52px 48px;
    border-top: 1px solid var(--hs-border);
}   
.hem-sektion:last-child { border-bottom: none; }

/* Editorial section number */
.hem-sektion__num {
    position: absolute;
    top: 40px;
    right: 52px;
    font-family: var(--hs-font-display);
    font-size: 7rem;
    font-weight: 600;
    font-style: italic;
    line-height: 1;
    color: rgba(45, 74, 62, 0.07); /* pb-forest at low opacity */
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.04em;
}

/* ---- Header ---- */
.hem-sektion__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
}

.hem-sektion__heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hem-sektion__eyebrow {
    font-family: var(--hs-font-body);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--hs-gold);
    margin: 0;
}

.hem-sektion__title {
    font-family: var(--hs-font-display);
    font-size: clamp(1.5rem, 2.8vw, 2.8rem);
    font-weight: 600;
    color: var(--hs-forest);
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.hem-sektion__link {
    font-family: var(--hs-font-body);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--hs-gold);
    text-decoration: none;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1.5px solid var(--hs-gold);
    padding-bottom: 1px;
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: 4px;
    transition: color 0.2s var(--hs-ease), border-color 0.2s var(--hs-ease);
}
.hem-sektion__link:hover {
    color: var(--hs-gold-lt);
    border-color: var(--hs-gold-lt);
}

.hem-sektion__empty {
    font-family: var(--hs-font-display);
    font-style: italic;
    color: var(--hs-muted);
    font-size: 1.05rem;
    padding: 20px 0;
    margin: 0;
}

/* ============================================================
   SCROLL TRACK
   ============================================================ */
.hem-scroll-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 6px;
    padding-right: 52px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.hem-scroll-track::-webkit-scrollbar { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
    :root { --hs-card-w: 290px; }
    .hem-sektion { padding: 44px 36px 40px; }
    .hem-sektion__num { right: 36px; font-size: 5.5rem; }
    .hem-scroll-track { padding-right: 36px; }
}

@media (max-width: 800px) {
    :root { --hs-card-w: 260px; }
    .hem-sektion { padding: 36px 24px 32px; }
    .hem-sektion__num { right: 24px; font-size: 4.5rem; top: 32px; }
    .hem-scroll-track { padding-right: 24px; gap: 12px; }
    .hem-sektion__title { font-size: 1.5rem; }
}

@media (max-width: 520px) {
    .hem-sektioner { margin-top: 24px; border-radius: 14px; padding: 0; }
    .hem-sektion { padding: 28px 16px 24px; }
    .hem-sektion__num { display: none; }
    .hem-sektion__title { font-size: 1.25rem; }
    .hem-sektion__header { margin-bottom: 22px; }

    .hem-scroll-track {
        flex-direction: column;
        overflow-x: visible;
        gap: 12px;
        padding-right: 0;
        padding-bottom: 0;
        scroll-snap-type: none;
    }
    .hem-card {
        flex: none;
        width: 100%;
    }
    .hem-card:hover { transform: none; }
    .hem-card__readmore { opacity: 1; transform: none; }
    .hem-card__img { aspect-ratio: 16 / 9; }
    .hem-card__body { padding: 14px 16px 16px; }
    .hem-card__footer { padding-top: 10px; }
}

@media (max-width: 360px) {
    .hem-sektion { padding: 22px 12px 20px; }
}