/* ============================================================
   /countries — the PAGE-SPECIFIC half of the archive.

   ⚠️ REQUIRES public/css/archive.css, LOADED FIRST. That file carries every
   `.as-*` rule the three archives share (filter bar, view toggle, list frame,
   `.is-grid` reflow, empty state). What is left here is only the part that is
   named after country data: the column tracks, the six `.as-col-*` classes,
   the podium palette, the flag treatment and the mobile card layout.

   Both files are pulled in by resources/views/countries/index.blade.php via
   @include('partials.archive.head') followed by a <link> to this file — order
   is load-bearing, because most rules below sit at the SAME specificity as the
   shared ones they refine.
   ============================================================ */

/* The two grid tracks the shared chrome reads. `--as-grid` is consumed by BOTH
   `.as-list-head` and `.as-row`, so the header and the rows cannot drift out of
   alignment.

   Six columns: country (rank + flag + name), continent, stones, contributors,
   places, latest. The country cell takes the slack because it is the only one
   whose content has no upper bound ("United States Minor Outlying Islands").

   The filter bar has three cells — search, continent, actions — against
   /stones' six, so the search box gets most of the width rather than being a
   narrow slot in a row of dropdowns that do not exist here. */
.as-wrap {
    --as-grid: 1fr 150px 90px 130px 90px 130px;
    --as-filter-cols: 1.8fr 1fr auto;
}

/* ── Columns ────────────────────────────────────────────────────────────────
   Ellipsis + min-width stay global (header AND rows); size, weight and colour
   are scoped to .as-row so they do not leak into the header, which keeps its
   own uniform 11px uppercase treatment. */
