/**
 * Layout System
 *
 * Every rule here is keyed off a body class emitted by the Design Variants
 * layout controls (see inc/variants.php → hubbleo_get_layout_settings):
 *
 *   layout-{preset}  grid-{style}  hero-{style}  sidebar-{pos}
 *   single-{layout}  container-{width}  density-{level}  ratio-{w-h}
 *
 * It restyles the SAME markup (.post-card, .post-featured, .sharing-buttons)
 * via the cascade — no inline styles, no JS libraries, and all colors come
 * from the existing --color-* custom properties so dark mode (the
 * [data-theme="dark"] tokens in main.css) keeps working untouched.
 *
 * Loaded after main.css and before the per-variant token stylesheets.
 *
 * @package Hubbleo_News
 */

/* ==========================================================================
   1. Container width
   Reassign --content-max (read by .site-content in main.css); the masthead /
   footer .container keeps --container-width so primary nav alignment is never
   disturbed.
   ========================================================================== */

body.container-wide { --content-max: 1480px; }
body.container-full { --content-max: 100%; }

/* ==========================================================================
   2. Sidebar position
   The desktop row layout lives in main.css (@1024px). Here we only flip the
   column order for a left sidebar; "none" is handled in PHP (get_sidebar() is
   skipped) so the main column simply fills the row.
   ========================================================================== */

@media (min-width: 1024px) {
    body.sidebar-left .site-content__main { order: 2; }
    body.sidebar-left .sidebar            { order: 1; }
}

/* "none" is handled in PHP — get_sidebar() is skipped, so the flex main column
   fills the row on its own; no width rule needed (and none that could leak onto
   the static-page .site-content__main--full cap). */

/* ==========================================================================
   3. Card image ratio
   ========================================================================== */

body.ratio-16-9 .post-card__image { aspect-ratio: 16 / 9; }
body.ratio-4-3  .post-card__image { aspect-ratio: 4 / 3; }
body.ratio-1-1  .post-card__image { aspect-ratio: 1 / 1; }

/* ==========================================================================
   4. Content density — compact tightens spacing and type a touch.
   ========================================================================== */

body.density-compact .post-grid { gap: var(--spacing-md); }

body.density-compact .post-card__content {
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
    gap: 4px;
}

body.density-compact .post-card__title   { font-size: 0.95rem; }
body.density-compact .post-card__excerpt { font-size: 0.8rem; }

/* ==========================================================================
   5. Grid styles (restyle the same .post-card; also apply to JS-appended
      cards from infinite scroll, which share the markup).
      "grid" (default multi-column) needs no override.
   ========================================================================== */

/* --- 5a. Horizontal list: single column, image to one side -------------- */
body.grid-list .post-grid,
body.grid-list-right .post-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

@media (min-width: 600px) {
    /* image left (list) vs image right (list-right) — same markup, reversed */
    body.grid-list .post-card       { flex-direction: row; }
    body.grid-list-right .post-card { flex-direction: row-reverse; }

    body.grid-list .post-card__image,
    body.grid-list-right .post-card__image {
        flex: 0 0 38%;
        max-width: 240px;
        aspect-ratio: 4 / 3;
    }

    body.grid-list .post-card__content,
    body.grid-list-right .post-card__content { justify-content: center; }
}

/* --- 5b. Text only: drop the image, divider rule between rows ------------- */
body.grid-text .post-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

body.grid-text .post-card {
    flex-direction: column;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--color-border);
    background: none;
}

body.grid-text .post-card:hover {
    box-shadow: none;
    transform: none;
}

body.grid-text .post-card__image { display: none; }

body.grid-text .post-card__content {
    padding: var(--spacing-md) 0;
}

/* --- 5c. Image-overlay cards: text sits over the image -------------------- */
body.grid-overlay .post-card {
    position: relative;
    border: none;
    aspect-ratio: 4 / 3;
}

body.grid-overlay .post-card__image {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
}

body.grid-overlay .post-card__content {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md);
    color: var(--color-on-accent);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 10%, rgba(0, 0, 0, 0) 100%);
    border-radius: 0 0 var(--radius) var(--radius);
}

body.grid-overlay .post-card__title a,
body.grid-overlay .post-card__author,
body.grid-overlay .post-card__date { color: var(--color-on-accent); }

body.grid-overlay .post-card__excerpt { display: none; }

/* --- 5d. Masonry via CSS multi-columns (no JS library) -------------------
   display:block + column-count so infinite scroll just keeps appending and
   ad slots break out across all columns (see §8). */
body.grid-masonry .post-grid {
    display: block;
    column-count: 1;
    column-gap: var(--spacing-lg);
}

@media (min-width: 768px)  { body.grid-masonry .post-grid { column-count: 2; } }
@media (min-width: 1024px) { body.grid-masonry .post-grid { column-count: 3; } }

