/**
 * Core Experiences — Category Landing Page Styles
 *
 * Covers all sections rendered by CategoryStructuredRenderer:
 *   .go-category           — root wrapper
 *   .go-category__hero     — full-width hero: title, description, badges
 *   .go-exp-grid           — experience cards (reuses experience-grid.css)
 *   .go-category__pi-grid  — practical info icon cards grid
 *   .go-category__faq      — FAQ section with <details>/<summary>
 *   .go-category__related  — related categories + link to all experiences
 *
 * Depends on: experience-grid.css + experience.css
 *   Both enqueued by ExperienceAssets::enqueue() as goe-experience-grid / goe-experience handles.
 *   goe-category declares both as dependencies so load order is guaranteed.
 */

/* ─── Root ────────────────────────────────────────────────────────────────────── */

.go-category {
    --go-cat-color: #2c6e49;
    --go-cat-color-10: rgba(44, 110, 73, 0.10); /* fallback */
    --go-cat-color-10: color-mix(in srgb, var(--go-cat-color) 10%, transparent);
    --go-cat-color-15: rgba(44, 110, 73, 0.15); /* fallback */
    --go-cat-color-15: color-mix(in srgb, var(--go-cat-color) 15%, transparent);
    --go-cat-color-20: rgba(44, 110, 73, 0.20); /* fallback */
    --go-cat-color-20: color-mix(in srgb, var(--go-cat-color) 20%, transparent);
    --go-cat-dark:     rgb(35, 88, 58); /* fallback */
    --go-cat-dark:     color-mix(in srgb, var(--go-cat-color) 80%, #000);
    font-family: inherit;
    color: inherit;
}

/* ─── Hero section ─────────────────────────────────────────────────────────── */

.go-category__hero {
    position: relative;
    padding: 3.5rem 1.5rem 3rem;
    background: linear-gradient(135deg, rgb(238, 242, 239) 0%, rgb(252, 253, 253) 100%); /* fallback: #2c6e49 mix approx */
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--go-cat-color) 14%, #fff) 0%,
        color-mix(in srgb, var(--go-cat-color) 5%, #fff) 100%
    );
    border-bottom: 3px solid var(--go-cat-color);
    margin-block-end: 3rem;
    overflow: hidden;
}

/* Decorative background accent */
.go-category__hero::before {
    content: '';
    position: absolute;
    inset-inline-end: -4rem;
    inset-block-start: -4rem;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    background: rgba(44, 110, 73, 0.08); /* fallback */
    background: color-mix(in srgb, var(--go-cat-color) 8%, transparent);
    pointer-events: none;
}

.go-category__hero::after {
    content: '';
    position: absolute;
    inset-inline-end: 2rem;
    inset-block-end: -3rem;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background: rgba(44, 110, 73, 0.06); /* fallback */
    background: color-mix(in srgb, var(--go-cat-color) 6%, transparent);
    pointer-events: none;
}

.go-category__hero-inner {
    position: relative;
    max-width: 72ch;
    z-index: 1;
}

.go-category__hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin-block: 0 1rem;
    color: var(--go-cat-dark);
    letter-spacing: -0.02em;
}

.go-category__hero-desc {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    line-height: 1.75;
    color: var(--goe-text-body);
    max-width: 65ch;
    margin-block-end: 1.75rem;
}

/* Badges strip */
.go-category__hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: center;
}

.go-category__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    background: rgb(230, 238, 233); /* fallback */
    background: color-mix(in srgb, var(--go-cat-color) 12%, #fff);
    color: var(--go-cat-dark);
    border: 1px solid rgba(44, 110, 73, 0.25); /* fallback */
    border: 1px solid color-mix(in srgb, var(--go-cat-color) 25%, transparent);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.go-category__badge--price {
    background: var(--go-cat-color);
    color: #fff;
    border-color: transparent;
}

/* ─── Section titles (reused across all sections) ────────────────────────── */

.go-category__section-title {
    font-size: clamp(1.375rem, 3.5vw, 1.875rem);
    font-weight: 700;
    margin-block: 0 1.5rem;
    color: var(--goe-text-strong);
    letter-spacing: -0.015em;
}

/* ─── Experiences grid section ───────────────────────────────────────────── */

.go-category__experiences {
    margin-block-end: 3rem;
}

.go-category__empty {
    padding: 2.5rem;
    background: var(--goe-surface-alt);
    border: 1px dashed var(--goe-border);
    border-radius: 8px;
    text-align: center;
    color: var(--goe-text-secondary);
    font-size: 1rem;
}

/* ─── Practical information — icon card grid ────────────────────────────── */

.go-category__practical {
    margin-block-end: 3rem;
    padding: 2.25rem 2rem;
    background: var(--goe-surface-alt);
    border-radius: 12px;
    border: 1px solid var(--goe-border);
}

.go-category__practical .go-category__section-title {
    margin-block-end: 1.75rem;
}

.go-category__pi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}

