/**
 * /cat/assets/css/entry.css
 *
 * The public entry page.
 *
 * ── THE IDEA ────────────────────────────────────────────────────────────────
 * The parishes are named for saints and represented by ICONS — Byzantine and
 * Maronite, gold leaf, halo, flat planes. The first draft put those in small
 * grey circles like avatars on a settings screen, which threw away the one
 * distinctive material this portal has. So the page is built as an icon panel:
 * a deep field, a gilded ring, generous margin around the image, and everything
 * else kept quiet so the crest carries the page.
 *
 * The second organising fact is that this system orbits an academic YEAR that
 * opens and closes. It is not a subtitle; it is the thing the whole portal is
 * about. So it sits above the parish name as a letterspaced eyebrow, which is
 * where the eye lands first.
 *
 * Palette and the .adm-* components come from admin-theme.css, per install via
 * data-theme. This file adds only what the entry page needs.
 *
 * @version 2.3.4
 *
 * Changelog
 *   2.3.4 — The footer wrapper is a centred ROW, not a column. As a column it
 *           stacked each child's icon above its own text, so the state box ran to
 *           three lines and the button to two — unequal again, for a new reason.
 *   2.3.3 — The "closes on" line is gone: it told someone about to press Enter a
 *           date eight months off, and it was the only thing making the open card
 *           taller than the closed one. The footer minimum moved onto a wrapper
 *           that centres its contents rather than stretching the button itself.
 *   2.3.2 — Year band larger, bolder, in the theme primary. The heading row has
 *           a two-line minimum height so the gold rule lands at the same place on
 *           both cards — "Parents" wraps to one line and "Catechists &
 *           volunteers" to two, which had everything below them out of step.
 *   2.3.1 — The year is a BAND across the head of the card (.ent-year-band), not
 *           a stray line above the icon. And the heading rule moved onto the ROW:
 *           it had stayed on each name, giving two stubby underlines that read as
 *           two headings rather than one in two scripts.
 *   2.3.0 — Route heading is one line in two scripts (.ent-name-row), with the
 *           rule under both — stacked, the Arabic read as a subtitle rather than
 *           the same heading. The year moved to the top of the card.
 *   2.2.3 — .ent-name-ar for the Arabic route headings.
 *   2.2.2 — The card row is inset from the panel's edges. Flush, the two were
 *           the same width by coincidence; inset, the panel reads as the thing
 *           the cards sit in.
 *   2.2.1 — The overlap is back, done properly: the cards lift into the panel
 *           and the panel carries enough bottom padding for them to land in.
 *           v2.0 had the lift without the room, so it read as a collision; v2.2
 *           removed the lift, which lost the layering that ties the two halves
 *           together.
 *   2.2.0 — Per-parish colour via a --tint custom property, set
 *           inline from fixed_parameters.parish_tint and falling back to the
 *           theme primary, so two parishes are distinguishable at a glance
 *           without a second theme.
 *   2.1.0 — Cairo actually APPLIED (declared but never used, so everything fell
 *           back to the system sans). Change-parish moved into the panel corner
 *           — centred, it read as the panel's main action. Card footers share a
 *           minimum height so the pair sits level whatever each state says.
 *   2.0.0 — Reworked. v1 was three flat boxes on an empty page, with the state
 *           pill and the disabled button repeating the same words directly above
 *           one another. Now: gilded icon panel, the year as an eyebrow, route
 *           cards distinguished by colour and rule, and a CLOSED route shows no
 *           button at all — the state line IS the message, so nothing is said
 *           twice.
 *   1.0.0 — Initial.
 */

/* ── Page ─────────────────────────────────────────────────────────────────── */
/* Cairo, applied. cairo.css only DECLARES the face — v1 loaded it and then never
   used it, so the page rendered in the browser's default sans and the Arabic
   fell back to whatever the system had. */
