/**
 * MDMX WordPress - Layout Styles
 *
 * Complete CSS for all 9 layout modes plus base block styles.
 * All layouts are responsive with appropriate breakpoints.
 *
 * @package MDMX_WordPress
 * @since 1.0.0
 */

/* ========================================================================
   Folder Gallery — [mdmx_folder_gallery] thumbnail row + stacked sections
   ======================================================================== */

/* Any time the browser scrolls to one of these elements (initial page
   load with a #mdmx-page-<slug> hash, thumbnail click + scrollIntoView,
   in-page nav, etc.), reserve --mdmx-scroll-margin-top of space at the
   top so a typical WP sticky header doesn't overlay the first heading.
   Themes with a different header height can override the variable:
     :root { --mdmx-scroll-margin-top: 120px; }
   Default 96px covers most stock themes. Per 2026-05-19 user feedback
   "when the page jumps back to the thumbnails, it's not scrolling to
   the top, the first heading is a bit hidden." */
.mdmx-folder-gallery-wrapper,
.mdmx-folder-gallery-section,
.mdmx-page-wrapper {
    scroll-margin-top: var(--mdmx-scroll-margin-top, 96px);
}

.mdmx-folder-gallery-wrapper {
    width: 100%;
}

/* Gallery grid — tighter than the old 3-up layout, sharp edges, more per row.
   Matches the user's Soho-House reference (titles always visible on image,
   hover brings up the excerpt). Columns default to 5 but the shortcode's
   `columns` attribute overrides. */
.mdmx-folder-gallery {
    display: grid;
    grid-template-columns: repeat(var(--mdmx-gallery-cols, 5), minmax(0, 1fr));
    gap: 8px;
    padding: 12px 0 28px;
}

@media (max-width: 1100px) {
    .mdmx-folder-gallery {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .mdmx-folder-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 500px) {
    .mdmx-folder-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mdmx-folder-gallery-item {
    display: block;
    position: relative;
    overflow: hidden;
    /* No rounded corners — per 2026-04-23 design feedback. */
    text-decoration: none;
    color: inherit;
    aspect-ratio: 5 / 4;
    background: #1f2937;
    transition: transform 180ms ease;
}

.mdmx-folder-gallery-item:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

.mdmx-folder-gallery-thumb {
    position: relative;
    width: 100%;
    height: 100%;
}

.mdmx-folder-gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 260ms ease, filter 260ms ease;
}

.mdmx-folder-gallery-item:hover .mdmx-folder-gallery-thumb img {
    transform: scale(1.03);
    filter: brightness(0.7);
}

.mdmx-folder-gallery-noimg {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #4b5563, #1f2937);
}

/* Title bar — always visible along the bottom of the tile, bottom-right
   aligned per 2026-04-23 design feedback. White text over a subtle
   dark-to-transparent gradient for readability on any image. The <h3>
   uses no font-family override so the WP theme's heading font cascades
   through naturally. */
.mdmx-folder-gallery-titlebar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 14px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.0) 100%
    );
    color: #fff;
    text-align: right;
    pointer-events: none;
}

