/* =====================================================================
   HOME PAGE
   ---------------------------------------------------------------------
   Loaded only by Views/Home/Index.cshtml (via the layout "Styles"
   section). Every class is prefixed hp- so nothing collides with the
   layout's own styles or with Bootstrap.

   RULES FOR THIS FILE
   1. No hard-coded colours. Everything comes from the tokens declared
      in css/site.css and overridden per theme in /themes/*/theme.css.
   2. Photos are never cropped and never stretched. Media goes inside
      .vp-media (site.css), which shows the whole picture at its own
      shape and caps its height so one tall photo can't dominate.
   3. No circular photo masks - villagers' faces get cut off by them.
   ===================================================================== */

.hp {
    --hp-gap: 26px;
    color: var(--gov-text);
    padding-bottom: 10px;
}

.hp-shell {
    max-width: 1400px;
    margin: 0 auto;
}

/* ---------------------------------------------------------------- HERO */
/* One banner, one background: the village aerial photo carries both the
   welcome text and the panchayat governing-body line.

   The photo must read the same in ALL themes, so the only thing over it is
   a neutral scrim - no theme tint, which would repaint the fields green /
   purple / maroon depending on the picked theme. Every theme's
   --gov-on-primary is white or near-white, so white text plus the scrim and
   the text-shadows below stay readable on any of them. The flat gradient in
   the last layer only shows if the photo fails to load. */
.hp-hero {
    position: relative;
    overflow: hidden;
    border-radius: 32px;
    padding: 40px 30px;
    margin-bottom: var(--hp-gap);
    text-align: center;
    color: var(--gov-on-primary);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.20) 42%, rgba(0, 0, 0, 0.40) 100%),
                url("../images/village-aerial.jpg") center 45% / cover no-repeat,
                linear-gradient(135deg, var(--gov-primary) 0%, var(--gov-secondary) 100%);
    box-shadow: 0 20px 50px var(--gov-shadow);
}

.hp-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 980px;
    margin: 0 auto;
}

/* Text sits on a photo now, so legibility comes from tight shadows around
   the letters instead of a wash that hides the village. */
.hp-hero__badge {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.34);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 14px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.hp-hero__title {
    font-size: 2.35rem;
    font-weight: 900;
    line-height: 1.14;
    letter-spacing: 0.4px;
    margin-bottom: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 3px 14px rgba(0, 0, 0, 0.62);
}

.hp-hero__subtitle {
    max-width: 820px;
    margin: 0 auto;
    font-size: 0.98rem;
    line-height: 1.7;
    opacity: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.6);
}

.hp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 22px;
}

.hp-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.15);
    color: var(--gov-on-primary);
    backdrop-filter: blur(6px);
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

    .hp-hero__btn:hover,
    .hp-hero__btn:focus {
        background: var(--gov-surface);
        color: var(--gov-brand);
        transform: translateY(-2px);
        box-shadow: 0 10px 24px var(--gov-shadow);
    }

.hp-hero__btn--accent {
    background: var(--gov-accent);
    border-color: var(--gov-accent);
    color: var(--gov-on-accent);
}

    .hp-hero__btn--accent:hover,
    .hp-hero__btn--accent:focus {
        background: var(--gov-surface);
        color: var(--gov-brand);
    }

/* The governing-body line used to be a banner of its own below the hero.
   It now shares this banner's background - a hairline rule is the only
   thing separating the two, so the gradient reads as one piece. */
.hp-hero__rule {
    width: min(560px, 84%);
    height: 1px;
    margin: 24px auto 18px;
    border: 0;
    background: rgba(255, 255, 255, 0.45);
}

.hp-hero__panchayat {
    max-width: 980px;
    margin: 0 auto;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 3px 12px rgba(0, 0, 0, 0.6);
}

/* The six pillars, laid over the hero photo in two columns of three.
   Each is a real link, so this doubles as navigation on a phone. */
