/* ==========================================================================
   PARHAM — POSTS PAGE
   Dedicated Layout
   Main Content : RIGHT
   Sidebar      : LEFT
   ========================================================================== */

/* ==========================================================================
   PAGE
   ========================================================================== */

.parham-posts-page {
    width: 100%;
    direction: rtl;
}

/* ==========================================================================
   POSTS LAYOUT
   DOM order:
   1. Sidebar
   2. Main
   LTR is intentional here so:
   Sidebar = LEFT
   Main    = RIGHT
   ========================================================================== */

.parham-posts-page .parham-posts-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    align-items: start;
    gap: 30px;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 0;
    direction: ltr;
}

/* ==========================================================================
   SIDEBAR — LEFT
   ========================================================================== */

.parham-posts-page .parham-posts-sidebar {
    grid-column: 1;
    width: 340px;
    min-width: 0;
    max-width: 340px;
    margin: 0;
    padding: 0;
    direction: rtl;
}

/* ==========================================================================
   MAIN CONTENT — RIGHT
   ========================================================================== */

.parham-posts-page .parham-posts-content {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    direction: rtl;
}

/* ==========================================================================
   PAGE BUILDER
   Do not modify internal Builder rows / columns / sections.
   ========================================================================== */

.parham-posts-page .parham-posts-content .page-builder-renderer,
.parham-posts-page .parham-posts-sidebar .page-builder-renderer {
    width: 100%;
    min-width: 0;
}

/*
   Global .page-builder-renderer adds padding-inline: 38px (76px total).
   On the 340px sidebar column this eats ~22% of the width, making the
   sidebar box look visually shrunk. Remove the inline padding here since
   .parham-posts-sidebar already has its own layout spacing (gap: 30px).
*/
.parham-posts-page .parham-posts-sidebar .page-builder-renderer {
    padding-inline: 0;
}

/*
   Same double-padding issue applies to the main content column.
   Remove it here too so post cards align flush with the column edges.
*/
.parham-posts-page .parham-posts-content .page-builder-renderer {
    padding-inline: 0;
}

/*
   Widgets inside the builder (content-grid, content-list, ad-banner, etc.)
   wrap themselves in their own .prism-container, which by default carries
   max-width: 1800px + padding-inline: 40px. That's a second, nested
   container adding extra unwanted padding here. Neutralize it, mirroring
   the same override already used for .prism-post-content elsewhere.
*/
.parham-posts-page .parham-posts-content .prism-builder-content-list .prism-container,
.parham-posts-page .parham-posts-content .prism-builder-content-grid .prism-container,
.parham-posts-page .parham-posts-content .prism-builder-ad-banner .prism-container,
.parham-posts-page .parham-posts-content .prism-builder-ad-code .prism-container,
.parham-posts-page .parham-posts-sidebar .prism-builder-content-list .prism-container,
.parham-posts-page .parham-posts-sidebar .prism-builder-content-grid .prism-container,
.parham-posts-page .parham-posts-sidebar .prism-builder-ad-banner .prism-container,
.parham-posts-page .parham-posts-sidebar .prism-builder-ad-code .prism-container {
    width: 100%;
    max-width: none;
    padding-inline: 0;
}

/* ==========================================================================
   BUILDER ROW
   ========================================================================== */

.parham-posts-page .page-builder-row {
    width: 100%;
    min-width: 0;
}

/* ==========================================================================
   AD BANNER
   ========================================================================== */

.parham-posts-page .prism-builder-ad-banner {
    margin-top: 0;
    padding-top: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .parham-posts-page .parham-posts-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .parham-posts-page .parham-posts-sidebar,
    .parham-posts-page .parham-posts-content {
        grid-column: 1;
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .parham-posts-page .parham-posts-sidebar {
        order: 2;
    }

    .parham-posts-page .parham-posts-content {
        order: 1;
    }
}

/* ==========================================================================
   HERO BANNER ALIGNMENT
   Top of the hero banner must align with the top of the sidebar (both
   start at the grid's top edge). Bottom of the hero banner must align
   with the bottom of the first sidebar widget (sidebar_square_ad, a
   1:1 image that renders at 340px height inside the 340px sidebar
   column). So the hero banner's own height is pinned to 340px to match.
   ========================================================================== */

.parham-posts-page .parham-posts-content .prism-builder-hero {
    margin-top: 0;
    margin-bottom: 0;
}

.parham-posts-page .parham-posts-content .prism-builder-content-grid {
    margin-top: 0;
}

/*
   Each .page-builder-row carries an INLINE style from renderer.blade.php:
   padding: 24px; margin: 0 0 32px 0;
   This stacks (24 + 32 + 24 = 80px) between consecutive rows, and its
   24px inline-padding also eats extra width on both sides. Inline
   styles need !important to override. Reduce to a single consistent
   15px gap between rows, matching the site's 15px spacing convention,
   and remove the row's own padding entirely (the renderer/container
   gutters are already handled elsewhere).
*/
.parham-posts-page .parham-posts-content .page-builder-row,
.parham-posts-page .parham-posts-sidebar .page-builder-row {
    padding: 0 !important;
    margin: 0 0 25px 0 !important;
}

.parham-posts-page .parham-posts-content .page-builder-row:last-child,
.parham-posts-page .parham-posts-sidebar .page-builder-row:last-child {
    margin-bottom: 0 !important;
}