/* ==========================================================================
   Layout — replaces Bootstrap
   ==========================================================================

   WHAT THIS IS FOR
   The site loaded bootstrap.min.css, 190 KB, on every page. An audit of every
   Blade template found 27 distinct Bootstrap classes in use, and all of them
   were `container`, `row`, `col-*` and a handful of margin utilities. 190 KB to
   put three boxes in a row.

   This file is what those 27 classes were doing, written for the four layouts
   this site actually has. It is loaded FIRST, before globals.css, in the same
   slot Bootstrap held — so the cascade order the rest of the sheets were
   written against is unchanged.

   WHY NAMED LAYOUTS AND NOT A GENERIC GRID
   A 12-column system is worth its weight when a page can be composed at will.
   These pages cannot: there is a homepage, a section listing, an article and an
   error page, and their shapes are fixed by the newsroom, not by whoever is
   editing the template. Naming them means the breakpoints live here rather than
   being spelled out again in every view as `col-12 col-md-4 col-lg-3`, and a
   change to the article measure is one line instead of four templates.
   ========================================================================== */

/* --------------------------------------------------------------- container */

/*
 * Kept as `.container` because the masthead, the footer and the error shell all
 * use it and those three are already redesigned — renaming it would mean
 * touching working files for no gain.
 *
 * Wider than Bootstrap's 1140px. A news grid gets four cards per row at 1280
 * instead of three, which is the whole point of the density this layout is for.
 */
/*
 * ⚠️ `box-sizing` IS LOAD-BEARING — do not delete it as noise.
 *
 * Bootstrap set `*, ::before, ::after { box-sizing: border-box }` and nothing
 * replaced it when it was dropped. Under the default `content-box`, `width:100%`
 * resolves to the FULL width of the parent and the inline padding is then added
 * OUTSIDE it, so every `.container` on the site was 24–48px wider than the
 * viewport below 1328px — i.e. a horizontal scroll on every phone, on every
 * page. Scoped to these two classes rather than reintroduced globally as `*`,
 * because the rest of the sheets were written and tuned against content-box.
 */
.container {
    box-sizing: border-box;
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(12px, 2vw, 24px);
}

.container-fluid {
    box-sizing: border-box;
    width: 100%;
    padding-inline: clamp(12px, 2vw, 24px);
}

.container-narrow {
    max-width: 820px;
}

/* ------------------------------------------------------------- home: top */

/*
 * Lead story · update rail · advertisement.
 *
 * The proportions are deliberate: the lead is a little under two thirds so its
 * headline can run at display size without turning into a poster, and the two
 * rails are UNEQUAL — the update feed is text and wants the extra room, the ad
 * slot is a fixed-ratio creative and does not.
 *
 * `minmax(0, …)` on every track because grid items default to `min-width:auto`,
 * and a long unbroken Hindi headline in the rail would otherwise push the track
 * wider than its share and squeeze the lead.
 */
.sp-home-top {
    display: grid;
    gap: clamp(12px, 1.4vw, 20px);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 768px) {
    /* Tablet: the lead takes the full width and the two rails sit under it,
       side by side. Three columns at this width would make the lead headline
       narrower than the rail headlines, which reads as a mistake. */
    .sp-home-top {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .sp-home-lead {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .sp-home-top {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.85fr);
    }

    .sp-home-lead {
        grid-column: auto;
    }
}

/* ---------------------------------------------------- home: section blocks */

/*
 * The category blocks. `auto-fit` rather than a fixed three, so the row fills
 * whatever width is available instead of leaving a ragged gap on wide screens —
 * and collapses to two, then one, without a media query per step.
 *
 * 300px is the narrowest a block can be before its lead headline starts
 * breaking to four lines.
 */
.sp-sections {
    display: grid;
    gap: clamp(16px, 2vw, 28px) clamp(16px, 2vw, 32px);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* ------------------------------------------------------- category listing */

/*
 * Four across at 1280, two on a phone. Never one: a single column of
 * 16:9 cards on a phone shows barely two stories per screen, and a section
 * listing exists to be scanned.
 */
.sp-cat-grid {
    display: grid;
    gap: clamp(14px, 1.6vw, 24px) clamp(12px, 1.4vw, 20px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .sp-cat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .sp-cat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ----------------------------------------------------------------- article */

/*
 * Reading column plus rail.
 *
 * The rail is a FIXED 340px, not a fraction. A fraction makes the reading
 * measure change with the viewport, and the measure is the one thing on an
 * article page that should not move: 65-75 characters is where Devanagari body
 * copy stops being tiring, and at 1440px a `7fr / 5fr` split overshoots it
 * badly.
 */
.sp-article-layout {
    display: grid;
    gap: clamp(20px, 2.5vw, 40px);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 992px) {
    .sp-article-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
    }
}

/* The rail sticks while the story scrolls. Only above 992px — on a phone the
   rail is below the article and there is nothing to stick to. */
@media (min-width: 992px) {
    .sp-article-rail {
        position: sticky;
        top: 84px;
    }
}

/* ---------------------------------------------------------------- helpers */

/*
 * The handful of Bootstrap utilities the views genuinely used. Everything else
 * it shipped — the other ~2,300 selectors — went with it.
 */
.sp-stack > * + * {
    margin-top: var(--sp-stack, 16px);
}

.sp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.sp-mt-3 {
    margin-top: 16px;
}

.sp-mt-4 {
    margin-top: 28px;
}

.sp-mb-3 {
    margin-bottom: 16px;
}