/* ==========================================================================
   Layout Component (formerly Special Section)
   ========================================================================== */

.layout-section {
    width: 100%;
    /* Full width background */
    background-color: var(--primary-002);
    padding: 8rem 0;
    /* Top/Bottom spacing */
}

.layout-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
}

/* --- Typography --- */

.layout-header {
    margin-bottom: 2rem;
    text-align: left;
    max-width: 48rem;
}

.layout-caption {
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    color: var(--neutral-004);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.layout-heading {
    font-family: 'Poetsen One', 'Trebuchet MS', Verdana, sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    color: var(--primary-009);
    margin-bottom: 1.5rem;
}

.layout-description {
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: var(--neutral-004);
    line-height: 1.5;
    max-width: 60ch;
    margin-left: auto;
    /* Centering Fix */
    margin-right: auto;
    /* Centering Fix */
}

.layout-actions {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}


/* ==========================================================================
   Variant 1: Split Layout (Image + Text)
   ========================================================================== */

.layout-variant-split .layout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

/* Image Modifiers */
.layout-variant-split.image-right .layout-content {
    order: 1;
}

.layout-variant-split.image-right .layout-image {
    order: 2;
}

.layout-variant-split.image-left .layout-content {
    order: 2;
}

.layout-variant-split.image-left .layout-image {
    order: 1;
}

.layout-variant-split .layout-image {
    width: 100%;
}

.layout-variant-split .layout-image img {
    width: 100%;
    height: auto;
    min-height: 350px;
    max-height: 500px;
    border-radius: 4rem;
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: center 30%;
}

/* Focal point utility classes */
.focus-top img {
    object-position: center top !important;
}

.focus-center img {
    object-position: center center !important;
}

.focus-bottom img {
    object-position: center bottom !important;
}


/* ==========================================================================
   Variant 2 & 3: Card Layouts (2-Col & 3-Col)
   ========================================================================== */

.layout-variant-cards .layout-header {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    /* Centered Header for card variants per sketch 2 & 3 */
}

.layout-variant-cards .layout-grid {
    display: grid;
    gap: 2rem;
    width: 100%;
}

/* 2 Columns */
.layout-variant-cards.cols-2 .layout-grid {
    grid-template-columns: 1fr 1fr;
}

/* 3 Columns */
.layout-variant-cards.cols-3 .layout-grid {
    grid-template-columns: 1fr 1fr 1fr;
}


/* Card Component */
.layout-card {
    width: 100%;
    position: relative;
    border-radius: 4rem;
    /* Updated to 4rem per request */
    overflow: hidden;
    aspect-ratio: 3/4;
    /* Default/Mobile Ratio */
    margin: 0 auto;
    /* Center card if it's narrower than grid column */
}

/* Desktop Sizing Overrides */
@media screen and (min-width: 1025px) {

    /* 3-Column: Portrait ratio for consistent food imagery */
    .layout-variant-cards.cols-3 .layout-card {
        aspect-ratio: 3/4;
    }

    /* 2-Column: Fixed height for better food imagery */
    .layout-variant-cards.cols-2 .layout-card {
        aspect-ratio: unset;
        height: 600px;
    }

    /* Max Width Override for 2-Col Variant */
    .layout-variant-cards.cols-2 .layout-container {
        max-width: 1000px;
    }

    .layout-variant-cards.cols-2 .layout-grid {
        align-items: center;
        /* Vertical Center Alignment */
    }
}

.layout-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.layout-card:hover img {
    transform: scale(1.05);
}

/* Overlay */
.layout-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2rem;
    /* Stronger gradient for better text readability */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.5rem;
    pointer-events: none;
    /* Let clicks pass if needed */
}


.layout-card-subtitle {
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.125rem;
    color: var(--primary-colour-001);
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    /* Text shadow for contrast */
}

.layout-card-desc {
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.875rem;
    max-width: 40ch;
    color: var(--primary-colour-001);
    opacity: 0.9;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    /* Text shadow for contrast */
}


/* ==========================================================================
   Variant: Text Only (Migrated from Feature)
   ========================================================================== */
/* ==========================================================================
   Variant: Text Only (Migrated from Feature)
   ========================================================================== */
.layout-variant-text-only .layout-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 100%;
}

.layout-variant-text-only .layout-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 2rem;
    /* Increased gap for better spacing */
}

.layout-variant-text-only .layout-content h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: var(--primary-009);
    /* Updated to Orange */
    margin-bottom: 0;
}

.layout-variant-text-only .layout-content p {
    max-width: 60ch;
    /* Wider text block */
    margin-bottom: 1rem;
}


