/*
  Bravith — responsive.css
  Mobile-first base styles live in main.css/components.css.
  This file layers on breakpoint overrides for larger viewports.
*/

/* ---------- Small phones (base, <380px) tightening ---------- */
@media (max-width: 380px) {
  :root {
    --container-padding: var(--space-4);
  }

  .hero h1,
  .home-hero h1 {
    font-size: var(--text-2xl);
  }

  .page-header h1,
  .category-hero-copy h1 {
    font-size: var(--text-xl);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  /* The header row is two fixed-width blocks: the brand, whose word does not
     wrap, and three 40px icon buttons that do not shrink. Together with a 24px
     minimum gap they come to about 17px more than the container's content box
     at 320px — invisible until a vertical scrollbar takes 15px off the
     viewport, at which point every long page on the site scrolls sideways by
     1px. `justify-content: space-between` already pushes the two apart, so
     this `gap` is only ever a MINIMUM: lowering it changes nothing at any
     width where the row fits, and removes the overflow where it does not. */
  .site-header .container {
    gap: var(--space-1);
  }

  /* One card per row below 380px: 240px plus the container padding does not
     fit two, and auto-fill would otherwise leave them 130px wide. */
  .category-grid {
    grid-template-columns: 1fr;
  }

  /* ----- /guides/ -----
     At 320px the library row's three tracks — a 104px plate, the title and
     the arrow — leave about 150px for the text, which is not a line. The
     plate goes and the row becomes title, description, meta: the guide's own
     words, which is what a 320px screen has room for. */
  .guides-row-link {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .guides-row-media {
    display: none;
  }
}

/* ---------- Large phones and up (>=600px) ----------
   The one breakpoint between the phone base and the tablet layout. It exists
   for a single element: the category statistics strip, which needs about
   180px a cell to hold a figure beside its icon and therefore turns from a
   stack into a row here rather than at 768, where the hero has other things
   to do. */
@media (min-width: 600px) {
  /* fit-content, not the full column: the strip states two or three facts and
     should be exactly as wide as they are. Stretched across 800px its cells
     become mostly air, and a category with a single statistic — an empty one,
     or Guides — gets one figure floating at the left end of a very long box. */
  .category-stats {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-columns: none;
    width: fit-content;
    max-width: 100%;
  }

  .category-stat + .category-stat {
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }
}

/* ---------- Tablet and up (>=768px) ---------- */
@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero h1 {
    font-size: var(--text-4xl);
  }

  .hero-visual {
    display: block;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .resource-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .resource-hero-title {
    font-size: var(--text-4xl);
  }

  .feature-list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ----- Homepage -----
     The two card grids use auto-fit so the column count follows the width
     instead of the item count: adding a sixth category or a fifth featured
     resource never needs a rule changed here. */
  .home-hero h1 {
    font-size: var(--text-4xl);
  }

  .home-category-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .home-featured-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }

  /* Once the cards sit SIDE BY SIDE the excerpt is a three-line area whether
     the sentence fills it or not. It is already clamped to three lines, so
     nothing is cut any further than it was; this only stops a card whose
     description happens to be shorter from standing at a different height to
     the one beside it, and from collapsing the slot the whole row aligns on.
     Three lines is what the clamp allows and what the shortened excerpt is
     measured against, so on a normal card the reservation is invisible.
     Left off the single-column layout below 600px on purpose: there each card
     is its own row, an unequal height is invisible, and reserving a line the
     text does not use would just add a blank one to every card on a phone. */
  .home-featured-card .card-excerpt {
    min-height: calc(var(--leading-normal) * 3em);
  }

  /* Date and downloads move out from under the description into their own
     right-hand column, which is where the eye looks for them in a list. */
  .home-latest-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .home-latest-meta {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
    text-align: right;
  }

  .home-why-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-library-grid .home-library-link:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* ----- Category pages -----
     The hero stays one column here and splits at 1024 with the body. A tablet
     is wide enough to put the copy beside the artwork, but only by squeezing
     the copy column to about 350px — narrower than the statistics strip needs
     and narrower than the title deserves. Full width for both instead: the
     plate becomes a wide band under the copy, which is the better use of a
     tablet's width and the same three areas either way. */
  .category-hero-copy h1 {
    font-size: var(--text-4xl);
  }

  .category-art-mark {
    width: 72px;
    height: 72px;
  }

  .category-stat-value {
    font-size: var(--text-xl);
  }

  /* The sidebar becomes a row of panels here rather than a column: stacked
     full-width panels below a grid would push the footer a screen and a half
     down on a tablet. */
  .category-sidebar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Each panel keeps its own height rather than stretching to match the
       taller one beside it — otherwise a short "Need help?" grows a block of
       empty surface to sit level with the list next to it. */
    align-items: start;
  }

  /* Rule between filter dimensions, so the panel reads as one control
     surface divided into groups rather than loose stacks of chips. Only
     from this breakpoint up, where the groups share a line — below it they
     wrap and a left border would hang off the side of each stacked group. */
  .version-filter-group + .version-filter-group {
    padding-left: var(--space-8);
    border-left: 1px solid var(--color-border);
  }

  /* ----- /guides/ -----
     The hero copy stays full width here and splits at 1024 with everything
     else, exactly as the category hero does. */

  /* Two of the three installation cards side by side. The third drops to a
     second row rather than squeezing all three into ~230px, which is below
     the width the title and description need. */
  .guides-core {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Three across: five in a row at this width would be 130px cards. */
  .guides-topics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* The strip under "Recently added" becomes the three-across row it is
     drawn as, with the rule that ran between the items now running above
     all three of them. */
  .guides-recent-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-6);
  }

  /* Build table becomes a real column grid. One track list drives both the
     header and every row, so they stay aligned; the header sits outside the
     results card and matches its inline padding. Adding a column later means
     editing this one declaration.

     Every track is either a fraction or a fixed length — none is `auto`.
     The header and the rows are separate grid containers, so an auto track
     is sized by each one's own content: the header's action cell holds only
     a visually-hidden word and the rows' hold a button, which is what used
     to leave the two grids with different column edges. Fixed action and
     status tracks make the two track lists resolve identically whatever the
     rows contain, and minmax(0, …) on the rest keeps a long version string
     or loader list inside its column instead of stretching it. */
  .build-table {
    --build-col-status: 10px;
    --build-col-action: 8.75rem;
    --build-cols:
      var(--build-col-status)
      minmax(0, 1.3fr)
      minmax(0, 0.85fr)
      minmax(0, 1.15fr)
      minmax(0, 0.95fr)
      var(--build-col-action);
  }

  .build-head-row,
  .build-row {
    display: grid;
    grid-template-columns: var(--build-cols);
    align-items: center;
    gap: var(--space-4);
  }

  .build-head {
    display: block;
    /* The rows sit inside a 1px-bordered card and the header does not, so
       the header's inline padding carries that border to stay in step. */
    padding: 0 calc(var(--space-5) + 1px) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-faint);
  }

  .build-cell-status {
    display: flex;
    align-items: center;
  }

  .build-cell-action {
    justify-content: flex-end;
  }

  /* Full-width inside its fixed track, so every row's action has the same
     edges — the button is the column, not a thing floating in it. */
  .build-download {
    width: 100%;
  }
}

