/*
 * Public pages (W1 landing, W2 mosque, W4 committees, W9 register, W11 system pages). Phone first at 390 px, then
 * 1280 px. On wide screens each section is a row: a heading column on the left, the content on the right.
 */

/* ---------------------------------------------------------------- header and footer */

.site-header-inner {
    gap: var(--space-4);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    padding: 0 var(--space-2);
    color: var(--color-on-deep-muted);
    font: var(--text-caption);
    text-decoration: none;
}

.site-nav a:hover {
    color: var(--color-on-deep);
}

.site-nav .icon-link {
    justify-content: center;
    min-width: var(--touch-min);
    color: var(--color-on-deep);
}

.site-header a:focus-visible,
.site-footer a:focus-visible,
.page-band .btn:focus-visible {
    outline: 2px solid var(--color-brass);
    outline-offset: 2px;
    box-shadow: none;
}

/* On phones the header keeps search and the account; registering stays in the footer and on the landing page */
@media (max-width: 479px) {
    .site-nav .nav-register {
        display: none;
    }
}

.site-footer-inner {
    align-items: flex-start;
}

.site-footer .wordmark {
    font: 700 16px/24px var(--font-ui);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--color-on-deep);
    color: var(--color-ink);
    font: var(--text-label);
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------- page head and sections */

/* Clear of the arches that hang from the header */
main > .container:first-child {
    padding-top: var(--space-4);
}

.page-head {
    display: grid;
    gap: var(--space-2);
    padding-block: var(--space-6) var(--space-5);
    border-bottom: 1px solid var(--color-line);
}

.page-head h1 {
    font: 600 24px/36px var(--font-ui);
    text-wrap: balance;
}

.page-head .english {
    color: var(--color-ink-muted);
}

.meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-4);
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

.meta-row > span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.page-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--touch-gap);
    margin-top: var(--space-2);
}

.page-head-actions .share-status {
    flex-basis: 100%;
}

.page-head-actions .btn[aria-pressed="true"] {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
}

/* A mosque's name on the deep green, under the header's arcade */
.page-band {
    color: var(--color-on-deep);
    background: var(--color-deep) url("../images/brand/pattern-deep.svg");
    position: relative;
    margin-bottom: 20px;
}

.page-band::after {
    content: "";
    position: absolute;
    inset: 100% 0 auto;
    height: 20px;
    background: var(--color-deep);
    -webkit-mask: url("../images/brand/arcade-hang.svg") repeat-x center top;
    mask: url("../images/brand/arcade-hang.svg") repeat-x center top;
}

.page-band .page-head {
    border-bottom: 0;
}

.page-band .page-head h1 {
    font-family: var(--font-display);
}

.page-band .english,
.page-band .meta-row {
    color: var(--color-on-deep-muted);
}

.page-band .btn-secondary {
    border-color: var(--color-brass);
    color: var(--color-on-deep);
    background: transparent;
}

.page-band .btn-secondary:hover {
    background: var(--color-deep-sunken);
}

.page-band .page-head-actions .btn[aria-pressed="true"] {
    border-color: var(--color-brass);
    background: var(--color-deep-sunken);
}

/* "সদস্য হোন" at the foot of the mosque page */
.member-band {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
}

.member-band p {
    max-width: 60ch;
}

/* Shown by assets/js/pwa.js when a page kept on the phone opens without internet */
.offline-line {
    margin-block: var(--space-3) 0;
}

.section {
    display: grid;
    gap: var(--space-4);
    padding-block: var(--space-6);
    border-bottom: 1px solid var(--color-line);
}

.section:last-child {
    border-bottom: 0;
}

.section-head h2 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--text-title);
}

/* The eight-pointed star before each section's name */
.section-head h2::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: none;
    background: var(--color-ornament);
    -webkit-mask: url("../images/brand/star.svg") center / contain no-repeat;
    mask: url("../images/brand/star.svg") center / contain no-repeat;
}

.section-head p {
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

@media (min-width: 900px) {
    .page-head {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        padding-block: var(--space-7) var(--space-6);
    }

    .page-head h1 {
        font: 600 32px/48px var(--font-ui);
    }

    .page-head > :not(.page-head-actions) {
        grid-column: 1;
    }

    .page-head-actions {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: end;
        margin: 0;
    }

    .section {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: var(--space-6);
        padding-block: var(--space-7);
    }
}

.two-col {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 900px) {
    .two-col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.link-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--touch-min);
    font: 600 16px/24px var(--font-ui);
    text-decoration: none;
}