.go-category__pi-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--goe-surface);
    border: 1px solid var(--goe-border);
    border-radius: 10px;
    padding: 1.25rem 1.125rem;
    transition: box-shadow 0.15s ease;
}

.go-category__pi-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}

.go-category__pi-icon {
    font-size: 1.625rem;
    line-height: 1;
    flex-shrink: 0;
    margin-block-start: 0.125rem;
}

.go-category__pi-body {
    flex: 1;
    min-width: 0;
}

.go-category__pi-body h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    margin-block: 0 0.5rem;
    color: var(--goe-text-strong);
}

.go-category__pi-body p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--goe-text-body);
    line-height: 1.6;
}

.go-category__pi-body ul {
    margin: 0;
    padding-inline-start: 1.25rem;
    font-size: 0.875rem;
    color: var(--goe-text-body);
    line-height: 1.7;
}

.go-category__pi-body li + li {
    margin-block-start: 0.2rem;
}

/* ─── FAQ — accordion with details/summary ───────────────────────────────── */

.go-category__faq {
    margin-block-end: 3rem;
}

.go-category__faq .go-category__section-title {
    margin-block-end: 1.25rem;
}

.go-faq__list {
    border-top: 1px solid var(--goe-border);
}

.go-faq__item {
    border-bottom: 1px solid var(--goe-border);
}

.go-faq__item summary {
    padding: 1rem 0.375rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: var(--goe-text-strong);
    transition: color 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
}

.go-faq__item summary:hover {
    color: var(--go-cat-color);
}

.go-faq__item summary::marker,
.go-faq__item summary::-webkit-details-marker {
    display: none;
}

.go-faq__item summary::after {
    content: '';
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--go-cat-color);
    border-radius: 50%;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: transform 0.2s ease;
}

.go-faq__item[open] summary::after {
    transform: rotate(45deg);
}

.go-faq__item p {
    padding: 0 0.375rem 1.25rem;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--goe-text-muted);
}

/* ─── Related categories ────────────────────────────────────────────────────── */

.go-category__related {
    margin-block-end: 2.5rem;
    padding-block-start: 2rem;
    border-top: 2px solid var(--goe-border);
}

.go-category__related .go-category__section-title {
    font-size: clamp(1.1rem, 2.5vw, 1.375rem);
}

/* "Se alle oplevelser" link placed below the related-categories grid */
.go-category__related-all {
    margin-block-start: 1.5rem;
    text-align: center;
    font-size: 0.9375rem;
}

.go-category__related-all a {
    color: var(--go-cat-color);
    font-weight: 600;
    text-decoration: none;
}

.go-category__related-all a:hover {
    text-decoration: underline;
}

/* ─── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .go-category__hero {
        padding: 2.25rem 1.125rem 2rem;
        margin-block-end: 2rem;
    }

    .go-category__hero::before,
    .go-category__hero::after {
        display: none;
    }

    .go-category__hero-title {
        font-size: clamp(1.625rem, 8vw, 2rem);
    }

    .go-category__practical {
        padding: 1.5rem 1.125rem;
        border-radius: 8px;
    }

    .go-category__pi-grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }

    .go-category__experiences,
    .go-category__practical,
    .go-category__faq {
        margin-block-end: 2rem;
    }
}

/* ─── Hero image (Fase 4 — category_image.hero_url) ────────────────────── */

/* Full-cover photo absolutely positioned behind hero content */
.go-cat-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    z-index: 0;
}

/* When hero image is present: gradient overlay replaces decorative circles */
.go-category__hero--has-img::before {
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    z-index: 1;
    background: linear-gradient(
        105deg,
        color-mix(in srgb, var(--go-cat-color) 60%, #000) 0%,
        color-mix(in srgb, var(--go-cat-color) 35%, transparent) 55%,
        transparent 85%
    );
}

.go-category__hero--has-img::after {
    display: none;
}

/* Lift inner content above image and overlay */
.go-category__hero--has-img .go-category__hero-inner {
    z-index: 2;
}

/* High-contrast text when image + overlay is active */
.go-category__hero--has-img .go-category__hero-title,
.go-category__hero--has-img .go-category__hero-desc {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.go-category__hero--has-img .go-category__badge {
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

/* Responsive: hide image on small screens — color gradient is cleaner */
@media (max-width: 767px) {
    .go-cat-hero__img {
        display: none;
    }

    .go-category__hero--has-img::before {
        display: none;
    }

    .go-category__hero--has-img .go-category__hero-title,
    .go-category__hero--has-img .go-category__hero-desc {
        color: unset;
        text-shadow: none;
    }

    .go-category__hero--has-img .go-category__badge {
        background: unset;
        color: unset;
        border-color: unset;
    }
}