.mdmx-folder-gallery-title {
    margin: 0 !important;
    /* No font-family — inherit theme h3 font. */
    /* Cap font-size: Enfold and many themes style h3 at 20-32px which is
       way too big for a thumbnail caption. Force a sensible size; theme
       font family still cascades. */
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* Hover excerpt — shown ABOVE the always-visible title. Fades in + expands
   max-height so the transition looks smooth. */
.mdmx-folder-gallery-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 42px; /* clear the title bar */
    padding: 0 14px;
    color: rgba(255, 255, 255, 0.95);
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

.mdmx-folder-gallery-item:hover .mdmx-folder-gallery-overlay,
.mdmx-folder-gallery-item:focus-visible .mdmx-folder-gallery-overlay {
    opacity: 1;
}

.mdmx-folder-gallery-excerpt {
    margin: 0;
    font-size: 0.82em;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Stacked page sections — each pins an anchor id and gets smooth scroll offset
   to clear sticky WordPress admin bars / headers. */
.mdmx-folder-gallery-section {
    scroll-margin-top: 64px;
    padding-top: 8px;
}

.mdmx-folder-gallery-wrapper {
    scroll-behavior: smooth;
}

/* Breadcrumb under each project section heading — inherits the section's
   text color so it tones with the project's bg + heading color (inline
   style overrides if the section carries one). */
.mdmx-breadcrumb {
    font-size: 0.85em;
    line-height: 1.4;
    margin: -4px 0 18px 0;
    opacity: 0.75;
}

.mdmx-breadcrumb-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    transition: opacity 120ms ease, border-color 120ms ease;
}

.mdmx-breadcrumb-link:hover,
.mdmx-breadcrumb-link:focus {
    opacity: 1;
    border-bottom-color: currentColor;
}

.mdmx-breadcrumb-sep {
    margin: 0 6px;
    opacity: 0.55;
}

.mdmx-breadcrumb-current {
    font-weight: 600;
    opacity: 1;
}

/* ========================================================================
   Page Wrapper — full viewport width, carries page background color.
   Enfold-proof breakout: !important on the margins to beat the theme's
   section padding, plus position:relative so the calc works even inside
   containers with max-width. The left/right trick ensures the wrapper
   spans the full viewport regardless of the parent container's width. */

.mdmx-page-wrapper {
    position: relative !important;
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 2.5em 0 !important;
}

.mdmx-page-wrapper + .mdmx-page-wrapper {
    margin-top: 0;
}

.mdmx-page-inner {
    width: 100%;
    max-width: var(--mdmx-w-desktop, 1200px);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(16px, 3vw, 40px);
    padding-right: clamp(16px, 3vw, 40px);
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .mdmx-page-inner {
        max-width: var(--mdmx-w-tablet, 768px);
    }
}

@media (max-width: 640px) {
    .mdmx-page-inner {
        max-width: 100%;
        width: var(--mdmx-w-phone, 100%);
        padding-left: clamp(12px, 4vw, 20px);
        padding-right: clamp(12px, 4vw, 20px);
    }
}

/* ========================================================================
   Image + Text magazine block — image on one side, heading/subheading/body
   on the other. Stacks vertically below 700px so mobile is readable.
   ======================================================================== */

.mdmx-image-text {
    margin: 0 0 2em 0;
}

.mdmx-image-text-media img {
    display: block;
    width: 100%;
    height: auto;
}

.mdmx-image-text-noimg {
    min-height: 280px;
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
}

.mdmx-image-text-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mdmx-image-text-heading {
    margin: 0;
    line-height: 1.2;
    /* Inherits theme's h3/h2 font + size unless overridden by block style. */
}

.mdmx-image-text-subheading {
    margin: 0;
    opacity: 0.75;
    font-size: 0.95em;
    line-height: 1.4;
}

.mdmx-image-text-content {
    margin: 0;
    line-height: 1.6;
}

.mdmx-image-text-content p {
    margin: 0 0 0.75em 0;
}

.mdmx-image-text-content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 700px) {
    .mdmx-image-text {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    /* On mobile, always image-first regardless of side setting. */
    .mdmx-image-side-right .mdmx-image-text-media {
        order: -1;
    }
}

/* ========================================================================
   Base Block Styles (shared across all layouts)
   ======================================================================== */

.mdmx-content {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

.mdmx-content *,
.mdmx-content *::before,
.mdmx-content *::after {
    box-sizing: border-box;
}

.mdmx-block {
    margin-bottom: 1.25em;
}

.mdmx-block:last-child {
    margin-bottom: 0;
}

/* Tighten consecutive text-like blocks — heading → subheading → text should
   read as one coherent block, not three disconnected sections. */
.mdmx-block.mdmx-heading + .mdmx-block.mdmx-subheading,
.mdmx-block.mdmx-subheading + .mdmx-block.mdmx-text,
.mdmx-block.mdmx-heading + .mdmx-block.mdmx-text,
.mdmx-block.mdmx-text + .mdmx-block.mdmx-text {
    margin-top: -0.75em;
}

/* Heading */
.mdmx-heading {
    line-height: 1.3;
    margin-top: 0;
}

/* Subheading */
.mdmx-subheading {
    line-height: 1.4;
    margin-top: 0;
}

/* Text */
.mdmx-text {
    line-height: 1.7;
}

.mdmx-text p {
    margin-top: 0;
    margin-bottom: 0.75em;
}

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

.mdmx-text a {
    text-decoration: underline;
}

.mdmx-text ul,
.mdmx-text ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.mdmx-text blockquote {
    margin: 0.75em 0;
    padding-left: 1em;
    border-left: 3px solid #d1d5db;
    font-style: italic;
}

/* Image */
.mdmx-image {
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0;
}

.mdmx-image img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.mdmx-caption {
    font-size: 0.875em;
    color: #6b7280;
    text-align: center;
    margin-top: 0.5em;
    padding: 0;
    font-style: normal;
}

/* Background color support */
.mdmx-has-bgcolor {
    padding: 2em;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

/* Multiple shortcode blocks on one page should not stick together */
.mdmx-content + .mdmx-content,
.mdmx-page-list + .mdmx-content,
.mdmx-content + .mdmx-page-list,
.mdmx-page-list + .mdmx-page-list {
    margin-top: 2em;
}

/* Image row block */
.mdmx-image-row {
    margin-top: 1em;
    margin-bottom: 1.25em;
}

.mdmx-image-row img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

@media (max-width: 640px) {
    .mdmx-image-row {
        flex-direction: column !important;
    }
}

/* Page list */
.mdmx-page-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mdmx-page-list-item {
    padding: 0.75em 0;
    border-bottom: 1px solid #e5e7eb;
}

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

.mdmx-page-link {
    font-weight: 500;
    text-decoration: none;
}

.mdmx-page-link:hover {
    text-decoration: underline;
}

.mdmx-page-title {
    font-weight: 500;
}

.mdmx-page-date {
    font-size: 0.85em;
    color: #9ca3af;
    margin-left: 0.75em;
}

/* Folder */
.mdmx-folder-header {
    margin-bottom: 1.5em;
}

.mdmx-folder-name {
    margin: 0;
    line-height: 1.3;
}

.mdmx-folder-page {
    margin-bottom: 2em;
    padding-bottom: 2em;
    border-bottom: 1px solid #e5e7eb;
}

.mdmx-folder-page:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mdmx-page-heading {
    margin-top: 0;
    margin-bottom: 0.75em;
}

/* Pagination */
.mdmx-pagination-info {
    margin-top: 1em;
    font-size: 0.9em;
    color: #6b7280;
}

/* Empty state */
.mdmx-empty {
    color: #6b7280;
    font-style: italic;
}

/* Error (visible to editors only) */
.mdmx-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 0.75em 1em;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Fallback */
.mdmx-fallback {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    padding: 1.5em;
    border-radius: 6px;
    text-align: center;
    font-size: 0.95em;
}


/* ========================================================================
   Layout: Default
   Clean, stacked blocks. Heading centered, text left-aligned,
   max-width 800px, generous spacing.
   ======================================================================== */

.mdmx-layout-default {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 2em 1em;
}

.mdmx-layout-default .mdmx-heading {
    text-align: center;
    margin-bottom: 1.5em;
    font-size: 2em;
}

.mdmx-layout-default .mdmx-subheading {
    text-align: center;
    margin-bottom: 1.25em;
    font-size: 1.4em;
    color: #4b5563;
}

.mdmx-layout-default .mdmx-text {
    text-align: left;
    margin-bottom: 1.5em;
}

.mdmx-layout-default .mdmx-block {
    margin-bottom: 1.5em;
}

.mdmx-layout-default .mdmx-image {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}


/* ========================================================================
   Layout: Cards
   Each page rendered as a card with shadow, rounded corners, padding.
   Used for page lists primarily.
   ======================================================================== */

.mdmx-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5em;
    padding: 1em 0;
}

.mdmx-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mdmx-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.mdmx-card-body {
    padding: 1.5em;
}

.mdmx-card-title {
    margin: 0 0 0.5em;
    font-size: 1.15em;
    line-height: 1.4;
}

.mdmx-card-title a {
    text-decoration: none;
    color: inherit;
}

.mdmx-card-title a:hover {
    text-decoration: underline;
}

.mdmx-card-date {
    font-size: 0.85em;
    color: #9ca3af;
}

/* Cards layout for content blocks */
.mdmx-layout-cards {
    padding: 1em 0;
}

.mdmx-layout-cards .mdmx-block {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 1.5em;
    margin-bottom: 1.5em;
}

.mdmx-layout-cards .mdmx-image {
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
}

.mdmx-layout-cards .mdmx-image img {
    border-radius: 0;
}

/* Has bgcolor override for cards */
.mdmx-has-bgcolor .mdmx-card {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.mdmx-has-bgcolor .mdmx-layout-cards .mdmx-block {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 640px) {
    .mdmx-cards-grid {
        grid-template-columns: 1fr;
    }
}


/* ========================================================================
   Layout: Magazine
   First block (heading) is large/hero, remaining in two-column layout
   on desktop, single column on mobile.
   ======================================================================== */

.mdmx-layout-magazine {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
}

.mdmx-magazine-hero {
    margin-bottom: 2em;
    padding-bottom: 2em;
    border-bottom: 2px solid #e5e7eb;
}

.mdmx-magazine-hero .mdmx-heading {
    font-size: 2.5em;
    line-height: 1.2;
    margin-bottom: 0;
}

.mdmx-magazine-hero .mdmx-subheading {
    font-size: 1.6em;
    line-height: 1.3;
    margin-bottom: 0;
}

.mdmx-magazine-hero .mdmx-text {
    font-size: 1.2em;
    line-height: 1.6;
}

.mdmx-magazine-hero .mdmx-image img {
    border-radius: 8px;
    width: 100%;
}

.mdmx-magazine-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
}

.mdmx-magazine-col-item {
    margin-bottom: 1.5em;
}

.mdmx-magazine-col-item .mdmx-heading {
    font-size: 1.3em;
}

@media (max-width: 768px) {
    .mdmx-magazine-hero .mdmx-heading {
        font-size: 1.8em;
    }

    .mdmx-magazine-hero .mdmx-text {
        font-size: 1.05em;
    }

    .mdmx-magazine-columns {
        grid-template-columns: 1fr;
        gap: 1em;
    }
}


/* ========================================================================
   Layout: Minimal
   No borders, no shadows, tight spacing. Clean typography
   with subtle dividers between blocks.
   ======================================================================== */

.mdmx-layout-minimal {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
}

.mdmx-layout-minimal .mdmx-block {
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid #f3f4f6;
}

.mdmx-layout-minimal .mdmx-block:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mdmx-layout-minimal .mdmx-heading {
    font-size: 1.6em;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.mdmx-layout-minimal .mdmx-subheading {
    font-size: 1.2em;
    font-weight: 500;
    color: #6b7280;
}

.mdmx-layout-minimal .mdmx-text {
    font-size: 1em;
    line-height: 1.75;
}

.mdmx-layout-minimal .mdmx-image {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

.mdmx-layout-minimal .mdmx-image img {
    border-radius: 2px;
}

.mdmx-layout-minimal .mdmx-caption {
    font-size: 0.8em;
}

/* Minimal page list */
.mdmx-page-list.mdmx-layout-minimal .mdmx-page-list-item {
    border-bottom-color: #f3f4f6;
    padding: 0.5em 0;
}


/* ========================================================================
   Layout: Sidebar
   Two-column: main content 70% left, metadata sidebar 30% right.
   ======================================================================== */

.mdmx-layout-sidebar {
    display: flex;
    gap: 2.5em;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5em 1em;
}

.mdmx-sidebar-main {
    flex: 0 0 70%;
    max-width: 70%;
    min-width: 0;
}

.mdmx-sidebar-aside {
    flex: 0 0 calc(30% - 2.5em);
    max-width: calc(30% - 2.5em);
    padding: 1.5em;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    align-self: flex-start;
    position: sticky;
    top: 2em;
}

.mdmx-sidebar-title {
    margin: 0 0 1em;
    font-size: 1.1em;
    line-height: 1.4;
    padding-bottom: 0.75em;
    border-bottom: 2px solid #e5e7eb;
}

.mdmx-sidebar-meta {
    margin-bottom: 0.75em;
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}

.mdmx-sidebar-label {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    font-weight: 600;
}

.mdmx-sidebar-value {
    font-size: 0.9em;
    color: #374151;
}

/* Has bgcolor override for sidebar */
.mdmx-has-bgcolor .mdmx-sidebar-aside {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

.mdmx-has-bgcolor .mdmx-sidebar-title {
    border-bottom-color: rgba(255, 255, 255, 0.25);
}

.mdmx-has-bgcolor .mdmx-sidebar-label {
    color: inherit;
    opacity: 0.6;
}

.mdmx-has-bgcolor .mdmx-sidebar-value {
    color: inherit;
}

@media (max-width: 768px) {
    .mdmx-layout-sidebar {
        flex-direction: column;
        gap: 1.5em;
    }

    .mdmx-sidebar-main,
    .mdmx-sidebar-aside {
        flex: none;
        max-width: 100%;
    }

    .mdmx-sidebar-aside {
        position: static;
    }
}


/* ========================================================================
   Layout: Full Width
   Edge-to-edge blocks, heading as full-width banner with background
   color overlay, text blocks with generous padding.
   ======================================================================== */

.mdmx-layout-full-width {
    width: 100%;
    padding: 0;
}

.mdmx-layout-full-width .mdmx-heading {
    background: #111827;
    color: #ffffff;
    padding: 2.5em 2em;
    margin-bottom: 0;
    text-align: center;
    font-size: 2.2em;
    line-height: 1.3;
}

.mdmx-layout-full-width .mdmx-subheading {
    background: #1f2937;
    color: #e5e7eb;
    padding: 1.5em 2em;
    margin-bottom: 0;
    text-align: center;
    font-size: 1.4em;
}

.mdmx-layout-full-width .mdmx-text {
    padding: 2em;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    font-size: 1.05em;
    line-height: 1.8;
}

.mdmx-layout-full-width .mdmx-image {
    margin: 0;
    padding: 0;
}

.mdmx-layout-full-width .mdmx-image img {
    border-radius: 0;
    width: 100%;
}

.mdmx-layout-full-width .mdmx-image .mdmx-caption {
    padding: 0.75em 2em;
}

/* Full-width with bgcolor: heading uses folder color with overlay */
.mdmx-has-bgcolor.mdmx-layout-full-width .mdmx-heading {
    background: rgba(0, 0, 0, 0.3);
    color: inherit;
}

.mdmx-has-bgcolor.mdmx-layout-full-width .mdmx-subheading {
    background: rgba(0, 0, 0, 0.15);
    color: inherit;
}

@media (max-width: 768px) {
    .mdmx-layout-full-width .mdmx-heading {
        font-size: 1.6em;
        padding: 1.5em 1em;
    }

    .mdmx-layout-full-width .mdmx-subheading {
        padding: 1em;
        font-size: 1.15em;
    }

    .mdmx-layout-full-width .mdmx-text {
        padding: 1.5em 1em;
    }
}


/* ========================================================================
   Page List Layout Overrides
   ======================================================================== */

/* Default page list */
.mdmx-page-list.mdmx-layout-default {
    max-width: 800px;
}

/* Cards page list handled by .mdmx-cards-grid */

/* Magazine page list */
.mdmx-page-list.mdmx-layout-magazine {
    max-width: 1000px;
}

.mdmx-page-list.mdmx-layout-magazine .mdmx-page-list-item:first-child {
    font-size: 1.2em;
    padding: 1em 0;
    border-bottom: 2px solid #e5e7eb;
}

/* Full-width page list */
.mdmx-page-list.mdmx-layout-full-width {
    max-width: 100%;
}

.mdmx-page-list.mdmx-layout-full-width .mdmx-page-list-item {
    padding: 1em 2em;
}

/* Sidebar page list */
.mdmx-page-list.mdmx-layout-sidebar {
    max-width: 800px;
}


/* ========================================================================
   Folder Wrapper Layout Overrides
   ======================================================================== */

.mdmx-folder-wrapper {
    margin: 0 auto;
}

.mdmx-folder-wrapper.mdmx-layout-default {
    max-width: 800px;
    padding: 2em 1em;
}

.mdmx-folder-wrapper.mdmx-layout-cards {
    padding: 1em;
}

.mdmx-folder-wrapper.mdmx-layout-cards .mdmx-folder-page {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 1.5em;
    margin-bottom: 1.5em;
    border-bottom: none;
}

.mdmx-folder-wrapper.mdmx-layout-magazine {
    max-width: 1000px;
    padding: 1em;
}

.mdmx-folder-wrapper.mdmx-layout-minimal {
    max-width: 720px;
    padding: 1em;
}

.mdmx-folder-wrapper.mdmx-layout-minimal .mdmx-folder-page {
    border-bottom-color: #f3f4f6;
    padding-bottom: 1em;
    margin-bottom: 1em;
}

.mdmx-folder-wrapper.mdmx-layout-full-width {
    max-width: 100%;
    padding: 0;
}

.mdmx-folder-wrapper.mdmx-layout-full-width .mdmx-folder-page {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}


/* ========================================================================
   Responsive Utilities
   ======================================================================== */

@media (max-width: 480px) {
    .mdmx-layout-default,
    .mdmx-layout-minimal {
        padding: 1em 0.75em;
    }

    .mdmx-has-bgcolor {
        padding: 1.5em 1em;
    }

    .mdmx-heading {
        font-size: 1.5em !important;
    }
}


/* ========================================================================
   Layout: Portfolio
   4-column responsive project grid with cover images, title overlays,
   and hover description overlay. Tight gaps, no border-radius.
   ======================================================================== */

.mdmx-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 0;
}

.mdmx-portfolio-card {
    position: relative;
    overflow: hidden;
}

.mdmx-portfolio-image {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: #e5e7eb;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.mdmx-portfolio-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5em 1em 1em;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
    z-index: 1;
}

.mdmx-portfolio-title {
    color: #ffffff;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.3;
    display: block;
}

.mdmx-portfolio-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5em;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.mdmx-portfolio-card:hover .mdmx-portfolio-hover-overlay {
    opacity: 1;
}

.mdmx-portfolio-description {
    color: #ffffff;
    font-size: 0.9em;
    line-height: 1.5;
    text-align: center;
    margin: 0 0 1em;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mdmx-portfolio-link {
    color: #ffffff;
    font-size: 0.85em;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 2px;
    transition: border-color 0.2s ease;
}

.mdmx-portfolio-link:hover {
    border-color: #ffffff;
    color: #ffffff;
}

@media (max-width: 1024px) {
    .mdmx-portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .mdmx-portfolio-grid {
        grid-template-columns: 1fr;
    }

    .mdmx-portfolio-title {
        font-size: 0.95em;
    }
}


/* ========================================================================
   Layout: Editorial
   Centered article layout with elegant serif title, author/date metadata,
   full-width hero image, and multi-image grids for consecutive images.
   ======================================================================== */

.mdmx-layout-editorial {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 2em 1em;
}

.mdmx-editorial-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2.75em;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.5em;
    text-align: center;
    letter-spacing: -0.02em;
}

.mdmx-layout-editorial .mdmx-subheading {
    font-style: italic;
    font-size: 1.25em;
    line-height: 1.5;
    color: #b08d57;
    margin-bottom: 1.25em;
}

.mdmx-layout-editorial .mdmx-text {
    font-size: 1.125em;
    line-height: 1.7;
    margin-bottom: 1.5em;
}

.mdmx-editorial-hero-image {
    margin: 2em -1em;
    width: calc(100% + 2em);
}

.mdmx-editorial-hero-image .mdmx-image {
    margin: 0;
    max-width: none;
}

.mdmx-editorial-hero-image .mdmx-image img {
    width: 100%;
    border-radius: 0;
}

/* Multi-image grids */
.mdmx-editorial-image-grid {
    display: grid;
    gap: 8px;
    margin: 1.5em 0;
}

.mdmx-editorial-image-grid .mdmx-image {
    margin: 0;
}

.mdmx-editorial-image-grid .mdmx-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* 2 images: side by side */
.mdmx-editorial-grid-2 {
    grid-template-columns: 1fr 1fr;
}

/* 3 images: one large left, two stacked right */
.mdmx-editorial-grid-3 {
    grid-template-columns: 60% 1fr;
    grid-template-rows: 1fr 1fr;
}

.mdmx-editorial-grid-3 .mdmx-image:first-child {
    grid-row: 1 / 3;
}

/* 4+ images: 2x2 grid */
.mdmx-editorial-grid-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
}

@media (max-width: 768px) {
    .mdmx-editorial-title {
        font-size: 2em;
    }

    .mdmx-editorial-hero-image {
        margin: 1.5em 0;
        width: 100%;
    }

    .mdmx-editorial-grid-2,
    .mdmx-editorial-grid-3 {
        grid-template-columns: 1fr;
    }

    .mdmx-editorial-grid-3 .mdmx-image:first-child {
        grid-row: auto;
    }
}

@media (max-width: 480px) {
    .mdmx-editorial-title {
        font-size: 1.6em;
    }

    .mdmx-layout-editorial .mdmx-text {
        font-size: 1em;
    }
}


/* ========================================================================
   Layout: Project Detail
   Two-column case study: images stacked left (60%), sticky metadata
   sidebar right (40%) with custom fields, team, tags, social share.
   ======================================================================== */

.mdmx-layout-project-detail {
    display: flex;
    gap: 2.5em;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 2em 1em;
}

.mdmx-project-detail-left {
    flex: 0 0 60%;
    max-width: 60%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mdmx-project-detail-left .mdmx-image {
    margin: 0;
}

.mdmx-project-detail-left .mdmx-image img {
    width: 100%;
    border-radius: 0;
}

.mdmx-project-detail-right {
    flex: 0 0 calc(40% - 2.5em);
    max-width: calc(40% - 2.5em);
    position: sticky;
    top: 2rem;
    align-self: flex-start;
}

.mdmx-project-detail-title {
    font-size: 1.75em;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 1em;
}

/* Custom fields metadata list */
.mdmx-project-detail-meta {
    margin: 0 0 1.5em;
    padding: 0;
}

.mdmx-project-detail-meta-item {
    margin-bottom: 0.6em;
}

.mdmx-project-detail-meta dt {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    font-weight: 600;
    font-variant: small-caps;
    margin: 0;
}

.mdmx-project-detail-meta dd {
    font-size: 0.95em;
    color: #1f2937;
    margin: 0.1em 0 0;
}

/* Sections: Team, Photography */
.mdmx-project-detail-section {
    margin-bottom: 1.25em;
    padding-top: 1em;
    border-top: 1px solid #e5e7eb;
}

.mdmx-project-detail-section-label {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    font-weight: 600;
    margin: 0 0 0.3em;
}

.mdmx-project-detail-section p {
    font-size: 0.95em;
    color: #1f2937;
    margin: 0;
    line-height: 1.5;
}

/* Tags */
.mdmx-project-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-top: 1.25em;
    padding-top: 1em;
    border-top: 1px solid #e5e7eb;
}

.mdmx-project-detail-tag {
    display: inline-block;
    font-size: 0.8em;
    padding: 0.3em 0.75em;
    background: #f3f4f6;
    color: #374151;
    border-radius: 999px;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.mdmx-project-detail-tag:hover {
    background: #e5e7eb;
}

/* Project-detail text blocks in right column */
.mdmx-project-detail-right .mdmx-text {
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 1em;
}

.mdmx-project-detail-right .mdmx-heading {
    font-size: 1.15em;
    margin-bottom: 0.75em;
}

.mdmx-project-detail-right .mdmx-subheading {
    font-size: 1em;
    margin-bottom: 0.5em;
    color: #6b7280;
}

@media (max-width: 768px) {
    .mdmx-layout-project-detail {
        flex-direction: column;
        gap: 2em;
    }

    .mdmx-project-detail-left,
    .mdmx-project-detail-right {
        flex: none;
        max-width: 100%;
    }

    .mdmx-project-detail-right {
        position: static;
    }

    .mdmx-project-detail-title {
        font-size: 1.5em;
    }
}


/* ========================================================================
   Metadata Line (author + date)
   ======================================================================== */

.mdmx-metadata-line {
    font-size: 0.875em;
    color: #9ca3af;
    margin-bottom: 1.5em;
    text-align: center;
    line-height: 1.5;
}

.mdmx-metadata-line time {
    color: inherit;
}

/* In project-detail, metadata line is left-aligned */
.mdmx-layout-project-detail .mdmx-metadata-line {
    text-align: left;
    margin-bottom: 1em;
}

/* Custom fields block (standalone) */
.mdmx-custom-fields {
    margin: 0 0 1.5em;
    padding: 0;
}

.mdmx-custom-field {
    margin-bottom: 0.5em;
}

.mdmx-custom-field dt {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    font-weight: 600;
    margin: 0;
}

.mdmx-custom-field dd {
    font-size: 0.95em;
    color: #1f2937;
    margin: 0.1em 0 0;
}


/* ========================================================================
   Social Share Icons
   ======================================================================== */

.mdmx-social-share {
    display: inline-flex;
    gap: 0.75em;
    margin-top: 1.5em;
    padding-top: 1em;
    border-top: 1px solid #e5e7eb;
}

.mdmx-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #9ca3af;
    border-radius: 50%;
    transition: color 0.2s ease, background-color 0.2s ease;
    text-decoration: none;
}

.mdmx-share-link:hover {
    color: #1f2937;
    background-color: #f3f4f6;
}

.mdmx-share-link svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Social share in project-detail */
.mdmx-project-detail-right .mdmx-social-share {
    margin-top: 1.5em;
}

/* Social share in editorial */
.mdmx-layout-editorial .mdmx-social-share {
    display: flex;
    justify-content: center;
    margin-top: 2em;
}


/* ========================================================================
   Admin Preview Blocks for New Layouts
   ======================================================================== */

/* Portfolio preview */
.mdmx-preview-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    margin-top: 8px;
}

.mdmx-preview-portfolio-card {
    aspect-ratio: 4 / 3;
    background: #d1d5db;
    position: relative;
}

.mdmx-preview-portfolio-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
}

/* Editorial preview */
.mdmx-preview-editorial {
    text-align: center;
    margin-top: 8px;
}

.mdmx-preview-editorial-title {
    height: 14px;
    width: 70%;
    margin: 0 auto 6px;
    background: #6b7280;
    border-radius: 2px;
}

.mdmx-preview-editorial-meta {
    height: 6px;
    width: 35%;
    margin: 0 auto 10px;
    background: #d1d5db;
    border-radius: 2px;
}

.mdmx-preview-editorial-hero {
    height: 40px;
    background: #d1d5db;
    margin-bottom: 8px;
}

/* Project detail preview */
.mdmx-preview-project-detail {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.mdmx-preview-project-images {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mdmx-preview-project-img {
    height: 30px;
    background: #d1d5db;
}

.mdmx-preview-project-sidebar {
    flex: 1;
}

/* ─── Lazy folder-gallery placeholders ─────────────────────────────────
   Sections that haven't been hydrated yet reserve enough vertical space
   for the loading panel to actually be visible (the spinner + "Loading…"
   label must occupy real estate the user can see). Once loaded, the
   section sizes to its real content. */
.mdmx-folder-gallery-section.mdmx-lazy-placeholder {
    min-height: 320px;
    position: relative;
}
.mdmx-folder-gallery-section.mdmx-lazy-placeholder[data-loaded="1"] {
    min-height: 0;
}

/* Loading panel: spinner above a clear "Loading…" label, vertically
   centered. The label is the critical UX bit — an unlabeled spinner is
   too easy to miss when the lazy fetch is fast. The 0.15s fade-in
   prevents flickering on near-instant loads. */
.mdmx-lazy-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    pointer-events: none;
    opacity: 0;
    animation: mdmxLazyFadeIn 0.2s ease-in 0.05s forwards;
}
.mdmx-lazy-spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.12);
    border-top-color: rgba(0, 0, 0, 0.55);
    animation: mdmxLazySpin 0.9s linear infinite;
}
.mdmx-lazy-label {
    font-size: 13px;
    letter-spacing: 0.04em;
    color: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    font-weight: 500;
}
.mdmx-has-bgcolor .mdmx-lazy-spinner {
    border-color: rgba(255, 255, 255, 0.18);
    border-top-color: rgba(255, 255, 255, 0.75);
}
.mdmx-has-bgcolor .mdmx-lazy-label {
    color: rgba(255, 255, 255, 0.8);
}
.mdmx-lazy-error {
    text-align: center;
    padding: 24px 12px;
    color: inherit;
    opacity: 0.8;
}
.mdmx-lazy-error a {
    text-decoration: underline;
}
@keyframes mdmxLazySpin {
    to { transform: rotate(360deg); }
}
@keyframes mdmxLazyFadeIn {
    to { opacity: 1; }
}