.link-more .icon {
    width: 18px;
    height: 18px;
}

/* ---------------------------------------------------------------- people rows (committees, staff, contact) */

.rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-line);
}

.rows > li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 64px;
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-line);
}

.row-main {
    flex: 1;
    min-width: 0;
}

.row-label {
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

.row-title {
    font: 600 16px/24px var(--font-ui);
}

.row-aside {
    flex: none;
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

.phone-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--touch-min);
    flex: none;
    font: 500 14px/22px var(--font-ui);
    text-decoration: none;
}

.list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
}

.list-head h3 {
    font: 600 16px/24px var(--font-ui);
}

.list-head span {
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

.more-rows {
    margin-top: var(--space-2);
}

.more-rows a,
.more-rows summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-min);
    color: var(--color-ink);
    text-decoration: none;
    cursor: pointer;
}

.more-rows summary {
    list-style: none;
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

.more-rows summary::-webkit-details-marker {
    display: none;
}

.more-rows .icon {
    margin-left: auto;
    color: var(--color-ink-muted);
}

.more-rows .muted {
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

details[open] > summary .icon {
    transform: rotate(180deg);
}

/* A person without a photo shows the first letter of their name (W4) */
.avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-sunken);
    color: var(--color-ink);
    font: 600 15px/1 var(--font-ui);
    object-fit: cover;
}

.committees-page {
    padding-block: var(--space-5) var(--space-7);
}

.committee-block + .committee-block {
    margin-top: var(--space-6);
}

.committee-block h2 {
    font: 600 16px/24px var(--font-ui);
}

.committee-of {
    margin-bottom: var(--space-2);
}

.previous-committees {
    margin-bottom: var(--space-7);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-line);
}

.previous-committees[open] summary {
    margin-bottom: var(--space-4);
}

.share-status {
    min-height: 20px;
    color: var(--color-ink-muted);
}

/* ---------------------------------------------------------------- about */

/* height: auto, or the img's height attribute (kept so the page doesn't jump while it loads) wins over
   aspect-ratio, and a 1600×1205 photo was drawn 1205px tall in a 360px column. 4:3, as phones shoot,
   so a dome or minaret isn't cut off the way 16:9 cut it. */
.cover {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--color-sunken);
}

.cover-link {
    display: block;
    border-radius: var(--radius-md);
    cursor: zoom-in;
}

.cover-link .cover,
.gallery img {
    transition: filter var(--duration-fast) var(--ease-standard);
}

.cover-link:hover .cover,
.gallery a:hover img {
    filter: brightness(0.92);
}

.cover-link:active .cover,
.gallery a:active img {
    filter: brightness(0.84);
}

/* No cover photo: a quiet typographic panel with the mosque's short name */
.cover-placeholder {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-sunken);
    color: var(--color-ink-muted);
    font: 600 20px/32px var(--font-display);
    text-align: center;
    text-wrap: balance;
}

.facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2) var(--space-5);
    margin: var(--space-4) 0 0;
    font: var(--text-label);
}

.facts dt {
    color: var(--color-ink-muted);
    font-weight: 400;
}