.hp-hero__pillars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 26px;
    max-width: 760px;
    margin: 22px auto 0;
    text-align: left;
}

.hp-pillar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gov-on-primary);
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
    transition: background 0.2s ease, transform 0.2s ease;
}

    .hp-pillar:hover,
    .hp-pillar:focus {
        background: rgba(255, 255, 255, 0.16);
        color: var(--gov-on-primary);
        transform: translateX(2px);
    }

.hp-pillar__icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    text-shadow: none;
}

/* -------------------------------------------------------- QUICK SERVICES */
/* The strip that straddles the hero and the cards below it. */
.hp-quick {
    display: flex;
    align-items: stretch;
    background: var(--gov-surface);
    border: 1px solid var(--gov-border);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: var(--hp-gap);
    box-shadow: 0 14px 34px var(--gov-shadow-soft);
}

.hp-quick__label {
    flex: 0 0 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 12px;
    background: linear-gradient(135deg, var(--gov-primary), var(--gov-secondary));
    color: var(--gov-on-primary);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
}

.hp-quick__grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    min-width: 0;
}

.hp-quick-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
    padding: 14px 8px;
    text-align: center;
    text-decoration: none;
    color: var(--gov-heading);
    border-left: 1px solid var(--gov-border);
    transition: background 0.2s ease, transform 0.2s ease;
}

    .hp-quick-tile:first-child {
        border-left: none;
    }

    .hp-quick-tile:hover,
    .hp-quick-tile:focus {
        background: var(--gov-surface-2);
        color: var(--gov-brand);
        transform: translateY(-2px);
    }

.hp-quick-tile__icon {
    font-size: 26px;
    line-height: 1;
}

.hp-quick-tile__text {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
}

/* ---------------------------------------------------------- CARD GRIDS */
.hp-grid {
    display: grid;
    gap: 16px;
    margin-bottom: var(--hp-gap);
    align-items: start;
}

