/**
 * Theme Name:        Tina Tema
 * Theme URI:         https://example.com/fabled-sunset
 * Description:       Custom theme for Artist portfolio websites, with frontpage shwowing latest exhistbion posts and a gallerypage with artwork-archive. Also an About page and CV.
 * Version:           1.0.0
 * Author:            Tina Wulff
 * Author URI:        https://webdev.tinawulff.dk
 * Tags:              block-patterns, full-site-editing
 * Text Domain:       tina-tema
 * Domain Path:       /assets/lang
 * Tested up to:      6.4
 * Requires at least: 6.2
 * Requires PHP:      7.4
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    margin: 0;
    font-family: 'Jost', sans-serif;
    padding: 0;
    background-color: #fafbfb;
    margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Monda', serif;
    font-weight: 600;
}

p {
    line-height: 1.3;
    margin-bottom: 1em;
}

.tina-button {
    background-color: #223455;
    color: #fff;
    border-radius: 8px;
    padding: 15px 30px;
    width: 100%;
    text-align: center;
}

.tina-button:hover {
    background-color: #D0B48D;
    color: #223455;
}


main {
    padding: 0 4em;
    /* min-height: 80vh; */
    max-width: 1600px;
    margin: 0 auto;
    padding-top: 100px; /* Header højde (60px) + margin */
}

@media (max-width: 1024px) {
    main {
        padding: 2em 0;
    }
    
}

main.elementor-page {
    padding: 0;
    padding-top: 0;
    max-width: 100%;
    color: #223455;
    background-color: #F6F1EB;
}

/* Elementor container default reset.
   Explicit spacing set on individual Elementor elements can still override these defaults. */
main.elementor-page .elementor {
    --widgets-spacing: 0px 0px;
}

main.elementor-page .e-con {
    --container-default-padding-top: 0px;
    --container-default-padding-right: 0px;
    --container-default-padding-bottom: 0px;
    --container-default-padding-left: 0px;
    --container-widget-gap: 0px;
}

main.elementor-page .elementor-section {
    padding: 0;
}

/* Elementor archive hero image fallback.
   The editor can preview radius on the wrapper while Elementor's frontend reset
   keeps the image itself square unless the generated image rule is present. */
.elementor .elementor-element.elementor-element-30799c7 {
    overflow: hidden;
    border-radius: 20px;
}

.elementor .elementor-element.elementor-element-30799c7 img,
.elementor .elementor-element.elementor-element-30799c7 .e-image-base {
    border-radius: 20px;
}

/* Elementor Video Widget - HTML5 Hosted Video */
.elementor-widget-video video {
    width: 100%;
    height: auto;
    display: block;
}

/* Ensure poster image shows for HTML5 video */
.elementor-widget-video video[poster] {
    object-fit: cover;
    background-size: cover;
    background-position: center;
}

.elementor-video-wrapper {
    position: relative;
}

/* Add play button overlay for hosted video with poster */
.elementor-widget-video .elementor-wrapper:not(.elementor-open-inline) .elementor-video:has([poster])::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 25px 45px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.9);
    cursor: pointer;
    z-index: 10;
    pointer-events: none;
}

/* Play button for hosted video - alternative approach */
.elementor-widget-video .elementor-video-wrapper::before {
    content: '\f04b';
    font-family: 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    z-index: 10;
    pointer-events: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    padding-left: 6px;
}

.elementor-widget-video .elementor-video-wrapper:hover::before {
    background-color: rgba(0, 0, 0, 0.9);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Hide play button when video is playing */
.elementor-widget-video .elementor-video-wrapper.elementor-video-playing::before {
    display: none;
}

/* Elementor Video Widget - Poster Image & Play Button (YouTube/Vimeo embedded) */
.elementor-widget-video .elementor-custom-embed-image-overlay {
    cursor: pointer;
    position: relative;
}

.elementor-widget-video .elementor-custom-embed-image-overlay img {
    width: 100%;
    height: auto !important;
    object-fit: cover;
    display: block;
}

.elementor-widget-video .elementor-custom-embed-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 1;
}

.elementor-widget-video .elementor-custom-embed-play i {
    color: white;
    font-size: 32px;
    margin-left: 4px;
}

.elementor-widget-video .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play {
    background-color: rgba(0, 0, 0, 0.9);
    transform: translate(-50%, -50%) scale(1.1);
}

/* FIX: Elementor icon sizes */
.elementor-icon-list-icon {
    font-size: 1.2em !important;
    width: auto !important;
    height: auto !important;
}

.elementor-icon-list-icon i {
    font-size: 1.3em !important;
}

.elementor-icon-list-icon svg {
    font-size: 1.2em !important;
    width: 1.5em !important;
    
    height: 1.3em !important;
    /*
    max-width: 1.5em !important;
    max-height: 1.5em !important; */
}

/* Reset list styles for Elementor */
.elementor-widget-icon-list .elementor-icon-list-items {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.elementor-widget-icon-list .elementor-icon-list-item {
    list-style: none !important;
    margin-bottom: 1em !important;
    color: inherit !important;
}

main.home {
    min-height: 0;
    padding: 0;
    padding-top: 0;
}
/* .archive-main har egen klasse længere nede */
/* ANCHOR LINK SCROLL OFFSET */
/* Når man klikker på anchor links (#kontakt, #ydelser osv), 
   stopper scroll 180px før elementet så overskriften er synlig */
section[id],
div[id] {
    scroll-margin-top: 0px;
}

@media screen and (max-width: 768px) {
section[id],
div[id] {
    scroll-margin-top: 10px;
}
}

/* HEADER STYLING */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.site-logo {
    flex-shrink: 0;
    height: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.site-logo .custom-logo-link {
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
}

.site-logo .custom-logo {
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.site-title-link {
    text-decoration: none;
    color: inherit;
}

.site-title {
    font-family: 'Monda', sans-serif;
    display: block;
    text-transform: uppercase;
    line-height: 1;
}

/* .site-header > div {
    flex-grow: 1; 
} */

/* Main navigation wrapper */
.main-navigation {
    display: flex;
    align-items: center;
    gap: 1em;
    justify-content: flex-end;
    margin-left: auto;
}

/* .main-navigation > div {
     flex: 1;
    display: flex;
    justify-content: flex-end; 
}*/

header ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 625px;
    margin-left: 0;
    gap: 0.5em;
}

header ul li a {
    text-decoration: none;
    color: inherit;
    font-weight: 500; /* Default */
    padding: 8px 12px; /* Default */
    transition: color 0.3s;
}

.search-container {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}

.searchform {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0;
}

.searchform input[type="search"] {
    position: absolute;
    right: 40px;
    width: 0;
    padding: 0;
    border: none;
    font-family: 'Jost', sans-serif;
    border-radius: 50px 0 0 50px;
    transition: all 0.3s ease;
    outline: none;
    opacity: 0;
    pointer-events: none;
}

.searchform.active input[type="search"] {
    position: static;
    width: 160px;
    padding: 8px 0 8px 12px;
    border: 2px solid #b7b7b7;
    border-right: none;
    opacity: 1;
    pointer-events: auto;
}

.searchform button[type="submit"] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    background-color: #b7b7b7;
}

.searchform.active button[type="submit"] {
    border-radius: 0 50px 50px 0;
}

.searchform button[type="submit"]:hover {
    transform: scale(1.05);
}

.searchform button[type="submit"] svg {
    fill: #ffffff;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}



header .site-logo {
    text-decoration: none;
}

header .site-title {
    font-family: 'Jost', sans-serif;
    display: block;
    /* text-transform: uppercase; */
}

/* Header Phone */
.header-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    flex-shrink: 0;
    transition: color 0.3s;
}

.header-phone:hover {
    color: #223455 !important;
}

.header-phone .phone-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.header-phone .phone-number {
    white-space: nowrap;
}

/* Header Phone - Prominent variant */
.header-phone-prominent {
    font-size: 18px;
    font-weight: 600;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 5px;
    /* background: rgba(0, 0, 0, 0.03); */
    margin-left: auto;
}

/* Hide mobile phone copy on desktop */
.header-phone-mobile {
    display: none;
}

.header-phone-prominent:hover {
    color: #223455 !important;
}

.header-phone-prominent .phone-icon {
    width: 20px;
    height: 20px;
}

/* Header CTA Button */
.header-cta-button {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    transition: transform 0.2s;
    white-space: nowrap;
    margin-right: 1em;
}

.header-cta-button:hover {
    transform: translateY(-1px);
}


/* ========================================
   HEADER RESPONSIVE STYLING
   ======================================== */

/* Mobile menu toggle button - skjult på desktop */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    margin-left: auto;
    color: #9d7338;
}