.facts dd {
    margin: 0;
    font-weight: 400;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.gallery a {
    display: block;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-sunken);
    cursor: zoom-in;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The photos, full size, over the page: the cover and the gallery in one row to step through.
   Light controls on a near-black ground in both themes, as photos read best on dark. */
.lightbox {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: var(--space-8) var(--space-4);
    border: 0;
    background: transparent;
    color: #F0E9D8;
    overscroll-behavior: contain;
}

.lightbox[open] {
    display: grid;
    place-items: center;
    animation: lightbox-in var(--duration) var(--ease-standard);
}

.lightbox::backdrop {
    background: rgba(8, 12, 10, 0.96);
}

@keyframes lightbox-in {
    from { opacity: 0; }
}

.lightbox-figure {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

.lightbox-img {
    max-width: 100%;
    max-height: calc(100dvh - 160px);
    border-radius: var(--radius-sm);
    object-fit: contain;
}

.lightbox-caption {
    max-width: 60ch;
    font: var(--text-label);
    text-align: center;
}

.lightbox-count {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    min-height: var(--touch-min);
    display: flex;
    align-items: center;
    font: var(--text-label);
    color: #BFCDC1;
}

.lightbox-btn {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-min);
    height: var(--touch-min);
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: rgba(8, 12, 10, 0.55);
    color: inherit;
    cursor: pointer;
}

.lightbox-btn:hover {
    background: rgba(240, 233, 216, 0.14);
}

.lightbox-btn:active {
    background: rgba(240, 233, 216, 0.24);
}

.lightbox-btn:disabled {
    opacity: 0.3;
    cursor: default;
    background: rgba(8, 12, 10, 0.55);
}

.lightbox-close {
    top: var(--space-2);
    right: var(--space-2);
}

.lightbox-prev,
.lightbox-next {
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-prev {
    left: var(--space-2);
}

.lightbox-next {
    right: var(--space-2);
}

/* One photo: nothing to step through */
.lightbox[data-single] .lightbox-prev,
.lightbox[data-single] .lightbox-next,
.lightbox[data-single] .lightbox-count {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .lightbox[open] {
        animation: none;
    }
}

.history {
    white-space: pre-line;
}

/* ---------------------------------------------------------------- institutions */

.cards-plain {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 900px) {
    .cards-plain {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cards-plain h3 {
    font: 600 16px/24px var(--font-ui);
}

.cards-plain p {
    color: var(--color-ink-muted);
    font: var(--text-label);
    font-weight: 400;
}

.location-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.location-foot p + p {
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

.maplibregl-ctrl-attrib {
    font: 400 11px/16px var(--font-ui);
}

/* ---------------------------------------------------------------- landing (W1) */

.landing-hero {
    position: relative;
    margin-bottom: calc(20px + var(--space-5));
    color: var(--color-on-deep);
    background: var(--color-deep) url("../images/brand/pattern-deep.svg");
}

.landing-hero::after {
    content: "";
    position: absolute;
    inset: 100% 0 auto;
    height: 20px;
    background: var(--color-deep);
    -webkit-mask: url("../images/brand/arcade-hang.svg") repeat-x center top;
    mask: url("../images/brand/arcade-hang.svg") repeat-x center top;
}

.landing-hero-inner {
    display: grid;
    gap: var(--space-6);
    align-items: center;
    padding-block: var(--space-5) var(--space-6);
}

.landing-hero-text {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
}

.bismillah {
    width: min(100%, 300px);
    height: 66px;
    color: var(--color-brass);
    fill: currentColor;
}

.landing-salam {
    color: var(--color-brass);
    font: var(--text-label);
}

.landing-hero h1 {
    font: 600 30px/44px var(--font-display);
    text-wrap: balance;
}

.landing-hero p:not(.landing-salam) {
    max-width: 52ch;
    color: var(--color-on-deep-muted);
}

.landing-mihrab {
    display: none;
}

@media (min-width: 900px) {
    .landing-hero-inner {
        grid-template-columns: minmax(0, 1fr) 280px;
        padding-block: var(--space-6) 0;
    }

    .landing-hero-text {
        padding-bottom: var(--space-7);
    }

    .landing-hero h1 {
        font-size: 40px;
        line-height: 60px;
    }

    .bismillah {
        width: 380px;
        height: 84px;
    }

    .landing-mihrab {
        display: block;
        width: 280px;
        height: auto;
        align-self: end;
    }
}

.landing-grid {
    display: grid;
    gap: var(--space-6);
    padding-bottom: var(--space-7);
}

@media (min-width: 900px) {
    .landing-hero {
        padding-block: var(--space-7) var(--space-5);
    }

    .landing-hero h1 {
        font: var(--text-display);
        font-size: 40px;
        line-height: 60px;
    }

    .landing-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-7);
    }
}

.search-box {
    display: grid;
    gap: var(--space-2);
}

.search-results {
    margin-top: var(--space-3);
}

.result-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 72px;
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-line);
    color: var(--color-ink);
    text-decoration: none;
}

.result-row:hover {
    background: var(--color-press);
    color: var(--color-ink);
}

.result-row .icon {
    margin-left: auto;
    color: var(--color-ink-muted);
}

.steps {
    margin: var(--space-3) 0 var(--space-4);
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-line);
}

.steps li {
    display: flex;
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-line);
}

.step-num {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-control);
    border-radius: var(--radius-sm);
    font: 600 14px/22px var(--font-ui);
}

.steps strong {
    display: block;
    font: 600 16px/24px var(--font-ui);
}

