/* ===== base-sections.css ===== */
/* Base Portfolio Sections CSS */
/* Shared styles for all sections */

/* CSS variables are defined in the theme's style.css — no re-declarations here. */

/* ========================================================================
   RESPONSIVE BREAKPOINT REFERENCE - SINGLE SOURCE OF TRUTH
   ======================================================================== */
/*
   All breakpoints across the site should use these values.
   To change breakpoints globally, update these values and search/replace.

   TABLET BREAKPOINT: 1200px (width only)
   Usage: @media (max-width: 1200px)

   MOBILE BREAKPOINT: 768px (width OR height)
   Usage: @media (max-width: 768px), ((max-width: 1200px) and (max-height: 768px))
   Note: The compound condition ensures height takes precedence over tablet width

   SMALL MOBILE BREAKPOINT: 480px (width OR height)
   Usage: @media (max-width: 480px), ((max-width: 1200px) and (max-height: 480px))

   SMALL TABLET BREAKPOINT: 900px (width OR height) - Used in specific sections
   Usage: @media (max-width: 900px), ((max-width: 1200px) and (max-height: 900px))

   WHY THE COMPOUND LOGIC?
   For a display with w=1000px, h=700px:
   - Tablet (1200px width) matches ✓
   - Mobile (768px height) also matches ✓
   The compound condition ensures mobile styles override tablet styles
   when height is below the mobile threshold.
*/
/* ======================================================================== */

.ast-scroll-top {
    display: none !important;
}

.content-section {
    background: var(--content-bg);
    height: auto;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Override for sections that should have transparent backgrounds */
.content-section.reviews-section,
.content-section.features-section,
.content-section:has(.stories-content) {
    background: transparent !important;
}

/* About section should NOT be transparent - it has its own gradient */

.section-container {
    max-width: 100%;
    width: 100%;
}

/* Unified Typography System */
/* Supermax - Major section titles */
h1 {
    font-family: var(--compressed-font) !important;
    font-size: 6rem;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--text-color);
    margin: 0 0 1.5rem 0;
}

/* Headline - Main content headings */
h2 {
    font-family: var(--serif-font) !important;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-color);
    margin: 0 0 1rem 0;
}

/* Standfirst - Sub-headings, emphasis text */
h3 {
    font-family: var(--serif-font) !important;
    font-size: 1.875rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--text-color);
    margin: 0;
}

/* Body - Regular paragraph text */
p {
    font-family: var(--primary-font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-color);
    margin: 0;
}

/* Drop Cap - 3-line drop cap in compressed font */
/* Adjusted for body text line-height: 1.6 */
/* Negative top margin pulls drop cap up to higher baseline */
p.drop-cap::first-letter {
    font-family: var(--compressed-font);
    font-size: 5.0em;
    font-weight: 400;
    line-height: 1.0;
    float: left;
    margin: -0.07em 0.1em 0 0;
    color: var(--text-color);
}

/* Credit/Caption - Photo credits, captions */
.caption,
.photo-credit {
    font-family: var(--primary-font);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-color-muted);
    margin: 0;
    text-align: right;
    background: var(--caption-bg);
    padding: 2px 0;
    width: 100%;
}