body.grid-masonry .post-grid > .post-card {
    width: 100%;
    margin: 0 0 var(--spacing-lg);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

/* --- 5e. Mosaic feature tiles: the first article spans wider + taller.
   Uses :nth-of-type on <article> so injected <div> ad slots never shift the
   count, and infinite-scroll cards (appended later) stay normal-sized. */
@media (min-width: 768px) {
    body.grid-mosaic .post-grid > article.post-card:nth-of-type(1) {
        grid-column: span 2;
    }
    body.grid-mosaic .post-grid > article.post-card:nth-of-type(1) .post-card__image {
        aspect-ratio: 16 / 9;
    }
    body.grid-mosaic .post-grid > article.post-card:nth-of-type(1) .post-card__title {
        font-size: 1.4rem;
    }
}

/* ==========================================================================
   6. Hero / featured styles (the .post-featured markup is reused for every
      style; "none" renders nothing in PHP).
   ========================================================================== */

/* --- 6a. Split: image beside text instead of text-over-image ------------- */
@media (min-width: 768px) {
    body.hero-split .post-featured__image {
        align-items: stretch;
        aspect-ratio: unset;
        min-height: 320px;
    }

    /* Spacer that occupies the left 55% so the overlay is pushed to the right */
    body.hero-split .post-featured__image::before {
        content: '';
        display: block;
        flex: 1 1 55%;
    }

    body.hero-split .post-featured__overlay {
        flex: 0 0 45%;
        width: auto;
        background: var(--color-surface);
        color: var(--color-text);
        padding: var(--spacing-xl);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    body.hero-split .post-featured__title { color: var(--color-text); }
    body.hero-split .post-featured__overlay .post-card__author,
    body.hero-split .post-featured__overlay .post-card__date { color: var(--color-muted); }
}

/* --- 6b. Lead + secondary: large lead with a column of smaller stories ----
   Scoped to `section.` so it never matches body.hero-lead-secondary, the body
   class emitted for this hero style (see inc/variants.php body_class filter). */
section.hero-lead-secondary {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

/* Establish a container so the lead card sizes to its own column width — which
   shrinks when a sidebar is enabled — instead of the viewport. Without this the
   featured title inherits the viewport-based 2.5rem (main.css desktop rule) and
   overflows the fixed-height overlay in the narrow lead column. */
.hero-lead-secondary__lead { min-width: 0; container-type: inline-size; container-name: hero-lead; }

/* Fluidly scale the lead title to the actual column width. */
.hero-lead-secondary__lead .post-featured__title {
    font-size: clamp(1.25rem, 0.5rem + 4cqi, 2.5rem);
}

/* Hide the excerpt once the lead column gets too narrow to fit it cleanly. */
@container hero-lead (max-width: 520px) {
    .hero-lead-secondary__lead .post-featured__excerpt { display: none; }
}

.hero-secondary {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

.hero-secondary__item {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.hero-secondary__item:last-child { border-bottom: none; padding-bottom: 0; }

.hero-secondary__image {
    flex: 0 0 96px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface);
}

.hero-secondary__image img { width: 100%; height: 100%; object-fit: cover; }

.hero-secondary__title {
    font-family: var(--font-family-heading);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

.hero-secondary__title a { color: var(--color-text); }
.hero-secondary__title a:hover { color: var(--color-secondary); }

.hero-secondary__date { font-size: 0.75rem; color: var(--color-muted); margin-top: 4px; }

@media (min-width: 1024px) {
    section.hero-lead-secondary { grid-template-columns: 1.8fr 1fr; }
}

/* --- 6c. Slider: scroll-snap carousel, no JS library ---------------------
   Scoped to `section.` for the same reason as 6b — body.hero-slider must not
   inherit these flex rules. */
section.hero-slider {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: var(--spacing-sm);
}

.hero-slider > .post-featured {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

@media (min-width: 1024px) {
    .hero-slider > .post-featured { flex-basis: 70%; }
}

/* ==========================================================================
   7. Single post layouts
   "sidebar" is the default; "centered"/"wide-share" suppress the sidebar in
   PHP. Every single layout aligns its shell to the MASTHEAD width — the
   .container that holds the logo → search (capped at --container-width). The
   header keeps that width whatever the global container-width setting is, so
   we reset --content-max back to --container-width here (overriding §1's
   wide/full reassignment — equal specificity, later in the file, so it wins).
   This keeps the post — with or without the sidebar — lined up edge-to-edge
   with the top bar instead of spilling wider (sidebar) or floating narrow
   (centered) inside a different-width shell.
   ========================================================================== */

body.single-sidebar,
body.single-centered,
body.single-wide-share {
    --content-max: var(--container-width);
}

/* Floating vertical share rail: only floats once the viewport is wide enough
   that the masthead gutter can hold it without overlapping the column
   (--container-width + room for the rail either side). Below that it stays the
   normal inline horizontal bar. Bounded to the article vertically by
   initShareRail() in main.js so it stops at the end of the post instead of
   trailing into related posts / the footer. */
@media (min-width: 1340px) {
    body.single-wide-share .sharing-buttons {
        position: fixed;
        left: max(var(--spacing-md), calc((100vw - var(--container-width)) / 2 - 72px));
        top: 50%;
        transform: translateY(-50%);
        flex-direction: column;
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        padding: var(--spacing-sm);
        box-shadow: var(--shadow);
        z-index: var(--z-rail);
        transition: opacity 0.2s ease;
    }

    body.single-wide-share .sharing-buttons__label { display: none; }
}

/* ==========================================================================
   8. Ad-slot safety — keep in-feed ads full-width in every grid style.
   ========================================================================== */

/* In CSS-columns (masonry) the grid rule can't apply, so span all columns. */
body.grid-masonry .post-grid > .ad-slot {
    column-span: all;
    -webkit-column-span: all;
    margin: 0 0 var(--spacing-lg);
    break-inside: avoid;
}

/* In overlay grid the cards are positioned, but ad slots must stay normal. */
body.grid-overlay .post-grid > .ad-slot { position: static; }

/* ==========================================================================
   9. Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .hero-slider { scroll-behavior: auto; }
}