/* Dashboard / funds / news / gallery / links */
.hp-grid--primary {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Report / track / contact / location / emergency */
.hp-grid--secondary {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.hp-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    background: var(--gov-surface);
    border: 1px solid var(--gov-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 28px var(--gov-shadow-soft);
}

.hp-card__head {
    margin: 0;
    padding: 11px 14px;
    background: var(--gov-surface-2);
    border-bottom: 2px solid var(--gov-accent);
    color: var(--gov-brand);
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.3px;
    text-align: center;
}

.hp-card__body {
    flex: 1 1 auto;
    padding: 14px;
    min-width: 0;
}

.hp-card__foot {
    padding: 0 14px 14px;
    text-align: center;
}

.hp-card__btn {
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid var(--gov-secondary);
    border-radius: 999px;
    background: transparent;
    color: var(--gov-brand);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

    .hp-card__btn:hover,
    .hp-card__btn:focus {
        background: var(--gov-secondary);
        color: var(--gov-on-primary);
    }

.hp-card__btn--solid {
    background: var(--gov-secondary);
    color: var(--gov-on-primary);
}

    .hp-card__btn--solid:hover,
    .hp-card__btn--solid:focus {
        background: var(--gov-primary);
        color: var(--gov-on-primary);
    }

/* ------------------------------------------------- DEVELOPMENT DASHBOARD */
.hp-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* These four are status colours, not theme colours: "completed" must read
   green and "expenditure" red on every theme, so they are deliberately the
   one place in this file that does not resolve to a --gov-* token. */
.hp-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .hp-stat:hover,
    .hp-stat:focus {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 10px 20px var(--gov-shadow);
    }

.hp-stat--blue {
    background: linear-gradient(135deg, #1d6fb8, #2e8bd6);
}

.hp-stat--green {
    background: linear-gradient(135deg, #17794a, #22a163);
}

.hp-stat--amber {
    background: linear-gradient(135deg, #c77b0a, #e29c1f);
}

.hp-stat--red {
    background: linear-gradient(135deg, #a82a2a, #cc3b3b);
}

.hp-stat__label {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    opacity: 0.95;
}

.hp-stat__value {
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1.1;
}

/* Money needs to fit "₹ 2,48,00,000.00" in the same box as "78" */
.hp-stat__value--money {
    font-size: 0.98rem;
    word-break: break-word;
}

.hp-stat__more {
    font-size: 0.66rem;
    font-weight: 700;
    opacity: 0.9;
    text-decoration: underline;
}

/* ----------------------------------------------------------------- FUNDS */
.hp-funds {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

    .hp-funds th,
    .hp-funds td {
        padding: 7px 2px;
        border-bottom: 1px dashed var(--gov-border);
        vertical-align: top;
    }

    .hp-funds th {
        text-align: left;
        font-weight: 600;
        color: var(--gov-text);
    }

    .hp-funds td {
        text-align: right;
        font-weight: 800;
        color: var(--gov-heading);
        white-space: nowrap;
        padding-left: 8px;
    }

.hp-funds__total th,
.hp-funds__total td {
    border-bottom: none;
    border-top: 2px solid var(--gov-accent);
    color: var(--gov-brand);
    font-weight: 900;
}

/* ------------------------------------------------------------ LINK LIST */
.hp-linklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .hp-linklist li {
        border-bottom: 1px dashed var(--gov-border);
    }

        .hp-linklist li:last-child {
            border-bottom: none;
        }

    .hp-linklist a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 9px 2px;
        font-size: 0.83rem;
        font-weight: 700;
        color: var(--gov-text);
        text-decoration: none;
    }

        .hp-linklist a:hover,
        .hp-linklist a:focus {
            color: var(--gov-brand);
        }

.hp-linklist__arrow {
    flex: 0 0 auto;
    color: var(--gov-brand);
    font-weight: 900;
}

/* --------------------------------------------------------- ACTION CARDS */
.hp-card--action .hp-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 18px 14px;
}

.hp-action__icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gov-surface-2);
    border: 1px solid var(--gov-border);
    font-size: 22px;
}

.hp-action__title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 900;
    color: var(--gov-brand);
}

.hp-action__text {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--gov-muted);
}

.hp-card--action .hp-card__btn {
    margin-top: 4px;
}

/* Complaint tracker */
.hp-track {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    width: 100%;
    margin-top: 4px;
}

.hp-track__input {
    flex: 1 1 130px;
    min-width: 0;
    padding: 7px 12px;
    border: 1px solid var(--gov-border);
    border-radius: 999px;
    background: var(--gov-surface);
    color: var(--gov-text);
    font-size: 0.82rem;
    font-weight: 600;
}

    .hp-track__input:focus {
        outline: none;
        border-color: var(--gov-secondary);
    }

/* Contact list */
.hp-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: left;
}

    .hp-contact li {
        display: flex;
        gap: 8px;
        padding: 6px 0;
        font-size: 0.8rem;
        line-height: 1.5;
        color: var(--gov-text);
    }

    .hp-contact a {
        color: var(--gov-brand);
        font-weight: 700;
        word-break: break-all;
    }

.hp-contact__icon {
    flex: 0 0 auto;
}

/* --------------------------------------------------------- ACCORDIONS */
/* Every content section is a list of titles. Built on <details>/<summary>
   so it works without JavaScript, responds to the keyboard, and lets the
   browser's own find-in-page reach the collapsed text.
   Photos inside are lazy-loaded, so a closed title costs no bandwidth. */
.hp-acc-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hp-acc {
    border: 1px solid var(--gov-border);
    border-radius: 14px;
    background: var(--gov-surface);
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

    .hp-acc[open] {
        border-color: var(--gov-secondary);
        box-shadow: 0 10px 24px var(--gov-shadow-soft);
    }

.hp-acc__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    cursor: pointer;
    list-style: none;
    background: var(--gov-surface-2);
    transition: background 0.2s ease;
}

    /* Kill the native disclosure triangle - .hp-acc__chevron replaces it
       so the marker sits on the right and can be animated. */
    .hp-acc__head::-webkit-details-marker {
        display: none;
    }

    .hp-acc__head::marker {
        content: "";
    }

    .hp-acc__head:hover {
        background: var(--gov-media-bg);
    }

.hp-acc__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--gov-heading);
}