/* Article Note - Sans-serif text for editorial notes */
.article-note {
    font-family: var(--primary-font) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

.story-image {
    margin-bottom: 8px;
}

.story-meta,
p.story-meta {
    color: var(--text-color-muted);
}

.story-meta i,
p.story-meta i{
    color: var(--text-color);
}


/* Display Headline - Shared compressed font style for section titles and contact links */
.display-headline {
    font-family: var(--compressed-font) !important;
    font-size: 8vw;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    color: var(--text-color);
}

/* Ensure links in display headline maintain highlight color */
.display-headline a,
.strategy-intro-headline a {
    color: var(--link-hover-color) !important;
    text-decoration: none;
}

.display-headline a:hover,
.strategy-intro-headline a:hover {
    opacity: 0.7;
}

/* Strategy Intro */
.strategy-intro {
    align-items: center;
    gap: 2rem;
    padding: 200px 0 6rem 0;
    margin: 0 auto;
    max-width: 960px;
}

.strategy-intro-headline {
    flex: 0 0 50%;
    text-align: center;
}

.strategy-intro-body {
    flex: 0 0 calc(50% - 2rem);
}

.strategy-intro h3,
.photo-page-intro h3 {
    text-align: center;
    line-height: 1.3;
    color: var(--text-color);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Strategy intro link styling - 50% grey/white */
.strategy-intro a,
.photo-page-intro a {
    color: var(--text-color-muted) !important;
    text-decoration: none;
}

.strategy-intro a:hover,
.photo-page-intro a:hover {
    color: var(--link-hover-color) !important;
}

/* More stories section */
.more-stories-section {
    margin-top: 72px;
}

/* More stories heading - font styles only, no spacing */
.more-stories-head {
    font-family: var(--compressed-font) !important;
    font-size: 4.5rem !important;
    text-align: center !important;
    color: var(--text-color);
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0;
}

/* No stories message styling */
.no-stories-message {
    text-align: center;
    color: var(--text-color-muted);
    padding: 4rem;
}

/* Tablet Typography Adjustments */
@media (max-width: 1200px) {
    .display-headline {
        font-size: 12vw !important;
    }

    p {
        font-size: 1rem;
    }
}

/* Mobile Typography Adjustments - See breakpoint reference at top of file */
@media (max-width: 768px), ((max-width: 1200px) and (max-height: 768px)) {
    h1 {
        font-size: 4rem;
        margin-bottom: 1rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    p {
        font-size: 0.875rem;
    }

    .story-meta,
    p.story-meta {
        font-size: 0.75rem;
    }

    .caption {
        font-size: 0.6875rem;
    }

    .display-headline {
        font-size: min(16vw, 72px) !important;
    }

    .strategy-intro {
        align-items: center;
        margin-bottom: 0;
        max-width: 100%;
        padding: 5rem 1rem;
        gap: 1.5rem;
    }

    .strategy-intro-headline {
        flex: none;
        width: 100%;
    }

    .strategy-intro-body {
        flex: none;
        width: 100%;
    }

    .more-stories-section {
        margin-top: 3rem;
    }
}

/* Small Mobile Responsive - See breakpoint reference at top of file */
@media (max-width: 480px), ((max-width: 1200px) and (max-height: 480px)) {
    .strategy-intro {
        margin-bottom: 0;
    }
}


/* ===== about-section.css ===== */
/* About Section Styles */

.content-section.about-section {
    min-height: 100vh;
    position: relative;
    background: transparent !important;
}


.about-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

/* Large intro text */
.about-intro {
    margin-bottom: 4rem;
    text-wrap: balance;
}

.large-intro-text {
    font-family: var(--serif-font) !important;
    font-size: min(3vw, 63px) !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    color: #000 !important;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.about-text {
    max-width: 900px;
    margin: 0 auto;
}

.about-text p {
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
}

.about-text p:last-child {
    margin-bottom: 0;
}

.about-text a:hover {
    background-color: black;
}

/* Desktop layout - single column */
@media (min-width: 1200px) {
    .about-content {
        padding: 2vw 0 0 0;
    }

    .about-intro {
        margin-bottom: 3rem;
    }

    .large-intro-text {
        font-size: min(3vw, 63px) !important;
        text-align: center;
        margin: 0 auto;
        max-width: 900px;
    }

    .about-text {
        margin: 0 auto;
        max-width: 900px;
    }
}

/* Mobile and Tablet Responsive */
@media (max-width: 1200px) {
    .about-content {
        padding: 2vw 0 0 0;
    }
    
    .about-intro {
        margin-bottom: 3rem;
    }
    
    .large-intro-text {
        font-size: 3rem !important;
        text-align: center !important;
        margin: 0 auto;
        max-width: 900px;
    }

    .about-text {
        max-width: 900px;
        margin: 0 auto;
    }
}

@media (max-width: 768px), ((max-width: 1200px) and (max-height: 768px)) {
    .about-content {
        padding: 0 1rem;
    }

    .large-intro-text {
        font-size: 1.84375rem !important;
    }

    .about-intro p {
        font-size: 1.84375rem !important;
    }

    .about-text p {
        font-size: 1rem;
    }
}

@media (max-width: 480px), ((max-width: 1200px) and (max-height: 480px)) {
    .about-intro {
        margin-bottom: 2rem;
    }

    .large-intro-text {
        font-size: 2.8125rem !important;
    }
}


/* ===== features-section.css ===== */
/* Features Section */
.features-section {
    display: flex;
    align-items: flex-start;
    position: relative;
    background: transparent !important;
    margin-bottom: 2rem;
}

.features-section::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #e0e0e0;
    z-index: 10;
}

.features-left {
    width: 50%;
    padding-right: 32px;
}

.features-story-main {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%; /* Use full available width of parent */
}

.features-story-main .story-content {
    flex: 0 0 calc(50% - 12px); /* 50% minus half of gap */
    text-align: center;
}

.features-story-main .story-content h1 {
    line-height: 0.9;
}

/* Ensure headlines use text color */
.features-story-main h1 a,
.features-story-small h2 a {
    color: var(--text-color) !important;
    text-decoration: none;
}

/* Features section hover effects - highlight color with no transition */
.features-story-main h1 a:hover,
.features-story-small h2 a:hover {
    color: var(--highlight-color) !important;
    transition: none;
}

.features-story-main .story-image {
    flex: 0 0 calc(50% - 12px); /* 50% minus half of gap */
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
    margin-bottom: 8px;
}

.features-story-main .story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Features section caption styling - Base styles in base-sections.css */
.features-story-main .caption {
    margin: 8px 0 0 0; /* Override base margin */
}

.features-right {
    width: 50%;
    padding-left: 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 16px;
}

.features-story-small {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.features-story-small .story-content {
    flex: 1;
}

.features-story-small .story-image {
    width: 12vw;
    height: 10vw;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    margin-bottom: 8px;
}

.features-story-small .story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Tablet responsive */
@media (max-width: 1200px) {
    .features-section {
        flex-direction: column;
    }

    .features-section::before {
        display: none;
    }

    .features-left,
    .features-right {
        width: 100%;
        padding: 0;
    }

    .features-left {
        margin-bottom: 64px;
    }

    /* Keep text left of image on tablet */
    .features-story-main {
        gap: 24px;
    }

    /* Primary story text stays center-aligned on tablet */
    .features-story-main .story-content {
        text-align: center;
    }
    
        .features-story-small .story-image {
        width: 120px;
        height: 120px;
        aspect-ratio: 1/1;
        max-height: 120px;
    }
}

/* Mobile responsive - See breakpoint reference in base-sections.css */
@media (max-width: 768px), ((max-width: 1200px) and (max-height: 768px)) {
    .features-left {
        margin-bottom: 32px;
    }

    .features-story-main {
        flex-direction: column;
    }

    /* Primary story text stays center-aligned on mobile */
    .features-story-main .story-content {
        width: 100%;
        margin-bottom: 16px;
        text-align: center;
    }

    .features-story-main .story-image {
        width: 100%;
    }

    /* Keep secondary stories horizontal on mobile with square images */
    .features-story-small {
        flex-direction: row;
        gap: 24px;
    }

    .features-story-small .story-content {
        flex: 1;
    }
}


/* ===== stories-section.css ===== */
/* Stories Section Styles */

.stories-section {
    background: white;
    width: 100%;
}

.stories-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.stories-intro {
    max-width: 900px;
    margin: 0 auto 4rem auto;
    text-align: center;
}

.stories-intro h3 {
    line-height: 1.3;
    color: #000;
}

/* Featured Story */
.featured-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 5rem;
    align-items: start;
    padding-bottom: 4rem;
}

.featured-story .story-image {
    position: relative;
}

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

.featured-story .story-content {
    padding-left: 2rem;
}

.featured-story h2 {
    margin-bottom: 16px;
    line-height: 1.1;
    transition: color 0.3s ease;
    cursor: pointer;
}

.featured-story:hover h2 {
    color: var(--highlight-color);
}

.featured-story h3 {
    margin-bottom: 12px;
    color: var(--text-color-muted); /* Muted text for excerpt */
    line-height: 1.3;
}

.featured-story .story-meta {
    color: #666;
    font-weight: 500;
}

/* Secondary Stories Grid */
.stories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* 2x2 Stories Grid */
.stories-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4rem;
    margin-bottom: 5rem;
    position: relative;
}

/* 2x2 Grid Divider Lines - Separate columns within each row */
.stories-grid-2x2 .story-item-2x2:nth-child(1)::after {
    content: '';
    position: absolute;
    top: 0;
    right: -2rem;
    width: 1px;
    height: 100%;
    background-color: #e0e0e0;
    z-index: 10;
}

.stories-grid-2x2 .story-item-2x2:nth-child(3)::after {
    content: '';
    position: absolute;
    top: 0;
    right: -2rem;
    width: 1px;
    height: 100%;
    background-color: #e0e0e0;
    z-index: 10;
}

.story-item {
    display: flex;
    flex-direction: column;
}

.story-item-2x2 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
}