/* ---------- Laptop and up (>=1024px) ---------- */
@media (min-width: 1024px) {
  .primary-nav {
    display: block;
  }

  .nav-toggle {
    display: none;
  }

  .mobile-nav {
    display: none !important;
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1.4fr repeat(4, 1fr);
  }

  .resource-cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--space-12);
    align-items: start;
  }

  .article-layout .toc {
    position: sticky;
    top: 96px;
  }

  .hero-layout {
    grid-template-columns: 1.15fr 1fr;
  }

  .resource-hero-grid {
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: center;
  }

  /* Centers the CTA within its track instead of pinning it to the outer
     edge, so it sits closer to the title/description block. Replaces a
     padding-left left over from the removed border-left divider. */
  .resource-hero-side {
    align-items: center;
  }

  .resource-layout {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: var(--space-5);
    align-items: start;
  }

  .resource-two-col {
    grid-template-columns: 1.3fr 1fr;
  }

  /* ----- Homepage -----
     The artwork carries slightly more of the row than the copy does: the
     tracks were 1.05fr / 1fr, and the image reads as an illustration rather
     than as the subject of the hero at that width. Reversing the emphasis and
     taking one step off the gutter gives it a little more presence and brings
     its left edge in toward the text, while --space-10 is still a comfortable
     column gap — the two halves must not start to touch. Both tracks stay
     minmax(0, …) so a long word in the copy cannot blow the grid out.

     The ratio, not a width, is what is tuned here: the container is fixed and
     the gutter is fixed, so every step of this number moves the artwork's LEFT
     edge only — its right edge is the container's and does not move. At 1.45fr
     the image takes about 672px of a 1440px hero and leaves the copy about
     464px, which is still wider than the 48ch cap on the lede. It scales down
     with the container rather than eating the copy at 1024px. */
  .home-hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    gap: var(--space-10);
  }

  .home-hero h1 {
    font-size: 3rem;
  }

  .home-split {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  /* Four across on one row: the four points are one line of text each, so this
     is the width at which the section stops being a list and becomes a strip. */
  .home-why {
    padding: var(--space-8);
  }

  .home-why-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--space-10) var(--space-12);
  }

  .home-library-grid {
    width: 440px;
  }

  /* ----- Category pages -----
     The hero becomes two columns at the same width the body does. The
     artwork column used to repeat the sidebar's 300px so the two seams lined
     up, but that was sized for the square mark on a plate: once the plate
     became a 16:9 screenshot, 300px showed a tall centre crop of it beside a
     copy column that is mostly empty (the lede and the statistics strip are
     both capped well short of the track). The column is wider now and grows
     toward the copy; its right edge and its height are unchanged, because
     the plate still stretches to the two rows beside it. 380px here, 480px
     from 1280 up, where the plate's height of about 270px makes 480 the
     width at which the whole 16:9 frame shows without a crop.

     Two rows, both sized to their content: the statistics follow the
     description immediately however short it is — an archive's one-line lede
     would otherwise leave a hand's width of nothing between them — and the
     plate spans both rows down the right. */
  .category-hero-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas:
      "copy  art"
      "stats art";
    gap: var(--space-8);
  }

  /* Here — and only here — the artwork becomes a plate: a framed neutral
     field holding the mark, filling the full height of the two rows so the
     column beside the copy is a considered object rather than an icon propped
     at the top of it. */
  .category-art {
    align-self: stretch;
    place-items: center;
    justify-items: center;
    min-height: 220px;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-elevated);
    overflow: hidden;
  }

  .category-art-image {
    padding: 0;
  }

  .category-art-mark {
    width: 176px;
    height: 176px;
  }

  /* The real two-column page. 300px is the narrowest the sidebar reads at,
     and it is fixed rather than fractional so widening the viewport widens
     the cards — the sidebar has no more to say at 1440px than at 1024px. */
  .category-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-8);
  }

  /* Back to one column of panels. Deliberately NOT sticky: four panels are
     taller than a 768px-high laptop viewport, and a sticky block taller than
     the viewport pins its top and puts its last panel out of reach. */
  .category-sidebar {
    grid-template-columns: 1fr;
  }

  /* ----- /guides/ -----
     The masthead used to split into two equal columns here, with the artwork
     in the second. It no longer has a second column: the artwork is a sibling
     of the container and is sunk into the band itself, so the copy takes a cap
     rather than a track. See THE SUNKEN HERO ARTWORK in components.css. */

  /* The three installation cards as one row: the strongest thing on the
     page, and the width it was composed for. */
  .guides-core {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* The title carries the card once it has a column of its own to sit in.
     Held back below this width, where a card is narrow enough that the
     larger size would wrap a three-word title onto three lines. */
  .guides-core-title {
    font-size: var(--text-lg);
    line-height: 1.2;
  }

  /* "Recently added" becomes the composition it is drawn as: the lead item
     and the column of two share the top, and the strip of three runs the
     full width beneath both. */
  .guides-recent {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas:
      "lead side"
      "strip strip";
    column-gap: var(--space-10);
  }

  /* A wider crop of the lead's plate. At this width a 16:10 frame ran to
     370px and made the lead nearly three times the height of the two rows
     beside it, which left a third of the block empty. */
  .guides-recent-lead-media img {
    aspect-ratio: 2 / 1;
  }

  /* The two rows SHARE the lead's height rather than stacking at the top of
     an area much taller than they are. Equal fractions plus the rows' own
     centring means the column is divided in two however tall the lead turns
     out to be — no fixed height anywhere, and one item or three would
     divide it just as correctly. */
  .guides-recent-side {
    align-content: stretch;
    grid-auto-rows: minmax(0, 1fr);
  }

  /* The library becomes a real two-column index. The hairline above each
     row lands on the same line across both columns because the rows are
     grid items of one grid, not two lists side by side. */
  .guides-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-10);
  }
}