/* Announcements have no separate title, so the message itself is the
   heading - held to one line until the row is opened. */
.hp-acc__title--clamp {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hp-acc__meta {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--gov-surface);
    border: 1px solid var(--gov-border);
    color: var(--gov-muted);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.hp-acc__meta--past {
    background: var(--gov-notice-bg);
    border-color: var(--gov-notice-border);
    color: var(--gov-notice-text);
}

.hp-acc__chevron {
    flex: 0 0 auto;
    color: var(--gov-brand);
    font-size: 0.9rem;
    font-weight: 900;
    transition: transform 0.25s ease;
}

.hp-acc[open] .hp-acc__chevron {
    transform: rotate(180deg);
}

.hp-acc__body {
    padding: 16px;
    border-top: 1px solid var(--gov-border);
}

/* ---------------------------------------------------- NAVIGATING TITLES */
/* Same row as .hp-acc__head, but it opens its own page instead of expanding
   in place. Used for the media-heavy sections (leaders, celebrations,
   gallery, news) where a full screen beats a strip inside the home page. */
.hp-linkrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border: 1px solid var(--gov-border);
    border-radius: 14px;
    background: var(--gov-surface-2);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

    .hp-linkrow:hover,
    .hp-linkrow:focus {
        background: var(--gov-media-bg);
        border-color: var(--gov-secondary);
        transform: translateX(2px);
    }

.hp-linkrow__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--gov-heading);
}

.hp-linkrow__meta {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--gov-surface);
    border: 1px solid var(--gov-border);
    color: var(--gov-muted);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.hp-linkrow__arrow {
    flex: 0 0 auto;
    color: var(--gov-brand);
    font-size: 1rem;
    font-weight: 900;
}

/* "View all" button under a shortened list */
.hp-viewall {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
    text-align: center;
}

    .hp-viewall a {
        display: inline-block;
        padding: 9px 22px;
        border: 1px solid var(--gov-secondary);
        border-radius: 999px;
        background: var(--gov-secondary);
        color: var(--gov-on-primary);
        font-size: 0.86rem;
        font-weight: 800;
        text-decoration: none;
        transition: background 0.2s ease;
    }

        .hp-viewall a:hover,
        .hp-viewall a:focus {
            background: var(--gov-primary);
            color: var(--gov-on-primary);
        }

/* ------------------------------------------------------- CONTENT PAGES */
/* Back / breadcrumb bar at the top of every detail page. */
.hp-backbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: var(--hp-gap);
}

    .hp-backbar a {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 18px;
        border: 1px solid var(--gov-border);
        border-radius: 999px;
        background: var(--gov-surface);
        color: var(--gov-brand);
        font-size: 0.86rem;
        font-weight: 800;
        text-decoration: none;
        box-shadow: 0 6px 16px var(--gov-shadow-soft);
        transition: background 0.2s ease, color 0.2s ease;
    }

        .hp-backbar a:hover,
        .hp-backbar a:focus {
            background: var(--gov-secondary);
            border-color: var(--gov-secondary);
            color: var(--gov-on-primary);
        }

/* Detail pages give photos more room than the home page ever did - this is
   the whole point of moving them off it. */
.hp-section--detail .vp-media > img,
.hp-section--detail .vp-media > video {
    max-height: 460px;
}

.hp-section--detail .hp-media-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
}

.hp-empty {
    padding: 26px 10px;
    text-align: center;
    color: var(--gov-muted);
    font-size: 0.95rem;
    font-weight: 600;
}