.steps p {
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

.app-rows {
    margin-top: var(--space-5);
}

.app-rows h2,
.committee-cta h2 {
    font: var(--text-title);
}

.committee-cta > p {
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

/* ---------------------------------------------------------------- register (W9) */

.register {
    max-width: 640px;
    padding-block: var(--space-6) var(--space-8);
}

.register h1 {
    font: 600 28px/42px var(--font-display);
}

.register-kicker {
    font: var(--text-label);
}

.register-step {
    display: grid;
    gap: var(--space-5);
    margin: var(--space-5) 0 0;
    padding: 0;
    border: 0;
}

.register-step > legend {
    padding: 0;
    font: var(--text-title);
}

.register-step + .register-step {
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-line);
}

/* With JavaScript the form shows one step at a time */
.js .register-step + .register-step {
    margin-top: var(--space-5);
    padding-top: 0;
    border-top: 0;
}

.js .register-step[hidden] {
    display: none;
}

.register-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.register-nav .btn-primary {
    flex: 1;
}

.summary-list {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    margin: 0;
}

.summary-list dt {
    color: var(--color-ink-muted);
}

.summary-list dd {
    margin: 0;
    font-weight: 500;
}

/* ---------------------------------------------------------------- system and policy pages (W11) */

.message-page .banner {
    width: 100%;
}

.policy {
    max-width: 44rem;
    padding-block: var(--space-6) var(--space-8);
}

.policy h1 {
    font: 600 28px/42px var(--font-display);
}

.policy .rows > li {
    display: block;
}

.policy .rows p {
    color: var(--color-ink-muted);
}

/* ---------------------------------------------------------------- today's times (W2) */

.today {
    display: grid;
    gap: var(--space-4);
}

.special-day {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-accent-soft);
}

.special-day-name {
    font: 600 18px/28px var(--font-ui);
}

/* The next jamaat is the page's one big thing: the deep green and brass, like the top of Home in the app */
.next-jamaat {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    color: var(--color-on-deep);
    background: var(--color-deep) url("../images/brand/pattern-deep.svg");
}

.next-jamaat .label {
    color: var(--color-brass);
    font: var(--text-label);
}

.next-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-3);
}

.next-name {
    font: var(--text-headline);
}

.next-time {
    font: var(--text-amount);
    font-variant-numeric: var(--numeric);
}

.next-in {
    color: var(--color-brass);
    font: 600 18px/28px var(--font-ui);
}

.times {
    display: grid;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-line);
    list-style: none;
}

.time {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "name start jamaat" ". sunrise jamaat";
    align-items: center;
    gap: 0 var(--space-5);
    min-height: 56px;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-line);
}

.time-name {
    grid-area: name;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-3);
    font: 400 18px/28px var(--font-ui);
}

.time-next {
    color: var(--color-accent);
    font: 600 14px/22px var(--font-ui);
}

.time-jamaat {
    grid-area: jamaat;
    min-width: 3.5em;
    font: var(--text-figure);
    font-weight: 700;
    font-variant-numeric: var(--numeric);
    text-align: right;
}

.time-start {
    grid-area: start;
    color: var(--color-ink-muted);
    font: var(--text-caption);
    font-variant-numeric: var(--numeric);
    text-align: right;
}

.time-start + .time-start {
    grid-area: sunrise;
}

.time.is-next {
    background: var(--color-accent-soft);
}

.time.is-next .time-name {
    font-weight: 600;
}

.today-lines {
    display: grid;
    gap: var(--space-1);
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

.today-lines .strong {
    color: var(--color-ink);
    font: 600 14px/22px var(--font-ui);
}

@media (min-width: 900px) {
    .times {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        border-bottom: 1px solid var(--color-line);
    }

    .time {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "name name" "jamaat jamaat" "start start" "sunrise sunrise";
        align-content: start;
        padding: var(--space-4);
        border-bottom: 0;
    }

    .time-name {
        justify-content: space-between;
        font: var(--text-label);
        font-weight: 400;
    }

    .time-jamaat {
        margin-top: var(--space-1);
        font: var(--text-figure-lg);
        text-align: left;
    }

    .time-start {
        text-align: left;
    }
}

/* ---------------------------------------------------------------- notices (W2, W8) */

.notice-cards {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 900px) {
    .notice-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-5);
    }

    .notice-cards .notice-janaza {
        grid-column: 1 / -1;
    }
}

.notice-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.notice-card:has(a:focus-visible) {
    box-shadow: var(--focus-ring);
}