/* ==========================================================================
   Responsive Styles
   ========================================================================== */

@media screen and (max-width: 1024px) {

    .layout-section {
        padding: 4rem 0;
    }

    .layout-container {
        padding: 0 2rem;
    }

    .layout-actions {
        justify-content: center;
        width: 100%;
        /* flex-direction: column; Removed to keep inline until 560px */
    }

    /* .layout-actions a { width: 100%; } Removed to keep inline sizing */

    /* --- Variant 1 Mobile: Stacked (Text Top, Image Bottom) --- */
    .layout-variant-split .layout-grid {
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }

    /* Force Order: Text Top (Content), Image Bottom */
    .layout-variant-split.image-right .layout-content,
    .layout-variant-split.image-left .layout-content {
        order: 1;
        text-align: center;
        width: 100%;
        /* Center text on mobile often looks better, sketch doesn't specify but implies standard flow */
    }

    .layout-variant-split .layout-header {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .layout-variant-split.image-right .layout-image,
    .layout-variant-split.image-left .layout-image {
        order: 2;
    }

    .layout-description {
        text-align: center;
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }


    /* --- Variant 2 & 3 Mobile: Horizontal Scroll --- */
    /* Tablet (< 1024px): Standard Grid, No Scroll */
    .layout-variant-cards .layout-grid {
        /* Reset for Tablet: Show as Grid/Flex Wrap */
        display: grid;
        overflow-x: visible;
        gap: 2rem;
        padding-right: 0;
        padding-bottom: 0;
    }

    /* Cards Size for Tablet */
    .layout-card {
        min-width: 0;
        /* Reset min-width */
        width: 100%;
        aspect-ratio: 3/4;
        /* Portrait ratio for tablet */
    }

    /* 2-Column: Match gallery-item sizing */
    .layout-variant-cards.cols-2 .layout-card {
        width: max(340px, 48vw);
        aspect-ratio: unset;
        height: 600px;
    }
}


/* Mobile Specific Sizing (< 768px) */
@media screen and (max-width: 768px) {

    /* Ensure split layout image respects container padding */
    .layout-variant-split .layout-image {
        padding: 0;
    }

    /* Split layout image fills container on mobile */
    .layout-variant-split .layout-image img {
        width: 100%;
        max-width: 100%;
        border-radius: 4rem;
        object-position: center 30%;
    }

    /* Mobile: Scrollable Row */
    .layout-variant-cards .layout-grid {
        display: flex;
        overflow-x: auto;
        gap: 1.5rem;
        padding-bottom: 2rem;

        scrollbar-width: thin;
        scrollbar-color: var(--primary-009) transparent;
    }

    .layout-variant-cards .layout-grid::-webkit-scrollbar {
        display: block;
        height: 6px;
    }

    .layout-variant-cards .layout-grid::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 10px;
        margin: 0 2rem;
    }

    .layout-variant-cards .layout-grid::-webkit-scrollbar-thumb {
        background-color: var(--primary-009);
        border-radius: 10px;
    }


    .layout-card {
        /* Mobile: use fixed width for consistent sizing */
        min-width: 320px;
        width: max(320px, 80vw);
        aspect-ratio: 2/3;
    }

    /* 2-Column: Match gallery-item sizing */
    .layout-variant-cards.cols-2 .layout-card {
        width: max(320px, 80vw);
        aspect-ratio: unset;
        height: 600px;
    }

    /* Enforce vertical centering/alignment for headers on mobile/tablet */
    .layout-variant-cards .layout-header,
    .layout-variant-split .layout-header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* Enforce full width and center alignment for description */
    .layout-description {
        text-align: center;
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Stacking behavior for layout actions at 768px - match buttons.css breakpoint */
@media screen and (max-width: 768px) {

    .layout-actions a,
    .layout-actions .btn-minimal,
    .layout-actions .btn-primary {
        width: 250px;
        text-align: center;
        justify-content: center;
    }
}

/* Layout actions stack at 560px */
@media screen and (max-width: 560px) {
    .layout-actions {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
}

/* Small mobile screens - full width buttons */
@media screen and (max-width: 480px) {
    .layout-content {
        width: 100%;
    }

    .layout-actions {
        align-items: stretch;
        width: 100%;
    }

    .layout-actions a,
    .layout-actions .btn-minimal,
    .layout-actions .btn-primary {
        width: 100%;
    }
}

/* Small mobile screens - adjust card width */
@media screen and (max-width: 425px) {
    .layout-card {
        min-width: 260px;
        width: 90vw;
        aspect-ratio: 2/3;
    }
}