﻿/* Reusable public-site contact cards. Theme colors come from existing site tokens. */
.contact-information-module {
    --contact-information-accent: var(--kt-accent, var(--site-primary, #0b1f3a));
    --contact-information-accent-strong: var(--kt-accent-strong, var(--site-primary-strong, #163c73));
}

.contact-information-stack { display: grid; gap: 1rem; }

.contact-information-card {
    overflow: hidden;
    border: 1px solid var(--site-border, #dfe5ef);
    border-radius: 1rem;
    background: var(--site-surface, #fff);
    box-shadow: 0 1rem 2.25rem rgba(15, 31, 62, .10);
}

.contact-information-card__header {
    display: flex;
    gap: .875rem;
    align-items: center;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--site-border, #e5e9f1);
}

.contact-information-card__mark {
    display: inline-flex;
    flex: 0 0 2.75rem;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
    background: linear-gradient(135deg, var(--contact-information-accent), var(--contact-information-accent-strong));
    color: #fff;
}

.contact-information-card__title { margin: 0; color: var(--site-heading, #12213b); font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.contact-information-card__website { display: inline-flex; gap: .4rem; align-items: center; margin-top: .25rem; color: var(--contact-information-accent); font-size: .875rem; font-weight: 600; text-decoration: none; }
.contact-information-card__website:hover, .contact-information-card__website:focus-visible { color: var(--contact-information-accent-strong); text-decoration: underline; }

.contact-information-card__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 1.25rem; }
.contact-information-detail { min-width: 0; padding: .875rem 1rem; border: 1px solid var(--site-border, #e5e9f1); border-radius: .75rem; background: var(--site-surface-muted, #f7f9fc); }
.contact-information-detail--wide { grid-column: 1 / -1; }
.contact-information-detail dt { display: flex; gap: .45rem; align-items: center; margin: 0 0 .35rem; color: var(--contact-information-accent); font-size: .75rem; font-weight: 700; letter-spacing: .04em; line-height: 1.35; text-transform: uppercase; }
.contact-information-detail dd { margin: 0; color: var(--site-text, #1d2939); line-height: 1.55; overflow-wrap: anywhere; }
.contact-information-detail a { color: inherit; font-weight: 600; text-decoration: none; }
.contact-information-detail a:hover, .contact-information-detail a:focus-visible { color: var(--contact-information-accent); text-decoration: underline; }

.contact-information-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1.25rem 1.25rem; }
.contact-information-card__actions--left { justify-content: flex-start; }
.contact-information-card__actions--center { justify-content: center; }
.contact-information-card__actions--right { justify-content: flex-end; }
.contact-information-action { display: inline-flex; gap: .45rem; align-items: center; min-height: 2.5rem; padding: .55rem .8rem; border: 1px solid color-mix(in srgb, var(--contact-information-accent) 25%, var(--site-border, #dfe5ef)); border-radius: .6rem; color: var(--contact-information-accent); font-size: .875rem; font-weight: 700; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.contact-information-action:hover, .contact-information-action:focus-visible { border-color: var(--contact-information-accent); background: var(--contact-information-accent); color: #fff; text-decoration: none; transform: translateY(-1px); }
.contact-information-action--whatsapp { border-color: color-mix(in srgb, #25d366 40%, var(--site-border, #dfe5ef)); color: #168a43; }
.contact-information-action--whatsapp:hover, .contact-information-action--whatsapp:focus-visible { border-color: #25d366; background: #25d366; }

@media (max-width: 767.98px) {
    .contact-information-card__header, .contact-information-card__details, .contact-information-card__actions { padding-right: 1rem; padding-left: 1rem; }
    .contact-information-card__details { grid-template-columns: 1fr; }
    .contact-information-detail--wide { grid-column: auto; }
    .contact-information-action { flex: 1 1 100%; justify-content: center; }
}