/* Mobile menu close button - skjult på desktop */
.mobile-menu-close {
    display: none;
}

/* Tablet Header Styling */

@media (max-width: 1200px) {

    .site-header {
    padding: 1.5em 2em !important;
        /* padding: 1em 4em !important; */
        margin: 0 !important;
        border-radius: 0 !important;
    }
    }

/* Mobile Header Styling */
@media (max-width: 1000px) {
    .site-header {
        width: auto !important;
        height: 60px !important;
        padding: 0.5em 1em !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    .site-logo {
        max-height: 50px !important;
    }
    
    .site-logo .custom-logo-link {
        max-height: 38px !important;
    }
    
    .site-logo .custom-logo {
        max-height: 38px !important;
    }
    
    .mobile-menu-toggle {
        display: block;
        margin-left: 0;
    }
    
    /* Show mobile phone copy in header */
    .header-phone-mobile {
        display: flex !important;
        margin-left: auto;
        margin-right: 0.5em;
        padding: 4px;
        background: transparent;
        font-size: 16px;
    }
    
    /* Hide phone number text on mobile, only show icon */
    .header-phone-mobile .phone-number {
        display: none;
    }
    
    .header-phone-mobile .phone-icon {
        width: 22px;
        height: 22px;
    }
    
    /* Hide CTA button on mobile (or keep it small in menu) */
    .header-cta-button {
        font-size: 14px;
    }
    
    .main-navigation {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        box-shadow: -2px 0 10px rgba(0,0,0,0.2);
        padding: 60px 20px 20px;
        transition: right 0.3s ease;
        z-index: 1000;
        display: block;
        overflow-y: auto;
        margin-left: 0;
    }
    
    /* Hide phone in navigation on mobile since it's in header */
    .main-navigation .header-phone-prominent {
        display: none !important;
    }
    
    .main-navigation.active {
        right: 0;
    }
    
    .mobile-menu-close {
        display: block;
        position: absolute;
        top: 15px;
        right: 15px;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        padding: 5px;
        color: #9d7338;
    }
    
    .main-navigation > div {
        width: 100%;
        display: block;
    }
    
    .main-navigation ul {
        flex-direction: column;
        max-width: none;
        margin: 0;
        gap: 0;
        width: 100%;
        justify-content: flex-start;
    }
    
    .main-navigation ul li {
        width: 100%;
        border: none;
        /* border-bottom: 1px solid #eee; */
    }
    
    .main-navigation ul li:last-child {
        border-bottom: none;
    }
    
    .main-navigation ul li a {
        display: block;
        padding: 15px 10px;
        background: transparent;
        border-radius: 0;
    }
    
    /* Always show search form in mobile menu */
    .main-navigation .search-container {
        width: 100%;
        margin: 20px 0;
        padding: 20px 0;
        /* border-top: 1px solid #eee;
        border-bottom: 1px solid #eee; */
    }
    
    .main-navigation .searchform {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        position: static !important;
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        gap: 10px !important;
        height: auto !important;
    }
    
    .main-navigation .searchform input[type="search"] {
        position: static !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 100% !important;
        padding: 10px 12px !important;
        border: 2px solid #b7b7b7 !important;
        border-radius: 5px !important;
    }
    
    .main-navigation .searchform button[type="submit"] {
        position: static !important;
        width: 45px !important;
        height: 45px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
    }
}



@media (max-width: 480px) {
    .site-logo .custom-logo {
        max-width: 90%;
    }
}

/* SLUT HEADER RESPONSIVE STYLING */


/* FOOTER */
.site-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 4fr;
    gap: 15px;
    padding: 40px 0em 40px 8em;
    align-items: start;
    font-family: 'Jost', sans-serif;
    box-shadow: 0 -2px 8px rgba(31, 55, 92, 0.08);
}

.site-footer p>a {
    color: #223455;
}

.site-footer img {
    display: block;
 max-width: 100%;
    height: auto;
}

.site-footer ul {
    list-style: none;
    justify-self: center;
}

.footer-widget {
    justify-self: center;
    font-family: 'Jost', sans-serif;
}

.footer-some-links a{
    margin-right: 0.5em;
    font-size: 1.5em;
    color: #223455;
}






/* ARCHIVE / VÆRKER OVERSIGT */
.archive-main {
    padding: 140px 4em 3em;
    max-width: 1600px;
    margin: 0 auto;
    min-height: 80vh;
}

.archive-title {
    text-align: left;
    justify-self: start;
    margin-bottom: 40px;
    font-size: 2.5em;
}

/* Archive intro widgets (side by side) */
.archive-intro-container {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
    align-items: center;
}

.archive-intro-left-area,
.archive-intro-right-area {
    flex: 1;
}

.archive-intro-left-area {
    display: flex;
    justify-content: center;
    align-items: center;
}

.archive-intro-widget {
    width: 100%;
}

.archive-intro-widget img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.archive-intro-widget ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 1em 0 !important;
}

.archive-intro-widget li {
    list-style: none !important;
    padding-left: 0 !important;
}



/* ========================================
   KONTAKTFORMULAR
   ======================================== */



   .kontakt-grid h2{
    grid-column: 1;
    grid-row: 1;
   }


   .kontakt-grid-col1 {
    grid-column: 1;
    grid-row: 2;
   }

   .kontakt-grid-col2 {
    grid-column: 2;
    grid-row: 1/4;
   }

@media (max-width: 768px) {
   .kontakt-grid h2,
   .kontakt-grid-col1,
   .kontakt-grid-col2 {
    grid-column: 1;
    grid-row: auto;
   }

   .kontakt-grid-col2 {
    margin: 0 2.5em;
   }
}


.tina-contact-form-wrapper {
    max-width: 600px;
    background: transparent;
    font-family: 'Jost', sans-serif;
    justify-self: end;
    margin: 0;
    padding-right: 1em;

}

.tina-contact-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tina-contact-form .form-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tina-contact-form .form-group {
    display: flex;
    flex-direction: column;
}

.tina-contact-form label {
    display: none; /* Skjul labels - brug placeholders i stedet */
}

/* Checkboxes skal dog vises */
.tina-contact-form .form-checkboxes label {
    display: inline !important;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    font-family: 'Jost', sans-serif;
}

.tina-contact-form .form-checkboxes {
    gap: 16px;
    margin: 8px 0;
}

.tina-contact-form .checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.tina-contact-form input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #223455;
}

.tina-contact-form .checkbox-wrapper label {
    cursor: pointer;
    user-select: none;
}

.tina-contact-form .checkbox-wrapper label a {
    color: #223455;
    text-decoration: underline;
}

.tina-contact-form .checkbox-wrapper label a:hover {
    color: #D0B48D;
}

.tina-contact-form input[type="text"],
.tina-contact-form input[type="email"],
.tina-contact-form input[type="tel"],
.tina-contact-form textarea {
    padding: 16px 20px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-family: 'Jost', sans-serif;
    background: #fff;
    transition: box-shadow 0.2s ease;
}

.tina-contact-form input:focus,
.tina-contact-form textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3);
}

.tina-contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.contact-form-submit {
    background: #223455;
    color: #fff;
    padding: 16px 48px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    align-self: flex-end;
    transition: background 0.3s ease;
    margin-top: 12px;
    font-family: 'Jost', sans-serif;
}

.contact-form-submit:hover {
    background: #D0B48D;
    color: #223455;
}

.contact-form-success {
    padding: 14px 18px;
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    border-radius: 8px;
    margin-bottom: 16px;
    text-align: center;
    font-family: 'Jost', sans-serif;
}

.contact-form-error {
    padding: 14px 18px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    border-radius: 8px;
    margin-bottom: 16px;
    text-align: center;
    font-family: 'Jost', sans-serif;
}

    /* Kontaktformular responsiv */
@media (max-width: 768px) {

    .tina-contact-form-wrapper {
        padding: 16px;
        margin: 16px auto;
    }
    
    .tina-contact-form .form-row {
        gap: 12px;
    }
    
    .contact-form-submit {
        width: 100%;
        padding: 14px 32px;
    }
}

