/* Base resets and typography */
:root {
    --bg-color: #E2E3DF;
    /* Exact warm grey from the user's Webstudio site */
    --text-color: #0b0c10;
    --text-muted: #555555;
    --transition-speed: 0.5s;
    --transition-ease: cubic-bezier(0.19, 1, 0.22, 1);
}

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

body {
    /* Base font is the classic serif for projects, will override for dates/subtitle */
    font-family: "Times New Roman", Times, serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-y: scroll;
}

/* 
 * 1. HEADER (Webstudio Replica) 
 */
.header {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 4rem 1rem 3rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.header-interactive-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.profile-image-container {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1.5rem auto;
}

.profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-name {
    font-size: 1.25rem;
    font-weight: 400;
    /* Times normal */
    margin-bottom: 0.5rem;
    cursor: default;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.name-part {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.middle-name {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-interactive-group:hover .middle-name {
    max-width: 100px;
    /* Rough width to accommodate 'Kartveit' */
    opacity: 1;
}

.bio-container {
    margin-bottom: 1.5rem;
    text-align: center;
    cursor: default;
}

.bio-short-wrapper {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.4s ease, opacity 0.4s ease;
    opacity: 1;
}

.bio-short {
    overflow: hidden;
    margin: 0;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.8rem;
    color: var(--text-color);
}

.bio-full-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    max-width: 400px;
    margin: 0 auto;
}

.bio-full {
    overflow: hidden;
    margin: 0;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.header-interactive-group:hover .bio-short-wrapper {
    grid-template-rows: 0fr;
    opacity: 0;
}

.header-interactive-group:hover .bio-full-wrapper {
    grid-template-rows: 1fr;
    opacity: 1;
}

.social-nav {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.social-icon {
    width: 24px;
    height: 24px;
    color: var(--text-color);
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-icon svg {
    width: 100%;
    height: 100%;
}

.social-icon:hover {
    opacity: 0.6;
}

/* 
 * 2. ARCHIVE LIST (The pgLANG grid layout adapted)
 */
.archive-list {
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 10vh;
}

.project-item {
    /* Removed the bottom borders here to closer match the screenshot which didn't have heavy lines */
    margin-bottom: 1.5rem;
}

/* Button for expandable items */
.project-trigger {
    width: 100%;
    background: none;
    border: none;
    padding: 0.15rem 2rem;
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: flex-start;
    /* Align to top due to potentially long titles */
    text-align: left;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    font-size: 0.95rem;
    transition: opacity 0.3s ease;
}

/* Non-expandable items simply mirror the grid but without button traits */
.project-non-trigger {
    width: 100%;
    padding: 0.15rem 2rem;
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: flex-start;
    text-align: left;
    font-size: 0.95rem;
}

.project-trigger:hover {
    opacity: 0.6;
}

.project-date {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.75rem;
    color: #4a5568;
    /* Subtle blue/grey for the dates as in the screenshot */
    padding-top: 0.15rem;
    /* Align visually with the serif text */
}

/* Titles are serif, but the webstudio design uses <i> styling */
.project-title {
    font-family: "Times New Roman", Times, serif;
}

.project-title i {
    font-style: italic;
    /* Explicitly ensure <i> holds stylistic weight */
}

/* 
 * 3. ACCORDION (pgLANG style smooth glide)
 */
.project-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-speed) var(--transition-ease);
}

.project-item.is-active .project-content {
    grid-template-rows: 1fr;
}

.content-inner {
    overflow: hidden;
    padding: 0 2rem 0 140px;
    /* Indent to match title column */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--transition-speed) var(--transition-ease),
        transform var(--transition-speed) var(--transition-ease);
}

.project-item.is-active .content-inner {
    opacity: 1;
    transform: translateY(0);
    padding-bottom: 2rem;
    padding-top: 0.5rem;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    margin-bottom: 1rem;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Nested lists (like festivals) */
.sub-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.sub-list-item {
    display: grid;
    grid-template-columns: 100px 1fr;
    /* Tighter layout for sub-items */
    align-items: flex-start;
    font-size: 1rem;
}



/* Active state styling for the trigger text */
.project-item.is-active .project-trigger {
    padding-bottom: 0.25rem;
}

/* NRK Premium Grid */
.nrk-premium-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 0.5rem;
}

.nrk-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    cursor: pointer;
}

.nrk-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    background-size: cover;
    background-position: center;
    margin-bottom: 0.5rem;
}

.nrk-red {
    background: linear-gradient(135deg, #e53935, #c62828);
}

.nrk-blue {
    background: linear-gradient(135deg, #1e88e5, #1565c0);
}

.nrk-yellow {
    background: linear-gradient(135deg, #fdd835, #f9a825);
}

.nrk-card p,
.nrk-premium-grid p {
    font-family: 'Times New Roman', serif;
    font-size: 1rem;
    font-style: italic;
    color: var(--text-color);
    margin: 0;
    font-weight: normal;
}

@media (max-width: 600px) {

    .project-trigger,
    .project-non-trigger {
        grid-template-columns: 1fr;
        padding: 0.15rem 1rem;
        gap: 0.2rem;
    }

    .project-content {
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .content-inner {
        padding: 0;
    }

    .sub-list {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .nrk-premium-grid {
        grid-template-columns: 1fr;
    }

    .nrk-card p,
    .nrk-premium-grid p {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}