/* ==========================================================================
   Page: request a quote + catalogue  (site/quote/create, site/catalog/show)
   --------------------------------------------------------------------------
   Quote: form card (2/3) beside a lemon "how it works" card and a navy
   "talk directly" card. After sending, a thank-you card replaces the form.
   Catalogue: one download card per language PDF, or an empty-state card.
   ========================================================================== */

/* ── Quote ───────────────────────────────────────────────────────────────── */
.quote { grid-template-columns: 2fr 1fr; align-items: start; }
.quote__h { font-size: var(--fs-md); }
.quote__form .quote__h:not(:first-of-type) { margin-top: var(--s-7); }
.quote__form .fields { margin-top: var(--s-4); }
.quote__send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }

.quote__side { display: grid; gap: var(--gap); position: sticky; top: calc(var(--header-h) + var(--s-3)); }
.quote__steps ol { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.quote__steps li { display: flex; align-items: center; gap: var(--s-3); font-weight: 600; font-size: var(--fs-sm); }
.quote__steps .num {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--lemon);
    font-family: var(--font-num);
    font-size: var(--fs-xs);
    font-weight: 700;
}
.quote__talk p { margin-top: var(--s-2); color: var(--on-dark-soft); font-size: var(--fs-sm); }
.quote__talk-actions { display: grid; gap: var(--s-2); margin-top: var(--s-5); }

.quote__done { display: grid; justify-items: start; gap: var(--s-3); }
.quote__done-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--lemon); font-size: 1.6rem; }
.quote__done h2 { font-size: var(--fs-xl); }
.quote__done p { max-width: 40rem; color: var(--ink-soft); font-size: var(--fs-md); }
.quote__done-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }

/* ── Catalogue ───────────────────────────────────────────────────────────── */
.catalog { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.catalog__file { display: flex; flex-direction: column; gap: var(--s-4); min-height: 280px; }
.catalog__file .mark { width: 48px; color: var(--navy); }
.catalog__file.card--navy .mark { color: var(--lemon); }
.catalog__name { display: block; margin-top: auto; font-weight: 700; font-size: var(--fs-lg); }
.catalog__meta { display: block; color: var(--ink-faint); font-size: var(--fs-sm); }
.catalog__btn { align-self: flex-start; }
.catalog__empty .mark { width: 48px; color: var(--navy); }
.card--navy .catalog__meta { color: var(--on-dark-soft); }
.catalog__photo { min-height: 280px; }
.catalog__empty { grid-column: span 1; display: grid; justify-items: start; gap: var(--s-3); }
.catalog__empty p { color: var(--ink-soft); }
.catalog__empty-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.catalog__browse { color: var(--teal); font-weight: 600; font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 0.3em; }

@media (max-width: 991.98px) {
    .quote { grid-template-columns: 1fr; }
    .quote__side { position: static; }
    .catalog { grid-template-columns: 1fr; }
}