#kontakt-original.elementor-element,
.elementor-element.kontakt {
    display: none !important;
}


/* =================================================
   Archive / Værker oversigt / Ydelser-oversigt
   ================================================= */


.archive-intro-title {
    font-size: 1.8em;
    margin-bottom: 1em;
}

/* Kategori navigation */
.artwork-category-nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    row-gap: 50px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.category-link {
    padding: 10px 20px;
    text-decoration: none;
    color: #2c3e50;
    background: white;
    border-radius: 5px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    font-family: 'Jost', sans-serif;
}

.category-link:hover {
    background: #f0f0f0;
}

.category-link.active {
    background: #2c3e50;
    color: white;
    border-color: #2c3e50;
}

.artwork-grid {
    display: grid;
    gap: 30px;
    row-gap: 50px;
}

/* Automatisk kolonner baseret på antal ydelser */
.artwork-grid-2-cols {
    grid-template-columns: repeat(2, 1fr);
}

.artwork-grid-3-cols {
    grid-template-columns: repeat(3, 1fr);
}

.artwork-grid-4-cols {
    grid-template-columns: repeat(4, 1fr);
}

.artwork-grid-5-cols {
    grid-template-columns: repeat(5, 1fr);
}

.artwork-grid-6-cols {
    grid-template-columns: repeat(6, 1fr);
}


.artwork-item {
    background: white;
    border-radius: 15px;
    /* border: 3px solid #D0B48D;
    box-shadow: 0 5px 16px rgba(0,0,0,0.2); */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.artwork-item ul {
margin-bottom: 1em;
margin-left: 20px;
}

.artwork-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.artwork-item a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.artwork-thumbnail {
    width: 100%;
    height: 120px;
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
}

.artwork-item .artwork-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.artwork-item:hover .artwork-thumbnail img {
    transform: scale(1.05);
}

.artwork-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #22345579;
    /* background: #d0b48d38; */
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 100%;
}

.artwork-overlay h2 {
    color: white;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    flex: 1;
    line-height: 1.3;
}


.artwork-info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: #EFE3D4;
}

.artwork-excerpt {
    font-size: 0.9em;
    line-height: 1.4;
    color: #223455;
    font-weight: lighter;
    margin: 0 0 10px 0;
    flex-grow: 1;
    font-family: 'Jost', sans-serif;
}



.artwork-excerpt p {
    margin: 0 0 0.5em 0;
}

.artwork-excerpt p:last-child {
    margin-bottom: 0;
}

.artwork-meta {
    color: #223455;
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0 0 10px 0;
    font-family: 'Monda', sans-serif;
}

.artwork-button {
    background-color: #223455;
    /* color: #D0B48D; */
    color: #F6F1EB;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 500;
    text-align: center;
    transition: background-color 0.9s ease, color 0.9s ease, transform 0.9s ease;
    margin-top: auto;
    font-family: 'Jost', sans-serif;
}

.artwork-item .artwork-button:hover {
    background-color: #D0B48D;
    color: #223455;
  ;
    transform: translateY(-2px);
}

.artwork-meta .year,
.artwork-meta .location {
    display: inline;
}


/* ORIGINAL STYLING - UDKOMMENTERET
.artwork-item {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.artwork-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.artwork-info {
    padding: 20px;
}

.artwork-info h2 {
    font-size: 1.3em;
    margin-bottom: 10px;
    color: #2c3e50;
}
*/

/* Responsive artwork grid */
@media (max-width: 1200px) {
    .artwork-grid-5-cols,
    .artwork-grid-6-cols {
        grid-template-columns: repeat(3, 1fr); /* 5-6 kolonner går ned til 3 på tablet */
    }
    
    .artwork-grid-4-cols {
        grid-template-columns: repeat(3, 1fr); /* 4 kolonner går ned til 3 på tablet */
    }
    
    /* Footer tablet styling */
    .site-footer {
        padding: 1em 0em 2em 2em;
    }
}

@media (max-width: 768px) {
    .artwork-grid,
    .artwork-grid-2-cols,
    .artwork-grid-3-cols,
    .artwork-grid-4-cols,
    .artwork-grid-5-cols,
    .artwork-grid-6-cols {
        grid-template-columns: repeat(2, 1fr); /* 2 items på mobil */
        gap: 30px;
        row-gap: 30px;
    }
    
    .artwork-thumbnail {
        height: 180px;
    }
    
    .artwork-overlay h2 {
        font-size: 16px;
    }
    
    
    .artwork-info {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .artwork-grid,
    .artwork-grid-2-cols,
    .artwork-grid-3-cols,
    .artwork-grid-4-cols,
    .artwork-grid-5-cols,
    .artwork-grid-6-cols {
        grid-template-columns: 1fr; /* 1 item på små mobiler */
        gap: 15px;
        row-gap: 40px;
    }
    
    .artwork-thumbnail {
        height: 120px;
    }
    
    .artwork-overlay h2 {
        font-size: 14px;
    }
    
    .artwork-info {
        padding: 12px;
    }
}

/* ARCHIVE / VÆRKER OVERSIGT END */


/* SINGLE ARTWORK PAGES */
.artwork {
    /* max-width: 1600px; */
    margin: 0 auto;
    padding: 0 4em 2em;
}

.artwork-hero {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: start;
}

.artwork-featured-image {
    margin: 0;
}

.artwork-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

.artwork-details {
    padding: 0 20px;
}

.artwork-details h1 {
    font-size: 2em;
    margin-bottom: 15px;
}

.artwork-details .artwork-meta {
    color: #7f8c8d;
    font-size: 1.1em;
    margin-bottom: 20px;
}

.artwork-description {
    line-height: 1.6;
    margin-top: 20px;
}

/* Gallery - masonry layout fuld bredde */
.artwork-gallery {
    margin: 60px 0 0 0 !important;
    width: 100% !important;
    column-count: 3 !important;
    column-gap: 30px !important;
}

.artwork-gallery img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-bottom: 30px !important;
    break-inside: avoid !important;
}

/* GALLERY i masonry/Pinterest-style layout hvor billederne pakker sig tæt sammen!
Med CSS columns eller Masonry layout.

Bruger CSS columns i stedet for grid. Det giver et masonry-layout hvor:

3 kolonner på desktop
Billederne beholder deres originale proportioner
Billederne pakker sig automatisk tæt sammen uden tomme mellemrum
break-inside: avoid forhindrer at et billede bliver delt mellem to kolonner */

/* ========================================
   MOBILE RESPONSIVE STYLING
   ======================================== */

@media (max-width: 768px) {
    /* FJERN MAIN PADDING PÅ MOBIL */
    main {
        padding: 0 0 2em 0;
        padding-top: 85px; /* Header højde (50px) + margin */
        /* margin: 0 1em; */
    }
    
    /* TILFØJ 1EM MARGIN TIL ANDRE SIDER (IKKE WORKS ARKIV) */
    /* main {
        margin: 0 1em;
    } */
    
    /* ARCHIVE SIDER (WORKS/PRESS) - MINDRE PADDING PÅ MOBIL */
    .archive-main {
        padding: 90px 1em 3em;
    }
    
    /* Archive title mindre på mobil */
    .archive-title {
        font-size: 32px !important;
        margin-bottom: 0.5em;
    }
    
    /* Archive intro widgets stables lodret på mobil */
    .archive-intro-container {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }
    
    /* SINGLE ARTWORK MOBILE STYLING */
    .artwork {
        padding: 0;
        margin: 0 0 2em 0;
    }
    
    .artwork-details {
        padding: 0;
    }
    
    .search-container {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }
    
    .search-toggle {
        position: relative;
    }
    
    .searchform {
        /*margin-top: 20px;*/
        margin-left: 0;
        max-width: none;
        position: relative;
        display: flex;
        gap: 10px;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }
    
    .searchform.active {
        /* På mobil er søgeformularen altid synlig */
    }
    
    .searchform input[type="search"] {
        max-width: none;
        width: 100%;
        flex: 1;
    }
    
    .searchform button[type="submit"] {
        flex-shrink: 0;
    }
    
    .artwork-hero {
        grid-template-columns: 1fr;
    }
    
    .artwork-gallery {
        column-count: 1;
    }
    
    .artwork-category-nav {
        flex-direction: column;
        gap: 0;
    }
    
    .category-link {
        width: 100%;
        text-align: center;
        border-top-width: 0 !important;
    }
    
    .category-link:first-child {
        border-top-width: 2px !important;
    }
    
    /* Footer responsive */
    body .site-footer {
        grid-template-columns: 1fr; /* Højere specificitet end bare .site-footer */
        gap: 30px;
        padding: 30px 20px;
        text-align: center;
        width: 100%;
        max-width: 100%;
    }
}

