/* =========================================
   Grønlandiskolen — Listings Page Styling
   ========================================= */

/* Genbruger CSS-variabler fra filter-wizard.css */

/* ── "Se forløb"-knap på listingkort ─────────── */

.gl-listing-btn {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 18px;
    background: #8DC4AA;
    color: #fff !important;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.15s;
}

.gl-listing-btn:hover {
    background: #6DAA8E;
    color: #fff !important;
}

/* ── Skjul favorit-funktion ──────────────────── */

.hp-listing__action--favorite,
.hp-listing__actions--primary:empty,
[data-url*="/favorite/"],
.hp-listing__actions--primary a[data-url*="favorite"],
a.hp-listing__action--favorite {
    display: none !important;
}

.hp-listing__actions--primary:has(> .hp-listing__action--favorite:only-child) {
    display: none !important;
}

/* ── "Se forløb hos udbyder"-knap på detailside ── */

.gl-udbyder-btn {
    display: inline-block;
    margin-bottom: 20px;
    padding: 13px 28px;
    background: #8DC4AA;
    color: #fff !important;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background 0.15s;
}

.gl-udbyder-btn:hover {
    background: #6DAA8E;
    color: #fff !important;
}

/* ── Fotograf-attribution overlay på billeder ── */

.wp-block-image {
    position: relative;
}

.wp-block-image figcaption.wp-element-caption {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 3px 10px !important;
    background: rgba(0,0,0,0.45) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-style: normal !important;
    text-align: right !important;
    max-width: 100% !important;
}

/* ── Skjul sidetitel på forsiden ────────────── */

.page-id-23 .entry-title,
.home .entry-title {
    display: none !important;
}

/* ── Hus-ikon fast i øverste venstre hjørne ─── */

.menu-item--home {
    position: fixed !important;
    top: 12px !important;
    left: 16px !important;
    z-index: 9999 !important;
    list-style: none !important;
}

.menu-item--home a {
    text-decoration: none !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

.menu-item--home a svg {
    fill: #000 !important;
    display: block;
}

/* ── Skjul uønskede menupunkter ─────────────── */

/* Hjem (23), Undervisningsforløb (119), FAQ (26), Forløb/listing (231) */
.page-item-23,
.page-item-119,
.page-item-26,
.page-item-231,
li.menu-item[data-page-id="23"],
li.menu-item[data-page-id="119"],
li.menu-item[data-page-id="26"],
li.menu-item[data-page-id="231"] {
    display: none !important;
}

/* ── Sidebar / Filter-panel ──────────────────── */

.hp-page__sidebar {
    background: var(--gl-ice);
    border-radius: var(--gl-radius);
    padding: 24px 20px;
    border: 1px solid #E5E7EB;
}

/* Sidebar-overskrift (widget title) */
.hp-page__sidebar .widget-title,
.hp-page__sidebar .hp-section__title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gl-green);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--gl-green-light);
}

/* Filter-form generelt */
.hp-page__sidebar .hp-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hp-page__sidebar .hp-form__field {
    margin-bottom: 0;
}

/* Feltlabels */
.hp-page__sidebar .hp-field__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gl-muted);
    margin-bottom: 8px;
}

/* ── Tekstinput → styled select-look ─────────── */

.hp-page__sidebar .hp-form input[type="text"],
.hp-page__sidebar .hp-form select,
.hp-page__sidebar .hp-form input[type="number"] {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    color: var(--gl-text);
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232E7D5B' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    transition: border-color 0.2s;
}

.hp-page__sidebar .hp-form input[type="text"]:focus,
.hp-page__sidebar .hp-form select:focus {
    outline: none;
    border-color: var(--gl-green);
    box-shadow: 0 0 0 3px rgba(46,125,91,0.12);
}

/* ── Radio-knapper → pæne chip-knapper ───────── */

.hp-page__sidebar .hp-field--radio ul,
.hp-page__sidebar .hp-field--checkboxes ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hp-page__sidebar .hp-field--radio ul li label,
.hp-page__sidebar .hp-field--checkboxes ul li label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--gl-text);
    transition: border-color 0.2s, background 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.hp-page__sidebar .hp-field--radio ul li label:hover,
.hp-page__sidebar .hp-field--checkboxes ul li label:hover {
    border-color: var(--gl-green);
    background: var(--gl-green-light);
}

.hp-page__sidebar .hp-field--radio input[type="radio"],
.hp-page__sidebar .hp-field--checkboxes input[type="checkbox"] {
    display: none;
}

/* Aktiv/valgt radio */
.hp-page__sidebar .hp-field--radio ul li:has(input:checked) label,
.hp-page__sidebar .hp-field--checkboxes ul li:has(input:checked) label {
    border-color: var(--gl-green);
    background: var(--gl-green-light);
    font-weight: 600;
}

