/* Styles for ContactDialog component */
@layer components {
    .contact-dialog {
        /* The wrapper only groups the trigger with its panel; it must not become
           a box of its own in the hero's button cluster. */
        display: contents;

        & .contact-dialog__panel {
            /* A modal <dialog> is centred by the UA. Everything here is about
               what it looks like once it is, not where it sits. */
            inline-size: min(28rem, calc(100vw - 2 * var(--space-m)));
            padding: var(--space-m);
            border: 1px solid var(--color-border-accent);
            border-radius: var(--radius-m);
            background-color: var(--color-surface-raised);
            color: var(--color-text);
            box-shadow: var(--shadow-raised);

            &::backdrop {
                /* Not a --color-* token: ::backdrop resolves custom properties
                   against the dialog's own box in some engines, so this one is
                   deliberately literal. */
                background-color: rgb(0 0 0 / 0.72);
            }
        }

        & .contact-dialog__head {
            display: flex;
            align-items: start;
            justify-content: space-between;
            gap: var(--space-s);
        }

        & .contact-dialog__title {
            font-family: var(--font-display);
            font-size: var(--size-step-1);
            line-height: 1.05;
            text-transform: uppercase;
        }

        & .contact-dialog__close {
            display: inline-flex;
            padding: var(--space-3xs);
            border: 0;
            background: none;
            color: var(--color-text-muted);
            cursor: pointer;
            font-size: var(--size-step-1);
            transition: color var(--duration-fast) var(--ease-jab);

            &:hover {
                color: var(--color-accent);
            }
        }

        & .contact-dialog__lead {
            margin-block-start: var(--space-2xs);
            font-size: var(--size-step--1);
            line-height: 1.6;
            color: var(--color-text-muted);
        }

        & .contact-dialog__ways {
            margin-block-start: var(--space-m);
            display: grid;
            gap: var(--space-2xs);
            padding: 0;
            list-style: none;
        }

        & .contact-dialog__link {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            padding: var(--space-xs) var(--space-s);
            border: 1px solid var(--color-border);
            color: var(--color-text);
            text-decoration: none;
            transition:
                border-color var(--duration-fast) var(--ease-jab),
                background-color var(--duration-fast) var(--ease-jab);

            &:hover {
                border-color: var(--color-border-accent);
                background-color: var(--color-surface-sunken);
            }

            /* Exception: the phone is the conversion, so it reads as the one
               filled control among outlines. */
            &[data-primary="true"] {
                border-color: var(--color-accent);
                background-color: var(--color-accent);
                color: var(--color-on-accent);

                &:hover {
                    background-color: var(--color-accent-strong);
                    border-color: var(--color-accent-strong);
                }
            }
        }

        & .contact-dialog__value {
            font-family: var(--font-display);
            font-size: var(--size-step-1);
            letter-spacing: 0.02em;
        }

        & .contact-dialog__icon {
            flex: none;
        }

        & .contact-dialog__foot {
            margin-block-start: var(--space-m);
            padding-block-start: var(--space-s);
            border-block-start: 1px solid var(--color-border);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-s);
        }

        & .contact-dialog__address {
            display: flex;
            align-items: center;
            gap: var(--space-3xs);
            font-size: var(--size-step--1);
            color: var(--color-text-muted);
        }
    }

    /* The panel arrives rather than appearing. `allow-discrete` is what lets a
       display:none element animate in at all. */
    @media (prefers-reduced-motion: no-preference) {
        .contact-dialog .contact-dialog__panel {
            transition:
                opacity var(--duration-base) var(--ease-jab),
                translate var(--duration-base) var(--ease-punch),
                overlay var(--duration-base) allow-discrete,
                display var(--duration-base) allow-discrete;
            opacity: 0;
            translate: 0 1rem;

            &[open] {
                opacity: 1;
                translate: 0 0;

                @starting-style {
                    opacity: 0;
                    translate: 0 1rem;
                }
            }
        }
    }
}