/* Load More Button */
.load-more-container {
    text-align: center;
    margin: 60px 0 40px;
}

.load-more-btn {
    background-color: #2c3e50;
    color: #ffffff;
    border: none;
    padding: 15px 40px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.load-more-btn:hover:not(:disabled) {
    background-color: #1a252f;
}

.load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.load-more-spinner {
    display: inline-block;
    margin-left: 10px;
    color: #2c3e50;
    font-style: italic;
}

 /* SLIDER */

/* Outer wrapper der holder slider og carousel */
.slider-carousel-outer-wrapper {
  width: 100%;
  height: 60vh;
  margin: 40px auto 0;
}

.slider-wrapper {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  width: 100%;
  height: 60vh;
  margin: 0;
  padding: 0;
}

.slides-container {
  height: 60vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ANIMATED TEXT OVERLAY - UDKOMMENTERET (kan bruges et andet sted senere)
.slider-animated-text-overlay {
  position: absolute;
  top: 40px;
  right: 60px;
  z-index: 100;
  pointer-events: none;
  text-align: right;
}

.animated-word {
  font-size: 80px;
  font-weight: bold;
  font-family: 'Monda', sans-serif;
  color: #9D7338;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
*/

.slider-text-div {
  position: absolute;
  top: 55%;
  left: 20%;
  transform: translateY(-50%);
  background-color: #ffffff88;
  padding: 2em 3em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border-radius: 15px;
  max-width: 500px;
  z-index: 10;
}


.slide-title {
  font-size: 56px;
  font-weight: bold;
  font-family: 'Monda', sans-serif;
  position: relative;
  text-align: left;
  z-index: 1;
  color: white;
  line-height: 1;
  width: 100%;
  margin: 0;
}

.slide-year {
  font-size: 24px;
  font-weight: normal;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
  color: white;
  width: 100%;
  margin-top: 0.5em;
}

.slide-description {
  font-size: 18px;
  font-weight: normal;
  position: relative;
  text-align: left;
  z-index: 1;
  color: white;
  width: 100%;
  margin-top: 1em;
  opacity: 0.9;
  line-height: 1.6;
}

.slide-link {
  position: relative;
  display: block;
  text-decoration: none;
  width: 100%;
  height: 100%;
}


.slide-link:hover .slide-title,
.slide-link:hover .slide-year,
.slide-link:hover .slide-description {
  color: #4707F4;
}

.slide-arrow {
  position: absolute;
  display: flex;
  top: 50%;
  transform: translateY(-50%);
  height: 10rem;
  background-color: transparent;
  border: none;
  width: auto;
  font-size: 8rem;
  padding: 0;
  cursor: pointer;
  transition: opacity 100ms;
  z-index: 100;
  color: white;
  /* opacity: 0.8; */
}

.slide-arrow:hover,
.slide-arrow:focus {
  opacity: 1;
}

#slide-arrow-prev {
  left: -60px;
  padding-left: 0.25rem;
}

#slide-arrow-next {
  right: -60px;
  padding-left: 0.75rem;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

.slide.active {
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
}

.slider-wrapper .slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  margin: 0;
  margin-top: 40px; /* Kompenserer for header på 50px, så billedet starter ved 10px */;
  padding: 0;
}

/* SLIDER END */

/* [slider] tablet height */
@media (max-width: 1024px) and (min-width: 769px) {
    .slider-carousel-outer-wrapper,
    .slider-wrapper,
    .slides-container {
        height: 50vh;
        margin: 0 auto;
    }
}

/* Responsive slider styles */
@media (max-width: 768px) {
    /* Gør slideren fuld bredde på mobil */
    .slider-wrapper {
        max-width: 100%;
        width: 100%;
        margin: 0;
        margin-top: -35px; /* Kompenserer main padding (85px), så slider starter ved 50px (header) */
        padding: 0;
        padding-top: 0;
        grid-row: 1;
        height: calc(70vh - 50px) !important;
    }

    .slides-container {
        height: calc(70vh - 50px) !important;
    }
    
    .slide {
        height: calc(70vh - 50px) !important;
    }
    
    .slide img {
        height: calc(70vh - 50px) !important;
    }
    
    /* Skjul prev/next slides - vis kun aktive slide */
    .slide.prev,
    .slide.next {
        opacity: 0;
        transform: translateX(100%);
        pointer-events: none;
    }
    
    /* Tilpas billeder til mobile */
    .slide img {
        height: calc(70vh - 50px); /* Mindre end 100vh på mobil */
        object-fit: cover;
        object-position: center center;
        padding-top: 20px;
    }
    
    /* Mindre og indre placerede pile */
    .slide-arrow {
        font-size: 5rem;
        width: auto;
        height: 6rem;
        top: 50%; /* Samme centrering som slide-title */
        transform: translateY(-50%);
        /* border-radius: 50%; */
        opacity: 0.8;
    }
    
    #slide-arrow-prev {
        left: 10px;
        padding-left: 0;
        display: none;
    }
    
    #slide-arrow-next {
        right: 10px;
        padding-left: 0;
        display: none;;
    }
    
    /* Tekstboks på mobil - øverste venstre hjørne */
    .slider-text-div {
        left: 5%;
        top: 20%;
        transform: none;
        padding: 1.5em 2em;
        max-width: 90%;
    }
    
    /* Mindre slide titel på mobil */
    .slide-title {
        font-size: 24px;
        padding: 0;
        text-align: left;
    }
    
    /* ANIMATED TEXT - MINDRE PÅ MOBIL - UDKOMMENTERET
    .slider-animated-text-overlay {
        top: 20px;
        right: 20px;
    }
    
    .animated-word {
        font-size: 40px;
        min-height: 60px;
    }
    */
    
    /* Mindre årstal på mobil */
    .slide-year {
        font-size: 16px;
        padding: 0;
        text-align: left;
    }
    
    /* Mindre description på mobil */
    .slide-description {
        font-size: 14px;
        padding: 0;
        width: 100%;
        text-align: left;
    }
    
    /* TVINGER tekstsektionen til 55vh på mobil */
    .elementor-9 .elementor-element.elementor-element-18a8aa8 {
        --min-height: 55vh !important;
        min-height: 55vh !important;
    }
}

/* SLUT Responsive slider styles */

/* ========================================
   CASES CAROUSEL (i højre side af slider)
   ======================================== */

.cases-carousel-wrapper {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    align-self: center; /* Centrer sig selv vertikalt i grid */
    justify-self: end; /* Placer til højre */
    /* height: auto; */ /* Lad højden bestemmes af indholdet */
    margin-right: 30px;
    overflow: visible;
    z-index: 50;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Spacing mellem container og knap */
}

.cases-carousel-container {
    margin-top: 120px;
    position: relative;
    /* width: 450px; */
    width: 100%;
    aspect-ratio: 4/3; /* Samme som kortene - giver ~337px højde */
    max-height: 600px; /* Max højde for store skærme */
    flex-shrink: 0; /* Må ikke krympe */
    pointer-events: auto;
}

.case-carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: box-shadow 0.3s ease; /* Only transition hover effects */
}

/* Position-based styling - bruges af JavaScript */
.case-carousel-item.pos-0 {
    z-index: 10;
    transform: translateY(0) scale(1);
    opacity: 1;
}

.case-carousel-item.pos-1 {
    z-index: 9;
    transform: translateY(-15px) translateX(12px) scale(0.94);
    opacity: 0.65;
}

.case-carousel-item.pos-2 {
    z-index: 8;
    transform: translateY(-28px) translateX(22px) scale(0.88);
    opacity: 0.4;
}

.case-carousel-item.pos-3 {
    z-index: 7;
    transform: translateY(-39px) translateX(31px) scale(0.82);
    opacity: 0.22;
}

.case-carousel-item.pos-4 {
    z-index: 6;
    transform: translateY(-48px) translateX(38px) scale(0.76);
    opacity: 0.1;
}

