/* ==========================
   REQUEST A LISTING PAGE LAYOUT
   Same two-column split as the Contact page (assets/css/templates/contact.css)
   — a decorative illustration + intro on the left, the form on the right —
   kept as its own template file (rather than reusing .contact-layout etc.
   directly) since this is a distinct template that may diverge later, even
   though .contact-form/.contact-form__field (assets/css/components/form.css)
   are shared as-is.
========================== */

.list-shop-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: stretch;
    margin-top: 2rem;
}

.list-shop-visual {
    background: linear-gradient(160deg, var(--color-secondary), var(--color-muted));
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
}

.list-shop-visual__title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.15;
    margin: 0.75rem 0 1rem;
    color: var(--color-text-dark);
}

.list-shop-visual__text {
    font-size: 1rem;
    color: var(--color-text-light);
    max-width: 40ch;
}

.list-shop-visual__illustration {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: auto auto 0;
}

.list-shop-form-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.list-shop-form-panel__alt {
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-light);
}

.list-shop-form-panel__alt a {
    color: var(--color-accent);
    font-weight: 600;
}

@media (max-width: 1024px) {
    .list-shop-layout {
        grid-template-columns: 1fr;
    }

    .list-shop-form-panel {
        order: 1;
    }

    .list-shop-visual {
        order: 2;
    }

    .list-shop-visual__illustration {
        max-width: 220px;
        margin-top: 2rem;
    }
}