/* =============================================================================
   The church module's own styling.

   THE FRONT PAGE is the candlelit scene filling the whole content area, with
   three dark panes over it: the church's name at the top between the times of
   Mass on the left and today's readings on the right. On a phone the panes
   stack, name first, and the picture closes in on the candle behind them.

   THE PANES KEEP THEIR OWN COLOURS IN BOTH THEMES. They sit on a picture of a
   dark room, not on the page, so the site's light or dark ground has nothing to
   do with what they need to be legible against. Everything else -- the font,
   the type sizes, the insets, the gaps, the corners -- comes from the site's
   tokens, so the presets still move them.
   ============================================================================= */

.church-front {
    --church-colour-pane:rgba(14, 8, 6, 0.68);
    --church-colour-pane-edge: rgba(233, 187, 98, 0.28);
    --church-colour-pane-rule: rgba(233, 187, 98, 0.16);
    --church-colour-pane-text: #f3e6cc;
    --church-colour-pane-quiet: #cdb894;
    --church-colour-pane-heading: #e9bb62;
    --church-colour-pane-heading-hover: #f6d58c;

    position: relative;
    isolation: isolate;
    background: var(--church-colour-ground);

    /* THE WHOLE CONTENT AREA, AND TALLER WHEN THE PANES NEED IT. The page's
       scrolling area gives up its padding below, so this starts at its edges;
       at least its full height means the picture reaches the footer on a
       screen with room to spare, and a phone's stacked panes simply make it
       longer, with the picture behind all of it.

       THE CONTENT AREA'S OWN GUTTER, moved in here. The panes keep to the same
       column as every other screen's cards, by the same tokens, so "Space
       either side of the content" and "Content width" in site edit mode still
       move them. --content-gutter is the page's, inherited. */
    min-height: 100%;
    padding: var(--content-gutter-minimum, var(--space-medium)) var(--content-gutter) var(--space-extra-large);
}

/* ONLY WHILE IT HOLDS THE FRONT PAGE. Every other screen keeps the content
   area's padding; this one hands it to .church-front above, so the picture can
   run to the edges. A message left by the previous page -- "Signed in as..." --
   is drawn before the front page and keeps the gutter as its margin. */
/* AND ITS GROUND IS THE PICTURE'S. The strip the content area keeps for its
   scrollbar is its own, not the front page's, and stayed the site's light grey
   down the right edge of a dark picture. */
.page-main:has(> .church-front) {
    --church-colour-ground: #120a07;

    padding: 0;
    background-color: var(--church-colour-ground);
}

.page-main:has(> .church-front) > .alert {
    margin: var(--content-gutter-minimum, var(--space-medium)) var(--content-gutter) 0;
}

/* PIXELATED, NOT SMOOTHED, and cropped rather than squashed. The picture is
   320 by 180 and drawn many times that size; smoothing would turn its pixels
   into a blur. The still image and the canvas that replaces it share this
   class, so nothing moves when the flicker starts. */
.church-front__scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A LITTLE ABOVE THE MIDDLE, so a wide, short window trims more of the
       table at the bottom than of the flame. */
    object-position: 42% 40%;
    image-rendering: pixelated;
}

.church-front__panes {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas: "times name readings";
    align-items: start;
    gap: var(--space-medium);
}

.church-pane {
    padding: var(--container-padding-tight);
    border: 1px solid var(--church-colour-pane-edge);
    border-radius: var(--radius-medium);
    background: var(--church-colour-pane);
    color: var(--church-colour-pane-text);
    line-height: 1.45;
}

.church-pane--name {
    grid-area: name;
    text-align: center;
}

.church-pane--times {
    grid-area: times;
}

.church-pane--readings {
    grid-area: readings;
}

/* --- The name ------------------------------------------------------------ */

.church-name {
    margin: 0;
    font-family: var(--font-family-heading);
    line-height: 1.15;
    text-wrap: balance;
}

.church-name__main {
    display: block;
    font-size: clamp(1.45rem, 1rem + 1.6vw, 2.25rem);
    font-weight: var(--font-weight-bold);
    color: var(--church-colour-pane-text);
}

.church-name__sub {
    display: block;
    margin-top: var(--space-extra-small);
    font-size: var(--font-size-quiet);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--church-colour-pane-heading);
}

/* --- What every pane shares ---------------------------------------------- */

.church-pane__title {
    margin: 0 0 var(--space-small);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--church-colour-pane-heading);
}

.church-pane__title:not(:first-child) {
    margin-top: var(--space-medium);
}

.church-pane__quiet {
    margin: 0 0 var(--space-small);
    color: var(--church-colour-pane-quiet);
}

.church-pane__link {
    color: var(--church-colour-pane-heading);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.church-pane__link:hover {
    color: var(--church-colour-pane-heading-hover);
}

.church-pane__link:focus-visible {
    outline: 2px solid var(--church-colour-pane-heading);
    outline-offset: 2px;
    border-radius: var(--radius-small);
}

/* --- The times ------------------------------------------------------------ */

.church-times {
    display: grid;
    gap: var(--space-extra-small);
    margin: 0;
}

.church-times__row {
    display: grid;
    grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
    column-gap: var(--space-small);
    padding-top: var(--space-extra-small);
    border-top: 1px solid var(--church-colour-pane-rule);
}

.church-times__row:first-child {
    padding-top: 0;
    border-top: 0;
}

.church-times__days {
    grid-column: 1;
    font-weight: var(--font-weight-semibold);
}

.church-times__time {
    grid-column: 2;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* --- The readings --------------------------------------------------------- */

.church-pane__date {
    margin: 0;
    font-weight: var(--font-weight-semibold);
}

.church-pane__day {
    margin: var(--space-extra-small) 0 0;
    font-style: italic;
    color: var(--church-colour-pane-quiet);
}

.church-readings {
    display: grid;
    gap: var(--space-small);
    margin: var(--space-small) 0;
}

.church-readings__label {
    font-size: var(--font-size-quiet);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--church-colour-pane-heading);
}

.church-readings__citation {
    margin: 0;
}

/* --- Narrower screens ---------------------------------------------------- */

/* TWO COLUMNS UNDER THE NAME before one. Three panes side by side at tablet
   width leave each too narrow for a line of Mass times. */
@media (max-width: 60rem) {
    .church-front__panes {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "name name"
            "times readings";
    }
}

@media (max-width: 40rem) {
    /* Closer in on the candle, which is all a phone's width of a stretched
       picture can hold; the panes thicken a little where the flame shines
       through behind their words. */
    .church-front__scene {
        object-position: 40% 50%;
    }

    .church-front__panes {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "name"
            "times"
            "readings";
        gap: var(--space-small);
    }

    .church-front {
        --church-colour-pane: rgba(14, 8, 6, 0.76);
    }
}

/* --- The Church card on the admin Modules screen ------------------------- */

.church-times-table .form-field__input {
    width: 100%;
    min-width: 6.5rem;
}

.church-times-table__time {
    min-width: 6rem;
}

.church-readings-table__day,
.church-readings-table__actions {
    white-space: nowrap;
}