/* ============================================================================
   GIFT GUIDES — the "what to gift…" pages under /gifts/, /ka/gifts/, /ru/gifts/.

   Loaded after landing.css and built on its tokens and blocks (.landing,
   .landing__cards, .landing__faq, .landing__close). Only what a guide adds is
   here: idea lists with a price, the jump chips over a long list, the price
   note and the links to the other guides.

   Written by launch/compose/render-guides.mjs — edit the copy in
   launch/compose/guides/*.json, not the generated pages.
   ========================================================================= */

/* ─── Jump chips (only over a long list, e.g. the age groups) ────────────── */

.guide__jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.guide__jump a {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--l-tint);
    color: var(--l-accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

/* ─── A group of ideas ───────────────────────────────────────────────────── */

.guide__group {
    margin-top: 28px;
    scroll-margin-top: 16px;
}

.guide__group > p {
    margin-bottom: 12px;
}

.guide__ideas {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .guide__ideas {
        grid-template-columns: repeat(2, 1fr);
    }
}

.guide__ideas li {
    background: var(--l-surface);
    border: 1px solid var(--l-line);
    border-radius: 14px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: baseline;
}

.guide__idea {
    font-weight: 700;
    font-size: 16px;
    color: var(--l-ink);
}

/* The price is a range in lari and never a promise — the note under the list
   says so. tabular-nums keeps "30–60 ₾" from jittering between rows. */
.guide__price {
    font-size: 14px;
    font-weight: 600;
    color: var(--l-accent);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.guide__ideas li p {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 15px;
}

.guide__pricenote {
    font-size: 14px;
    color: var(--l-ink-3);
    margin: 18px 0 0;
}

/* ─── The other guides ───────────────────────────────────────────────────── */

.guide__more {
    margin-top: 40px;
}

.guide__more ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.guide__more a {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid var(--l-line);
    background: var(--l-surface);
    color: var(--l-ink);
    font-weight: 600;
    text-decoration: none;
}