.case-carousel-item.pos-5 {
    z-index: 5;
    transform: translateY(-56px) translateX(45px) scale(0.70);
    opacity: 0.04;
}

.case-carousel-item.pos-6 {
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

.case-carousel-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.case-carousel-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
}

.case-carousel-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
}

.case-carousel-no-image {
    background-color: #e0e0e0;
}

.case-carousel-item:hover .case-carousel-image {
    transform: scale(1.1);
}

.case-carousel-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 100%);
    padding: 40px 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.case-carousel-title {
    color: white;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    flex: 1;
    font-family: 'Jost', sans-serif;
}

.case-carousel-arrow {
    color: white;
    font-size: 24px;
    font-weight: bold;
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.case-carousel-item:hover .case-carousel-arrow {
    transform: translateX(5px);
}

/* Carousel Navigation Button - Under stakken */
.carousel-next-button {
    position: relative;
    width: 50px;
    height: 50px;
    background: rgba(34, 52, 85, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px; /* Afstand fra carousel container */
    flex-shrink: 0; /* Må ikke krympe */
    transition: all 0.3s ease;
    pointer-events: auto;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.carousel-next-button:hover {
    background: rgba(34, 52, 85, 1);
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.6);
}

.carousel-next-button:active {
    transform: scale(0.95);
}

/* Navigation buttons wrapper */
.stacked-carousel-navigation {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

/* ===========================
   Ydelser oversigt af kategorier // er DISPLAY: NONE - STYLES ER UDKOMMENTERET, DA DET ER USIKKERT OM DET SKAL BRUGES
   =========================== */
 
div.ydelses-kategorier {
    display: none; /* Skjult som standard */
}


a.ydelse-kategori {
    box-shadow: 3px 3px 4px 4px rgba(0,0,0,0.1);
 }

 a.ydelse-kategori:hover {
    cursor: pointer;
    box-shadow: 6px 6px 8px 8px rgba(0,0,0,0.15);
    transform: translateY(-3px);
    transition: all 0.3s ease;
 }



/* ===========================
   STANDALONE STACKED CAROUSEL
   =========================== */

/* Outer wrapper for entire stacked carousel */
.stacked-carousel-outer-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 0px 100px;
    position: relative;
}

/* Container wrapper where sections stack */
.stacked-carousel-container-wrapper {
    position: relative;
    width: 100%;
    min-height: 600px;
}

/* Each section as a stacked card (info + image grid) */
.stacked-carousel-section {
    position: absolute;
    height: 600px;
    top: 0;
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 60px;
    padding: 40px;
    align-items: center;
    /* background: white; */ /* Removed - now dynamic from theme settings */
    border-radius: 15px;
    transition: transform 0.4s ease, opacity 0.4s ease, box-shadow 0.3s ease;
    /* box-shadow: 2px 5px 8px rgba(0, 0, 0, 0.2); */
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
    /*border: 2px solid #223455ba; /* Subtil ramme for at adskille kortene */
}

.stacked-carousel-section:hover {
    /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); */
    box-shadow: 0px 2px  16px rgba(0, 0, 0, 0.4);
}

/* Info sektion til venstre */
.carousel-info {
    padding-right: 40px;
}

.carousel-headline {
    color: #D0B48D;
    text-transform: uppercase;
    font-size: 1em;
}

.carousel-info-title {
    font-size: 2rem;
    font-weight: 700;
    color: #223455;
    margin-bottom: 20px;
    line-height: 1.2;
    transition: opacity 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    font-family: 'Monda', sans-serif;
}

.carousel-info-description {
    font-size: 1em;
    line-height: 1.2;
    color: #223455;
    transition: opacity 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
    font-family: 'Jost', sans-serif;
}

.carousel-info ul.excerpt-text {
    text-align: left;
    /* justify-self: center; */
}

.carousel-info-description p {
    margin: 0 0 1em 0;
}

.carousel-info-description p:last-child {
    margin-bottom: 0;
}

.carousel-info-description ul,
.carousel-info-description ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.carousel-info-description li {
    margin-bottom: 0.5em;
}

.carousel-info-description strong {
    font-weight: 600;
    color: #223455;
}

.carousel-info-description a {
    color: #223455;
    text-decoration: underline;
}

.carousel-info-description a:hover {
    color: #1a2740;
}

/* Carousel info button */
.carousel-info-button {
    display: inline-block;
    margin-top: 20px;
    padding: 14px 32px;
    background: #223455;
    background: #D0B48D;
    color: #223455;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: 'Jost', sans-serif;
}

.carousel-info-button:hover {
    background: #223455;
    color: #D0B48D;
    transform: scale(1.1);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(34, 52, 85, 0.3);
}

/* Position-based styling for stacked sections - controlled by JavaScript */
.stacked-carousel-section.pos-0 {
    z-index: 10;
    transform: translateY(0) scale(1);
    opacity: 1;
}

.stacked-carousel-section.pos-1 {
    z-index: 9;
    transform: translateY(-30px) scale(0.96);
    opacity: 0.8;
}

.stacked-carousel-section.pos-2 {
    z-index: 8;
    transform: translateY(-55px) scale(0.92);
    opacity: 0.6;
}

.stacked-carousel-section.pos-3 {
    z-index: 7;
    transform: translateY(-75px) scale(0.88);
    opacity: 0.4;
}

.stacked-carousel-section.pos-4 {
    z-index: 6;
    transform: translateY(-92px) scale(0.84);
    opacity: 0.2;
}

.stacked-carousel-section.pos-5 {
    z-index: 5;
    transform: translateY(-106px) scale(0.80);
    opacity: 0.1;
}

.stacked-carousel-section.pos-6 {
    z-index: 1;
    transform: translateY(-106px) scale(0.80);
    opacity: 0;
    pointer-events: none;
}


/* Image wrapper inside section */
.stacked-carousel-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 8px;
    overflow: hidden;
}

/* LINK - IKKE I BRUG MERE (navigation via knap i stedet)
.stacked-carousel-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
*/

.stacked-carousel-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
}

