/*
 * Offer detail
 *
 * Mobile first.
 * Summary is intentionally static.
 */

/* Breadcrumb */

.offer-breadcrumb {
    border-bottom: 1px solid var(--border);
}

.offer-breadcrumb .container {
    display: flex;
    align-items: center;
    gap: var(--space-tight);

    padding-block: var(--space-control);

    overflow-x: auto;

    white-space: nowrap;
}

.offer-breadcrumb a,
.offer-breadcrumb span {
    flex: none;

    font-size: var(--text-sm);
    line-height: var(--text-sm-line);
}

.offer-breadcrumb a {
    color: var(--muted-foreground);
    text-decoration: none;
}

.offer-breadcrumb a:hover {
    color: var(--foreground);
}

.offer-breadcrumb__separator {
    color: var(--muted-foreground);
}


/* Page */

.offer-page {
    padding-block: var(--space-group);
}

.offer-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-group);

    align-items: start;
}

.offer-page__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-element);

    min-width: 0;
}

.offer-page__content > * {
    margin: 0;
}

.offer-page__content .heading--display {
    max-width: 10ch;
}

.offer-page__content > .text--lead {
    max-width: 40rem;
}

.offer-page__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-element);

    max-width: 40rem;
    margin-top: var(--space-element);
}

.offer-page__body > * {
    margin: 0;
}


/* Summary */

.offer-summary {
    position: static !important;
    top: auto !important;

    align-self: start;

    width: 100%;
    min-width: 0;

    padding: var(--space-element);

    border: 1px solid var(--border);
    border-radius: var(--radius);

    background: color-mix(
        in oklch,
        var(--card) 84%,
        transparent
    );
}

.offer-summary__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-element);

    width: 100%;

    text-align: center;
}

.offer-summary__content > * {
    margin: 0;
}

.offer-summary .heading {
    width: 100%;
    text-align: center;
}

.offer-summary__meta {
    width: 100%;

    color: var(--muted-foreground);

    font-size: var(--text-sm);
    line-height: var(--text-sm-line);

    text-align: center;
}

.offer-summary__primary {
    width: 100%;
    max-width: none;

    justify-content: center;
}

.offer-summary__help {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-control);

    width: 100%;
}

.offer-summary__help-text {
    width: 100%;
    margin: 0;

    color: var(--muted-foreground);

    font-size: var(--text-sm);
    line-height: var(--text-sm-line);

    text-align: center;
}

.offer-summary__contact-actions {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: var(--space-tight);

    width: 100%;
}

.offer-summary__contact-actions .button {
    width: 100%;
    min-width: 0;

    justify-content: center;
}


/* Tablet + desktop */

@media (min-width: 48rem) {
    .offer-page__layout {
        grid-template-columns:
            minmax(0, 7fr)
            minmax(18rem, 5fr);

        gap: var(--space-group);
    }
}

/* Offer summary rhythm: aligned with payment card */

.offer-summary {
    padding: 0;
    overflow: hidden;
}

.offer-summary__content {
    display: block;
}

.offer-summary__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-tight);

    width: 100%;
    padding: var(--space-element);

    border-bottom: 1px solid var(--border);

    text-align: center;
}

.offer-summary__header > * {
    margin: 0;
}

.offer-summary__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-element);

    width: 100%;
    padding: var(--space-element);

    text-align: center;
}

.offer-summary__body > * {
    margin: 0;
}

.offer-summary__primary {
    width: 100%;
}