/* =============================================================================
   Module: contact-details  (modules/contact-details.php)
   -----------------------------------------------------------------------------
   Where the practice is, when it is open, how to reach it. Three groups, each
   opening on a hairline.

   THE RULE IS ON EVERY GROUP, not between them, and that is what lets one
   declaration serve both layouts: side by side the three rules read as one line
   across the top of the row, stacked they read as separators. A `+` selector
   would have given the second reading only.

   NO MEDIA QUERY, and the module file says why at length: this block sits in a
   column sized by the split ratio rather than by the window, so auto-fit - which
   measures the column it is in - is the only thing that can be right at every
   width. 15rem is the narrowest a group may be before "Nach Vereinbarung" has to
   break, and min(…, 100%) keeps that from overflowing a phone.
   ============================================================================= */

.contact-details {
    display: grid;
    gap: var(--space-lg) var(--space-xl);
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

/* Where it follows the section's headline it stands away from it, not under
   it - the same rule base/components.css already draws for .section-head +
   .notice, and it belongs here for the same reason: it is this block's
   position, not the head's. */
.section-head + .contact-details {
    margin-block-start: var(--space-2xl);
}

.contact-details__group {
    padding-block-start: var(--space-md);
    border-block-start: var(--border-width) solid var(--color-line);
}

.contact-details__title {
    margin: 0 0 var(--space-sm);
    color: var(--color-accent);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

/* --- The postal address ------------------------------------------------------
   A block of text and not a set of pairs, which is why it is an <address> and
   not the <dl> below it. The lines are spans set to display: block, so the
   markup carries no <br> - a line break that is layout, not content.
   -------------------------------------------------------------------------- */
.contact-details__address {
    font-size: var(--font-size-base);
}

.contact-details__line {
    display: block;
}

/* The practice's name, first line, carries the weight. */
.contact-details__line:first-child {
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
}

/* --- The pairs ---------------------------------------------------------------
   Opening hours and telephone numbers. Two columns where there is room for
   them, one under the other where there is not - again auto-fit rather than a
   breakpoint, for the same reason.
   -------------------------------------------------------------------------- */
.contact-details__rows {
    display: grid;
    gap: var(--space-2xs) var(--space-sm);
    margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), auto));
}

.contact-details__label {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.contact-details__value {
    margin: 0;
    color: var(--color-heading);
    font-weight: var(--font-weight-medium);

    /* A telephone number never wraps mid-number. */
    overflow-wrap: anywhere;
}

/* Where the two columns collapse into one, the value has to stay attached to
   the label above it and away from the next pair. */
.contact-details__value:not(:last-child) {
    margin-block-end: var(--space-2xs);
}

.contact-details__link {
    color: inherit;
}

.contact-details__note {
    margin-block: var(--space-sm) 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* --- The way out of the group ------------------------------------------------
   "Route planen". The arrow travels a little on hover, which is the same
   movement .link-underline is already making under it.
   -------------------------------------------------------------------------- */
.contact-details__action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-block-start: var(--space-md);
    min-height: 44px;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);

    /* The rule belongs under the words, not under the touch target. */
    --link-underline-inset: 0.75rem;
}

.contact-details__arrow {
    flex: none;
    transition: transform var(--transition-base);
}

.contact-details__action:hover .contact-details__arrow,
.contact-details__action:focus-visible .contact-details__arrow {
    transform: translateX(0.25rem);
}