/*
 * About and Contact. About pairs a narrow media column with the copy (340 / 780
 * in the source grid); Contact stacks one block per location, alternating which
 * side the map falls on.
 */

.page-shell {
    width: min(100% - 40px, var(--gbm-content));
    margin-inline: auto;
    padding-block: 10px 40px;
}

/* -- About -- */

/* Source gives the About Joanna tab more air: its heading sits 58px under
   the nav rule, vs the 10px page-shell default. */
.about-page { padding-block-start: 50px; }

.interior-split {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 20px;
    align-items: center;
}
/* The source rounds the portrait fully — with its 800x875 crop that reads as
   a slight ellipse, reproduced as-is. */
.interior-split__media img { width: 100%; border-radius: 50%; }

/* The closing shot sits centred at the source's 800px render, not stretched
   (width, not auto: the srcset sizes attribute would inflate auto to 1120). */
.interior-wide { margin: 10px 0 0; }
.interior-wide img { width: 800px; max-width: 100%; margin-inline: auto; }

/* -- Contact locations -- */

.location { padding-block: 20px 30px; }
.location .section-tab { margin-bottom: 20px; }

.location__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}
.location--reverse .location__detail { order: 2; }

.location__detail figure { margin: 0 0 20px; }
.location__detail img { width: 100%; }

.location__map-frame {
    display: block;
    width: 100%;
    min-height: 600px;
    border: 0;
}
.location__map-fallback { font-size: 19.2px; }

/* A centred tab: the wrapper centres, the tab keeps hugging its own text. */
.section-tab--center { display: block; text-align: center; background: none; padding: 0; }
.section-tab--center > * {
    display: inline-block;
    padding: 8px 20px 10px;
    border-radius: 15px 0;
    background: var(--gbm-teal);
}

/* -- Contact form -- */

.contact-form { margin-top: 20px; text-align: center; }
.contact-form .section-tab { margin-bottom: 20px; }
.contact-form form { width: min(100%, 600px); margin-inline: auto; text-align: left; }
.form-notice { padding: 16px; background: var(--gbm-cream); }

/* -- Plain pages (Privacy Policy) -- */
/* The source renders these left-aligned in ink, with editor-default sizing:
   h1 38.4 / h2 32 in the display serif, h3 28 in the body sans, 16px copy. */

.page-plain .entry-header { padding-block: 25px 15px; text-align: left; }
.page-plain .entry-title {
    color: var(--gbm-ink);
    font-size: 38.4px;
    font-weight: 700;
    line-height: 1.2;
}

.page-plain .entry-content h2,
.page-plain .entry-content h3 {
    margin: 8px 0 16px;
    color: var(--gbm-ink);
    font-weight: 700;
    line-height: 1.2;
}
.page-plain .entry-content h2 { font-size: 32px; }
.page-plain .entry-content h3 { font-family: var(--gbm-font-body); font-size: 28px; }

.page-plain .entry-content p,
.page-plain .entry-content li {
    color: var(--gbm-ink);
    font-size: 16px;
    line-height: 24px;
}
.page-plain .entry-content p { margin-bottom: 14.4px; }

@media (max-width: 900px) {
    .interior-split,
    .location__grid { grid-template-columns: 1fr; }
    .location--reverse .location__detail { order: 0; }
    .location__map-frame { min-height: 340px; }
}