/* Field list inside an opened title - mirrors the columns the admin
   screens manage, so nothing the admin records is missing here. */
.hp-facts {
    display: grid;
    grid-template-columns: minmax(140px, max-content) minmax(0, 1fr);
    gap: 6px 18px;
    margin: 0 0 16px;
}

    .hp-facts:last-child {
        margin-bottom: 0;
    }

    .hp-facts dt {
        font-size: 0.8rem;
        font-weight: 800;
        color: var(--gov-brand);
    }

    .hp-facts dd {
        margin: 0;
        min-width: 0;
        font-size: 0.9rem;
        line-height: 1.6;
        color: var(--gov-text);
        overflow-wrap: anywhere;
    }

.hp-facts__pre {
    white-space: pre-line;
}

/* ------------------------------------------------------------ SECTIONS */
.hp-section {
    background: var(--gov-surface);
    border: 1px solid var(--gov-border);
    border-radius: 28px;
    padding: 26px;
    margin-bottom: var(--hp-gap);
    box-shadow: 0 14px 34px var(--gov-shadow-soft);
}

.hp-section__head {
    text-align: center;
    margin-bottom: 22px;
}

.hp-chip {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--gov-surface-2);
    border: 1px solid var(--gov-border);
    color: var(--gov-brand);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
}

.hp-title {
    font-size: 2rem;
    font-weight: 900;
    color: var(--gov-heading);
    margin-bottom: 6px;
}

.hp-subtitle {
    color: var(--gov-muted);
    font-size: 1rem;
    margin-bottom: 0;
}

/* -------------------------------------------------------------- LEADERS */
/* Desktop: all three officers in one row.
   The reverse triangle is a phone/tablet layout only - see the
   max-width: 991px block near the bottom of this file. */
.hp-leaders__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 26px;
}

/* No card chrome - the photo itself is the card. */
.hp-leader-card {
    min-width: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}


/* LEADER CARD - photo above, name/role on their own panel below.
   The card fills its grid column, so the columns alone decide how big the
   portraits are; there is no max-width fighting the grid. */
.lp-card {
    display: flex;
    flex-direction: column;
    width: 100%;

    /* Fills the grid cell so every card in a row ends at the same baseline,
       even when one name wraps onto a second line. */
    height: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--gov-border);
    border-radius: 16px;
    background: var(--gov-surface);
    box-shadow: 0 10px 24px var(--gov-shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .lp-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 30px var(--gov-shadow);
    }

.lp-card__photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--gov-media-bg);
}

    /* cover, not contain: a letterboxed portrait looks small and washed out.
       object-position sits high so the crop lands on the face. */
    .lp-card__photo > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 18%;
    }

.lp-card__body {
    padding: 10px 12px 12px;
    text-align: center;
    border-top: 3px solid var(--gov-accent);
    background: var(--gov-surface-2);

    /* Pushes the panel to a common height across a row so the cards line up
       even when one name wraps to two lines. */
    flex: 1 1 auto;
}

.lp-card__name {
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--gov-heading);
    overflow-wrap: anywhere;
}

.lp-card__role {
    margin-top: 3px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--gov-brand);
    overflow-wrap: anywhere;
}

.hp-ward-panel {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* Desktop: four ward members per row. Phones drop to two - see the
   max-width: 768px block near the bottom of this file. */
.hp-ward-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.hp-ward-card {
    min-width: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* Ward portraits: same card as the three officers above, one step smaller. */
.hp-ward-card .lp-card__body {
    padding: 8px 9px 10px;
}

.hp-ward-card .lp-card__name {
    font-size: 0.86rem;
}

.hp-ward-card .lp-card__role {
    font-size: 0.72rem;
}

/* --------------------------------------------------------- MEDIA GRID */
.hp-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 280px));
    justify-content: center;
    align-items: start; /* cards hug their photo instead of stretching */
    gap: 18px;
}

/* These hold a photo and nothing else, so there is no card around them -
   just the picture. */
