/* ══════════════════════════════════════════════════════════════
   HOMEPAGE — Saathi Shop & Digital Books teaser sections.
   Same split-panel dark-band component as the Digital Books page's own
   "How It Works" section (psk-process-band/psk-process-tile in
   psk-digital-books.css) — reused here, not reinvented, since that's
   the strongest-looking section already on the site. Classes renamed
   .psk-home-band/.psk-home-tile so this file stays self-contained and
   doesn't depend on psk-digital-books.css loading on this page.
   ══════════════════════════════════════════════════════════════ */

.psk-home-band {
    position: relative;
    background-color: #040e26;
    background-image:
        radial-gradient(circle at 85% 90%, rgba(252,94,40,0.18), transparent 45%),
        linear-gradient(135deg, #0a1f4d 0%, #040e26 100%);
    padding: 64px 0;
    overflow: hidden;
}

/* Light variant — breaks up two navy bands landing back-to-back (this page already has a dark
   "Become an Agent" band right above where the Shop section sits), without losing the tile grid's
   color: the navy/orange tiles read even more vividly against a light backdrop than a dark one. */
.psk-home-band--light {
    background-color: #f7f8fb;
    background-image:
        radial-gradient(circle at 85% 10%, rgba(252,94,40,0.07), transparent 45%),
        radial-gradient(circle at 8% 95%, rgba(10,31,77,0.05), transparent 40%);
}
.psk-home-band--light .psk-home-band__badge { background: #fff5f0; color: #e04e1f; border: 1px solid #fde3d4; }
.psk-home-band--light .psk-home-band__intro h2 { color: #1a1f36; }
.psk-home-band--light .psk-home-band__intro p { color: #6b7280; }
.psk-home-band--light .psk-home-band__pills span {
    background: #fff; border: 1.5px solid #fde3d4; color: #1a1f36;
    box-shadow: 0 4px 12px rgba(252,94,40,0.08);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.psk-home-band--light .psk-home-band__pills span:hover {
    border-color: #fc5e28; box-shadow: 0 6px 16px rgba(252,94,40,0.16); transform: translateY(-2px);
}
/* Icon gets its own tinted badge, not a flat dark circle that barely reads on a light pill. */
.psk-home-band--light .psk-home-band__pills .fa {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff5f0; color: #fc5e28; font-size: 0.78rem;
}

.psk-home-band__intro { padding: 24px 32px 24px 0; }
.psk-home-band__badge {
    display: inline-block; background: #fc5e28; color: #fff;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
    padding: 6px 16px; border-radius: 20px; margin-bottom: 20px;
}
.psk-home-band__intro h2 { color: #fff; font-size: 2rem; font-weight: 800; line-height: 1.25; margin-bottom: 16px; }
.psk-home-band__intro h2 span { color: #fc5e28; }
.psk-home-band__intro p { color: rgba(255,255,255,0.68); font-size: 0.95rem; line-height: 1.7; margin-bottom: 22px; max-width: 46ch; }
.psk-home-band__pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.psk-home-band__pills span {
    display: flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
    color: #fff; font-size: 0.82rem; font-weight: 600; padding: 8px 14px; border-radius: 10px;
}
.psk-home-band__pills .fa { color: #fc5e28; }
.psk-home-band__cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fc5e28; color: #fff !important; font-weight: 700; font-size: 0.92rem;
    padding: 13px 26px; border-radius: 10px; text-decoration: none !important;
    transition: background 0.2s, transform 0.2s;
}
.psk-home-band__cta:hover { background: #e04e1f; transform: translateY(-2px); color: #fff !important; }

.psk-home-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.psk-home-tile {
    position: relative;
    border-radius: 16px;
    padding: 22px 20px;
    min-height: 165px;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 40px -14px rgba(0,0,0,0.4);
    text-decoration: none !important;
    transition: transform 0.2s ease;
}
.psk-home-tile:hover { transform: translateY(-4px); }
.psk-home-tile--navy { background: linear-gradient(160deg, #16305c 0%, #0a1b3a 100%); }
.psk-home-tile--orange { background: linear-gradient(160deg, #fc7a4a 0%, #e04e1f 100%); }
.psk-home-tile__media {
    width: 100%; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; margin-bottom: 14px;
    background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center;
}
.psk-home-tile__media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.psk-home-tile__icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(255,255,255,0.16); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; margin-bottom: 14px;
}
.psk-home-tile__label { color: #fff; font-size: 0.92rem; font-weight: 700; margin-bottom: 4px; line-height: 1.35; }
.psk-home-tile__meta { color: rgba(255,255,255,0.78); font-size: 0.76rem; font-weight: 600; margin-top: auto; padding-top: 10px; }
.psk-home-tile__meta .fa { margin-right: 4px; }

@media (max-width: 991px) {
    .psk-home-band__intro { padding: 0 0 32px; }
}
@media (max-width: 575px) {
    .psk-home-tiles { grid-template-columns: 1fr; }
}

/* ── Homepage blog cards ─────────────────────────────────────── */
.psk-home-blogs { row-gap: 8px; }
.psk-home-blog-card {
    background: #fff; border: 1px solid #e6e9ef; border-radius: 16px; overflow: hidden;
    height: calc(100% - 24px); margin-bottom: 24px; display: flex; flex-direction: column;
    box-shadow: 0 6px 22px rgba(4,14,38,0.06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.psk-home-blog-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(4,14,38,0.14); border-color: #fc5e28; }
.psk-home-blog-card__media { position: relative; display: block; aspect-ratio: 16/9; background: #040e26; overflow: hidden; }
.psk-home-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.psk-home-blog-card:hover .psk-home-blog-card__media img { transform: scale(1.04); }
.psk-home-blog-card__cat {
    position: absolute; top: 14px; left: 14px; background: #fc5e28; color: #fff;
    font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    padding: 6px 12px; border-radius: 999px;
}
.psk-home-blog-card__time {
    position: absolute; bottom: 12px; right: 12px; background: rgba(4,14,38,0.78); color: #fff;
    font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 8px;
}
.psk-home-blog-card__body { padding: 22px 22px 20px; display: flex; flex-direction: column; flex: 1; }
.psk-home-blog-card__date { font-size: 12px; font-weight: 700; color: #8a94a3; margin-bottom: 8px; }
.psk-home-blog-card__date .fa { color: #fc5e28; margin-right: 4px; }
.psk-home-blog-card__title { font-size: 1.12rem; font-weight: 800; line-height: 1.35; color: #040e26; margin: 0 0 10px; }
.psk-home-blog-card__title a { color: inherit; text-decoration: none; }
.psk-home-blog-card__title a:hover { color: #fc5e28; }
.psk-home-blog-card__excerpt { font-size: .92rem; line-height: 1.6; color: #5b6472; margin: 0 0 16px; }
.psk-home-blog-card__footer { margin-top: auto; padding-top: 14px; border-top: 1px solid #eef0f4; }
.psk-home-blog-card__link { color: #fc5e28; font-weight: 800; font-size: .92rem; text-decoration: none; }
.psk-home-blog-card__link .fa { margin-left: 4px; transition: margin-left .2s ease; }
.psk-home-blog-card__link:hover { color: #e04e1f; }
.psk-home-blog-card__link:hover .fa { margin-left: 8px; }