.story-item .story-image,
.story-item-2x2 .story-image {
    position: relative;
    margin-bottom: 8px;
}

/* Force 4:3 aspect ratio for all story grid images */
.story-item .story-image {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.story-item .story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.story-item-2x2 .story-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Text and image layout for 2x2 grid */
.story-item-2x2 .story-content {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.story-item-2x2 .story-image {
    flex: 0 0 60%;
    aspect-ratio: 4/3;
    overflow: hidden;
    margin-bottom: 0;
    max-width: 60%;
}

.story-item-2x2 .story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.story-item .story-content,
.story-item-2x2 .story-content {
    padding: 0;
}

.story-item h2,
.story-item-2x2 h2 {
    margin-bottom: 16px;
    transition: color 0.3s ease;
    cursor: pointer;
}

.story-item:hover h2,
.story-item-2x2:hover h2 {
    color: var(--highlight-color);
}

.story-item .story-content p:not(.story-meta),
.story-item-2x2 .story-content p:not(.story-meta),
.featured-story .story-content p:not(.story-meta) {
    margin-bottom: 12px;
}



.story-item p,
.story-item-2x2 p {
    margin-bottom: 1rem;
    color: var(--text-color-muted); /* Muted text for excerpt */
}

/* Story Meta - Base typography in base-sections.css */
.story-meta::after {
    content: " →";
}

.story-meta i {
    color: var(--text-color);
}

/* View All Tile */
.view-all-tile {
    background-color: rgba(57, 229, 143, 0.05); /* 5% transparency tint of highlight color */
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    transition: border-color 0.3s ease;
    height: 250px;
    max-height: 250px;
}

.view-all-tile:hover {
    border-color: var(--highlight-color);
}

.view-all-tile .story-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-decoration: none;
}

.view-all-content {
    text-align: center;
    padding: 2rem;
}

.view-all-heading {
    font-family: var(--primary-font) !important;
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    color: var(--text-color-muted);
    transition: color 0.3s ease;
    margin: 0 !important;
}

.view-all-tile:hover .view-all-heading {
    color: var(--highlight-color);
}

/* More Stories Section */
.more-stories {
    max-width: 900px;
    padding-top: 3rem;
    margin: 0 auto;
}

.more-stories-title {
    margin-bottom: 2rem;
    color: #000;
    text-align: center;
}

.story-links {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.story-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.story-link .link-text {
    color: #000;
    line-height: 1.2;
    font-weight: 600;
}

.story-link .link-date {
    color: var(--text-color-muted);
    margin: 0;
    font-weight: 400;
}

.story-link:hover .link-text {
    color: var(--highlight-color);
    transition: 0.3s ease;
}

/* Dynamic Stories - List Layout */
.stories-list {
    max-width: 900px;
    margin: 0 auto;
}

.story-list-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.story-list-item:last-child {
    border-bottom: none;
}

.story-list-item .story-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.story-list-item h2 {
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.story-list-item .story-link:hover h2 {
    color: #39e58f;
}

.story-list-item .story-excerpt {
    margin-bottom: 0.5rem;
    color: var(--text-color-muted); /* Updated from #666 to 50% grey */
    line-height: 1.5;
}

.story-list-item .story-meta {
    color: var(--text-color-muted);
    font-size: 1rem;
}

/* View All Stories Link */
.view-all-stories {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e0e0e0;
}

.view-all-link {
    color: #39e58f;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.125rem;
    transition: color 0.3s ease;
}

.view-all-link:hover {
    color: #2dc776;
}

/* No Stories Message - Defined in base-sections.css */

/* Mobile Responsive */
@media (max-width: 1200px) {
    .stories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
    }

    .stories-grid-2x2 {
        gap: 3rem;
    }

    .featured-story {
        gap: 2rem;
        margin-bottom: 4rem;
        padding-bottom: 3rem;
    }

    .architecture-scroll {
        gap: 24px;
    }

}

/* Small Tablet Responsive - See breakpoint reference in base-sections.css */
@media (max-width: 900px), ((max-width: 1200px) and (max-height: 900px)) {
    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* Mobile Responsive - See breakpoint reference in base-sections.css */
@media (max-width: 768px), ((max-width: 1200px) and (max-height: 768px)) {
    .stories-intro {
        margin-bottom: 3rem;
        max-width: 100%;
        padding: 0 1rem;
    }
    
    .featured-story {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 3rem;
        padding-bottom: 2rem;
    }
    
    .featured-story .story-content {
        padding-left: 0;
    }
    
    .stories-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 3rem;
    }
    
    .stories-grid-2x2 {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 3rem;
    }
    
    /* View All Tile responsive */
    .view-all-tile .story-link {
        min-height: 150px;
    }
    
    .view-all-content {
        padding: 1.5rem;
    }
    
    /* Stack text and image vertically on mobile */
    .story-item-2x2 {
        flex-direction: column;
        gap: 8px;
    }
    
    .story-item-2x2 .story-image {
        margin-bottom: 8px;
    }
    
    /* Hide divider lines on mobile */
    .stories-grid-2x2 .story-item-2x2:nth-child(1)::after,
    .stories-grid-2x2 .story-item-2x2:nth-child(3)::after {
        display: none;
    }
    
    
    .more-stories {
        padding-top: 2rem;
    }
    
    .story-link {
        padding: 0;
    }

    .story-meta {
        margin: 0;
    }
}

/* Small Mobile Responsive - See breakpoint reference in base-sections.css */
@media (max-width: 480px), ((max-width: 1200px) and (max-height: 480px)) {
    .stories-intro {
        margin-bottom: 2rem;
    }
    
    .featured-story {
        gap: 1.5rem;
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
    }
    
    .stories-grid {
        gap: 1rem;
        margin-bottom: 2rem;
    }
    
    .stories-grid-2x2 {
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    /* Maintain vertical stacking on small mobile */
    .story-item-2x2 {
        flex-direction: column;
        gap: 8px;
    }
    
    /* Ensure divider lines are hidden on small mobile too */
    .stories-grid-2x2 .story-item-2x2:nth-child(1)::after,
    .stories-grid-2x2 .story-item-2x2:nth-child(3)::after {
        display: none;
    }
    
    
    .more-stories {
        padding-top: 1.5rem;
    }
    
    .story-link {
        padding: 0.75rem 0;
    }
}

/* Architecture Section Layout - Two Featured + Horizontal Scroll */

/* Architecture featured grid primary stories - larger headlines */
.architecture-featured-grid .story-item h2 {
    font-size: 1.875rem; /* 30px for serif font scaling */
}

/* Featured Grid - Top Two Stories */
.architecture-featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Horizontal Scroll Area */
.architecture-scroll {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    padding-bottom: 16px; /* Space for scrollbar */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Custom scrollbar styling for architecture scroll */
.architecture-scroll::-webkit-scrollbar {
    height: 8px;
}

.architecture-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.architecture-scroll::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.architecture-scroll::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Scroll Items - Match Photography section dimensions */
.architecture-scroll-item {
    flex: 0 0 450px; /* Fixed width for horizontal scroll - same as photo-item */
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Architecture section image styling - match story grid 4:3 aspect ratio */
.architecture-featured-grid .story-item .story-image,
.architecture-scroll-item .story-image {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.architecture-featured-grid .story-item .story-image img,
.architecture-scroll-item .story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin-top: 0 !important;
}

/* Architecture scroll area text spacing and styling */
.architecture-scroll-item .story-content h2 {
    margin-top: 16px;
    margin-bottom: 16px;
}

.architecture-scroll-item .story-link:hover h2 {
    color: var(--highlight-color);
}

.architecture-scroll-item .story-content p:not(.story-meta) {
    margin-bottom: 16px;
    color: var(--text-color-muted); /* Grey standfirst text */
}

.architecture-scroll-item .story-content .story-meta {
    margin-bottom: 0;
}


/* Responsive - Mobile - Match Photography section dimensions - See breakpoint reference in base-sections.css */
@media (max-width: 768px), ((max-width: 1200px) and (max-height: 768px)) {
    .architecture-featured-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .architecture-scroll {
        gap: 16px;
    }

    .architecture-scroll-item {
        flex: 0 0 350px; /* Same as photo-item mobile width */
    }

    .architecture-scroll-item .story-content h2 {
        margin-top: 8px;
        margin-bottom: 12px;
    }

    .architecture-scroll-item .story-content p:not(.story-meta) {
        margin-bottom: 12px;
    }
}

@media (max-width: 480px), ((max-width: 1200px) and (max-height: 480px)) {
    .architecture-scroll {
        gap: 16px;
    }

    .architecture-scroll-item {
        flex: 0 0 300px; /* Same as photo-item small mobile width */
    }
}


/* ===== cv-section.css ===== */
/* CV Section Styles */
.cv-section {
    width: 100%;
}

.cv-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4rem;
    width: 100%;
}

.cv-entries {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cv-section .cv-entries .cv-entry {
    margin: 0 !important;
    padding: 0 !important;
}

.cv-section h2 {
    margin-bottom: 2rem;
}

.cv-section p {
    line-height: 1.2;
    margin: 0 !important;
    font-size: 1rem;
}

.cv-section .cv-entry {
    margin: 0 !important;
    padding: 0 !important;
}

.cv-entry p {
    margin: 0 !important;
    line-height: 1.2 !important;
}

.cv-section h3 {
    margin: 2rem 0 1rem 0;
}

.cv-role,
.cv-degree {
    color: var(--text-color);
    margin: 0;
}

.cv-company,
.cv-institution {
    color: var(--text-color-muted);
    margin: 0;
}

.cv-additional {
    color: var(--text-color-muted);
    margin: 0;
}

.cv-dates,
.cv-grades {
    color: var(--text-color-muted);
    margin: 0;
}

.software-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.software-list p {
    color: var(--text-color-muted);
    margin: 0;
}

/* Desktop-only alignment for specific sections */
@media (min-width: 1201px) {
    #skills-entries,
    h2[data-target="skills-entries"] {
        text-align: center;
    }

    #education-entries,
    h2[data-target="education-entries"] {
        text-align: right;
    }
}

/* Tablet Responsive */
@media (max-width: 1200px) {
    /* Paragraph size now consistent at 16px across all breakpoints */
}

/* CV Dropdown arrows - hidden on desktop */
.cv-arrow {
    display: none;
}

/* Mobile Responsive - See breakpoint reference in base-sections.css */
@media (max-width: 768px), ((max-width: 1200px) and (max-height: 768px)) {
    .cv-content {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Show arrows on mobile */
    .cv-arrow {
        display: inline;
        font-size: 1.5rem;
        margin-left: 0.5rem;
        font-family: var(--primary-font);
        font-weight: 400;
        color: var(--text-color-muted);
        transform: rotate(0deg);
        transition: transform 0.2s ease;
    }

    /* Make headers clickable on mobile */
    .cv-column h2 {
        cursor: pointer;
        user-select: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }

    /* Collapsed state - hide entries by default on mobile */
    .cv-entries {
        display: none !important;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    /* Expanded state - show entries */
    .cv-entries.expanded {
        display: flex !important;
        flex-direction: column;
        gap: 1.5rem;
        margin-bottom: 1rem;
    }

    /* Rotate arrow when expanded - 180 degrees only */
    .cv-column h2.expanded .cv-arrow {
        transform: rotate(180deg);
    }

}


/* ===== featured-story-full-bleed.css ===== */
/* Featured Story Full Bleed Styles */

.featured-story-full-bleed {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.full-bleed-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.full-bleed-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 2;
    position: relative;
    opacity: 0; /* Stay transparent until the deferred video is ready */
    transition: opacity 0.3s ease;
}

.full-bleed-background.video-loaded video {
    opacity: 1;
}

.full-bleed-background .fallback-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    opacity: 1; /* Always show fallback by default */
    transition: opacity 0.3s ease;
}

.full-bleed-background.video-loaded .fallback-image {
    opacity: 0; /* Hide fallback when video loads successfully */
}

.full-bleed-background.video-error .fallback-image {
    opacity: 1;
}

.full-bleed-background.video-error video {
    opacity: 0;
}

.full-bleed-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0 calc(100vh / 3) 0;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.story-text {
    max-width: 600px;
    text-align: center;
}

.story-text .featured-kicker {
    font-family: var(--primary-font);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--highlight-color);
    margin-bottom: 0.75rem;
}

.story-text a {
    color: inherit;
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
}

.story-text a:hover {
    transform: translateY(-2px);
}

.story-text a:hover h1,
.story-text a:hover h3,
.story-text a:hover p {
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}

/* h1 now defined in base-sections.css */
.story-text h1 {
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.story-text h3 {
    font-family: var(--serif-font);
    color: white;
    font-size: 1.5rem; /* 24px - scaled for serif font */
    margin-bottom: 2rem;
    line-height: 1.3;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.story-text .story-meta {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.story-text .story-meta i {
    color: white;
}

/* Full-bleed footer elements */
.full-bleed-footer {
    position: absolute;
    bottom: 2vw;
    left: 2vw;
    right: 2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
}

.full-bleed-footer .footer-logo {
    width: 40px;
    height: 40px;
}

.full-bleed-footer .footer-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.full-bleed-footer .copyright {
    font-size: 0.75rem;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Header overlay styles for full-bleed section */
.site-header.over-full-bleed {
    background: transparent !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
    transition: all 0.3s ease !important;
}

.site-header.over-full-bleed .site-title {
    color: white !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
}

.site-header.over-full-bleed .site-title .subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.site-header.over-full-bleed .main-nav a {
    color: white !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
}

.site-header.over-full-bleed .main-nav a:hover,
.site-header.over-full-bleed .main-nav a.active {
    color: #39e58f !important;
}


/* Mobile Responsive - See breakpoint reference in base-sections.css */
@media (max-width: 768px), ((max-width: 1200px) and (max-height: 768px)) {
    .story-text {
        max-width: 94vw;
        width: 94vw;
    }

    /* h1 now defined in base-sections.css */

    .story-text h3 {
        font-size: 1.25rem !important;
        margin-bottom: 1.5rem;
    }

    .story-text .story-meta,
    .story-text .story-meta p {
        font-size: 0.875rem !important;
    }

    .full-bleed-footer .footer-logo {
        width: 35px;
        height: 35px;
    }

    .full-bleed-footer .copyright {
        display: none;
    }
}

@media (max-width: 480px), ((max-width: 1200px) and (max-height: 480px)) {

    /* h1 now defined in base-sections.css */

    .story-text h3 {
        margin-bottom: 1rem;
    }
}


/* ===== photographs-section.css ===== */
/* Photographs Section Styles - Updated v3.3.1 - Manual spacing and text size updates */

.photographs-section {
    background: var(--content-bg);
    width: 100%;
}

.photographs-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Primary Full-Width Story */

/* Hover effect matching homepage hero section */
.photo-primary-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.photo-primary-link:hover .photo-primary-overlay {
    transform: translateY(calc(-50% - 2px));
}

.photo-primary-link:hover .photo-primary-overlay h1,
.photo-primary-link:hover .photo-primary-standfirst,
.photo-primary-link:hover .photo-primary-overlay .story-meta {
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}

.photo-primary-container {
    width: 96vw;
    margin: 0 auto 2rem auto;
    position: relative;
}

.photo-primary {
    width: 100%;
    position: relative;
}

.photo-primary-image {
    width: 100%;
    height: 70vh;
    position: relative;
    overflow: hidden;
}

.photo-primary-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Primary story text overlay - Desktop: left-positioned, center-aligned text */
.photo-primary-overlay {
    position: absolute;
    top: 50%;
    left: 6vw;
    transform: translateY(-50%);
    z-index: 20;
    color: white !important;
    pointer-events: none;
    max-width: 400px;
    text-align: center;
    transition: transform 0.3s ease;
}

.photo-primary-overlay h1 {
    color: white !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}

.photo-primary-standfirst {
    font-family: var(--serif-font);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 2rem 0;
    color: white !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
    text-wrap: pretty;
}

.photo-primary-meta {
    font-family: var(--primary-font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
    color: white !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}

.photo-primary-meta i {
    color: white !important;
    font-weight: 600;
}

/* Ensure story-meta in photo-primary is always white */
.photo-primary-overlay .story-meta {
    font-family: var(--primary-font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
    color: white !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}

.photo-primary-overlay .story-meta i {
    color: white !important;
    font-weight: 600;
}

/* Tablet Responsive */
@media (max-width: 1200px) {
    /* Primary story - switch to bottom positioning, centered */
    .photo-primary-overlay {
        top: auto;
        bottom: 36px;
        left: 50%;
        margin: 0;
        transform: translateX(-50%);
        width: 90%;
        max-width: 90%;
    }

    .photo-primary-link:hover .photo-primary-overlay {
        transform: translateX(-50%) translateY(-2px);
    }

    .photo-primary-standfirst {
        font-size: 1.25rem;
    }

}

/* Mobile Responsive - See breakpoint reference in base-sections.css */
@media (max-width: 768px), ((max-width: 1200px) and (max-height: 768px)) {
    .photo-primary-container {
        width: 92vw;
        margin-bottom: 1.5rem;
    }

    .photo-primary-standfirst {
        margin: 0 0 1.5rem 0;
    }
    
    .photo-primary-meta {
        font-size: 0.75rem;
    }

    .photo-primary-overlay .story-meta {
        font-size: 0.75rem;
    }
}


/* ===== reviews-section.css ===== */
/* Reviews Section Styles */

.reviews-section {
    background: transparent !important;
    width: 100%;
}

.reviews-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Main Layout - 2 columns */
.reviews-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px; /* Match Features section gap */
    position: relative;
    align-items: start;
    margin-bottom: 64px;
}

/* Divider line between columns */
.reviews-layout::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 100%;
    background-color: #e0e0e0;
    z-index: 10;
}

/* Primary Story - Left Column */
.reviews-primary {
    width: 100%;
}

.reviews-primary-story {
    display: flex;
    align-items: stretch; /* Make both columns same height */
    gap: 32px;
    width: 100%;
    min-height: 0; /* Allow flexbox to work properly */
}

.reviews-primary-image {
    flex: 0 0 40%;
    aspect-ratio: 4/5 !important; /* Portrait aspect ratio */
    position: relative;
    min-height: 0; /* Ensure aspect-ratio works with flexbox */
    height: auto !important; /* Let aspect-ratio control height */
    padding: 15px; /* Space for shadow */
}

.reviews-primary-image img {
    width: calc(100% - 30px); /* Account for padding */
    height: calc(100% - 30px); /* Account for padding */
    object-fit: cover;
    object-position: center;
    display: block;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
    position: absolute;
    top: 15px;
    left: 15px;
}

.reviews-primary-content {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Remove height: 100% - let it match the image height via align-items: stretch */
}

/* Primary story text styling - matches Features section primary story */
/* h1 now defined in base-sections.css */

.reviews-primary-standfirst {
    font-family: var(--serif-font);
    font-size: 1.5rem; /* 24px when scaled */
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 2rem 0;
    color: var(--text-color-muted);
}

/* Primary meta uses standard .story-meta from base-sections.css */

/* Secondary Stories - Right Column */
.reviews-secondary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
}

.reviews-secondary-story {
    width: 100%;
}

.reviews-secondary-image {
    width: 100%;
    aspect-ratio: 4/5 !important; /* Portrait aspect ratio */
    margin-bottom: 12px;
    height: auto !important; /* Let aspect-ratio control height */
    position: relative;
    padding: 15px; /* Space for shadow */
}

.reviews-secondary-image img {
    width: calc(100% - 30px); /* Account for padding */
    height: calc(100% - 30px); /* Account for padding */
    object-fit: cover;
    object-position: center;
    display: block;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
    position: absolute;
    top: 15px;
    left: 15px;
}

.reviews-secondary-content {
    text-align: left;
    margin-top: 1rem; 
}

/* Secondary headline uses standard h2 from base-sections.css */

/* Secondary meta uses standard .story-meta from base-sections.css */

/* Link styling */
.reviews-primary-image-link,
.reviews-primary-text-link,
.reviews-secondary-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.reviews-primary-text-link:hover h1,
.reviews-secondary-link:hover h2 {
    color: var(--highlight-color);
}

/* Architecture Scroller Styles */
.architecture-scroll {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    padding-bottom: 16px; /* Space for scrollbar */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Grey dividing line only for story templates */
.story-content-inner .architecture-scroll {
    border-top: 2px solid #808080;
    padding-top: 12px; /* Space below dividing line */
}

/* Custom scrollbar styling for architecture scroll */
.architecture-scroll::-webkit-scrollbar {
    height: 8px;
}

.architecture-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.architecture-scroll::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.architecture-scroll::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Scroll Items - Match Photography section dimensions */
.architecture-scroll-item {
    flex: 0 0 450px; /* Fixed width for horizontal scroll - same as photo-item */
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Architecture section image styling - match story grid 4:3 aspect ratio */
.architecture-scroll-item .story-image {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.architecture-scroll-item .story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin-top: 0 !important;
}

/* Architecture scroll area text spacing and styling */
.architecture-scroll-item .story-content h2 {
    margin-top: 16px;
    margin-bottom: 16px;
    font-size: 1.5rem !important; /* 24px headline on desktop */
}

.architecture-scroll-item .story-content p:not(.story-meta) {
    margin-bottom: 16px;
    color: var(--text-color-muted); /* Grey standfirst text */
}

.architecture-scroll-item .story-content .story-meta {
    margin-bottom: 0;
    font-family: var(--primary-font) !important; /* Innovator Grotesk font */
}

/* Tablet Responsive */
@media (max-width: 1200px) {
    .reviews-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .reviews-layout::before {
        display: none;
    }

    /* Primary story becomes horizontal on tablet */
    .reviews-primary-story {
        flex-direction: row;
        gap: 24px;
    }

    .reviews-primary-image {
        flex: 0 0 45%;
    }

    .reviews-primary-content {
        text-align: left;
    }

    .reviews-primary-standfirst {
        font-size: 1.25rem;
    }

    /* Secondary stories STAY 3-wide on tablet */
    .reviews-secondary {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    /* Architecture scroller tablet responsive - 250px width (matching mobile) */
    .architecture-scroll {
        gap: 24px;
    }

    .architecture-scroll-item {
        flex: 0 0 250px;
    }
}

/* Additional specificity to ensure styles apply */
.reviews-section .reviews-primary-image img,
.reviews-section .reviews-secondary-image img {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}

.reviews-section .reviews-primary-image,
.reviews-section .reviews-secondary-image {
    aspect-ratio: 4/5 !important;
}

/* Mobile Responsive - See breakpoint reference in base-sections.css */
@media (max-width: 768px), ((max-width: 1200px) and (max-height: 768px)) {
    .reviews-layout {
        gap: 32px;
        margin-bottom: 48px;
    }

    /* Primary story stacks vertically on mobile */
    .reviews-primary-story {
        flex-direction: column;
        gap: 16px;
    }

    .reviews-primary-image {
        flex: none;
        width: 60%;
        margin: 0 auto;
    }

    .reviews-primary-content {
        text-align: center;
    }

    /* h1 now defined in base-sections.css */

    .reviews-primary-standfirst {
        font-size: 1.25rem;
        margin-bottom: 1.5rem;
    }

    /* Meta uses standard .story-meta from base-sections.css */

    /* Secondary stories become single column on mobile */
    .reviews-secondary {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .reviews-secondary-link {
        display: grid;
        grid-template-columns: 40% 1fr;
        gap: 20px;
        align-items: start;
    }

    .reviews-secondary-image {
        margin: 0;
    }

    .reviews-secondary-content {
        text-align: left;
    }

    /* Architecture scroller mobile responsive */
    .architecture-scroll {
        gap: 16px;
    }

    .architecture-scroll-item {
        flex: 0 0 220px; /* Shrunk mobile width */
    }

    .architecture-scroll-item .story-content h2 {
        margin-top: 8px;
        margin-bottom: 12px;
        font-size: 1.25rem !important; /* 20px headline on mobile */
    }

    .architecture-scroll-item .story-content p:not(.story-meta) {
        margin-bottom: 12px;
    }
}

@media (max-width: 480px), ((max-width: 1200px) and (max-height: 480px)) {
    .architecture-scroll {
        gap: 16px;
    }

    .architecture-scroll-item {
        flex: 0 0 220px; /* Same as larger mobile width */
    }
}


/* ===== reporting-section.css ===== */
/* Reporting Section Styles */

/* Desktop: 4-wide grid */
.reporting-section .stories-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* Tablet: 2-wide grid */
@media (max-width: 1200px) {
    .reporting-section .stories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* Mobile - horizontal scroller - match architecture scroller styling - See breakpoint reference in base-sections.css */
@media (max-width: 768px), ((max-width: 1200px) and (max-height: 768px)) {
    .reporting-section .stories-grid {
        display: flex;
        flex-direction: row;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
        padding-bottom: 16px; /* Space for scrollbar */
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    .reporting-section .story-item {
        flex: 0 0 220px; /* Match architecture-scroll-item mobile width */
        display: flex;
        flex-direction: column;
        position: relative;
    }

    /* Custom scrollbar styling - match architecture scroll */
    .reporting-section .stories-grid::-webkit-scrollbar {
        height: 8px;
    }

    .reporting-section .stories-grid::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .reporting-section .stories-grid::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 4px;
    }

    .reporting-section .stories-grid::-webkit-scrollbar-thumb:hover {
        background: #a1a1a1;
    }
}

@media (max-width: 480px), ((max-width: 1200px) and (max-height: 480px)) {
    .reporting-section .story-item {
        flex: 0 0 220px; /* Match architecture-scroll-item small mobile width */
    }
}


/* ===== solar-section.css ===== */
/* Solar Special Report Section Styles */

.solar-section .strategy-intro {
    padding-top: 0;
    padding-bottom: 4rem;
}

.solar-kicker {
    font-family: var(--primary-font);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cr-cobalt);
    margin-bottom: -12px;
}

/* Desktop: 3-wide grid */
.solar-section .stories-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Tablet: 2-wide grid */
@media (max-width: 1200px) {
    .solar-section .stories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* Mobile - horizontal scroller */
@media (max-width: 768px), ((max-width: 1200px) and (max-height: 768px)) {
    .solar-section .stories-grid {
        display: flex;
        flex-direction: row;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
        padding-bottom: 16px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .solar-section .story-item {
        flex: 0 0 220px;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .solar-section .stories-grid::-webkit-scrollbar {
        height: 8px;
    }

    .solar-section .stories-grid::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .solar-section .stories-grid::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 4px;
    }

    .solar-section .stories-grid::-webkit-scrollbar-thumb:hover {
        background: #a1a1a1;
    }
}

@media (max-width: 480px), ((max-width: 1200px) and (max-height: 480px)) {
    .solar-section .story-item {
        flex: 0 0 220px;
    }
}


/* ===== video-projects-section.css ===== */
/* Video Projects Section Styles */

.video-projects-content .strategy-intro {
    padding-bottom: 4rem;
}

.video-projects-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Video Grid - Desktop: 4 columns */
.video-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* Individual video item */
.video-item {
    display: flex;
    flex-direction: column;
}

/* Video thumbnail - 9:16 portrait */
.video-thumbnail {
    position: relative;
    aspect-ratio: 9/16;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: #111;
}

.video-thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Play button overlay */
.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    pointer-events: none;
}

.video-play-btn svg {
    width: 20px;
    height: 20px;
}

.video-thumbnail:hover .video-play-btn {
    background: rgba(0, 0, 0, 0.65);
}

/* Story content under thumbnails */
.video-item .story-content h2 {
    margin-top: 16px;
    margin-bottom: 8px;
    transition: color 0.3s ease;
    cursor: pointer;
}

.video-item:hover .story-content h2 {
    color: var(--link-hover-color);
}

/* Video Lightbox */
.video-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.66);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.video-lightbox.active {
    display: flex;
}

.video-lightbox-player {
    max-height: 85vh;
    max-width: 90vw;
    border-radius: 8px;
}

.video-lightbox-close {
    position: absolute;
    top: 24px;
    left: 24px;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 8px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.video-lightbox-close:hover {
    opacity: 1;
}

/* Dark mode lightbox */
@media (prefers-color-scheme: dark) {
    .video-lightbox {
        background: rgba(0, 0, 0, 0.66);
    }
}

/* Tablet + Mobile: horizontal scroller */
@media (max-width: 1200px) {
    .video-grid {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        gap: 16px;
        padding-bottom: 1rem;
        padding-right: 2vw;
    }

    .video-grid::-webkit-scrollbar {
        height: 8px;
    }

    .video-grid::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .video-grid::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 4px;
    }

    .video-grid::-webkit-scrollbar-thumb:hover {
        background: #a1a1a1;
    }

    .video-item {
        flex: 0 0 250px;
        scroll-snap-align: start;
    }

    .video-item:last-child {
        margin-right: 0;
    }
}

/* Mobile Responsive - See breakpoint reference in base-sections.css */
@media (max-width: 768px), ((max-width: 1200px) and (max-height: 768px)) {
    .video-grid {
        padding-right: 4vw;
    }

    .video-item {
        flex: 0 0 200px;
    }

    .video-item .story-content h2 {
        margin-top: 12px;
        margin-bottom: 6px;
    }

    .video-play-btn {
        width: 44px;
        height: 44px;
    }

    .video-play-btn svg {
        width: 16px;
        height: 16px;
    }

    .video-lightbox-close {
        top: 16px;
        left: 16px;
    }
}

/* Small Mobile Responsive - See breakpoint reference in base-sections.css */
@media (max-width: 480px), ((max-width: 1200px) and (max-height: 480px)) {
    .video-item {
        flex: 0 0 170px;
    }
}