/* =============================================================================
   Module: arzt  (modules/arzt.php)
   -----------------------------------------------------------------------------
   One person as a card: the portrait fills it, the name and the role sit over
   its lower half, the "mehr" button over its foot.

   The card knows nothing about how it is laid out. The dragged row on the home
   page and the grid on /praxis/aerzteteam both size it from the outside, and
   everything the ROW alone needs - the 82 % opacity that lets the headline show
   through it, and the two rules that stop a drag picking the image up - stays
   in assets/css/pages/home.css under .aerzte.
   ============================================================================= */

.arzt {
    position: relative;

    /* Only ever seen while the portrait loads: the image covers the card. */
    background-color: var(--color-surface-alt);
}

.arzt__image {
    width: 100%;
}

/* --- Caption ---------------------------------------------------------------- */

.arzt__caption {
    position: absolute;
    inset-block-start: 55%;
    inset-inline: 0;
    padding-inline: var(--space-md);
    color: var(--color-text-inverse);

    /* Nothing here is a target, and on the home page the whole card is the
       drag surface - a caption that swallowed the pointer would stop a drag
       that began on the name. */
    pointer-events: none;
}

.arzt__name {
    position: relative;
    margin: 0;
    padding-inline-start: var(--space-md);
    color: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
}

/* The short rule to the left of the name. */
.arzt__name::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 2px;
    background-color: currentColor;
}

.arzt__name-main {
    text-transform: uppercase;
}

.arzt__role {
    margin: 0;
    padding-inline-start: var(--space-md);
    padding-block-start: var(--space-2xs);
    font-size: var(--font-size-sm);
}

/* --- "mehr" ------------------------------------------------------------------
   Hidden until assets/js/modules/modal.js reveals it: without JavaScript it
   would be a control that does nothing.
   -------------------------------------------------------------------------- */

.arzt__more {
    position: absolute;
    inset-block-end: var(--space-lg);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    min-height: 44px;
    padding: var(--space-2xs) var(--space-md);
    border: var(--border-width) solid rgba(var(--rgb-white), 0.7);
    border-radius: var(--radius-pill);
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    transition: background-color var(--transition-base), color var(--transition-base),
                border-color var(--transition-base);
}

.arzt__more[hidden] {
    display: none;
}

.arzt__more:hover,
.arzt__more:focus-visible {
    border-color: var(--color-white);
    background-color: var(--color-white);
    color: var(--color-primary);
}