/* ---------- Desktop (>=1280px) ---------- */
@media (min-width: 1280px) {
  :root {
    --container-padding: var(--space-8);
  }

  .hero h1 {
    font-size: 3.25rem;
  }

  .home-hero h1 {
    font-size: 3.25rem;
  }

  /* The full category row on a desktop, the way the reference lays it out. */
  .home-category-grid {
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  }

  /* ----- /guides/ -----
     All five topics on one line. Deliberately not auto-fit: this row is five
     doors out of the guides section and should read as one set, not reflow
     into 3 + 2 at some width nobody chose.

     HERE AND NOT AT 1024, which is where it used to be. Each card carries its
     destination in words — "Explore Texture Packs" — and at 1024 a fifth of
     the container is 184px, leaving 142px of card interior for a label that
     measures about 160. The longest of the five wrapped onto a second line
     while the other four stayed on one, so a row built to look like one set
     had one card with a taller foot than its neighbours. 1280 is simply the
     first width where the label the card has to say actually fits beside its
     arrow; below it the row is three across with room to spare. */
  .guides-topics {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* Both grids widen together — they share the gap so the body's seam and
     the hero's read as the same rhythm even though the hero's artwork column
     is the wider of the two (see the 1024 note). */
  .category-hero-layout,
  .category-layout {
    gap: var(--space-10);
  }

  .category-hero-layout {
    grid-template-columns: minmax(0, 1fr) 480px;
    row-gap: var(--space-8);
  }
}

/* ---------- Large desktop (>=1536px) ---------- */
@media (min-width: 1536px) {
  :root {
    --container-width: 1360px;
  }
}