/* The title's link covers the card */
.notice-card h3 a {
    color: inherit;
    text-decoration: none;
    outline: none;
}

.notice-card h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.notice-card:hover h3 a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.notice-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
}

.notice-head h3 {
    font: 600 18px/28px var(--font-ui);
}

.notice-date,
.notice-note,
.notice-kicker {
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

.notice-date {
    flex: none;
}

.notice-body {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.notice-meta {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font: var(--text-label);
    font-weight: 400;
}

.notice-meta li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.notice-meta .icon {
    flex: none;
    color: var(--color-ink-muted);
}

.notice-kicker {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
}

.notice-kicker span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.notice-name {
    font: 600 22px/34px var(--font-display);
}

.notice-janaza .muted,
.notice-sub {
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

.notice-janaza .notice-facts {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-line);
}

.notice-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-1) var(--space-5);
    margin: 0;
}

.notice-facts dt {
    color: var(--color-ink-muted);
}

.notice-facts dd {
    margin: 0;
}

/* The notice's own page */

.crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    padding-top: var(--space-5);
    font: var(--text-caption);
}

.crumb a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
}

.crumb a:hover {
    text-decoration: underline;
}

.crumb span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-ink-muted);
}

.notice-page {
    max-width: calc(640px + 2 * var(--space-6));
    margin-inline: 0;
    padding-bottom: var(--space-8);
}

@media (min-width: 1120px) {
    .notice-page {
        margin-inline: auto;
        max-width: var(--content-max);
    }

    .notice-page > * {
        max-width: 640px;
    }
}

.notice-full {
    display: grid;
    gap: var(--space-4);
    padding-block: var(--space-6);
}

.notice-kind {
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

.notice-full h1 {
    margin-top: calc(-1 * var(--space-2));
    font: var(--text-display);
    text-wrap: balance;
}

.notice-opening {
    color: var(--color-ink-muted);
}

.is-janaza .notice-name {
    font: 600 32px/48px var(--font-display);
}

.is-janaza .notice-full {
    gap: var(--space-5);
}

.notice-full .notice-sub {
    margin-top: calc(-1 * var(--space-3));
    font: var(--text-body);
}

.notice-full .notice-facts {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0 var(--space-4);
    border-top: 1px solid var(--color-line);
}

.notice-full .notice-facts > * {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-line);
}

.fact-main {
    display: block;
    font: 600 18px/28px var(--font-ui);
}

.fact-sub {
    display: block;
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

.notice-where {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding-block: var(--space-4);
    border-block: 1px solid var(--color-line);
}

.notice-where > div {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 0 var(--space-3);
}

.notice-where .icon {
    grid-row: span 2;
    margin-top: 2px;
    color: var(--color-ink-muted);
}

.notice-where dt {
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

.notice-where dd {
    margin: 0;
    font: 600 16px/24px var(--font-ui);
}

.notice-text {
    font: var(--text-body-lg);
}

.notice-photo {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.notice-stamp {
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

.notice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--touch-gap);
}

.notice-actions .btn {
    padding-inline: var(--space-4);
}

.notice-actions .share-status {
    flex-basis: 100%;
}

.more-notices h2,
.notices-title {
    margin-bottom: var(--space-3);
    font: var(--text-title);
}

.notices-title {
    padding-block: var(--space-4) var(--space-2);
}

.more-notices {
    padding-top: var(--space-5);
}

.notice-page .notice-cards {
    grid-template-columns: minmax(0, 1fr);
}

.notice-rows {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-line);
    list-style: none;
}

.notice-rows a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 56px;
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--color-line);
    color: var(--color-ink);
    text-decoration: none;
}

.notice-rows a:hover .row-title {
    text-decoration: underline;
}

.notice-rows .row-title {
    display: block;
    font: 600 16px/24px var(--font-ui);
}

.notice-rows .row-meta {
    display: block;
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

.notice-rows .icon {
    flex: none;
    color: var(--color-ink-muted);
}

/* ---------------------------------------------------------------- timetable (W3) */

.timetable-page {
    padding-bottom: var(--space-8);
}

.timetable-head {
    display: grid;
    gap: var(--space-3);
    padding-bottom: var(--space-5);
}

.timetable-title {
    display: grid;
    gap: var(--space-4);
    padding-top: var(--space-4);
}

.timetable-title h1 {
    font: 600 32px/48px var(--font-display);
}

.timetable-head .muted,
.timetable-lines,
.timetable-note {
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

.timetable-lines {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-5);
}

.timetable-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--touch-gap);
}