.ent-body,
.ent-body input,
.ent-body button {
    font-family: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.ent-body {
    background:
        radial-gradient(1200px 420px at 50% -180px, var(--adm-primary-050), transparent 70%),
        var(--adm-well);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.ent-wrap {
    flex: 1 0 auto;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 3.5rem 1.15rem 4rem;
}

/* ── The panel ────────────────────────────────────────────────────────────── */
/* A single deep field carrying the crest, the year and the parish. The gold
   hairline is the frame of an icon, not a decorative border — it is the one
   flourish, and everything else stays quiet so it reads. */
.ent-panel {
    position: relative;
    background:
        radial-gradient(680px 300px at 50% -60px, rgba(255, 255, 255, .10), transparent 70%),
        linear-gradient(160deg, var(--adm-primary-700), var(--adm-primary));
    border: 1px solid var(--adm-accent-bright);
    border-radius: 1rem;
    padding: 2.75rem 1.5rem 4.5rem;
    text-align: center;
    color: #fff;
    box-shadow: var(--adm-shadow-lg);
    overflow: hidden;
}

/* Inner hairline: the double frame an icon panel actually has. */
.ent-panel::after {
    content: "";
    position: absolute;
    inset: .4rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: .75rem;
    pointer-events: none;
}

.ent-crest {
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 1.4rem;
    border: 3px solid var(--tint-ring, var(--adm-accent-bright));
    box-shadow: 0 0 0 .55rem rgba(0, 0, 0, .14), 0 .5rem 1.5rem rgba(0, 0, 0, .3);
    background: var(--adm-well);
}

/* The year, not the parish, is what the portal orbits — so it leads. */
.ent-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--adm-accent-soft);
    margin: 0 0 .5rem;
}

.ent-title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    color: #fff;
}

.ent-lede-ar {
    font-size: 1.05rem;
    margin: .35rem 0 0;
    color: rgba(255, 255, 255, .82);
}

.ent-title-ar {
    font-size: 1.15rem;
    font-weight: 400;
    margin: .3rem 0 0;
    color: rgba(255, 255, 255, .82);
}

.ent-lede {
    font-size: .95rem;
    margin: .85rem auto 0;
    max-width: 30rem;
    color: rgba(255, 255, 255, .8);
}

.ent-change {
    /* In the panel's corner rather than centred beneath the name: as a centred
       pill it read as the panel's main action, which it is not — it is an escape
       hatch for the few who chose wrongly. */
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--adm-accent-soft);
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    padding: .32rem 1rem;
    text-decoration: none;
    transition: background .15s ease;
}

.ent-change:hover,
.ent-change:focus-visible {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.ent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.25rem;
    /* The cards sit INTO the panel's lower edge — that overlap is what ties the
       two halves together. v2 had the same lift but the panel was too shallow
       beneath the text, so the crest and the card corners fought for the same
       pixels and it read as a collision rather than a deliberate layer. The
       panel now carries enough bottom padding for the cards to land in. */
    margin-top: -2.75rem;
    /* Narrower than the panel, so the panel reads as the container and the cards
       as sitting IN it. Flush edges made the two the same width by coincidence
       rather than by relationship, and the layering lost its point. */
    margin-inline: 1.75rem;
    position: relative;
    z-index: 2;
}

.ent-card {
    background: var(--adm-surface);
    border: 1px solid var(--adm-line);
    border-radius: .85rem;
    box-shadow: var(--adm-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}

/* Parish cards are the whole target — a small link inside a large card is a
   smaller hit area than the card the eye is already on. */
a.ent-card {
    text-decoration: none;
    color: inherit;
}

a.ent-card:hover,
a.ent-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--adm-shadow-lg);
}

/* Each parish carries its own colour, set inline from fixed_parameters.
   parish_tint. It falls back to the theme primary, so an install that has not
   set one looks exactly as before. */
.ent-card {
    --tint: var(--adm-primary);
}

.ent-card__top {
    height: 4px;
    background: var(--tint);
}

.ent-card--accent .ent-card__top { background: var(--adm-accent); }

.ent-card__body {
    padding: 1.35rem 1.35rem 1.15rem;
    flex: 1 1 auto;
}

.ent-route-icon {
    font-size: 1.6rem;
    color: var(--tint);
    margin-bottom: .75rem;
    display: block;
}

.ent-card--accent .ent-route-icon { color: var(--adm-accent); }

/* One heading, two scripts, one line — English hard left, Arabic hard right, and
   ONE rule under the pair. Previously the rule sat on each name, which produced
   two stubby underlines and made them read as two separate headings. */
.ent-name-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 0 .85rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--adm-accent-bright);
    /* Two lines' worth, so the rule sits at the SAME height on every card.
       "Parents" is one line and "Catechists & volunteers" is two, and without
       this the two rules — and everything below them — sat at different
       heights, which reads as misalignment rather than as different content. */
    min-height: 3.6rem;
    align-items: flex-end;
}

.ent-name-row .ent-name {
    flex: 0 1 auto;
    border-bottom: 0;      /* the ROW carries the rule, never the name */
    padding-bottom: 0;
    margin: 0;
}