/* ─── Project-change transition (v1.13.1) ────────────────────────────
   Class added by mdmx-lazy.js when a thumbnail click promotes a section
   to first sibling. Subtle slide+fade so the move-to-first reads as a
   transition rather than a hard cut. Duration MUST stay in sync with
   PROMOTE_ANIM_MS in mdmx-lazy.js (450 ms). */
.mdmx-folder-gallery-section.mdmx-just-promoted {
    animation: mdmxPromoteIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mdmxPromoteIn {
    0%   { opacity: 0.35; transform: translateY(-12px); }
    100% { opacity: 1;    transform: translateY(0); }
}

/* ─── Lazy-load content fade-in (v1.13.1) ─────────────────────────────
   Class added by mdmx-lazy.js when a section's content lands. Fades the
   newly-injected .mdmx-page-inner so the swap reads as a transition
   instead of a flicker. Duration MUST stay in sync with LOADED_ANIM_MS
   in mdmx-lazy.js (500 ms). */
.mdmx-folder-gallery-section.mdmx-just-loaded > .mdmx-page-inner {
    animation: mdmxLazyContentIn 0.5s ease-out;
}
@keyframes mdmxLazyContentIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Respect users who've asked the OS to minimise motion: skip the
   promotion + content-in animations entirely. The reorder itself still
   happens; only the easing is suppressed. */
@media (prefers-reduced-motion: reduce) {
    .mdmx-folder-gallery-section.mdmx-just-promoted,
    .mdmx-folder-gallery-section.mdmx-just-loaded > .mdmx-page-inner {
        animation: none;
    }
}