/* ================================================================= */
/* page.php TEMPLATE STYLES                                          */
/* Dedicated layout for static WordPress Pages (About Us, Contact,   */
/* etc.) built in the editor/page builder. Uses a wider column than  */
/* single.php's narrow reading width, since page-builder layouts     */
/* often include multi-column sections, wide images, or team grids   */
/* that need more horizontal room than a single column of body text. */
/* ================================================================= */

/* Constrains and centers the page content. Wider (1100px) than single.php's */
/* 760px reading column — matches the homepage's width, giving page-builder */
/* layouts (columns, image grids, etc.) room to breathe. */
.rsn-page {
    max-width: 1100px; /* Matches the homepage/header width rather than the narrower blog-post reading column */
    margin: 40px auto; /* Center the column horizontally, add vertical spacing above/below */
    padding: 0 20px; /* Left/right breathing room on smaller screens */
}

/* Wrapper around an optional featured image at the top of the page */
.rsn-page-featured-image {
    margin-bottom: 24px; /* Space below the image before the title begins */
}

/* The featured image itself, if the page has one set */
.rsn-page-featured-image img {
    width: 100%; /* Image fills the full width of the page column */
    height: auto; /* Preserve the image's natural aspect ratio instead of forcing a fixed height */
    border-radius: 6px; /* Rounded corners, consistent with the theme's card styling elsewhere */
    display: block; /* Removes the small default inline-image gap beneath the image */
}

/* The page's main H1 title (e.g. "About Us") */
.rsn-page-title {
    font-family: var(--rsn-font-rajdhani); /* H1 role: Rajdhani, per the type spec's headline use case */
    font-weight: var(--rsn-type-h1-weight); /* 700 weight, per the H1 row of the type spec */
    font-size: var(--rsn-type-h1-size); /* Full 40px H1 size — this is the page's primary heading */
    color: var(--rsn-ice); /* Ice — primary text color, legible against the dark Deep page background */
    margin-bottom: 24px; /* Space below the title before the page's body content begins */
}

/* Wrapper for the "Pages: 1 2 3" links that appear only if the page uses a <!--nextpage--> tag */
.rsn-page-links {
    margin-top: 24px; /* Space above, separating it from the last block of content */
    font-family: var(--rsn-font-dm-mono); /* Label role: DM Mono, since this is a UI/navigation element, not body copy */
    font-size: var(--rsn-type-label-size); /* 10px, matching other Label-role UI text */
    color: rgba(255, 255, 255, 0.75); /* Muted Ice, similar treatment to other secondary UI text */
}



/* ================================================================= */
/* SECTION COLUMNS (.rsn-section-columns)                            */
/* Turns a block-editor "Columns" block into a row of separate       */
/* section cards — first used on the About Us page. To reuse it on   */
/* any page: add a Columns block, then in the block settings sidebar */
/* open "Advanced" and type rsn-section-columns into the "Additional */
/* CSS class(es)" field. Without that class, Columns blocks keep     */
/* WordPress's plain default look, so other pages aren't affected.   */
/* WordPress's own block CSS already handles the side-by-side layout */
/* and stacks the columns into one on narrow screens (under 782px);  */
/* the rules below only add spacing and the card appearance.         */
/* ================================================================= */

/* The row that holds all of the section cards */
.rsn-page-content .rsn-section-columns {
    gap: 20px; /* Space between cards — matches the homepage article grid's 20px gap so the site feels consistent */
    margin: 40px 0; /* Generous space above/below to separate this row of sections from the paragraphs around it */
}

/* Each individual column, styled as its own self-contained section card */
.rsn-page-content .rsn-section-columns .wp-block-column {
    background-color: var(--rsn-depth); /* Depth — the brand's designated surface color for cards and side panels */
    border-top: 3px solid var(--rsn-signal); /* Signal accent bar across the top marks where each section begins */
    border-radius: 6px; /* Rounded corners, consistent with the theme's card styling elsewhere */
    padding: 24px; /* Inner breathing room so text doesn't touch the card's edges */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); /* Same shadow as the homepage article cards, so cards "lift" off the dark page */
}

/* The heading at the top of each section card */
.rsn-page-content .rsn-section-columns h3 {
    margin-top: 0; /* Remove the usual space above H3s — the card's own padding already provides it */
    color: var(--rsn-signal); /* Signal — brand accent color makes each section's title stand out from its body text */
}

/* The last paragraph in each card */
.rsn-page-content .rsn-section-columns .wp-block-column > p:last-child {
    margin-bottom: 0; /* Drop the normal 20px paragraph spacing so the card's bottom padding matches its top padding */
}