.hp-media-card {
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: transform 0.25s ease;
}

    .hp-media-card:hover {
        transform: translateY(-3px);
    }

    .hp-media-card .vp-media {
        background: transparent;
        border-radius: 14px;
    }

        .hp-media-card .vp-media > img,
        .hp-media-card .vp-media > video {
            border-radius: 14px;
        }

/* ----------------------------------------------------------- RESPONSIVE */
@media (max-width: 1199px) {
    /* Eight service tiles in a row stop being readable well before the
       phone breakpoint - wrap to two rows of four while the strip is still
       side-by-side with its label. */
    .hp-quick__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hp-quick-tile:nth-child(4n + 1) {
        border-left: none;
    }

    .hp-quick-tile:nth-child(n + 5) {
        border-top: 1px solid var(--gov-border);
    }
}

@media (max-width: 991px) {
    .hp-hero__pillars {
        grid-template-columns: 1fr;
        gap: 4px;
        max-width: 460px;
    }

    /* Four ward cards per row get cramped on a tablet before the phone
       breakpoint takes over at two. */
    .hp-ward-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* REVERSE TRIANGLE - phones and tablets only.
       Sarpanch left, Vice-Sarpanch right, Secretary centred underneath.
       Desktop keeps all three in a single row. */
    .hp-leaders__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

        /* The trailing odd card drops to its own row, then is held to one
           column's width so its photo matches the two above it.
           The width calc tracks half the gap. */
        .hp-leaders__grid > .hp-leader-card:last-child:nth-child(odd) {
            grid-column: 1 / -1;
            width: calc(50% - 9px);
            margin-left: auto;
            margin-right: auto;
        }
}

