/* =============================================================================
   Shared components - reusable pieces that are not tied to a single module.
   ============================================================================= */

/* --- Skip link ------------------------------------------------------------- */
.skip-link {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: var(--z-overlay);
    padding: var(--space-2xs) var(--space-sm);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    transform: translateY(-100%);
}

.skip-link:focus {
    transform: translateY(0);
}

/* --- Buttons --------------------------------------------------------------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-md);
    min-height: 44px;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.button:hover,
.button:focus-visible {
    background-color: var(--color-accent);
    color: var(--color-blue);
}

.button--secondary {
    background-color: transparent;
    color: var(--color-primary);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-primary);
}

.button--secondary:hover,
.button--secondary:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

/* The quiet pill the content pages use to leave a section - "Termin
   vereinbaren", "Kontakt", "Unser Ärzteteam". A white lozenge with a hairline
   and a small upper-case label: it has to sit in a column of running text
   without out-shouting the headline above it, which --secondary, drawn in the
   full primary, does. Filling from the left on hover is the same movement as
   .link-underline and the tiles - a thing filling from the left means the same
   everywhere on the site. */
.button--quiet {
    position: relative;
    overflow: hidden;
    padding-inline: var(--space-lg);
    background-color: var(--color-surface);
    box-shadow: inset 0 0 0 var(--border-width) var(--color-line);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

/* The wipe. A pseudo-element rather than a background-color transition,
   because a colour crossing the whole pill reads as a flash where a rule
   crossing it reads as a movement. */
.button--quiet::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-base);
}

/* Over the wipe. The label is the button's own text node, so it needs a
   positioned wrapper - see .button__label in the markup. */
.button__label {
    position: relative;
    z-index: 1;
}

.button--quiet:hover,
.button--quiet:focus-visible {
    background-color: var(--color-surface);
    color: var(--color-primary);
}

.button--quiet:hover::before,
.button--quiet:focus-visible::before {
    transform: scaleX(1);
}

/* On an inverted band the white lozenge would be the loudest thing in the
   section, so there it is the outline only. */
.section--invert .button--quiet,
.section--gradient .button--quiet {
    background-color: transparent;
    color: var(--color-text-inverse);
}

.section--invert .button--quiet:hover,
.section--invert .button--quiet:focus-visible,
.section--gradient .button--quiet:hover,
.section--gradient .button--quiet:focus-visible {
    background-color: transparent;
    color: var(--color-primary);
}

/* --- Eyebrow -----------------------------------------------------------------
   The small upper-case line that names the subject above a headline:
   "Bauch & Abdomen · CT und MRT". Upper case in CSS, not in the markup, so a
   screen reader still gets the words as they are written.
   -------------------------------------------------------------------------- */
.eyebrow {
    margin: 0 0 var(--space-md);
    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;
}

/* --- Animated underline ------------------------------------------------------
   A link whose rule draws itself from left to right on hover or focus and
   retracts the same way on leave. Put the class on the <a> (or on a <button>
   that reads as a link):

     <a class="link-underline" href="…">Impressum</a>

   text-decoration cannot be animated, so the rule is a pseudo-element that
   scales on the X axis - a transform, so it stays on the compositor. The
   element is inline-block, which makes the rule exactly as wide as the text
   instead of as wide as its column.

   When the link carries vertical padding (touch targets in the footer), set
   --link-underline-inset to that padding so the rule stays under the text.
   -------------------------------------------------------------------------- */
.link-underline {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.link-underline::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: var(--link-underline-inset, 0);
    width: 100%;
    height: var(--border-width);
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--transition-base);
}

.link-underline:hover::after,
.link-underline:focus-visible::after {
    transform: scaleX(1);
}

/* --- Section head ------------------------------------------------------------
   The headline a content section opens with: two hand-set lines in the accent
   blue, the second one bold, and - where the section has one - a column of
   supporting text to its right, separated by a hairline rule.

     <div class="section-head">
         <h2 class="section-title">
             <span class="section-title__line">High-Tech</span>
             <span class="section-title__line section-title__line--strong">Ausstattung.</span>
         </h2>
         <p class="section-head__aside">…</p>
     </div>

   The title stands on its own: a section without an aside (the doctors' row)
   uses .section-title alone. --section-head-aside widens the right column where
   a shorter headline leaves the room for it.

   WHICH LINE IS BOLD is editorial and differs from headline to headline, so
   modules/section-title.php takes it as a parameter rather than deriving it
   from the order. Writing the two spans out by hand is still fine where the
   headline is fixed - see pages/home.php.
   -------------------------------------------------------------------------- */
.section-title {
    color: var(--color-accent);
    font-size: var(--font-size-h1);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);

    /* The lines are set by hand, so balancing them would only fight the markup. */
    text-wrap: normal;
}

/* One step down, for a headline that is a sentence rather than a title: the
   intro of a content page, which has to sit UNDER the section headings that
   follow it rather than over them. */
.section-title--sm {
    font-size: var(--font-size-h2);
}

.section-title__line {
    display: block;
    font-weight: var(--font-weight-regular);
}

