/* ============================================================================
   KOSIS — assets/css/kosis-home-welcome.css
   ----------------------------------------------------------------------------
   v1.1 · 14 Jun 2026

   Small Home-page presentation tweaks. (Despite the filename, this is the
   home for tidy, self-contained Home tweaks; it loads last in
   head-dashboard.php so it can build on the hero/card rules above.)

   v1.1 ("Tier 0" #1): vertically centre the Members stat-card.
   v1.0 (Session 19): Home welcome hero message spacing.
   v1.2 (Session 17 restore): Home About-card location map.
   ========================================================================= */


/* -- Home welcome hero message (Session 19) -------------------------------- */

/*  The editable welcome paragraph. Slightly larger line-height than default
    body copy for a warm, readable hero feel; a small min-height keeps a short
    one-line greeting from collapsing tight against the title above it. The
    pinned quote (margin-top:auto) then sits at the card bottom regardless. */
.ks-home-welcome-body {
    line-height: 1.6;
    min-height: 2.6em;          /* ~ two lines: avoids a sparse single line */
    margin: 0;
}

/*  On wide screens the hero is taller (it sits beside the deep About card), so
    give the message a touch more room before the pinned quote. Purely visual;
    a long message overrides this naturally by growing past the min-height. */
@media (min-width: 1101px) {
    .ks-home-welcome-body {
        min-height: 3.4em;
        padding-bottom: var(--ks-space-sm);
    }
}


/* -- Members stat-card vertical centring ("Tier 0" #1) --------------------- */

/*  The Members box sits in the 3-up row (.ks-grid--3) beside "Documents &
    links" and "Webpage offer". Grid items default to align-items:stretch, so
    all three cards take the height of the TALLEST one. The Members card's
    content (.ks-stat-card) is shorter, so it clustered at the TOP of its
    stretched card — the "icon stuck to the top of the box" the user reported.

    Fix, scoped via a dedicated class (.ks-stat-card-cell) added ONLY to the
    Members card in home.php — so no other .ks-card / .ks-card-link anywhere is
    affected. The cell becomes a column flex parent and its single .ks-stat-card
    child grows to fill the stretched height and centres itself vertically.
    Outside a stretched grid this is a no-op (filling a content-height card just
    equals the content). */
.ks-stat-card-cell {
    display: flex;
    flex-direction: column;
}
.ks-stat-card-cell > .ks-stat-card {
    flex: 1;                 /* fill the stretched card height */
    justify-content: center; /* centre icon + number + label vertically */
}


/* -- Home About-card location map (Session 17) ----------------------------- */

/*  Small embedded map of the choir's pinned location, shown in the About card
    when a Maps key is configured AND the choir has coordinates. The map
    defaults to satellite; a Satellite/Map toggle swaps the embed maptype, and
    a transparent overlay link + "View on Google Maps" open the exact pin in a
    new tab. Self-contained; no JS API on Home (just an embed iframe). */
.ks-home-map {
    margin: 0 0 var(--ks-space-md);
}
.ks-home-map__frame {
    position: relative;
    width: 100%;
    height: clamp(150px, 28vw, 220px);
    border-radius: var(--ks-radius-md, 12px);
    overflow: hidden;
    border: 0.5px solid var(--ks-border);
    background: var(--ks-parchment);
}
.ks-home-map__frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/*  Transparent click-catcher over the map: a tap/click opens Google Maps in a
    new tab. (The embed itself is non-interactive without extra cost; this keeps
    the whole tile a single obvious affordance.) */
.ks-home-map__open {
    position: absolute;
    inset: 0;
    display: block;
    cursor: pointer;
}
.ks-home-map__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ks-space-sm);
    flex-wrap: wrap;
    margin-top: var(--ks-space-sm);
}
.ks-home-map__toggle {
    display: inline-flex;
    border: 0.5px solid var(--ks-border);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
}
.ks-home-map__btn {
    border: none;
    background: transparent;
    color: var(--ks-slate);
    font-family: var(--ks-font-sans);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ks-home-map__btn.is-active {
    background: var(--ks-navy);
    color: var(--ks-cream);
}
.ks-home-map__link {
    color: var(--ks-sage);
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}
.ks-home-map__link:hover { text-decoration: underline; }
.ks-home-map__caption {
    margin: var(--ks-space-sm) 0 0;
    color: var(--ks-slate);
    font-size: 12px;
}
/*  Plain (no-map) location line: pin glyph + text, used when there's a location
    but no map (no key or no coordinates). */
.ks-home-map__caption--plain {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ks-home-map__caption--plain svg { color: var(--ks-slate); flex-shrink: 0; }


/* -- Row 2 card action buttons (Session 39) -------------------------------- */
/*  The Members / Set lists stat cards and the Documents card now use the same
    navy pill button as the "View all events" action, for one consistent
    call-to-action style across the Home cards. */

/*  Stat-card button (Members, Set lists): sits below the label, centred to
    match the card's centred column, with a little breathing room above. */
.ks-stat-card__btn {
    margin-top: var(--ks-space-sm);
}

/*  Documents card button: the card is a flex column, so push the button to the
    bottom edge (margin-top:auto) and let it sit at its natural width on the
    left — mirroring how the Upcoming-events buttons sit at the card foot. */
.ks-doc-card__btn {
    margin-top: var(--ks-space-md);
    align-self: flex-start;
}