/* "Alle kategorier" — solid grøn, adskilt fra de enkelte kategorier (klasse sat via JS).
   Bruger > (direkte barn), da de rigtige kategorier ligger i en nestet <ul> inde i
   selv samme <li>, og ikke skal rammes af denne regel. */
.hp-page__sidebar .gl-cat-all > label {
    background: var(--gl-green) !important;
    border-color: var(--gl-green) !important;
    color: #fff !important;
}

.hp-page__sidebar .gl-cat-all > label:hover {
    background: var(--gl-green-dark) !important;
    border-color: var(--gl-green-dark) !important;
}

.hp-page__sidebar .gl-cat-all > ul {
    margin-top: 14px;
}

/* Filter-knap — skjult da auto-submit håndterer det */
.hp-page__sidebar .hp-form__button,
.hp-page__sidebar .hp-form__footer {
    display: none;
}

.hp-page__sidebar .hp-form__button .hp-button,
.hp-page__sidebar .hp-form__footer .hp-button {
    width: 100%;
    padding: 12px 20px;
    background: var(--gl-green);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    text-align: center;
}

.hp-page__sidebar .hp-form__button .hp-button:hover,
.hp-page__sidebar .hp-form__footer .hp-button:hover {
    background: var(--gl-green-dark);
}

/* ── Afstand mellem kolonner i intro-sektion ─── */

.wp-block-group .wp-block-columns.are-vertically-aligned-center {
    column-gap: 60px !important;
}

/* ── Listing-kort ─────────────────────────────── */

.hp-listing--view-block {
    border-radius: var(--gl-radius) !important;
    box-shadow: var(--gl-shadow) !important;
    border: 1px solid #F0F0F0 !important;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s !important;
    background: #fff;
}

.hp-listing--view-block:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}

