/*
 * The ministry pages: /ministry/ and each entry under it.
 *
 * Its own stylesheet rather than part of home.css, for the reason recorded in
 * class-motay-archive.php: home.css is enqueued on the coded homepage and
 * nowhere else, so rules for another template that live in it never load. The
 * ministry pages rendered as unstyled bulleted lists exactly once because of
 * this, which is the second time the same mistake has been made here.
 *
 * The shared furniture is not repeated: .motay-section__inner, .motay-eyebrow
 * and .motay-section__title come from chrome.css, which loads everywhere, and
 * .motay-btn from style.css.
 *
 * What stays in home.css: .motay-workcard and .motay-work__list, which are the
 * homepage's "What we're running" section, not these pages.
 */

/* -------------------------------------------------------------------------
   One ministry or initiative

   One template for every entry, so the design is consistent and adding
   another is content rather than code. Every block appears only when it has
   something in it, which matters here because most of these have two
   sentences written about them today: a thin entry should be a short page,
   not a page of empty headings.
   ------------------------------------------------------------------------- */

.motay-workhero {
    background: var(--motay-ink-2);
    border-bottom: 1px solid rgba(244, 242, 237, 0.08);
    /* Both, and never the padding shorthand: with only padding-block the words
       sat flush against the edge of the band while every section below them
       was inset by the gutter. */
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
    padding-inline: var(--motay-edge);
}

.motay-workhero__inner {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

.motay-workhero__kind {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--motay-aqua);
    margin-bottom: 0.9rem;
}

.motay-workhero__title {
    font-family: var(--motay-font-display);
    font-weight: 900;
    font-size: var(--motay-step-xl);
    line-height: 0.96;
    letter-spacing: -0.035em;
}

.motay-workhero__line {
    color: #c6ccd8;
    font-size: var(--motay-step-md);
    line-height: 1.5;
    margin-top: 1.1rem;
    max-width: 34rem;
}

.motay-workhero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

.motay-workhero__fact {
    border: 1px solid rgba(244, 242, 237, 0.28);
    border-radius: 999px;
    padding: 0.4em 1em;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--motay-paper);
}

/* Said plainly. Nothing is deleted when it retires, so the page has to
   explain itself rather than leave somebody guessing. */
.motay-workhero__fact--past {
    border-color: transparent;
    background: rgba(138, 147, 166, 0.22);
    color: var(--motay-muted);
}

.motay-workhero__actions {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
}

.motay-workhero__note {
    color: var(--motay-muted);
    font-size: 0.8125rem;
}

.motay-workhero__picture img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* The reading column is centred in the page, with its words left aligned,
   which is what design/Stories-and-About-pages.jpg draws and what the story
   and About pages already do. The heading goes with it, so the block reads as
   one column rather than a title at the page edge above an indented text.
   The card grids further down stay full width. */
.motay-workbody .motay-section__inner {
    max-width: 44rem;
}

.motay-workbody .motay-single__body {
    max-width: 44rem;
    margin-top: 1.5rem;
}

.motay-workunder__list,
.motay-workwhere__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

.motay-workunder__item {
    background: var(--motay-ink-2);
    border: 1px solid rgba(244, 242, 237, 0.08);
    border-radius: 6px;
    padding: 1.6rem;
}

.motay-workunder__kind {
    font-size: 0.6875rem; /* 11px floor: 10px caps were hard to read on a phone */
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--motay-aqua);
    margin-bottom: 0.4rem;
}

.motay-workunder__title {
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: var(--motay-step-md);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.motay-workunder__title a {
    color: var(--motay-paper);
    text-decoration: none;
}

.motay-workunder__title a:hover {
    text-decoration: underline;
}

.motay-workunder__line {
    color: var(--motay-muted);
    font-size: var(--motay-step-sm);
    margin-top: 0.5rem;
    line-height: 1.5;
}

.motay-workwhere__tile {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.motay-workwhere__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (min-width: 48rem) {
    /* Two columns only when there is actually a picture for the second one.
       Unconditionally, an entry with no photograph reserved half the hero for
       nothing and the empty half read as a component that had failed to
       load. Most of these have no photograph, so that was the normal case. */
    .motay-workhero--pictured .motay-workhero__inner {
        grid-template-columns: 1.15fr 1fr;
        gap: 3.5rem;
    }

    .motay-workunder__list {
        grid-template-columns: repeat(3, 1fr);
    }

    .motay-workwhere__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------------------------------------------------------------------------
   The index of everything we run: /ministry/
   ------------------------------------------------------------------------ */

.motay-indexhero {
    /* padding-block and padding-inline, never the padding shorthand: the
       shorthand zeroes the side gutter every other section gets from
       .motay-section, and the heading then runs to the window edge. */
    padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2.5rem;
    padding-inline: var(--motay-edge);
    background: var(--motay-ink);
}

.motay-indexhero__title {
    font-family: var(--motay-font-display);
    font-weight: 900;
    font-size: var(--motay-step-xl);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--motay-paper);
    margin: 0.5rem 0 0;
}

.motay-indexhero__line {
    color: var(--motay-muted);
    font-size: var(--motay-step-md);
    line-height: 1.5;
    max-width: 46ch;
    margin-top: 1rem;
}

/* Every list here is a grid. Which grid is stated by a modifier rather than
   inferred with :not() chains: the single-card list inside a block matched the
   three column rule meant for the top level groups, so each parent card was
   squeezed into a third of its own row and its title was clipped mid-word. */
.motay-index__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

/* A parent and its children read as one block and stay together. */
.motay-index__ministry {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.motay-index__card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 15rem;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
    background: var(--motay-ink-2);
    border: 1px solid rgba(244, 242, 237, 0.08);
}

.motay-index__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12, 15, 23, 0.96) 0%, rgba(12, 15, 23, 0.68) 45%, rgba(12, 15, 23, 0.2) 100%);
}

