/* ═══════════════════════════════════════════════════════════════
   Punjab Saathi — Home Page
   File: public/css/psk-home.css
   Load AFTER: bootstrap.min.css, style.css
   ═══════════════════════════════════════════════════════════════ */

/* ── SERVICE CATEGORY CARDS ("Our Services" section) ──────────
   Replaces the old template's .services-wrap, which wraps the
   whole card (including the image) in a flat 20px padding — with
   no icon circle to justify that padding, it just reads as a
   permanent blank gutter down both sides of every photo. This
   matches the /services page's own .psk-service-card look: the
   cover image bleeds to the card's edges via negative margins,
   then the padding only applies to the text below it. */
.psk-category-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e2e6ea;
    padding: 20px 20px 24px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.psk-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 38px rgba(0,0,0,0.12);
    border-color: #fc5e28;
}
.psk-category-card__cover {
    margin: -20px -20px 18px -20px;
    height: 180px;
    background-size: cover;
    background-position: center;
}
.psk-category-card__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #040e26;
    margin: 0 0 8px;
}
.psk-category-card__desc {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.psk-category-card__count {
    font-size: 0.8rem;
    color: #999;
    margin: 0 0 18px;
}
.psk-category-card__count .fa { margin-right: 4px; }
.psk-category-card__btn {
    display: block;
    background: #fc5e28;
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.4px;
    text-align: center;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    margin-top: auto;
    transition: background 0.2s ease;
}
.psk-category-card__btn:hover {
    background: #e04d1c;
    color: #fff;
    text-decoration: none;
}

/* ── Shared: mock preview card (locator results + agent portal) ── */
.psk-home-mock {
    background: #fff; border-radius: 20px; box-shadow: 0 24px 60px rgba(4,14,38,0.16);
    overflow: hidden; border: 1px solid #eef0f2;
}
.psk-home-mock--dark { box-shadow: 0 24px 60px rgba(4,14,38,0.45); }
.psk-home-mock__bar {
    display: flex; align-items: center; gap: 6px; padding: 14px 18px; background: #f3f4f6; border-bottom: 1px solid #e5e7eb;
}
.psk-home-mock__dot { width: 9px; height: 9px; border-radius: 50%; background: #d1d5db; }
.psk-home-mock__dot:nth-child(1) { background: #fca5a5; }
.psk-home-mock__dot:nth-child(2) { background: #fcd34d; }
.psk-home-mock__dot:nth-child(3) { background: #86efac; }
.psk-home-mock__title { margin-left: 10px; font-size: 0.75rem; font-weight: 700; color: #6b7280; }
.psk-home-mock__body { padding: 20px; display: grid; gap: 12px; }
.psk-home-mock__row {
    display: flex; align-items: center; gap: 14px; background: #f9fafb; border: 1px solid #eef0f2;
    border-radius: 12px; padding: 14px 16px;
}
.psk-home-mock__icon {
    width: 38px; height: 38px; border-radius: 10px; background: rgba(252,94,40,0.1); color: #fc5e28;
    display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.psk-home-mock__avatar {
    width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,#fc5e28,#e04010);
    color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700;
    font-size: 0.8rem; flex-shrink: 0;
}
.psk-home-mock__info { flex: 1 1 auto; min-width: 0; }
.psk-home-mock__name { font-size: 0.92rem; font-weight: 700; color: #1e2a3a; }
.psk-home-mock__meta { font-size: 0.76rem; color: #8a94a3; margin-top: 2px; }
.psk-home-mock__badge {
    font-size: 0.7rem; font-weight: 700; color: #1a9d54; background: #e7f8ee; padding: 4px 10px;
    border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.psk-home-mock__pill { font-size: 0.68rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.psk-home-mock__pill--pending { background: #fff3e6; color: #d9722a; }
.psk-home-mock__pill--done { background: #e7f8ee; color: #1a9d54; }
.psk-home-mock__footer {
    padding: 14px 20px; border-top: 1px solid #eef0f2; background: #f9fafb;
    font-size: 0.85rem; color: #6b7280; text-align: center;
}
.psk-home-mock__footer strong { color: #fc5e28; }

/* ── Find a CSC Center ───────────────────────────────────── */
/* Light full-bleed band — same no-nested-panel structure as .psk-home-agent right below it
   (container sits directly on the section background, so there's no inset "floating panel"
   leaving empty gutters either side). Kept light rather than navy specifically because the
   Agent section right after it is already navy — two navy bands back to back read as a flat
   "blue blue" wall, same issue already fixed on the Shop/Digital Books teasers above. */
.psk-home-locator {
    position: relative; padding: 90px 0; overflow: hidden;
    background: #f8f9fa;
}
.psk-home-locator__bg { display: none; }
.psk-home-locator .container { position: relative; z-index: 1; }
.psk-home-locator__eyebrow {
    display: block; font-size: 12px; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: #fc5e28; margin-bottom: 5px;
}
.psk-home-locator__eyebrow .fa { display: none; }
.psk-home-locator h2 { color: #1a1f36; }
.psk-home-locator > .container > .row > div > p.text-muted { color: #6b7280 !important; }
.psk-home-locator__glow { position: relative; }
.psk-home-locator__glow::before {
    content: ''; position: absolute; inset: -30px; z-index: -1; border-radius: 32px;
    background: radial-gradient(circle at 30% 20%, rgba(252,94,40,0.14), transparent 60%);
    filter: blur(6px);
}
.psk-home-locator__search {
    display: flex; align-items: center; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 6px 6px 6px 18px; margin-bottom: 22px; max-width: 480px; box-shadow: 0 10px 30px rgba(4,14,38,0.08);
}
.psk-home-locator__search-icon { color: #fc5e28; margin-right: 10px; }
.psk-home-locator__search-input {
    flex: 1 1 auto; border: none; outline: none; height: 46px; font-size: 0.95rem; min-width: 0;
}
.psk-home-locator__search-btn { flex-shrink: 0; white-space: nowrap; border-radius: 8px; }
.psk-home-locator__points { list-style: none; margin: 0 0 20px; padding: 0; }
.psk-home-locator__points li {
    display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: #4b5563; padding: 5px 0;
}
.psk-home-locator__points .fa { color: #16a34a; }
.psk-home-locator__browse {
    display: inline-block; font-size: 0.92rem; font-weight: 700; color: #e04e1f; text-decoration: none;
}
.psk-home-locator__browse:hover { color: #fc5e28; text-decoration: underline; }

/* ── Become a Punjab Saathi Agent ────────────────────────── */
.psk-home-agent {
    position: relative; padding: 90px 0; overflow: hidden;
    background: linear-gradient(135deg, #040e26 0%, #0a1b3d 100%);
}
.psk-home-agent__bg {
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 10% 15%, rgba(252,94,40,0.18) 0, transparent 40%),
        radial-gradient(circle at 90% 85%, rgba(252,94,40,0.12) 0, transparent 35%);
}
.psk-home-agent .container { position: relative; z-index: 1; }
.psk-home-agent__grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.psk-home-agent__item {
    display: flex; align-items: flex-start; gap: 14px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 20px;
}
.psk-home-agent__item .fa {
    width: 40px; height: 40px; border-radius: 10px; background: rgba(252,94,40,0.15); color: #fc5e28;
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0;
}
.psk-home-agent__item h4 { font-size: 0.92rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.psk-home-agent__item p { font-size: 0.8rem; color: rgba(255,255,255,0.6); margin: 0; line-height: 1.5; }

@media (max-width: 767.98px) {
    .psk-home-locator { padding: 56px 0; }
    .psk-home-locator__panel { padding: 24px; border-radius: 18px; }
    .psk-home-locator__glow::before { inset: -12px; }
    .psk-home-locator__search { max-width: 100%; flex-wrap: wrap; padding: 14px; }
    .psk-home-locator__search-icon { display: none; }
    .psk-home-locator__search-input { flex: 1 1 100%; margin-bottom: 10px; }
    .psk-home-locator__search-btn { width: 100%; }
    .psk-home-agent { padding: 56px 0; }
    .psk-home-agent__grid { grid-template-columns: 1fr; }
}