.as-col-country { min-width: 0; }
.as-col-continent,
.as-col-stones,
.as-col-people,
.as-col-places,
.as-col-latest { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.as-row .as-col-continent,
.as-row .as-col-latest { font-size: 14px; color: var(--ps-text-mid); line-height: 1.35; }
/* The three counts are the reason this page was rebuilt, so they read as
   figures: tabular so the columns line up digit-for-digit, navy so they carry
   more weight than the continent and the date beside them. */
.as-row .as-col-stones,
.as-row .as-col-people,
.as-row .as-col-places {
    font-size: 15px;
    font-weight: 800;
    color: var(--ps-heading);
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

/* Per-cell labels. Hidden here because the column header says it; the ≤760px
   block below turns them on, where there is no header row. */
.cy-lbl { display: none; }

/* ── The country cell: rank + flag + name ───────────────────────────────────
   `.as-loc-main` (shared) already supplies the weight, the size and the
   ellipsis; this makes it a row so the three parts sit on one baseline and the
   name is the only part that truncates. */
.as-row .as-loc-main { display: flex; align-items: baseline; gap: 9px; }
.cy-rank {
    flex: 0 0 auto;
    min-width: 34px;
    font-size: 13px;
    font-weight: 800;
    color: var(--ps-text-light);
    font-variant-numeric: tabular-nums;
}
.cy-flag { flex: 0 0 auto; font-size: 20px; line-height: 1; }
/* The truncating part. `.as-loc-main` sets the ellipsis, but a flex child needs
   its own min-width:0 or it refuses to shrink below its content. */
.cy-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Golden / special badges — the secondary line, present only when non-zero.
   `.as-loc-sub` is nowrap + hidden overflow for a single line of text; badges
   are boxes, so this cell restates the parts that would clip them. */
.cy-rare {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
    overflow: visible;
    white-space: normal;
}
/* Shape comes from `.as-badge` in archive.css; these two colours are the
   theme's own golden and special palette, matching the badges on /stones so a
   golden stone looks the same wherever it is counted. */
.as-badge--golden  { background: #FEF3C7; color: #92400E; }
.as-badge--special { background: #EDE9FE; color: #4C1D95; }

/* ── Podium: the top three by stone count ───────────────────────────────────
   Ported from the flat list's `.lb-row.is-podium` (gold / silver / bronze left
   border + a warm tint). Two differences, both deliberate:

   • the accent is a ::before bar, NOT `border-left` — a border would shift
     every podium row's content 4px right of the other 73, and .as-row's
     padding comes from a shared custom property;
   • the tint fades out over a fixed distance rather than across the row, so it
     does not change appearance when the column widths do.

   RANK IS GLOBAL, so these three follow their country through every filter and
   every sort instead of decorating whatever floats to the top. */
.as-row.is-podium { background: linear-gradient(90deg, var(--cy-tint) 0, var(--ps-surface) 340px); }
/* The row-hover tint from archive.css is (0,2,0) and so is the rule above, so
   without this the podium rows would be the only three that do not react to the
   pointer — equal specificity, and this file loads second. */
.as-row.is-podium:hover { background: linear-gradient(90deg, var(--cy-tint) 0, var(--ps-blue-pale) 340px); }
.as-row.is-podium::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--cy-accent);
    /* ⚠️ The whole row is a link (.as-row-link, a stretched overlay). A
       positioned decoration would take hits over it — a 4px dead stripe down
       the left of the three most-clicked rows on the page. */
    pointer-events: none;
}
.as-row.is-podium .cy-rank { color: var(--cy-accent); }
.as-row.is-podium-1 { --cy-accent: #d4a017; --cy-tint: var(--ps-tint-gold, #fff8e1); }
.as-row.is-podium-2 { --cy-accent: #a8b0bb; --cy-tint: var(--ps-surface-2); }
.as-row.is-podium-3 { --cy-accent: #cd7f32; --cy-tint: #fdf1e7; }

/* ── Gallery view: the country card ─────────────────────────────────────────
   Same rows, reflowed — the card chrome itself is archive.css. A country has
   no photograph, so the image well holds the flag on a soft navy wash; that is
   what stops the gallery from reading as "the list with its borders removed".

   The card deliberately shows LESS than the row: rank, flag, name, continent
   and the stone count. Contributors / places / latest are table facts you scan
   in a column, not things you compare across cards. */
.as-list.is-grid .as-thumb {
    aspect-ratio: 3 / 2;
    background: linear-gradient(160deg, #eef4ff 0%, #dde7f7 100%);
    border-bottom: 1px solid var(--ps-border);
}
.as-list.is-grid .as-thumb-ph {
    font-size: clamp(52px, 6vw, 76px);
    /* .as-thumb-ph is grey by default — it is a "no photo" placeholder there.
       Here it IS the picture, so it keeps the flag's own colours. */
    color: inherit;
    line-height: 1;
    /* Emoji flags render with a little optical weight of their own; a soft drop
       shadow lifts them off the wash without a border. */
    filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.18));
}

.as-list.is-grid .as-col-country { padding: 12px 14px 2px; }
/* On a card the flag is already 70px tall above the name — a second copy
   beside it would just be clutter. */
.as-list.is-grid .cy-flag { display: none; }
.as-list.is-grid .cy-rank { color: var(--ps-yellow); }
.as-list.is-grid .as-loc-main { font-size: 15px; }
.as-list.is-grid .cy-name { white-space: normal; overflow: visible; text-overflow: clip; }
/* `.as-loc-sub` is display:none on a card (archive.css keeps cards clean); the
   golden/special badges are worth the two lines, so this puts them back. Equal
   specificity to the rule it overrides — this file loads second.
   No horizontal padding: the badges sit INSIDE .as-col-country, which already
   supplies the card's 14px gutter. */
.as-list.is-grid .cy-rare { display: flex; margin-top: 8px; }

.as-list.is-grid .as-col-continent {
    padding: 2px 14px 0;
    font-size: 12px;
    color: var(--ps-text-light);
}
.as-list.is-grid .as-col-stones {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 14px 14px;
    margin-top: auto;   /* pin the count to the bottom so cards of differing
                           name lengths still line their footers up */
}
/* The one label that stays visible on a card: a bare number in a card footer
   is ambiguous in a way it is not under a column header. */
.as-list.is-grid .as-col-stones .cy-lbl {
    display: inline;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ps-text-light);
}
.as-list.is-grid .as-col-people,
.as-list.is-grid .as-col-places,
.as-list.is-grid .as-col-latest { display: none; }

/* Podium on a card: the accent runs across the top of the image rather than
   down a side that no longer exists. archive.css gives .is-grid .as-row its own
   background, so the row tint is dropped here and the accent carries it. */
.as-list.is-grid .as-row.is-podium { background:var(--ps-surface); }
.as-list.is-grid .as-row.is-podium::before {
    width: 100%;
    height: 4px;
    bottom: auto;
    z-index: 1;   /* above .as-thumb, which is the card's first painted child */
}

/* ── Breakpoints ────────────────────────────────────────────────────────────
   760 / 600 / 420 are the theme's own archive breakpoints. archive.css already
   handles the shared half of each (card chrome, hidden header row, mobile
   sortbar, two-up gallery, 16px inputs); what remains is this page's own cell
   layout.
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
    /* Beats the desktop `grid-template-columns: var(--as-grid)` in archive.css
       purely on load order — equal specificity, this file second.

       The country spans the card; the three counts sit in a row underneath as
       labelled stats; continent and the latest date close it out. */
    .as-row {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "country country country"
            "stones  people  places"
            "cont    cont    latest";
    }
    .as-col-country   { grid-area: country; }
    .as-col-stones    { grid-area: stones; }
    .as-col-people    { grid-area: people; }
    .as-col-places    { grid-area: places; }
    .as-col-continent { grid-area: cont; }
    .as-col-latest    { grid-area: latest; justify-self: end; text-align: right; }

    /* With the header row gone, each figure carries its own caption. */
    .cy-lbl {
        display: block;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--ps-text-light);
        margin-bottom: 1px;
    }
    .as-col-continent .cy-lbl,
    .as-col-latest .cy-lbl { display: none; }   /* both read fine unlabelled */

    .as-row .as-col-stones,
    .as-row .as-col-people,
    .as-row .as-col-places { font-size: 17px; }
    .as-row .as-col-continent,
    .as-row .as-col-latest { font-size: 13px; color: var(--ps-text-light); }

    /* The counts row gets a hairline above it so the card reads as name-then-
       stats rather than as five loose lines. */
    .as-col-stones,
    .as-col-people,
    .as-col-places { border-top: 1px solid var(--ps-border); padding-top: 8px; }

    .cy-flag { font-size: 22px; }
    .cy-name { white-space: normal; overflow: visible; text-overflow: clip; }
    /* The card has its own 16px padding and archive.css rounds its corners, so
       the podium accent has to be inset to match rather than sit on the edge. */
    .as-row.is-podium { background: linear-gradient(180deg, var(--cy-tint) 0, var(--ps-surface) 90px); }
    .as-row.is-podium::before { border-radius: var(--ps-radius) 0 0 var(--ps-radius); }
}

@media (max-width: 420px) {
    /* Three stat columns stop fitting once the card is ~300px wide; two rows of
       stats read better than three squeezed ones. */
    .as-row {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "country country"
            "stones  people"
            "places  latest"
            "cont    cont";
    }
    /* The date moves out of the footer and into the stat block, so it stops
       being right-aligned and gains the caption the wider layout did not need. */
    .as-col-latest {
        justify-self: start;
        text-align: left;
        border-top: 1px solid var(--ps-border);
        padding-top: 8px;
    }
    .as-col-latest .cy-lbl { display: block; }
}