.section-title__line--strong {
    font-weight: var(--font-weight-bold);
}

.section-head {
    /* Lighter than --color-line, which is a blue-grey. */
    --section-head-rule: rgba(var(--rgb-blue-light), 0.55);

    display: grid;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .section-head {
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--section-head-aside, 20rem));
        gap: var(--space-2xl);

        /* Stretch, so the rule runs the full height of the headline. */
        align-items: stretch;
    }
}

/* Below 768px the two columns become two rows and the rule turns with them. */
.section-head__aside {
    margin: 0;
    padding-block-start: var(--space-lg);
    border-block-start: var(--border-width) solid var(--section-head-rule);
}

@media (min-width: 768px) {
    .section-head__aside {
        padding-block-start: 0;
        padding-inline-start: var(--space-xl);
        border-block-start: 0;
        border-inline-start: var(--border-width) solid var(--section-head-rule);
    }
}

/* --- The split ---------------------------------------------------------------
   Every content page below the home page is built out of one shape: a headline
   column on the left, its content - an accordion, a grid of boxes - on the
   right, a hairline between them.

   That is the geometry .section-head already draws, so this is a modifier and
   not a second primitive: the two columns become near equal, and the right one
   holds a block instead of a paragraph.

     <div class="section-head section-head--split">
         <div class="section-head__main">
             <h2 class="section-title">…</h2>
             <p>…</p>
             <a class="button button--quiet">…</a>
         </div>
         <div class="section-head__aside"><?php module('accordion', …) ?></div>
     </div>

   .section-head__main is only needed when the left column has more in it than
   the headline; a headline on its own can stay the grid's first child.

   The columns are stated as a ratio and not through --section-head-aside,
   which is a MAXIMUM width. That is right for a paragraph - the track settles
   at 20rem and the headline keeps the rest - but wrong for a block that can be
   as wide as it is given: an accordion would take the whole row and leave the
   headline column at nothing.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .section-head--split {
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--section-head-split, 1.15fr));
    }
}

/* Where the right column is already a set of panels - the filled boxes of
   modules/accordion.php - it needs neither the rule nor the inset it sits
   behind: a hairline beside a row of solid blocks is noise, and the room it
   was holding is better spent on the blocks, which have labels to fit. Add it
   BESIDE --split, not instead of it. */
.section-head--panel > .section-head__aside {
    padding-block-start: 0;
    padding-inline-start: 0;
    border: 0;
}

@media (min-width: 768px) {
    .section-head--panel {
        --section-head-split: 1.9fr;
    }
}

.section-head__main > * {
    margin-block: 0;
}

.section-head__main > * + * {
    margin-block-start: var(--space-md);
}

/* Sits away from the text it follows, not on it. */
.section-head__main > .button {
    margin-block-start: var(--space-lg);
}


/* --- Notices -----------------------------------------------------------------
   Something a visitor has to read whether or not they were looking for it. The
   emergency note on /leistungen/neuro is the reason this is not folded into an
   accordion anywhere: a page that tells you to dial 112 cannot make you press
   something first.
   -------------------------------------------------------------------------- */
.notice {
    padding: var(--space-md) var(--space-lg);
    border-inline-start: 4px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-alt);
    color: var(--color-text);
}

/* On the grey page the default surface is the page, so the notice would be a
   rule with text beside it. There it takes the white. */
.section--alt .notice {
    background-color: var(--color-surface);
}

.notice > * {
    margin-block: 0;
}

.notice > * + * {
    margin-block-start: var(--space-2xs);
}

.notice__title {
    font-weight: var(--font-weight-semibold);
}

/* Where it follows a section head - the emergency note under the intro of
   /leistungen/neuro - it stands away from it rather than under it. */
.section-head + .notice {
    margin-block-start: var(--space-2xl);
}

.notice--error {
    border-inline-start-color: var(--color-error);
    color: var(--color-error);
}

/* --- Prose -------------------------------------------------------------------
   Long-form editorial and legal text. Wrap a block of ordinary markup in
   .prose and it gets a readable measure and consistent vertical rhythm
   without a single class on the content itself.

     <div class="prose">
         <h2>…</h2>
         <p>…</p>
     </div>
   -------------------------------------------------------------------------- */
.prose {
    max-width: var(--measure);
}

/* Inside a .container--slim the container already sets the measure, so the
   text may use the full column. */
.container--slim .prose {
    max-width: none;
}

.prose > * + * {
    margin-block-start: var(--space-sm);
}

.prose > h2 {
    margin-block-start: var(--space-xl);
}

.prose > h3 {
    margin-block-start: var(--space-lg);
}

.prose > h4 {
    margin-block-start: var(--space-md);
    color: var(--color-text);
}

/* A heading is always followed by its own text, never by a full gap. */
.prose > :is(h2, h3, h4) + * {
    margin-block-start: var(--space-2xs);
}

.prose > :first-child {
    margin-block-start: 0;
}

.prose > :last-child {
    margin-block-end: 0;
}

/* Legal small print: the all-caps GDPR objection paragraphs and similar. */
.prose .text-legal {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}