.timetable-actions .btn {
    padding-inline: var(--space-3);
}

@media (min-width: 600px) {
    .timetable-actions .btn {
        padding-inline: var(--space-4);
    }
}

.start-toggle {
    padding-block: var(--space-1);
    border-block: 1px solid var(--color-line);
}

.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.timetable {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: var(--numeric);
}

.timetable th,
.timetable td {
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-line);
    text-align: right;
    white-space: nowrap;
}

.timetable thead th {
    padding-block: var(--space-2);
    color: var(--color-ink-muted);
    font: var(--text-caption);
    font-weight: 400;
}

.timetable thead .c-group {
    color: var(--color-ink);
    font-weight: 600;
    text-align: center;
}

.timetable .c-date,
.timetable .c-wd {
    text-align: left;
}

.timetable tbody .c-date {
    font: 600 14px/22px var(--font-ui);
}

.timetable .c-wd,
.timetable .c-start,
.timetable .c-sunrise {
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

.timetable .c-wd strong {
    color: var(--color-ink);
}

.timetable tbody .c-jamaat {
    font: 700 15px/22px var(--font-ui);
}

.timetable td.c-start,
.timetable th.c-start {
    padding-left: var(--space-4);
}

/* A hairline after each prayer's pair of columns */
.timetable-full .c-jamaat,
.timetable-full .c-sunrise,
.timetable-full .c-wd {
    border-right: 1px solid var(--color-line);
}

.timetable-full tr > :last-child {
    border-right: 0;
}

.timetable tr.is-friday {
    background: var(--color-paper);
}

.timetable tr.is-today {
    background: var(--color-accent-soft);
}

.timetable tbody tr:last-child > * {
    border-bottom: 0;
}

.change-band td {
    padding-inline: var(--space-3);
    background: var(--color-sunken);
    color: var(--color-ink);
    font: var(--text-caption);
    text-align: left;
    white-space: normal;
}

.change-band strong {
    font-weight: 700;
}

.d-short small {
    display: block;
    color: var(--color-ink-muted);
    font: 400 12px/18px var(--font-ui);
}

.timetable-note {
    margin-top: var(--space-4);
}

/* Phones: jamaat only, start times behind the switch */
.timetable-jamaat .c-wd,
.timetable-jamaat .d-full,
.timetable-full,
.print-head,
.print-foot {
    display: none;
}

.timetable-jamaat .c-date {
    padding-left: var(--space-3);
}

.show-start .timetable-full {
    display: block;
}

.show-start .timetable-jamaat {
    display: none;
}

@media (min-width: 900px) {
    .timetable-title {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .start-toggle {
        display: none;
    }

    .has-start .timetable-full {
        display: block;
    }

    .has-start .timetable-jamaat {
        display: none;
    }

    .timetable-jamaat .c-wd,
    .timetable-jamaat .d-full {
        display: revert;
    }

    .timetable-jamaat .d-short {
        display: none;
    }

    .timetable th,
    .timetable td {
        padding-inline: var(--space-3);
    }
}

/* ---------------------------------------------------------------- the A4 notice-board sheet (W10) */

@media print {
    @page {
        size: A4;
        margin: 12mm 14mm;
    }

    .page-band,
    .next-jamaat {
        color: #000;
        background: none;
    }

    .page-band::after {
        display: none;
    }

    .page-band .english,
    .page-band .meta-row,
    .next-jamaat .label,
    .next-in {
        color: #333;
    }

    .site-header,
    .site-footer,
    .timetable-head,
    .timetable-note,
    .skip-link {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .timetable-page {
        max-width: none;
        padding: 0;
    }

    .print-head {
        display: flex;
        justify-content: space-between;
        gap: 8mm;
        padding-bottom: 3mm;
        border-bottom: 2px solid #000;
        font: 400 11pt/1.45 var(--font-ui);
    }

    .print-mosque {
        font: 600 13pt/1.4 var(--font-ui);
    }

    .print-title {
        font: 700 22pt/1.35 var(--font-ui);
    }

    .print-qr {
        flex: none;
        width: 26mm;
        height: 26mm;
    }

    .print-qr svg {
        width: 100%;
        height: 100%;
    }

    .has-start .timetable-full,
    .show-start .timetable-full {
        display: none;
    }

    .timetable-jamaat,
    .has-start .timetable-jamaat,
    .show-start .timetable-jamaat {
        display: block;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: none;
    }

    .timetable-jamaat .c-wd,
    .timetable-jamaat .d-full {
        display: revert;
    }

    .timetable-jamaat .d-short {
        display: none;
    }

    .timetable {
        font-size: 11pt;
    }

    /* 31 days and a change band fit on one sheet */
    .timetable th,
    .timetable td {
        padding: 0.8mm 2mm;
        border-bottom: 0.5pt solid #555;
        color: #000;
        font-size: 10.5pt;
        line-height: 1.3;
    }

    .timetable thead th {
        border-bottom: 1.5pt solid #000;
        background: #e8e8e8;
        color: #000;
        font: 700 11pt/1.4 var(--font-ui);
    }

    .timetable tbody .c-date,
    .timetable tbody .c-jamaat,
    .timetable .c-wd {
        color: #000;
        font: 400 10.5pt/1.3 var(--font-ui);
    }

    .timetable tr.is-today {
        background: none;
    }

    .timetable tr.is-friday {
        background: #e8e8e8;
    }

    .timetable tr.is-friday > * {
        font-weight: 700 !important;
    }

    .change-band td {
        background: none;
        color: #000;
        font: 400 10.5pt/1.3 var(--font-ui);
    }

    .print-foot {
        display: block;
        margin-top: 6mm;
        color: #000;
        font: 400 10.5pt/1.5 var(--font-ui);
    }

    .timetable tr {
        break-inside: avoid;
    }
}

/* ---------------------------------------------------------------- funds on the mosque page (W2) and the funds list */

.stack {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}

.note-line {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    color: var(--color-ink-muted);
    font: var(--text-caption);
}

.note-line .icon {
    flex: none;
    margin-top: 1px;
}

.fund-cards {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 900px) {
    .fund-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.fund-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.fund-card:has(a:focus-visible) {
    box-shadow: var(--focus-ring);
}

.fund-card h3 {
    font: 600 18px/28px var(--font-ui);
    text-wrap: balance;
}

.fund-card h3 a {
    color: var(--color-ink);
    text-decoration: none;
}

/* The whole card opens the fund */
.fund-card h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.fund-card h3 a:focus-visible {
    outline: none;
}

.fund-card:hover {
    border-color: var(--color-control);
}

.fund-card-purpose,
.fund-card-below,
.fund-card-line p {
    color: var(--color-ink-muted);
    font: 400 14px/22px var(--font-ui);
    font-variant-numeric: var(--numeric);
}

.fund-card-purpose {
    margin-top: var(--space-1);
    text-wrap: pretty;
}

.fund-card-figures {
    display: grid;
    gap: var(--space-2);
}

.fund-card-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
}

.fund-card-line .fund-card-percent {
    flex: none;
    color: var(--color-ink);
    font-weight: 600;
}

.figure-accent {
    color: var(--color-accent);
    font: var(--text-figure);
    font-variant-numeric: var(--numeric);
}

.fund-card-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--touch-min);
    margin-top: auto;
    color: var(--color-accent);
    font: 600 16px/24px var(--font-ui);
}

.fund-card-more .icon {
    width: 18px;
    height: 18px;
}

/* The progress bar: collected solid, and (only where a fund shows dues) the pledged hatching after it */
.bar {
    position: relative;
    height: 12px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--progress-track);
}

.bar span {
    position: absolute;
    inset: 0 auto 0 0;
}

.bar-collected {
    background: var(--progress-collected);
}

.bar-pledged {
    background: var(--progress-pledged);
}

.tag-quiet {
    background: var(--color-sunken);
    color: var(--color-ink-muted);
}

.tag-accent {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.tag-due {
    background: var(--color-due-soft);
    color: var(--color-due);
}

.tag-outline {
    border: 1px solid var(--color-control);
    background: transparent;
    color: var(--color-ink);
}

/* ---------------------------------------------------------------- is the mosque here already? (W9) */

.register-find {
    padding-block-end: 0;
}

.register-find h2 {
    font: var(--text-title);
}

.find-row {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.find-row .input {
    flex: 1;
    min-width: 0;
}

.find-results {
    margin-top: var(--space-3);
}

.find-results .btn {
    flex: none;
}

/* The claim form shows its two parts together, even with JavaScript */
.js .claim-form .register-step + .register-step {
    margin-top: var(--space-7);
}