.motay-index__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}

/* Children are plainly subordinate: no picture, no box, and a rule down the
   left instead, so the eye reads them as belonging to the card above. */
.motay-index__card--compact {
    min-height: 0;
    height: auto;
    border: 0;
    border-left: 2px solid rgba(18, 223, 192, 0.5);
    border-radius: 0;
    background: transparent;
}

.motay-index__card--compact::after {
    display: none;
}

.motay-index__body {
    position: relative;
    z-index: 1;
    padding: 1.6rem;
    width: 100%;
}

.motay-index__card--compact .motay-index__body {
    padding: 0.2rem 0 0.2rem 1.1rem;
}

.motay-index__kind {
    font-size: 0.6875rem; /* 11px floor: 10px caps were hard to read on a phone */
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--motay-aqua);
    margin-bottom: 0.4rem;
}

.motay-index__title {
    font-family: var(--motay-font-display);
    font-weight: 800;
    font-size: var(--motay-step-md);
    line-height: 1.1;
    letter-spacing: -0.02em;
    /* Long single words (InnerCity, Teevolution) break rather than spill out
       of a narrow column. */
    overflow-wrap: break-word;
}

.motay-index__title a {
    color: var(--motay-paper);
    text-decoration: none;
}

.motay-index__title a:hover {
    text-decoration: underline;
}

.motay-index__out {
    font-size: 0.7em;
    opacity: 0.75;
    margin-left: 0.2em;
    white-space: nowrap;
}

.motay-index__line {
    color: #c6ccd8;
    font-size: var(--motay-step-sm);
    line-height: 1.45;
    margin-top: 0.5rem;
}

.motay-index__card--compact .motay-index__line {
    color: var(--motay-muted);
}

/* Finished work is quieter than running work, and still fully readable. */
.motay-index--past .motay-index__card {
    min-height: 0;
    background: transparent;
    border-style: dashed;
}

.motay-index--past .motay-index__card::after {
    display: none;
}

.motay-index--past .motay-index__body {
    padding: 1.1rem 1.3rem;
}

@media (min-width: 48rem) {
    /* The ministries get room: two across, and their titles size up. */
    .motay-index__list--wide {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }

    .motay-index__list--wide .motay-index__card:not(.motay-index__card--compact) .motay-index__title {
        font-size: var(--motay-step-lg);
    }

    /* The top level of every other group. */
    .motay-index__list--top {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* The logo treatment, matching the homepage cards: the mark whole on a light
   panel with the words below, never cropped to fill and never dimmed. The
   size caps also decide which file the browser picks out of srcset, so a mean
   cap fetches a thumbnail and renders it soft. */
.motay-index__card--logo {
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: stretch;
}

.motay-index__card--logo::after {
    display: none;
}

.motay-index__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    min-height: 10rem;
    background: var(--motay-paper);
}

.motay-index__logo {
    max-width: 68%;
    max-height: 8rem;
    width: auto;
    height: auto;
    object-fit: contain;
}

.motay-index__card--logo .motay-index__body {
    padding-top: 1.25rem;
}

.motay-workhero__picture--logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border-radius: 8px;
    background: var(--motay-paper);
}

.motay-workhero__picture--logo img {
    max-width: 100%;
    max-height: 14rem;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* -------------------------------------------------------------------------
   The words on an entry page

   The prose rules live in stories.css, which these templates do not load, so
   until now the ministry's own copy fell back to Astra's spacing: an h3 sat
   flush against the h2 above it and against its own first line. The same
   shape as a story, stated here because a stylesheet is loaded by the
   templates that use it.
   ------------------------------------------------------------------------- */

.motay-workbody .motay-single__body {
    font-size: var(--motay-step-md);
    line-height: 1.65;
}

.motay-workbody .motay-single__body > * {
    margin-block: 0 1.25em;
}

.motay-workbody .motay-single__body > *:last-child {
    margin-bottom: 0;
}

.motay-workbody .motay-single__body p {
    max-width: none;
}

/* Colour stated, never inherited from Astra's own heading settings. */
.motay-workbody .motay-single__body :where(h2, h3, h4) {
    color: var(--motay-paper);
    font-family: var(--motay-font-display);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.motay-workbody .motay-single__body h2 {
    margin-top: 2em;
    font-size: var(--motay-step-lg);
}

/* Less above a subheading than above a section, so "Become a TeeVo Club
   President" reads as part of "Two ways to get involved" rather than as a
   second section of its own. */
.motay-workbody .motay-single__body h3 {
    margin-top: 1.6em;
    font-size: var(--motay-step-md);
}

.motay-workbody .motay-single__body h2 + h3 {
    margin-top: 1em;
}

.motay-workbody .motay-single__body :where(ul, ol) {
    padding-left: 1.4em;
}

.motay-workbody .motay-single__body li {
    margin-bottom: 0.45em;
}

.motay-workbody .motay-single__body li:last-child {
    margin-bottom: 0;
}

.motay-workbody .motay-single__body strong {
    color: var(--motay-paper);
    font-weight: 700;
}

.motay-workbody .motay-single__body a {
    color: var(--motay-blue-link);
}