.stacked-carousel-no-image {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Navigation buttons below stack */
.stacked-carousel-navigation {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    z-index: 90;
}

.stacked-carousel-prev-button,
.stacked-carousel-next-button {
    width: 50px;
    height: 50px;
    background: rgba(34, 52, 85, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.stacked-carousel-prev-button svg,
.stacked-carousel-next-button svg {
    width: 20px;
    height: 20px;
}

.stacked-carousel-prev-button:hover,
.stacked-carousel-next-button:hover {
    background: rgba(34, 52, 85, 1);
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.6);
}

.stacked-carousel-prev-button:active,
.stacked-carousel-next-button:active {
    transform: scale(0.95);
}

/* Responsive for standalone */
@media screen and (max-width: 1200px) {
    .stacked-carousel-outer-wrapper {
        padding: 60px 30px 100px;
    }

    .stacked-carousel-section {
        gap: 40px;
        padding: 30px;
    }
    
    .carousel-info-title {
        font-size: 2rem;
    }

    .carousel-info {
        padding-right: 0;
    }
}

@media screen and (max-width: 768px) {
    .stacked-carousel-outer-wrapper {
        padding: 40px 20px 100px;
    }
    
    .stacked-carousel-container-wrapper {
        min-height: 600px; /* More space for single column layout */
    }
    
    .stacked-carousel-section {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px 20px;
    }
    
    .stacked-carousel-wrapper {
    aspect-ratio: auto; /* Allow height to be determined by content */
    height: 120px;
    }

    .carousel-info {
        padding-right: 0;
        text-align: left;
        order: 2; /* Info under image on mobile */
    }

    p.excerpt-text {
        line-height: 1.2;
    }
    
    .carousel-info-title {
        font-size: 1.8rem;
    }
    
    .carousel-info-description {
        font-size: 1rem;
    }

    .carousel-info-description li {
        margin-bottom: 0.3em;
    }
    
    .carousel-info-button {
        margin-top: 20px;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    
    .stacked-carousel-wrapper {
        max-width: 100%;
        order: 1; /* Image on top on mobile */
    }
}

@media screen and (max-width: 800px) {
    /* On mobile, convert to horizontal slider */
    .stacked-carousel-outer-wrapper {
        padding: 20px 0 80px;
        overflow: hidden; /* Prevent horizontal overflow */
    }
    
    .stacked-carousel-container-wrapper {
        display: flex;
        flex-direction: row;
        gap: 12px;
        overflow-x: auto;
        scroll-behavior: smooth;
        min-height: auto;
        padding: 20px 0;
        /* Scroll snapping for centering */
        scroll-snap-type: x mandatory;
        /* Hide scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    /* Add spacers to ensure first and last cards can be centered */
    .stacked-carousel-container-wrapper::before,
    .stacked-carousel-container-wrapper::after {
        content: '';
        flex: 0 0 calc((100vw - 80%) / 2);
        min-width: calc((100vw - 80%) / 2);
    }
    
    .stacked-carousel-container-wrapper::-webkit-scrollbar {
        display: none;
    }
    
    .stacked-carousel-section {
        position: relative !important; /* Override absolute positioning */
        flex: 0 0 80%; /* Card width - allows seeing parts of adjacent cards */
        min-width: 80%;
        transform: none !important;
        opacity: 1 !important;
        z-index: auto !important;
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 25px 15px;
        /* Snap to center */
        scroll-snap-align: center;
        scroll-snap-stop: always;
        height: auto;
    }
    
    .carousel-info-title {
        font-size: 1.5rem;
    }
    
    .carousel-info-button {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
    
    /* Show navigation arrows below carousel on mobile/tablet */
    .carousel-arrow-prev,
    .carousel-arrow-next {
        display: flex !important;
        position: absolute;
        bottom: 10px;
    }
    
    .carousel-arrow-prev {
        left: calc(50% - 65px);
    }
    
    .carousel-arrow-next {
        right: calc(50% - 65px);
    }
}

/* Carousel Arrow Navigation Buttons */
.carousel-arrow-prev,
.carousel-arrow-next {
    display: none; /* Hidden on desktop (desktop uses stacked cards) */
    position: relative;
    width: 50px;
    height: 50px;
    background: rgba(34, 52, 85, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: white;
    font-size: 32px;
    font-weight: 300;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    pointer-events: auto;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    padding: 0;
    line-height: 1;
}

.carousel-arrow-prev:hover,
.carousel-arrow-next:hover {
    background: rgba(34, 52, 85, 1);
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.6);
}

.carousel-arrow-prev:active,
.carousel-arrow-next:active {
    transform: scale(0.95);
}

/* Old carousel-arrow class (deprecated) */
.carousel-arrow {
    display: none;
}

/* Responsive Carousel */
@media (max-width: 1200px) {
    .cases-carousel-wrapper {
        padding: 0 20px; /* taget fra gamle på mobil */ /* tjek den */
        width: 380px;
        height: calc(55vh + 70px); /* Mindre på tablet */
        margin-right: 20px;
    }
    
    .cases-carousel-container {
        width: 380px;
        /* height: 55vh; */
        height: auto;
        max-height: 500px;
    }
}



@media (max-width: 768px) {
    /* På mobil: Normal flow layout UNDER slider */
    .slider-carousel-outer-wrapper {
        display: block;
        height: calc(45vh - 50px) !important;
        margin-top: -35px; /* Kompenserer main padding-top */
    }

}


/* @media (min-width: 769px) {
    .stacked-carousel-section {
        transform: unset;
        opacity: unset;
        height: unset;
    }
} */

/* Gamle udseende af mobilversion Stacked carousel.
er ændret til horisontal slider på mobil og cards magen til artwork-item */
/* ========================================
   SLUT/END PÅ CASES CAROUSEL (GAMMEL FØR NY MOBILVERSION, magen til artwork-item på mobil)
   ======================================== */
   /* Gamle udseende af mobilversion Stacked carousel.
er ændret til horisontal slider på mobil og cards magen til artwork-item */

/*
@media (max-width: 768px) {
    /* På mobil: Normal flow layout UNDER slider 
    .slider-carousel-outer-wrapper {
        display: block;
        height: calc(45vh - 50px) !important;
        margin-top: -35px; /* Kompenserer main padding-top 
    }


    .cases-carousel-wrapper {
        margin-top: 70px;
        grid-column: 2;
        grid-row: 1 / 3;
        height: auto;
        margin-right: 30px;
        overflow: visible;
        z-index: 50;
        pointer-events: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        position: relative;
        padding-bottom: 80px; /* Plads til pile under carousel 
    }
    
    .cases-carousel-container {
        position: relative;
        display: flex;
        flex-direction: row;
        gap: 15px;
        overflow-x: auto;
        scroll-behavior: smooth;
        height: auto;
        width: 100%;
        padding: 20px 0;
        /* Skjul scrollbar 
        scrollbar-width: none; /* Firefox 
        -ms-overflow-style: none; /* IE and Edge 
        pointer-events: auto;
    }
    
    .cases-carousel-container::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera 
    }
    
    .case-carousel-item {
        position: relative; /* Ikke absolute på mobil 
        flex: 0 0 calc(50% - 10px);
        min-width: calc(50% - 10px);
        transform: none !important; /* Reset transforms 
        opacity: 1 !important; /* Alle synlige 
        z-index: auto !important;
    }
    
    .case-carousel-title {
        font-size: 16px;
    }
    
    .carousel-next-button {
        display: none; /* Skjul stacked button på mobil 
    }
    
    /* Vis navigation pile på mobil 
    .carousel-arrow-prev,
    .carousel-arrow-next {
        display: flex !important;
        position: absolute;
        bottom: 10px;
    }
    
    .carousel-arrow-prev {
        left: calc(50% - 65px);
    }
    
    .carousel-arrow-next {
        right: calc(50% - 65px);
    }
}
/*

@media (max-width: 480px) {
    .cases-carousel-wrapper {
        padding: 0 20px;
        padding-bottom: 80px;
    }
    
    .case-carousel-item {
        flex: 0 0 100%;
        min-width: 100%;
    }
    
    .case-carousel-title {
        font-size: 14px;
    }
    
    /* Smaller arrows on very small screens 
    .carousel-arrow-prev,
    .carousel-arrow-next {
        width: 45px;
        height: 45px;
        font-size: 28px;
    }
}


/* ========================================
   SLUT/END PÅ CASES CAROUSEL (GAMMEL FØR NY MOBILVERSION, magen til artwork-item på mobil)
   ======================================== */



/* ======================================== */
   /* NY VERSION AF KOMBINERET YDELSER MOBIL VERSION */
/* ======================================== */
/* ========================================
   MOBIL: Stacked carousel skal ligne artwork-item
   Kun mobil
======================================== */

@media (max-width: 768px) {

    .stacked-carousel-section {
        background: white;
        border: 3px solid #D0B48D;
        overflow: hidden;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 0 5px 16px rgba(0,0,0,0.2);
        transition: all 0.3s ease;

        position: relative !important;
        transform: none !important;
        opacity: 1 !important;
        height: auto !important;
        padding: 0;
    }

    /* Billedet skal ligge ØVERST */
    .stacked-carousel-wrapper {
        order: 1;
        width: 100%;
        height: 120px;
        position: relative;
        overflow: hidden;
        background: #f5f5f5;
        border-radius: 0px;
    }

    .stacked-carousel-image {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition: transform 0.3s ease;
    }

    .stacked-carousel-section:hover .stacked-carousel-image {
        transform: scale(1.05);
    }

    /* Info-feltet skal ligge UNDER billedet */
    .carousel-info {
        order: 2;
        padding: 0px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        background: #EFE3D4;
        position: static;
    }

    /* Skjul den lille "Ydelser" label på mobil */
    .carousel-headline {
        display: none;
    }

    /* Overskriften skal IKKE optage plads i tekstfeltet */
    .carousel-info-title {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 120px;

        display: flex;
        align-items: flex-end;

        margin: 0;
        padding: 15px 20px;

        background: #22345579;
        color: white;
        font-size: 18px;
        font-weight: bold;
        line-height: 1.2;
        z-index: 5;
        pointer-events: none;
    }

    .carousel-info-description {
        font-size: 0.9em;
        line-height: 1.2;
        color: #223455;
        flex-grow: 1;
        font-family: 'Jost', sans-serif;
        margin: 0;
        text-align: left;
        padding: 0 1em 1em;

    }

    .carousel-info-description p {
        margin: 0 0 0.5em 0;
    }

    .carousel-info-description p:last-child {
        margin-bottom: 0;
    }

    .carousel-info-button {
        background-color: #223455;
        color: #F6F1EB;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: 500;
        text-align: center;
        transition: background-color 0.9s ease, color 0.9s ease, transform 0.9s ease;
        margin-top: auto;
        font-family: 'Jost', sans-serif;
        text-decoration: none;
        display: block;
        margin-bottom: 20px;
    }

    .carousel-info-button:hover {
        background-color: #D0B48D;
        color: #223455;
        transform: translateY(-2px);
    }
}
/* SLUT NY VERSION AF KOMBINERET YDELSER MOBIL VERSION SLUT */
/* ======================================== */


/* ========================================
   CASES SLIDER - Background image testimonials
   ======================================== */

.cases-section {
    position: relative;
    width: 60%;
    min-width: 700px;
    max-width: 1000px;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 100%;
    aspect-ratio: 1/1;
}

/* Background images layer */
.cases-backgrounds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.case-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: none; /* JavaScript handles animation */
}

.case-background.active {
    opacity: 1;
}

/* Navy overlay */
.cases-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(34, 52, 85, 0.8); /* Navy #223455 at 80% */
    z-index: 2;
}

/* Content wrapper */
.cases-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 40px; */
    z-index: 3;
}

.cases-slides {
    /* max-width: 700px; */
    max-width: 60%;
    width: 100%;
    text-align: center;
    color: white;
    /* max-height: 550px; */
    /* overflow-y: auto; */
    padding-right: 10px;
    padding-left: 15px;
}

.case-slide {
    display: none;
}

.case-slide.active {
    display: block;
}

/* Quote icons */
.case-quote-icon {
    font-size: 60px;
    line-height: 1;
    color: #D0B48D; /* Ochre */
    font-family: Georgia, serif;
    font-weight: 300;
}

.case-quote-start {
    text-align: left;
    /* margin-bottom: 10px; */
    line-height: 0.1;
    margin-top: 1em;
}

.case-quote-end {
    text-align: right;
    /* margin-top: 10px; */
    margin-bottom: 0;
}

/* Quote text */
.case-quote {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: white;
    margin: 0;
    font-style: normal;
    border: none;
    padding: 0;
    font-family: 'Jost', sans-serif;
}

.case-quote p {
    /* margin: 0 0 15px 0; */
    margin: 0;

}

.case-quote p:last-child {
    margin-bottom: 0;
}

/* Author info */
.case-author {
    font-size: 18px;
    font-weight: 600;
    color: #D0B48D; /* Ochre */
    margin: 0 0 0 0;
    font-style: normal;
    font-family: 'Jost', sans-serif;
}

/* Navigation arrows - Chevron circles */
.cases-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid white;
    background: transparent;
    color: white;
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
}

.cases-arrow svg {
    width: 24px;
    height: 24px;
}

.cases-arrow:hover {
    background: #D0B48D; /* Ochre */
    border-color: #D0B48D;
    transform: translateY(-50%) scale(1.1);
}

.cases-prev {
    left: 20px; /*før 40px*/
}

.cases-next {
    right: 20px; /*før 40px*/
}

/* Responsive */
@media (max-width: 1024px) {
    .cases-section {
        width: 85%;
        min-width: 550px;
        margin: 0 auto;
        /* Cirkel på tablet */
    }
    
    .cases-slides {
        max-width: 85%;
    }
    
    .cases-section .wp-block-paragraph {
        width: 80%;
        font-size: 13px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    .cases-section {
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        height: 600px;
        margin: 40px 0;
        margin-left: calc(-50vw + 50%);
        border-radius: 0;
        aspect-ratio: auto;
        /* Fuld bredde på mobil under 768px, ingen cirkel */
    }
    
    .cases-content-wrapper {
        /* padding: 30px 20px; */
        padding: 30px 40px;
    }

    .cases-slides {
        max-width: 90%;
        margin-top: 3em;

        /* Fuld bredde på mobil */
    }
    
    .case-quote-icon {
        font-size: 45px;
    }
    
    .case-quote-start {
        /* margin-bottom: 5px;
        margin-top: 10px; */
        margin: 0;
    }
    
    .case-quote-end {
        /* margin-top: 5px; */
        margin-bottom: 0;
    }
    
    .case-quote {
        font-size: 15px;
        line-height: 1.5;
    }
    
    .case-author {
        font-size: 16px;
    }
    
    .cases-arrow {
        width: 42px;
        height: 42px;
    }
    
    .cases-arrow svg {
        width: 18px;
        height: 18px;
    }
    
    .cases-prev {
        left: 15px;
    }
    
    .cases-next {
        right: 15px;
    }
}

@media (max-width: 480px) {
    .cases-content-wrapper {
        padding: 20px 10px;
    }
    
    .case-quote-icon {
        font-size: 35px;
    }
    
    .case-quote {
        font-size: 13px;
        line-height: 1.4;
    }
    
    .case-author {
        font-size: 14px;
    }
    
    .cases-arrow {
        width: 38px;
        height: 38px;
    }
    
    .cases-arrow svg {
        width: 16px;
        height: 16px;
    }
}

/* ========================================
   PRESS ARCHIVE STYLES
   ======================================== */

.press-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    padding: 40px 0;
}

.press-item {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.press-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.press-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.press-thumbnail {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #f5f5f5;
}

.press-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.press-item:hover .press-thumbnail img {
    transform: scale(1.05);
}

.press-info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.press-title {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #2c3e50;
    line-height: 1.4;
}

.press-publication {
    font-weight: 600;
    color: #3498db;
    font-size: 0.9em;
    margin-bottom: 5px;
}

.press-date {
    color: #95a5a6;
    font-size: 0.85em;
    margin-bottom: 12px;
}

.press-excerpt {
    color: #7f8c8d;
    font-size: 0.95em;
    line-height: 1.6;
    margin-top: auto;
}

.no-press {
    text-align: center;
    padding: 60px 20px;
    color: #95a5a6;
    font-size: 1.1em;
}

/* External link indicator */
.press-link::after {
    content: '↗';
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.5em;
    color: #3498db;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.press-item {
    position: relative;
}

.press-item:hover .press-link::after {
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .press-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 0;
    }
    
    .press-thumbnail {
        height: 180px;
    }
    
    .press-title {
        font-size: 1.1em;
    }
}
/* ========================================
   HOME PRESS SECTION
   ======================================== */

.home-press-section {
    background: #f8f9fa;
    padding: 80px 0;
    margin-top: 60px;
}

.home-press-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 4em;
}

