/* Shared corner controls: 2.5x the original size at a 2560px viewport. */
:root {
    --utility-font: clamp(16px, 0.9765625vw, 25px);
    --utility-height: calc(var(--utility-font) * 3.6);
    --utility-edge: clamp(9px, 0.87890625vw, 22.5px);
}

.prestige-a11y-launcher,
.privacy-settings-button {
    box-sizing: border-box;
    min-height: var(--utility-height);
    min-width: 0;
    max-width: calc(50vw - var(--utility-edge) * 2);
    padding: calc(var(--utility-font) * .5) calc(var(--utility-font) * .8);
    border-radius: calc(var(--utility-font) * .8);
    font: 800 var(--utility-font)/1.25 Arial, sans-serif !important;
    white-space: normal;
    overflow-wrap: anywhere;
}

.prestige-a11y-launcher {
    left: max(var(--utility-edge), env(safe-area-inset-left, 0px));
    bottom: var(--prestige-a11y-launcher-bottom, var(--utility-edge));
    gap: calc(var(--utility-font) * .5);
}

.prestige-a11y-launcher__mark {
    display: block;
    flex: 0 0 auto;
    width: 1.8em;
    height: 1.8em;
    font-size: inherit;
}

.privacy-settings-button {
    right: max(var(--utility-edge), env(safe-area-inset-right, 0px));
    bottom: calc(var(--utility-edge) + env(safe-area-inset-bottom, 0px));
}

/* Keep the last content reachable above the fixed controls, including on phones. */
body {
    padding-bottom: calc(var(--utility-height) + var(--utility-edge) * 2 + env(safe-area-inset-bottom, 0px));
}

.local-info {
    width: min(1100px, calc(100% - 32px));
    margin: 32px auto;
    padding: clamp(20px, 3vw, 44px);
    border: 1px solid rgba(92, 59, 109, .2);
    border-radius: 28px;
    background: rgba(252, 249, 253, .95);
    color: #493552;
    font-size: 1rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.local-info h1 {
    font-size: clamp(1.5rem, 2.1vw, 2.25rem);
    line-height: 1.25;
    margin: 0 0 20px;
    color: var(--color-purple);
}

.local-info h2 { font-size: 1.35rem; line-height: 1.35; margin: 24px 0 10px; }
.local-info p + p { margin-top: 12px; }
.local-info a { color: var(--color-purple); text-underline-offset: .2em; }
.local-info a:hover { text-decoration-thickness: 2px; }
.local-info a:focus-visible { outline: 3px solid var(--color-purple); outline-offset: 4px; }
.local-info__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.local-info__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--color-purple);
    border-radius: 16px;
    background: transparent;
    font-weight: 700;
    text-decoration: none;
}
.local-info--clinic { margin-top: 20px; }

/* Between the stacked layout and a full desktop, let the two cards shrink. */
@media (min-width: 1201px) and (max-width: 1350px) {
    .main-section > .container:not(.header-container) { width: 100%; }
    .clinics-grid { gap: 16px; }
    .clinic-card { min-width: 0; padding-inline: 18px; }
    .clinic-name { font-size: clamp(1.55rem, 2.4vw, 2rem); white-space: normal; }
}

@media (max-width: 700px), (hover: none) and (pointer: coarse) {
    :root { --utility-font: 13px; --utility-height: 48px; --utility-edge: 6px; }
    .prestige-a11y-launcher,
    .privacy-settings-button { border-radius: 10px; padding: 7px 8px; }
    .local-info { width: calc(100% - 24px); margin-block: 24px; padding: 20px; border-radius: 20px; }
    .local-info__links { flex-direction: column; }
}

@media (max-width: 360px) {
    :root { --utility-font: 12px; }
    .prestige-a11y-launcher,
    .privacy-settings-button { padding-inline: 6px; }
}