/* 1. RESET CORE CONTAINER FOR AN UNBROKEN VIEWPORT FRAME */
html, body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.wp-site-blocks {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: var(--narrative-gutter-left) !important;
    padding-right: var(--narrative-gutter-right) !important;
    box-sizing: border-box !important;
}

/* 2. RE-TARGET THE LIST CONTAINER DIRECTLY TO RE-ALIGN COLUMNS */
.narrative-story-grid ul.wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Fixed 3 column strip layout */
    gap: 6px !important; /* Exact thin separation line from your reference site layout */
    width: 100% !important;
    max-width: 100% !important;
    margin: 40px auto 0 auto !important; /* Adds a beautiful 40px padding gap below the header */
    padding: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

/* 3. STRIP BACKGROUND PANELS AND FORCED VERTICAL COMPRESSIONS */
.narrative-story-grid li.wp-block-post {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important; /* Eliminates the gray blocks permanently */
    width: 100% !important;
}

.narrative-story-grid .wp-block-post-featured-image {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* 4. CHOOSE ONE ASPECT RATIO OPTION FOR FIXED PROPORTIONS */
.narrative-story-grid .wp-block-post-featured-image img {
    width: 100% !important;
    display: block !important;

    /* OPTION A: If you want standard 3:2 landscape bounding frames (Recommended) */
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;

    /* OPTION B: Delete the two lines above and uncomment this line if your raw files are natively cropped */
    /* height: auto !important; */
}

/* 5. PROTECT SITE NAVIGATION FROM SLIDING OFF THE COMPASS */
header, 
.site-header,
header.wp-block-template-part {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 40px !important;  
    padding-right: 40px !important; 
    box-sizing: border-box !important;
}

/* ==========================================
   Default Page template: readable column.
   Width is set by --narrative-reading-width (variables.css).

   Two selectors on purpose: the class comes from templates/page.html,
   the body class (added in functions.php) still works if the Page
   template was customised in the Site Editor and lost that class.
   Hero and Gallery templates are not affected.
========================================== */
.narrative-page-container,
.narrative-default-page .wp-block-post-content {
    width: 100%;
    max-width: var(--narrative-reading-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box !important;
    /* .wp-site-blocks has uneven left/right gutters; nudge the column so
       it sits in the true centre of the screen (0 when gutters match). */
    position: relative;
    left: calc((var(--narrative-gutter-right) - var(--narrative-gutter-left)) / 2);
}

/* Manually-resized images (WordPress bakes a literal pixel width like
   "width:2560px" into these) otherwise ignore their container and
   overflow it. Force them back down to fit. */
.narrative-page-container img,
.narrative-default-page .wp-block-post-content img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}