/* Hallmark · shape: Banner and Quotes · genre: editorial · theme: brand · redesign: full · copy: verbatim
 * paper: oklch(1 0 0) · accent: oklch(0.77 0.2 135) · display: Literata · body: Hanken Grotesk · hero: Banner (about, testimonials, contact) · nav: kept · footer: kept · signature: the doctor's credentials open the article and the contact list is set as one quiet Index of rows
 * axes: light/roman-serif/chromatic-green · posture: Banner · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: E, three one-sheet pages share a banner ratio, so each page is reviewed in screenshots at three widths before it is committed */
/* Info pages only (ticket 26). Tokens, controls and chrome come from
   ../shell/shell.css; banner, article and index rows come from article.css.
   Nothing here declares a colour or a face of its own. Compositions, from
   site/design.md: Quotes (testimonials), Article with credentials (about),
   Contact as an Index (contact). */

/* Testimonials */

.hm-quotes {
    display: grid;
    gap: 40px;
}

@media (min-width: 900px) {
    .hm-quotes {
        display: block;
        column-count: 2;
        column-gap: 64px;
    }

    .hm-quote {
        break-inside: avoid;
        margin-bottom: 0;
        padding-bottom: 40px;
    }

    }

.hm-quote {
    margin: 0;
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
}

.hm-quote blockquote {
    margin: 0;
}

.hm-quote p {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
}

.hm-quote--lead p {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 2.1vw, 1.5rem);
    line-height: 1.5;
}

.hm-quote figcaption {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.5;
}

.hm-quote-name {
    display: block;
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
}

.hm-quote-meta {
    display: block;
    color: var(--graphite);
}

/* About: the credentials open the article, as a byline under the portrait. */

.hm-cred-name {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    font-weight: 500;
    line-height: 1.2;
}

.hm-cred-letters {
    margin: 4px 0 0;
    color: var(--graphite);
}

/* Contact: the contact list as an Index (article.css carries the row look:
   hairlines, title scale, hover underline). The clinic row has no link of its
   own, so it repeats the index grid and its hairline here; the email can be
   long, so its name cell breaks. */

.hm-index--contact li {
    padding: 0;
}

.hm-index--contact .hm-index-clinic {
    display: grid;
    gap: 8px;
    padding: 24px 0;
    border-bottom: 1px solid var(--hairline);
}

@media (min-width: 800px) {
    .hm-index--contact .hm-index-clinic {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 8px 64px;
        align-items: baseline;
        padding: 32px 0;
    }
}

.hm-index--contact .hm-index-name {
    min-width: 0;
    overflow-wrap: break-word;
}

.hm-index--contact address {
    margin: 0;
    color: var(--graphite);
    font-size: 17px;
    font-style: normal;
    line-height: 1.55;
}

.hm-index--contact a {
    color: var(--ink);
    text-decoration: none;
    text-decoration-color: var(--leaf);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

.hm-index--contact a .hm-index-name {
    text-decoration-line: none;
}

.hm-index--contact a:hover .hm-index-name {
    text-decoration-line: underline;
}

.hm-index--contact a:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 4px;
}