.ent-name-row .ent-name:last-child { text-align: right; }

.ent-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--adm-ink);
    margin: 0;
    line-height: 1.35;
}

/* Parish cards use .ent-name alone, centred, with its own rule. */
a.ent-card .ent-name {
    display: inline-block;
    padding-bottom: .55rem;
    border-bottom: 2px solid var(--adm-accent-bright);
    margin-bottom: .55rem;
}

/* Narrow cards: stack rather than squeeze, each name on its own side. */
@media (max-width: 400px) {
    .ent-name-row { display: block; min-height: 0; }
    .ent-card__foot > * { min-height: 0; }
    .ent-name-row .ent-name:last-child { display: block; margin-top: .25rem; }
}

.ent-blurb {
    font-size: .9rem;
    line-height: 1.65;
    color: var(--adm-body);
    margin: 0;
}

.ent-card__foot {
    padding: 1rem 1.35rem 1.35rem;
}

/* ── State ────────────────────────────────────────────────────────────────── */
/* v1 showed a pill AND a disabled button carrying the same words, one directly
   under the other. A closed route now shows the state line ONLY: it is the whole
   message, and it carries the date or the address that makes it useful. */
/* Both cards' footers land at the same depth whatever their state.
   The minimum is on a WRAPPER that CENTRES its contents, not on the child: put on
   the child it stretched the BUTTON to fill it — a 4.6rem slab where a button
   wants about 2.6rem — while the state box, carrying its own padding, still ended
   somewhere else.

   And the direction must be a ROW. As a column it stacked each element's own
   children: the clock above its words, the door icon above "Enter" — so the box
   grew to three lines and the button to two, and they were unequal again for a
   new reason. align-items on a row centres the block vertically while leaving the
   icon beside its text, which is where it belongs. */
.ent-card__foot > * {
    min-height: 4.2rem;
    display: flex;
    align-items: center;          /* NOT column — see below */
}

.ent-state {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .88rem;
    line-height: 1.5;
    padding: .7rem .85rem;
    border-radius: .5rem;
    border: 1px solid transparent;
}

.ent-state i { margin-top: .15rem; flex: 0 0 auto; }

.ent-state--soon   { background: #FAEEDA; border-color: #ecd9b4; color: #6f420a; }
.ent-state--closed { background: #f4f1ec; border-color: var(--adm-line); color: #5a5348; }
.ent-state--paused { background: #eef2f5; border-color: #dbe3ea; color: #384a57; }

.ent-state strong { font-weight: 700; }

.ent-state a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

.ent-enter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    padding: .7rem 1rem;
    border-radius: .5rem;
    background: var(--tint);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--tint);
    transition: filter .15s ease;
}

.ent-card--accent .ent-enter {
    background: var(--adm-accent);
    border-color: var(--adm-accent);
}

.ent-enter:hover,
.ent-enter:focus-visible { filter: brightness(.92); color: #fff; }

/* Which year this card means — a BAND across the head of the card, not a stray
   line above the icon. Parents and catechists can sit on DIFFERENT years during a
   rollover, so each card states its own before anything else. */
.ent-year-band {
    background: var(--adm-well);
    border-bottom: 1px solid var(--adm-line);
    padding: .6rem .75rem;
    text-align: center;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--adm-primary);
}

/* ── Contact + footer ─────────────────────────────────────────────────────── */
.ent-contact {
    text-align: center;
    font-size: .9rem;
    color: var(--adm-body);
    margin: 2rem 0 0;
}

.ent-contact a { color: var(--adm-primary); font-weight: 600; }

.ent-foot {
    flex-shrink: 0;
    text-align: center;
    padding: 1.4rem 1rem;
    font-size: .78rem;
    color: var(--adm-muted);
    border-top: 1px solid var(--adm-line);
    background: var(--adm-surface);
}

.ent-foot div + div { margin-top: .2rem; }

/* ── Small screens ────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .ent-wrap    { padding: 2rem .9rem 2.5rem; }
    .ent-panel   { padding: 2rem 1.1rem 3.5rem; }
    .ent-crest   { width: 6.75rem; height: 6.75rem; }
    .ent-title   { font-size: 1.4rem; }
    .ent-grid    { margin-top: -2rem; margin-inline: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
    a.ent-card, .ent-enter, .ent-change { transition: none; }
    a.ent-card:hover { transform: none; }
}