@media (max-width: 768px) {
    .hp {
        --hp-gap: 14px;
    }

    .hp-hero__pillars {
        margin-top: 14px;
    }

    .hp-pillar {
        font-size: 0.8rem;
        gap: 8px;
        padding: 5px 8px;
    }

    .hp-pillar__icon {
        flex-basis: 24px;
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    /* Label sits above the tiles rather than eating a third of the width */
    .hp-quick {
        flex-direction: column;
        border-radius: 14px;
    }

    .hp-quick__label {
        flex: 0 0 auto;
        padding: 8px 10px;
        font-size: 0.82rem;
    }

    .hp-quick__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hp-quick-tile {
        padding: 10px 4px;
        gap: 4px;
    }

    .hp-quick-tile__icon {
        font-size: 20px;
    }

    .hp-quick-tile__text {
        font-size: 0.66rem;
    }

    .hp-grid {
        gap: 12px;
    }

    .hp-card {
        border-radius: 14px;
    }

    .hp-card__head {
        font-size: 0.86rem;
        padding: 9px 12px;
    }

    .hp-card__body {
        padding: 12px;
    }

    .hp-stat__value {
        font-size: 1.35rem;
    }

    .hp-stat__value--money {
        font-size: 0.88rem;
    }

    /* Phones get a generous cap: too small a box is what made photos look
       poor here. Still capped so one picture can't own the whole screen. */
    .vp-media > img,
    .vp-media > video {
        max-height: 260px;
    }

    .vp-media--portrait > img,
    .vp-media--portrait > video {
        max-height: 200px;
    }

    .vp-media--stage > img,
    .vp-media--stage > video {
        max-height: 320px;
    }

    .vp-media--thumb > img,
    .vp-media--thumb > video {
        max-height: 84px;
    }

    .hp-hero {
        border-radius: 20px;
        padding: 22px 14px;
    }

    .hp-hero__badge {
        font-size: 10px;
        padding: 4px 10px;
        margin-bottom: 6px;
    }

    .hp-hero__title {
        font-size: 1.42rem;
        margin-bottom: 6px;
        line-height: 1.2;
    }

    .hp-hero__subtitle {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    .hp-hero__actions {
        margin-top: 14px;
        gap: 8px;
    }

    .hp-hero__btn {
        font-size: 13px;
        padding: 9px 15px;
    }

    .hp-hero__rule {
        margin: 16px auto 12px;
    }

    .hp-hero__panchayat {
        font-size: 0.98rem;
        line-height: 1.35;
    }

    .hp-section {
        border-radius: 18px;
        padding: 14px 12px;
    }

    .hp-chip {
        font-size: 10px;
        padding: 5px 10px;
        margin-bottom: 8px;
    }

    .hp-title {
        font-size: 1.28rem;
        margin-bottom: 4px;
    }

    .hp-subtitle {
        font-size: 0.84rem;
    }

    /* Accordion rows tighten up but the title stays readable - it is the
       only thing on screen until the row is opened. */
    .hp-acc__head {
        padding: 10px 12px;
        gap: 8px;
    }

    .hp-acc__title {
        font-size: 0.88rem;
        line-height: 1.35;
    }

    .hp-acc__meta {
        font-size: 0.66rem;
        padding: 2px 8px;
    }

    .hp-acc__body {
        padding: 12px;
    }

    .hp-linkrow {
        padding: 10px 12px;
        gap: 8px;
    }

    .hp-linkrow__title {
        font-size: 0.88rem;
        line-height: 1.35;
    }

    .hp-linkrow__meta {
        font-size: 0.66rem;
        padding: 2px 8px;
    }

    .hp-backbar a {
        padding: 7px 14px;
        font-size: 0.78rem;
    }

    .hp-section--detail .vp-media > img,
    .hp-section--detail .vp-media > video {
        max-height: 300px;
    }

    /* Label above value on a phone - a two-column grid would leave the
       value about eight characters wide. */
    .hp-facts {
        grid-template-columns: 1fr;
        gap: 2px;
        margin-bottom: 12px;
    }

        .hp-facts dt {
            font-size: 0.74rem;
        }

        .hp-facts dd {
            font-size: 0.84rem;
            line-height: 1.5;
            margin-bottom: 6px;
        }

    /* horizontal swipe rail instead of a cramped grid */
    .hp-media-grid {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding: 0 2px 10px;
        justify-content: flex-start;
        align-items: flex-start;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .hp-media-grid::-webkit-scrollbar {
            display: none;
        }

        .hp-media-grid > .hp-media-card {
            flex: 0 0 240px;
            min-width: 240px;
            max-width: 240px;
            scroll-snap-align: start;
            padding: 0;
        }

    .hp-leaders__grid {
        gap: 12px;
        margin-bottom: 14px;
    }

    .hp-leader-card {
        padding: 0;
    }

    /* Two cards per row on a phone. The card fills its column, so the
       portraits are as large as the screen allows. */
    .lp-card {
        border-radius: 12px;
    }

    .lp-card__body {
        padding: 8px 8px 9px;
        border-top-width: 2px;
    }

    .lp-card__name {
        font-size: 0.84rem;
        line-height: 1.25;
    }

    .lp-card__role {
        font-size: 0.7rem;
        line-height: 1.25;
    }

    .hp-ward-panel {
        padding: 0;
    }

    .hp-ward-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .hp-ward-card {
        padding: 0;
    }

        .hp-ward-card .lp-card__body {
            padding: 7px 7px 8px;
        }

        .hp-ward-card .lp-card__name {
            font-size: 0.78rem;
        }

        .hp-ward-card .lp-card__role {
            font-size: 0.67rem;
        }

    /* FULL-WIDTH DETAIL PAGES ON A PHONE
       The page-card wrapper is already flush on these views, so the only
       thing between the cards and the screen edge is the container gutter
       plus this section's padding. Trimming it hands the width back to the
       photographs, which is the point of giving them their own page. */
    .hp-section--detail {
        padding-left: 8px;
        padding-right: 8px;
        border-radius: 14px;
    }

    .hp-leaders__grid {
        gap: 10px;
    }
}