/**
 * Public Website — Home Page (Phase 2)
 * Scoped under `.pub-home-*` — page-specific, separate from the shared
 * layout CSS in public-site.css (Phase 1) so this file only ever
 * affects the homepage. Built on the design-system.css token scale;
 * typography stays within the mobile scale given for this roadmap:
 * page/hero title 20-24px, section titles 18-21px, body 14-16px,
 * metadata 12-14px.
 */

.pub-home-section {
    max-width: 1120px;
    margin: 0 auto;
    padding: 2rem 1rem;
}
.pub-home-section + .pub-home-section {
    padding-top: 0;
}

.pub-home-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.pub-home-section-title {
    font-size: var(--nkst-font-lg, 19px);
    font-weight: 800;
    color: var(--nkst-color-text, #1f2937);
    margin: 0;
}
.pub-home-section-link {
    font-size: var(--nkst-font-xs, 13px);
    font-weight: 700;
    color: var(--nkst-color-primary, #1e3a8a);
    text-decoration: none;
    white-space: nowrap;
}
.pub-home-section-link:hover { text-decoration: underline; }

/* ══════════════════════════════════
   HERO
══════════════════════════════════ */
.pub-home-hero {
    /* Light, genuinely see-through tint — the real church building
       photo, including its "NKST MAKURDI CENTRAL" signage, stays
       clearly visible everywhere in the hero, not hidden behind a
       solid color or a boxed-in panel. Text below sits directly on
       the photo and gets its own text-shadow for contrast instead of
       an opaque background. */
    background: linear-gradient(rgba(10,16,38,.28), rgba(10,16,38,.28)),
                url('../images/hero-bg.jpg') center/cover no-repeat;
    padding: 2.25rem 1rem 2.5rem;
    text-align: center;
    color: #fff;
}
.pub-home-hero-eyebrow {
    font-size: var(--nkst-font-sm, 14px);
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,.7);
    margin: 0 0 .35rem;
}
.pub-home-hero-title {
    font-size: var(--nkst-font-xl, 22px);
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 .5rem;
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 8px rgba(0,0,0,.7);
}
.pub-home-hero-tagline {
    font-size: var(--nkst-font-sm, 14px);
    color: rgba(255,255,255,.9);
    max-width: 42ch;
    margin: 0 auto 1.25rem;
    line-height: 1.55;
    text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
/* Mobile only: the full church name + tagline are already in the
   header right next to the logo, so repeating them again in the hero
   is redundant on a narrow screen — "Welcome to" stays exactly where
   it already sits (it's the first thing in the hero either way), the
   CTAs just move up to sit under it once the other two are gone. */
@media (max-width: 900px) {
    .pub-home-hero-title,
    .pub-home-hero-tagline {
        display: none;
    }
    /* "Welcome to" keeps its own position (top padding + its own
       margin, unchanged from before) — the hero's total height also
       stays the same as before (fixed, not grown). The CTAs are
       pushed down WITHIN that same fixed height via margin-top:auto
       on .pub-home-hero-ctas below, not by adding more height. */
    .pub-home-hero {
        box-sizing: border-box;
        padding-top: 1.5rem;
        padding-bottom: 1.25rem;
        height: 210px;
        display: flex;
        flex-direction: column;
    }
    .pub-home-hero-eyebrow {
        font-size: var(--nkst-font-lg, 19px);
        margin-bottom: 0;
    }
    .pub-home-hero-ctas {
        margin-top: auto;
    }
}
.pub-home-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: center;
}
.pub-home-hero-ctas .pub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .7rem 1.25rem;
    font-size: var(--nkst-font-sm, 14px);
}
.pub-home-hero-ctas .pub-btn-primary { background: #fff; color: var(--nkst-color-primary, #1e3a8a); box-shadow: 0 1px 10px rgba(0,0,0,.25); }
.pub-home-hero-ctas .pub-btn-primary:hover { background: #eef1fb; }
/* The ghost button has no fill, so — now that it sits directly on the
   photo instead of an opaque panel — it gets a light backdrop of its
   own (much lighter than the old panel) just to keep its outline and
   text readable against whatever part of the image is behind it. */
.pub-home-hero-ctas .pub-btn-ghost {
    color: #fff;
    border-color: rgba(255,255,255,.7);
    background: rgba(10,16,38,.35);
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.pub-home-hero-ctas .pub-btn-ghost:hover { background: rgba(255,255,255,.12); }

/* ══════════════════════════════════
   QUICK ACTIONS
══════════════════════════════════ */
.pub-home-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .65rem;
}
.pub-home-quick-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    background: #fff;
    border: 1px solid var(--nkst-color-border, #e5e7eb);
    border-radius: var(--nkst-radius-md, 12px);
    padding: .9rem .85rem;
    text-decoration: none;
    color: inherit;
    min-height: 44px;
}
.pub-home-quick-card:hover { box-shadow: var(--nkst-shadow-sm, 0 1px 2px rgba(0,0,0,.08)); }
.pub-home-quick-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .95rem;
    flex-shrink: 0;
}
.pub-home-quick-label {
    font-size: var(--nkst-font-sm, 14px);
    font-weight: 700;
    color: var(--nkst-color-text, #1f2937);
    line-height: 1.25;
}

@media (min-width: 560px) {
    .pub-home-quick-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 901px) {
    .pub-home-quick-grid { grid-template-columns: repeat(6, 1fr); }
    .pub-home-quick-card { align-items: center; text-align: center; }
}

/* ══════════════════════════════════
   UPDATE CARD (Section 3)
══════════════════════════════════ */
.pub-home-update-card {
    background: #fff;
    border: 1px solid var(--nkst-color-border, #e5e7eb);
    border-radius: var(--nkst-radius-lg, 16px);
    overflow: hidden;
}
.pub-home-update-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    background: var(--nkst-color-surface-alt, #f0f2f5);
}
.pub-home-update-body { padding: 1rem 1.1rem 1.15rem; }
.pub-home-update-category {
    display: inline-block;
    font-size: var(--nkst-font-2xs, 12px);
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--nkst-color-primary, #1e3a8a);
    background: rgba(30,58,138,.08);
    padding: .2rem .55rem;
    border-radius: 999px;
    margin-bottom: .55rem;
}
.pub-home-update-title {
    font-size: var(--nkst-font-md, 16px);
    font-weight: 800;
    color: var(--nkst-color-text, #1f2937);
    margin: 0 0 .35rem;
    line-height: 1.35;
}
.pub-home-update-desc {
    font-size: var(--nkst-font-sm, 14px);
    color: var(--nkst-color-text, #1f2937);
    line-height: 1.55;
    margin: 0 0 .6rem;
}
.pub-home-update-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.pub-home-update-date {
    font-size: var(--nkst-font-2xs, 12px);
    color: var(--nkst-color-text-muted, #6b7280);
}
.pub-home-update-more {
    font-size: var(--nkst-font-xs, 13px);
    font-weight: 700;
    color: var(--nkst-color-primary, #1e3a8a);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* ══════════════════════════════════
   EVENT / SERMON CARDS (Sections 4-5)
══════════════════════════════════ */
.pub-home-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .85rem;
}
@media (min-width: 640px) {
    .pub-home-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 901px) {
    .pub-home-card-grid { grid-template-columns: repeat(3, 1fr); }
}

.pub-home-event-card, .pub-home-sermon-card {
    background: #fff;
    border: 1px solid var(--nkst-color-border, #e5e7eb);
    border-radius: var(--nkst-radius-md, 12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pub-home-card-media {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg,#0b3d2e,#166534);
}
.pub-home-card-media-fallback {
    width: 100%;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--nkst-color-primary, #1e3a8a), #16296b);
    color: rgba(255,255,255,.85);
    font-size: 1.75rem;
    position: relative;
}
.pub-home-card-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,.5);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.pub-home-card-body { padding: .8rem .9rem .9rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.pub-home-card-date-chip {
    align-self: flex-start;
    font-size: var(--nkst-font-2xs, 12px);
    font-weight: 700;
    color: var(--nkst-color-primary, #1e3a8a);
    background: rgba(30,58,138,.08);
    padding: .15rem .5rem;
    border-radius: 6px;
}
.pub-home-card-title {
    font-size: var(--nkst-font-sm, 14px);
    font-weight: 800;
    color: var(--nkst-color-text, #1f2937);
    margin: 0;
    line-height: 1.35;
}
.pub-home-card-meta {
    font-size: var(--nkst-font-2xs, 12px);
    color: var(--nkst-color-text-muted, #6b7280);
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .6rem;
}
.pub-home-card-desc {
    font-size: var(--nkst-font-xs, 13px);
    color: var(--nkst-color-text-muted, #6b7280);
    line-height: 1.5;
    margin: 0;
}
.pub-home-card-cta {
    margin-top: auto;
    padding-top: .5rem;
    font-size: var(--nkst-font-xs, 13px);
    font-weight: 700;
    color: var(--nkst-color-primary, #1e3a8a);
    text-decoration: none;
}

/* ══════════════════════════════════
   EMPTY STATE
══════════════════════════════════ */
.pub-home-empty {
    background: #fff;
    border: 1px dashed var(--nkst-color-border, #e5e7eb);
    border-radius: var(--nkst-radius-md, 12px);
    padding: 1.75rem 1.25rem;
    text-align: center;
    color: var(--nkst-color-text-muted, #6b7280);
}
.pub-home-empty i {
    font-size: 1.5rem;
    margin-bottom: .5rem;
    display: block;
    color: var(--nkst-color-border, #d1d5db);
}
.pub-home-empty p { font-size: var(--nkst-font-sm, 14px); margin: 0; }

/* ══════════════════════════════════
   CHURCH UNITS (Section 6)
══════════════════════════════════ */
.pub-home-unit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .7rem;
}
@media (min-width: 640px) {
    .pub-home-unit-grid { grid-template-columns: repeat(3, 1fr); }
}
.pub-home-unit-card {
    display: block;
    background: #fff;
    border: 1px solid var(--nkst-color-border, #e5e7eb);
    border-radius: var(--nkst-radius-md, 12px);
    padding: .9rem .85rem;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.pub-home-unit-card:hover {
    border-color: var(--nkst-color-primary, #1e3a8a);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.pub-home-unit-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 1rem;
    margin-bottom: .55rem;
}
.pub-home-unit-name {
    font-size: var(--nkst-font-sm, 14px);
    font-weight: 800;
    color: var(--nkst-color-text, #1f2937);
    margin: 0 0 .25rem;
}
.pub-home-unit-desc {
    font-size: var(--nkst-font-2xs, 12px);
    color: var(--nkst-color-text-muted, #6b7280);
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ══════════════════════════════════
   WARDS BAND (Section 7)
══════════════════════════════════ */
.pub-home-wards-band {
    background: var(--nkst-color-surface-alt, #f0f2f5);
    border-radius: var(--nkst-radius-lg, 16px);
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    align-items: flex-start;
}
.pub-home-wards-stat {
    font-size: var(--nkst-font-2xl, 26px);
    font-weight: 800;
    color: var(--nkst-color-primary, #1e3a8a);
    line-height: 1;
}
.pub-home-wards-stat-label {
    font-size: var(--nkst-font-xs, 13px);
    color: var(--nkst-color-text-muted, #6b7280);
    margin-top: .2rem;
}
.pub-home-wards-text {
    font-size: var(--nkst-font-sm, 14px);
    color: var(--nkst-color-text, #1f2937);
    line-height: 1.6;
    margin: 0;
    max-width: 60ch;
}
.pub-home-wards-band .pub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
@media (min-width: 640px) {
    .pub-home-wards-band { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; }
}

/* ══════════════════════════════════
   JOIN CTA (Section 8)
══════════════════════════════════ */
.pub-home-join-band {
    background: linear-gradient(135deg, var(--nkst-color-primary, #1e3a8a), #16296b);
    border-radius: var(--nkst-radius-lg, 16px);
    padding: 2rem 1.25rem;
    text-align: center;
    color: #fff;
}
.pub-home-join-title {
    font-size: var(--nkst-font-lg, 19px);
    font-weight: 800;
    margin: 0 0 .4rem;
}
.pub-home-join-desc {
    font-size: var(--nkst-font-sm, 14px);
    color: rgba(255,255,255,.85);
    max-width: 46ch;
    margin: 0 auto 1.1rem;
    line-height: 1.55;
}
.pub-home-join-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: center;
}
.pub-home-join-ctas .pub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pub-home-join-ctas .pub-btn-primary { background: #fff; color: var(--nkst-color-primary, #1e3a8a); }
.pub-home-join-ctas .pub-btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); }

/* ══════════════════════════════════
   CONTACT / VISIT (Section 9)
══════════════════════════════════ */
.pub-home-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .7rem;
}
@media (min-width: 640px) {
    .pub-home-contact-grid { grid-template-columns: repeat(3, 1fr); }
}
.pub-home-contact-item {
    background: #fff;
    border: 1px solid var(--nkst-color-border, #e5e7eb);
    border-radius: var(--nkst-radius-md, 12px);
    padding: .95rem;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}
.pub-home-contact-icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(30,58,138,.08);
    color: var(--nkst-color-primary, #1e3a8a);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: .9rem;
}
.pub-home-contact-label {
    font-size: var(--nkst-font-2xs, 12px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--nkst-color-text-muted, #6b7280);
    margin: 0 0 .15rem;
}
.pub-home-contact-value {
    font-size: var(--nkst-font-sm, 14px);
    color: var(--nkst-color-text, #1f2937);
    margin: 0;
    text-decoration: none;
    font-weight: 600;
    word-break: break-word;
}
.pub-home-contact-cta {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .65rem;
}
.pub-home-contact-cta .pub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}