.home-press-title {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 50px;
    color: #2c3e50;
}

.home-press-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.home-press-item {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.home-press-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.home-press-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.home-press-thumbnail {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #f5f5f5;
}

.home-press-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.home-press-item:hover .home-press-thumbnail img {
    transform: scale(1.05);
}

.home-press-info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.home-press-item-title {
    font-size: 1.1em;
    margin-bottom: 10px;
    color: #2c3e50;
    line-height: 1.4;
}

.home-press-publication {
    font-weight: 600;
    color: #3498db;
    font-size: 0.85em;
    margin-bottom: 5px;
}

.home-press-date {
    color: #95a5a6;
    font-size: 0.8em;
    margin-top: auto;
}

.home-press-more {
    text-align: center;
    margin-top: 20px;
}

.home-press-more-link {
    display: inline-block;
    padding: 12px 30px;
    background: #2c3e50;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s ease;
    font-weight: 500;
}

.home-press-more-link:hover {
    background: #34495e;
}

/* Responsive */
@media (max-width: 768px) {
    .home-press-section {
        padding: 60px 0;
        margin-top: 40px;
    }
    
    .home-press-container {
        padding: 0 1em;
    }
    
    .home-press-title {
        font-size: 32px;
        margin-bottom: 30px;
    }
    
    .home-press-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .home-press-thumbnail {
        height: 160px;
    }
}

/* ========================================
   SINGLE CASE PAGES
   ======================================== */

.single-case {
    width: 100%;
}

.case-article {
    width: 100%;
}

/* Case Header - Titel og excerpt */
.case-header {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 40px 40px;
    text-align: center;
}

.case-title {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
    line-height: 1.2;
}

.case-excerpt {
    font-size: 20px;
    color: #666;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

/* Hero image - fuld bredde */
.case-hero-image {
    width: 100%;
    margin: 0 0 60px 0;
}

.case-hero-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Content wrapper */
.case-content-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px 60px;
}

.case-description {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
}

.case-description p {
    margin-bottom: 1.5em;
}

.case-description h2,
.case-description h3,
.case-description h4 {
    margin-top: 2em;
    margin-bottom: 0.8em;
    font-weight: bold;
    color: #223455;
}

.case-description h2 {
    font-size: 32px;
}

.case-description h3 {
    font-size: 24px;
}

/* Billeder i content */
.case-description img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2em 0;
}