/* Pladsholder-billede — grøn gradient i stedet for grå */
.hp-listing__image .hp-image,
.hp-listing__image a:not(:has(img)),
.hp-listing__image:not(:has(img)) {
    background: linear-gradient(135deg, var(--gl-green) 0%, #4CAF82 100%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}

/* SVG-pladsholder ikon (HivePress's .hp-block__placeholder) */
.hp-listing__image .hp-block__placeholder,
.hp-image--placeholder {
    background: linear-gradient(135deg, var(--gl-green) 0%, #4CAF82 100%) !important;
    position: relative;
    min-height: 180px;
}

.hp-listing__image .hp-block__placeholder::after,
.hp-image--placeholder::after {
    content: "🌊";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    opacity: 0.6;
}

/* Detailside: billede i naturlig størrelse uden tvungen ramme eller baggrund */
.hp-listing--view-page .hp-listing__image {
    aspect-ratio: unset !important;
    min-height: unset !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
}
.hp-listing--view-page .hp-listing__image a {
    aspect-ratio: unset !important;
    min-height: unset !important;
    height: auto !important;
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
}
.hp-listing--view-page .hp-listing__image img {
    aspect-ratio: unset !important;
    height: auto !important;
    width: 100% !important;
    object-fit: unset !important;
}

/* Detailside: fjern grå baggrund fra HivePress på .hp-listing__images img */
.hp-listing--view-page .hp-listing__images img,
.hp-listing--view-page .hp-listing__images video {
    background-color: transparent !important;
    object-fit: cover !important;
    height: auto !important;
    width: 100% !important;
}
.hp-listing--view-page .hp-listing__images {
    background: transparent !important;
}

/* Listing-billede: 3:2 crop — kun på kortvisning, ikke detailside */
.hp-listing--view-block .hp-listing__image,
.hp-listing--view-block .hp-listing__image a,
.hp-listing--view-block .hp-listing__image img {
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
    width: 100% !important;
    display: block;
}

/* Listing-titel */
.hp-listing__title a {
    color: var(--gl-text) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    transition: color 0.2s;
}

.hp-listing__title a:hover {
    color: var(--gl-green) !important;
}

/* Listing-indhold padding */
.hp-listing--view-block .hp-listing__content {
    padding: 16px !important;
}

/* Kort beskrivelse på "Øvrigt materiale"-kort */
.gl-listing-excerpt {
    margin: 8px 0 0 !important;
    font-size: 13px;
    line-height: 1.5;
    color: var(--gl-muted);
}

/* Udbyder-linje på "Øvrigt materiale"-kort */
.gl-listing-udbyder {
    margin: 6px 0 0 !important;
    font-size: 12px;
    font-weight: 600;
    color: var(--gl-green-dark);
}

/* Udbyder-linje på listing-detailsiden (mellemsiden) — under billedgalleriet */
.gl-listing-udbyder--page {
    margin: 16px 0 !important;
    font-size: 15px;
    font-weight: 600;
    color: var(--gl-green-dark);
}

/* Materialetype-ikon i stedet for billede på listingkort (når der ikke findes et udbyder-screenshot) */
.hp-listing--view-block .hp-listing__image:has(.gl-listing-icon:not(.gl-listing-icon--badge)) {
    background: linear-gradient(135deg, var(--gl-green) 0%, #4CAF82 100%) !important;
}

.hp-listing--view-block .hp-listing__image:has(.gl-listing-icon:not(.gl-listing-icon--badge)) a {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.gl-listing-icon {
    font-size: 56px;
    line-height: 1;
}

/* Udbyder-screenshot med ikon som badge i forgrunden */
.hp-listing--view-block .hp-listing__image a {
    position: relative;
}

.gl-listing-photo {
    background: #E5E7EB;
}

.gl-listing-icon--badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 18px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Overstyr HivePress' billede-stretch, så emoji-billedet fra WP ikke skaleres op */
.hp-listing--view-block .hp-listing__image .gl-listing-icon img.emoji {
    width: 1em !important;
    height: 1em !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle;
}

/* Attributter på kortet (klassetrin, materialetype) */
.hp-listing__attributes--primary .hp-listing__attribute,
.hp-listing__attributes--secondary .hp-listing__attribute,
.hp-listing--view-block .hp-listing__attributes .hp-listing__attribute {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: var(--gl-green-light);
    color: var(--gl-green-dark);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    margin: 2px 2px 0 0;
    white-space: nowrap;
}

/* Footer med tags — fleksibel wrapping */
.hp-listing--view-block .hp-listing__footer {
    padding: 10px 16px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* Kategorier på kortet */
.hp-listing__categories a {
    color: var(--gl-green) !important;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}

.hp-listing__categories a:hover {
    text-decoration: underline;
}

/* Adskil flere kategorier med komma */
.hp-listing__categories a:not(:last-child)::after {
    content: ",";
    color: var(--gl-text);
    margin-right: 4px;
}

/* Dato — skjult (misvisende, viser importdato ikke produktionsdato) */
.hp-listing__created-date,
.hp-listing__date,
.hp-listing__details--primary .hp-meta {
    display: none !important;
}

/* ── Side-header / søgelinje ─────────────────── */

.hp-page__header {
    margin-bottom: 32px;
}

.hp-page__title {
    font-size: 32px;
    font-weight: 800;
    color: var(--gl-text);
    margin-bottom: 4px;
}

/* Søgefelt */
.hp-form--primary input[type="text"] {
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 15px;
    transition: border-color 0.2s;
}

.hp-form--primary input[type="text"]:focus {
    border-color: var(--gl-green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(46,125,91,0.12);
}

.hp-form--primary .hp-button {
    background: var(--gl-green) !important;
    border-color: var(--gl-green) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: background 0.2s !important;
}

.hp-form--primary .hp-button:hover {
    background: var(--gl-green-dark) !important;
    border-color: var(--gl-green-dark) !important;
}

/* ── Topbar (sort/filter-valg) ───────────────── */

.hp-page__topbar {
    padding: 12px 16px;
    background: var(--gl-ice);
    border-radius: 8px;
    margin-bottom: 24px;
    border: 1px solid #E5E7EB;
}

/* ── Pagination ──────────────────────────────── */

.hp-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid #E5E7EB;
    color: var(--gl-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s;
}

.hp-pagination .page-numbers:hover,
.hp-pagination .page-numbers.current {
    background: var(--gl-green);
    border-color: var(--gl-green);
    color: #fff;
}

/* Forhåndsvalgte labels fra URL-parametre */
.hp-page__sidebar .hp-field--radio ul li label.is-preselected,
.hp-page__sidebar .hp-field--checkboxes ul li label.is-preselected {
    border-color: var(--gl-green);
    background: var(--gl-green-light);
    font-weight: 600;
}

/* ── Aktive filter-chips øverst ──────────────── */

.hp-page__topbar .hp-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--gl-green-light);
    border: 1px solid var(--gl-green);
    border-radius: 20px;
    color: var(--gl-green-dark);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-right: 6px;
}

/* ── Breadcrumb ──────────────────────────────── */

.hp-menu--breadcrumb .hp-menu__item a {
    color: var(--gl-green) !important;
    text-decoration: none;
}

.hp-menu--breadcrumb .hp-menu__item a:hover {
    text-decoration: underline;
}

/* ── Skjul Udbyder-filter i sidebar ─────────── */

.hp-page__sidebar .hp-form__field:has(input[name="udbyder"]) {
    display: none;
}

/* ── Select2 dropdown styling ────────────────── */

.hp-page__sidebar .select2-container {
    width: 100% !important;
}

.hp-page__sidebar .select2-container .select2-selection--single {
    height: auto !important;
    min-height: 42px !important;
    padding: 10px 36px 10px 14px !important;
    border: 2px solid #E5E7EB !important;
    border-radius: 8px !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.5 !important;
}

.hp-page__sidebar .select2-container .select2-selection--single:focus,
.hp-page__sidebar .select2-container.select2-container--open .select2-selection--single {
    border-color: var(--gl-green) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(46,125,91,0.12) !important;
}

.hp-page__sidebar .select2-selection__rendered {
    padding: 0 !important;
    line-height: 1.5 !important;
    color: var(--gl-text) !important;
    font-size: 14px !important;
    white-space: normal !important;
    overflow: visible !important;
    height: auto !important;
}

.hp-page__sidebar .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 10px !important;
}

/* ── Responsiv ───────────────────────────────── */

@media (max-width: 768px) {
    .hp-page__sidebar {
        margin-bottom: 24px;
    }

    .hp-listing__image .hp-block__placeholder,
    .hp-image--placeholder {
        min-height: 140px;
    }
}

/* ── Skjul admin/account-link i navigation ───── */

[class*="ast-header-account"],
[class*="astra-header-account"],
[data-section="section-hb-account"],
li:has(.fa-user),
a:has(.fa-user),
.menu-item--user-login,
a[href*="sign-in"],
a[href*="signin"],
li:has(a[href*="sign-in"]),
li.menu-item a[href*="wp-admin"],
li.menu-item a[href*="wp-login"],
.wp-block-navigation a[href*="wp-login"],
.wp-block-navigation a[href*="wp-admin"] {
    display: none !important;
}

/* ── Skjul site-titel og logo i header (desktop + mobil) ── */

.ast-site-identity,
.ast-site-name,
.ast-site-name-wrap,
.site-title,
.site-description,
.custom-logo-link {
    display: none !important;
}

/* ── Skjul uønskede menupunkter i mobilmenu ── */

.ast-mobile-popup .page-item-23,
.ast-mobile-popup .page-item-119,
.ast-mobile-popup .page-item-26,
.ast-mobile-popup .page-item-231,
.ast-slide-down .page-item-23,
.ast-slide-down .page-item-119,
.ast-slide-down .page-item-26,
.ast-slide-down .page-item-231,
nav .page-item-23,
nav .page-item-119,
nav .page-item-26,
nav .page-item-231 {
    display: none !important;
}

/* ── Hero tekst — ensartet lysegrå som attribution ── */

.wp-block-cover .wp-block-cover__inner-container h1,
.wp-block-cover .wp-block-cover__inner-container h2,
.wp-block-cover .wp-block-cover__inner-container p:not(.gl-photo-credit) {
    color: rgba(255,255,255,0.88) !important;
    text-shadow: none !important;
}

/* ── Fotograf-attribution i hero ─────────────── */

.gl-photo-credit {
    text-align: right !important;
    padding-right: 18px !important;
    margin-top: -28px !important;
    margin-bottom: 0 !important;
    font-size: 11px !important;
    color: rgba(255,255,255,0.88) !important;
    position: relative !important;
    z-index: 10 !important;
    line-height: 1.3 !important;
}

/* ══════════════════════════════════════════════
   "Find materialer" — kompakt liste uden kort/billeder
   ══════════════════════════════════════════════ */

.gl-materialer-results .hp-listings {
    display: block !important;
    grid-template-columns: none !important;
    column-count: 1 !important;
    width: 100% !important;
}

.gl-materialer-results .hp-listings > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}

/* Den faktiske bredde-begrænsning sidder på denne wrapper-div om hvert kort
   (hp-grid__item hp-col-sm-6 = halv bredde = 2 kolonner) */
.gl-materialer-results .hp-grid__item {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}

.gl-materialer-results .hp-listing--view-block {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-bottom: 1px solid #E5E7EB !important;
    overflow: visible !important;
}

.gl-materialer-results .hp-listing--view-block:hover {
    transform: none !important;
    box-shadow: none !important;
    background: var(--gl-green-light);
}

.gl-materialer-results .hp-listing__image {
    display: none !important;
}

.gl-materialer-results .hp-listing--view-block .hp-listing__content {
    padding: 14px 4px 4px !important;
}

.gl-materialer-results .gl-listing-excerpt,
.gl-materialer-results .gl-listing-udbyder {
    display: none !important;
}

.gl-materialer-results .hp-listing__title a {
    font-size: 15px !important;
}

.gl-materialer-results .hp-listing--view-block .hp-listing__footer {
    padding: 0 4px 14px !important;
}