/* ═══════════════════════════════════════════════════════════════════════
   SWARNIKA JEWELS — responsive.css
   Breakpoints only. style.css carries the 360px mobile-first base; every
   rule in this file lives inside one of exactly four min-width queries:

        480px   ·   768px   ·   1024px   ·   1440px

   Nothing outside a media query. No colour that is not a token. No shadow.
   No new global tokens — the one :root touched here is --gutter, whose
   growth curve is part of the token contract itself
   (1.25rem → 2.5rem @768 → 3.5rem @1024 → 4.5rem @1440).

   THE TRANSITIONS THIS FILE OWNS
     Header        drawer nav below 1024, real nav row at 1024. The centred
                   wordmark holds the middle column at every width because
                   the masthead is a 1fr / auto / 1fr grid throughout.
     Hero          copy over the photograph on a phone; photograph pulled
                   to a right-hand column and copy anchored left at 768.
     Trust strip   2 × 2 → 4-across at 768, and only then do the vertical
                   hairlines appear.
     Portals       phone scroll row → 5-across grid at 768.
     Wedding band  stacked → copy-left / photo-right at 768.
     Product grid  2-up → 3-up at 768 → 4-up at 1024.
     Charge table  stacked data-label cards → a real table at 768.
     Footer        stacked → 2 columns at 768 → 5 columns at 1024.

   OVERFLOW: anything that can out-run 360px scrolls inside its own box —
   the portal row, the chip row, the lookbook strip and the making-charge
   table. Those containers are set up in style.css (that is where the base
   lives); this file's job is to unwind each of them cleanly at the width
   where the content fits, without leaving a stale negative margin or a
   stale scroll-snap behind.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   ≥ 480px — LARGE MOBILE
   Two columns become possible. Buttons stop being full-width blocks.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 480px) {

    /* Button pairs sit side by side instead of stacking. */
    .cta-actions,
    .edit-actions,
    .col-row-links,
    .store-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-sm) var(--space-md);
    }

    .cta-actions .btn,
    .edit-actions .btn,
    .col-row-links .btn,
    .empty .btn {
        width: auto;
    }

    /* Newsletter: name and number share a row, the button follows. */
    .signup-form {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-sm);
    }

    .signup-input {
        flex: 1 1 11rem;
        min-width: 0;
    }

    .signup-go {
        flex: 0 0 auto;
        width: auto;
    }

    .signup-done {
        flex: 1 0 100%;
    }

    /* Today's rates: 2 × 2. */
    .rate-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm) var(--space-md);
    }

    /* Workshop facts: 2 × 2. */
    .fact-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    /* Collections strip: two cards across. */
    .col-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    /* Lookbook leaves its phone scroll row behind. */
    .look-strip {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
        scroll-snap-type: none;
    }

    .look-item {
        width: auto;
        min-width: 0;
        scroll-snap-align: none;
    }

    /* Enquiry drawer stops being a full-bleed sheet. */
    .drawer-panel {
        width: min(26rem, 90vw);
        max-width: 26rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   ≥ 768px — TABLET
   The site opens out: split heroes, four-across trust, real tables, the
   five portals in one row. Nav is still a drawer.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

    :root {
        --gutter: 2.5rem;
    }

    /* ── Utility bar ─────────────────────────────────────────────────── */
    .utility-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-xs) var(--space-md);
    }

    .utility-links {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
    }

    .utility-promise {
        justify-content: flex-start;
    }

    /* ── Masthead — wordmark LEFT, then a gap, then menu + tools ──────
       User instruction: the logo sits left at every width, not centred.
       Column 2 is the empty spring here and becomes the nav row at 1024. */
    .masthead-inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: var(--space-md);
    }

    .mast-mark   { grid-column: 1; grid-row: 1; justify-self: start; }
    .mast-menu   { grid-column: 2; grid-row: 1; justify-self: end; margin-left: 0; }
    .mast-tools  { grid-column: 3; grid-row: 1; justify-self: end; }

    .mast-tools {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
    }

    .search-form {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
    }

    .search-input {
        flex: 1 1 auto;
        min-width: 0;
    }

    .search-go {
        flex: 0 0 auto;
        width: auto;
    }

    /* Sticky phone action bar retires; its clearance goes with it. */
    .mobile-bar { display: none; }
    body        { padding-bottom: 0; }

    .drawer-panel {
        width: min(28rem, 90vw);
        max-width: 28rem;
    }

    /* ── Hero — full-width background photo with left copy overlay ───── */
    .hero-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .hero-inner {
        display: flex;
        align-items: center;
    }

    .hero-copy {
        max-width: 32rem;
    }

    .hero-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ── Trust strip — 4 across, and only now the hairlines ──────────── */
    .trust-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }

    .trust-item {
        min-width: 0;
        padding-inline: var(--space-md);
    }

    .trust-item + .trust-item {
        border-left: var(--hair) solid var(--color-border);
    }

    /* ── Category portals — the phone scroll row becomes five columns ── */
    .portal-row {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-md);
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
        scroll-snap-type: none;
    }

    .portal {
        width: auto;
        min-width: 0;
        scroll-snap-align: none;
    }

    /* ── Section heads that carry a link on the right ────────────────── */
    .section-head-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--space-md);
    }

    .section-head-row > div {
        max-width: 46rem;
    }

    /* ── The wedding band — copy left, photograph right ──────────────── */
    .edit-card {
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        align-items: center;
        gap: var(--space-lg);
    }

    .edit-say,
    .edit-media {
        min-width: 0;
    }

    /* ── Product grid — 3 up ─────────────────────────────────────────── */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
    }

    .product-grid > .stagger-child,
    .product-grid > .pc {
        min-width: 0;
    }

    /* ── Reviews — two across, the odd one out takes the full width ──── */
    .review-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .review {
        min-width: 0;
    }

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

    /* ── Two-column editorial blocks ─────────────────────────────────── */
    .note-grid,
    .workshop-grid,
    .showroom-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: var(--space-lg);
    }

    .note-grid > *,
    .workshop-grid > *,
    .showroom-grid > * {
        min-width: 0;
    }

    /* ── Collections page — media and copy swap sides down the page ────
       The mobile base pins both children with NAMED AREAS
       (grid-template-areas: "media" "say") — a one-column, two-row stack.
       Setting grid-template-columns here does NOT dissolve that template,
       so without the reset below both children stay in column 1 and the
       copy renders BELOW the photo. Only .is-flipped rows looked correct,
       because they set explicit line placement, which beats named areas. */
    .col-row-inner {
        display: grid;
        grid-template-areas: none;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: var(--space-lg);
    }

    .col-row-media,
    .col-row-say {
        min-width: 0;
    }

    /* Default row: photo left, copy right. */
    .col-row-media { grid-column: 1; grid-row: 1; }
    .col-row-say   { grid-column: 2; grid-row: 1; }

    .col-row-full.is-flipped .col-row-media {
        grid-column: 2;
        grid-row: 1;
    }

    .col-row-full.is-flipped .col-row-say {
        grid-column: 1;
        grid-row: 1;
    }

    /* ── Also on the counter — three notes across ────────────────────── */
    .also-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
    }

    .also-item {
        min-width: 0;
    }

    /* ── About: the dated rail, the promises ledger ──────────────────── */
    .rail-item {
        display: grid;
        grid-template-columns: 7rem 1fr;
        align-items: baseline;
        gap: var(--space-md);
    }

    .rail-body {
        min-width: 0;
    }

    .ledger-row {
        display: grid;
        grid-template-columns: 14rem 1fr;
        align-items: baseline;
        gap: var(--space-sm) var(--space-md);
    }

    .ledger-v {
        min-width: 0;
    }

    /* ── Jewellery: page head, filters, price steps ──────────────────── */
    .page-head-inner {
        display: grid;
        grid-template-columns: 1.35fr 1fr;
        align-items: start;
        gap: var(--space-lg);
    }

    .page-head-say,
    .rate-card {
        min-width: 0;
    }

    .filter-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-sm) var(--space-md);
    }

    .chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs) var(--space-sm);
        overflow: visible;
        margin-inline: 0;
        padding-inline: 0;
        scroll-snap-type: none;
    }

    .chip {
        scroll-snap-align: none;
    }

    .pricing-steps li {
        display: grid;
        grid-template-columns: 6.5rem 1fr;
        align-items: baseline;
        gap: var(--space-sm);
    }

    .step-v {
        min-width: 0;
    }

    /* ── The making-charge card returns to being a real table ────────── */
    .charge-table {
        display: table;
        width: 100%;
        table-layout: auto;
        border-collapse: collapse;
    }

    .charge-table thead { display: table-header-group; }
    .charge-table tbody { display: table-row-group; }
    .charge-table tr    { display: table-row; }

    .charge-table th,
    .charge-table td {
        display: table-cell;
    }

    .charge-table td::before {
        content: none;
    }

    /* ── Footer — two columns, the identity block spanning both ──────── */
    .footer-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg) var(--space-md);
    }

    .footer-identity {
        grid-column: 1 / -1;
    }

    .footer-col {
        min-width: 0;
    }

    .footer-marks .mark-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-xs) var(--space-md);
    }

    .footer-base-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-xs) var(--space-md);
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   ≥ 1024px — DESKTOP
   The nav drawer retires and the real navigation row appears. Grids reach
   their full width: four pieces across, four collections, five footer
   columns.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    :root {
        --gutter: 3.5rem;
    }

    /* ── Header: drawer out, nav row in ──────────────────────────────
       Wordmark stays in column 1; the nav takes the spring column beside
       it, so the reading order left→right is logo → nav → tools. */
    .mast-menu  { display: none; }
    .nav-panel  { display: none; }

    .mast-nav {
        display: block;
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        margin-left: var(--space-md);
    }

    .nav-list {
        display: flex;
        align-items: center;
        gap: var(--space-md);
    }

    .nav-list > li {
        position: relative;
    }

    /* ── Hero ────────────────────────────────────────────────────────── */
    .hero-copy {
        max-width: 36rem;
    }

    /* Image audit: slides 1, 2 and 4 are centre-weighted, so the bride's
       face sits dead centre and the left-anchored headline lands on it.
       Push the framing right from here up, where the copy overlays the
       photo. Mobile keeps the base framing — the photo is a full-bleed
       ground there and the copy sits over a scrim, not over the face. */
    .hero-photo img {
        object-position: 85% center;
    }



    /* ── Grids at full width ─────────────────────────────────────────── */
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-md);
    }

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

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

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

    .review:last-child:nth-child(odd) {
        grid-column: auto;
    }

    /* ── Split blocks get more air and a deliberate weighting ────────── */
    .edit-card {
        grid-template-columns: 1fr .92fr;
        gap: var(--space-xl);
    }

    .note-grid,
    .workshop-grid,
    .showroom-grid,
    .col-row-inner {
        gap: var(--space-xl);
    }

    .page-head-inner {
        grid-template-columns: 1.5fr 1fr;
        gap: var(--space-xl);
    }

    /* ── How a price is built, beside the charge card ────────────────── */
    .pricing-grid {
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        align-items: start;
        gap: var(--space-xl);
    }

    .pricing-say,
    .charge-card {
        min-width: 0;
    }

    /* ── Newsletter — the promise beside the field ───────────────────── */
    .signup-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: var(--space-lg);
    }

    .signup-say,
    .signup-form {
        min-width: 0;
    }

    /* ── About: wider key columns ────────────────────────────────────── */
    .rail-item {
        grid-template-columns: 8rem 1fr;
        gap: var(--space-lg);
    }

    .ledger-row {
        grid-template-columns: 18rem 1fr;
        gap: var(--space-sm) var(--space-lg);
    }

    /* ── Footer — identity plus four columns ─────────────────────────── */
    .footer-grid {
        grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr;
        gap: var(--space-lg) var(--space-md);
    }

    .footer-identity {
        grid-column: auto;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   ≥ 1440px — LARGE DESKTOP
   The container is already capped at 1280px, so this width buys margin,
   not columns. Only the gutter and a few paired lists change.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {

    :root {
        --gutter: 4.5rem;
    }

    .hero-photo {
        width: 100%;
    }

    .hero-copy {
        max-width: 40rem;
    }

    /* The two showrooms sit side by side rather than one under the other. */
    .store-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
        gap: var(--space-md);
    }

    .store {
        min-width: 0;
    }

    .rail-item {
        grid-template-columns: 9rem 1fr;
    }

    .ledger-row {
        grid-template-columns: 20rem 1fr;
    }

    .footer-grid {
        gap: var(--space-lg);
    }
}