.case-description figure {
    margin: 2em 0;
}

.case-description figcaption {
    font-size: 14px;
    color: #666;
    font-style: italic;
    margin-top: 0.5em;
    text-align: center;
}

/* WordPress Gallery styling */
.case-description .wp-block-gallery,
.case-description .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin: 2em 0;
    list-style: none;
    padding: 0;
}

.case-description .wp-block-image,
.case-description .gallery-item {
    margin: 0;
}

.case-description .gallery-item img,
.case-description .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* For 2-kolonne galleries */
.case-description .gallery-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* For 3-kolonne galleries */
.case-description .gallery-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* For 4-kolonne galleries */
.case-description .gallery-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Case Navigation */
.case-navigation {
    max-width: 1200px;
    margin: 80px auto 60px;
    padding: 40px 40px;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    border-top: 2px solid #22345519;
}

.case-navigation a {
    flex: 1;
    text-decoration: none;
    color: #333;
    transition: opacity 0.3s ease;
}

.case-navigation a:hover {
    opacity: 0.7;
}

.case-navigation .prev-case {
    text-align: left;
}

.case-navigation .next-case {
    text-align: right;
}

.case-navigation .nav-label {
    display: block;
    font-size: 14px;
    color: #999;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.case-navigation .nav-title {
    display: block;
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

/* Responsive */
@media (max-width: 768px) {
    .case-header {
        padding: 40px 20px 20px;
    }
    
    .case-title {
        font-size: 32px;
    }
    
    .case-excerpt {
        font-size: 18px;
    }
    
    .case-content-wrapper {
        padding: 0 20px 40px;
    }
    
    .case-description {
        font-size: 16px;
    }
    
    .case-navigation {
        flex-direction: column;
        padding: 30px 20px;
        gap: 30px;
    }
    
    .case-navigation .next-case {
        text-align: left;
    }
    
    .case-description .wp-block-gallery,
    .case-description .gallery {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
    }
    
    .case-description .gallery-columns-3,
    .case-description .gallery-columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   SINGLE ARTWORK (YDELSE DETALJE)
   ======================================== */

.single-artwork {
    width: 100%;
    max-width: 100%;
    color: #223455;
    /* background-color: #F6F1EB; */
    background-color: #efe3d4a3;
    margin: 0;
    
}

.artwork-article {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 60px 0;
}

/* Header fylder begge kolonner */
.artwork-detail-header-full {
    /* padding-bottom: 30px; */
    margin-bottom: 40px;
    border-bottom: 2px solid #22345519;
    text-align: center;
}

.artwork-detail-title {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 1.2;
}

.artwork-detail-meta {
    font-size: 18px;
    color: #666;
    font-weight: 500;
    font-family: 'Jost', sans-serif;
}

/* To-kolonners container */
.artwork-detail-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* Venstre kolonne: Tekst */
.artwork-detail-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.artwork-detail-description {
    font-size: 18px;
    line-height: 1.8;
    /* color: #333; */
    font-family: 'Jost', sans-serif;
}

.artwork-detail-description p {
    margin-bottom: 1.2em;
}

.artwork-detail-description h2,
.artwork-detail-description h3 {
    margin-bottom: 0.8em;
    font-weight: bold;
    color: #223455;
}

.artwork-detail-description h2 {
    font-size: 28px;
}

.artwork-detail-description h3 {
    font-size: 22px;
    margin-top: 1.8em;
}

.artwork-detail-description ul,
.artwork-detail-description ol {
    margin-left: 1.5em;
    margin-bottom: 1.2em;
}

.artwork-detail-description li {
    margin-bottom: 0.5em;
}

/* Book knap */

.artwork-book-button {
    display: inline-block;
    background-color: #223455;
    color: white;
    padding: 15px 35px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 18px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-bottom: 1em;
    font-family: 'Jost', sans-serif;
}

.artwork-book-button:hover {
    background-color: #D0B48D;
    color: #223455;
    transform: translateY(-2px);
}

/* Højre kolonne: Media (Billede og Video) */
.artwork-detail-media {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.artwork-detail-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.artwork-detail-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.artwork-detail-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.artwork-detail-gallery img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.artwork-detail-media .no-image {
    width: 100%;
    height: 400px;
    background: #EFE3D4;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #223455;
    font-size: 18px;
}

/* Video styling */
.artwork-detail-video {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    margin-bottom: 1em;
}

.artwork-detail-video video {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    background: #000;
}

.artwork-detail-video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
}

/* Navigation mellem ydelser */
.artwork-navigation {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 40px 60px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 40px;
    align-items: start;
    border-top: 2px solid #e0e0e0;
}

.artwork-navigation a {
    text-decoration: none;
    transition: transform 0.3s ease;
}

.artwork-navigation .prev-artwork,
.artwork-navigation .next-artwork {
    display: block;
}

.artwork-navigation .prev-artwork:hover {
    transform: translateX(-5px);
}

.artwork-navigation .next-artwork {
    text-align: right;
    justify-self: end;
}

.artwork-navigation .next-artwork:hover {
    transform: translateX(5px);
}

.artwork-navigation .nav-label {
    display: block;
    font-size: 14px;
    color: #999;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Jost', sans-serif;
}

.artwork-navigation .nav-title {
    display: block;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    font-family: 'Jost', sans-serif;
}

/* Se alle ydelser knap i midten */
.artwork-navigation .all-artwork-link {
    justify-self: center;
    align-self: center;
    background-color: #D0B48D;
    color: #223455;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-family: 'Jost', sans-serif;
}

.artwork-navigation .all-artwork-link:hover {
    background-color: #223455;
    color: #fff;
    transform: translateY(-2px);
}

.artwork-navigation .all-artwork-link .nav-label {
    margin: 0;
    color: inherit;
    font-size: 16px;
}

/* Spacer til at holde grid layout når prev/next mangler */
.artwork-navigation .nav-spacer {
    display: block;
}

/* Responsive */
@media (max-width: 1024px) {
    .artwork-detail-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .artwork-detail-media {
        position: relative;
        top: 0;
        order: -1; /* Billede over tekst på tablet/mobil */
    }
}

@media (max-width: 768px) {

    /* main:not(.archive-main) {
    margin: 0;
    } */
     main.single-artwork {
        padding: 0;
     }

    .artwork-article {
        padding: 40px 20px 0;
    }

      .artwork-article h2 {
        font-size: 24px;
        line-height: 30px;
      }
    
    .artwork-detail-title {
        font-size: 32px;
    }
    
    .artwork-detail-description {
        font-size: 16px;
    }

    .artwork-detail-media {
        display: contents;
        order: initial;
    }

    .artwork-detail-image,
    .artwork-detail-media .no-image {
        order: -1;
    }

    .artwork-detail-content {
        order: 0;
    }

    .artwork-detail-gallery,
    .artwork-detail-video {
        order: 1;
    }
    
    .artwork-navigation {
        grid-template-columns: 1fr;
        padding: 30px 20px 0;
        gap: 20px;
    }

        nav.artwork-navigation span.nav-title {
            color: #223455;
        }
    
    .artwork-navigation .prev-artwork,
    .artwork-navigation .next-artwork {
        text-align: left;
        justify-self: start;
    }
    
    .artwork-navigation .all-artwork-link {
        justify-self: stretch;
        order: -1; /* Vis "se alle" knappen først på mobil */
    }
    
    .artwork-navigation .nav-spacer {
        display: none; /* Skjul spacers på mobil */
    }
}

@media (max-width: 480px) {

    .artwork-detail-image {
        aspect-ratio: 4 / 3;
    }

    .artwork-detail-image img {
        height: 100%;
        object-fit: cover;
    }

    .artwork-detail-header-full {
        padding-bottom: 0;
        margin-bottom: 10px;
    }

    .artwork-article { 
    padding: 70px 20px 0;
    }

    h1.artwork-detail-title {
        font-size: 28px !important;
    }

    .artwork-detail-description h3 {
    font-size: 22px;
    margin-top: 1em;
    line-height: 30px;
    }

    .artwork-navigation {
        margin: 0 -20px 1em;;
    }





}