/* =====================================================================
   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;
}

/* ------------------------------------------------------ SECTION TONES */
/* One colour per section, so a villager scrolling the page can tell the
   funds apart from the complaints apart from the gallery at a glance.

   This is the second deliberate exception to rule 1 at the top of this
   file, alongside the .hp-stat--* status colours: a single theme accent
   cannot tell fifteen sections apart, which is the whole point here.
   Every tone sets the same three variables and NOTHING else - all the
   section chrome below reads only these, so retoning a section is a
   one-class change in the view and adding a tone is three lines here.

     --hp-accent    heading text, rules, buttons        (dark: white text on it)
     --hp-accent-2  the lighter end of header gradients
     --hp-tint      the very soft background wash

   Accents are held dark enough to carry white text at the sizes used.

   --hp-on-accent is set once for anything carrying a tone, and is the
   guard that keeps this change off the pages that do not use tones: an
   untoned .hp-section (the celebration / gallery / news detail pages
   share these classes) resolves every var() below to its old --gov-*
   fallback and is left looking exactly as it did. */
[class*="hp-tone--"] { --hp-on-accent: #fff; }

.hp-tone--emerald { --hp-accent: #0f7a45; --hp-accent-2: #17a35c; --hp-tint: #e8f6ee; }
.hp-tone--blue    { --hp-accent: #14538f; --hp-accent-2: #2478c8; --hp-tint: #e8f1fb; }
.hp-tone--indigo  { --hp-accent: #3a3a8f; --hp-accent-2: #5757c4; --hp-tint: #ecedfb; }
.hp-tone--teal    { --hp-accent: #0e6b6b; --hp-accent-2: #159393; --hp-tint: #e6f4f4; }
.hp-tone--amber   { --hp-accent: #9a6400; --hp-accent-2: #d08a08; --hp-tint: #fdf3e0; }
.hp-tone--rose    { --hp-accent: #a52357; --hp-accent-2: #d33f7c; --hp-tint: #fdecf3; }
.hp-tone--red     { --hp-accent: #a82121; --hp-accent-2: #d33636; --hp-tint: #fdeceb; }
.hp-tone--maroon  { --hp-accent: #7a1f1f; --hp-accent-2: #a33a3a; --hp-tint: #f8ecec; }
.hp-tone--cyan    { --hp-accent: #0d5f86; --hp-accent-2: #1489bd; --hp-tint: #e7f4fa; }
.hp-tone--orange  { --hp-accent: #a35208; --hp-accent-2: #db7a19; --hp-tint: #fdf0e4; }
.hp-tone--brown   { --hp-accent: #7a4a1f; --hp-accent-2: #a86c34; --hp-tint: #f8f0e7; }
.hp-tone--purple  { --hp-accent: #5c2a86; --hp-accent-2: #8244bd; --hp-tint: #f3ebfa; }
.hp-tone--magenta { --hp-accent: #91257a; --hp-accent-2: #c23fa5; --hp-tint: #fbeaf6; }
.hp-tone--violet  { --hp-accent: #4b2fa8; --hp-accent-2: #6f52d4; --hp-tint: #efecfc; }
.hp-tone--slate   { --hp-accent: #34495e; --hp-accent-2: #4e6a87; --hp-tint: #edf1f5; }
.hp-tone--olive   { --hp-accent: #5a6318; --hp-accent-2: #828d29; --hp-tint: #f4f6e6; }
.hp-tone--plum    { --hp-accent: #6d2144; --hp-accent-2: #9c3a68; --hp-tint: #f9ecf2; }

/* ---------------------------------------------------------------- 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);
}

/* "స్వాగతం - సుస్వాగతం" - the first line the model puts over the photo. */
.hp-hero__welcome {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.95;
    margin-bottom: 6px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

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

/* "మన గ్రామం - మన ప్రణాళిక - మన అభివృద్ధి", picked out in the accent so it
   reads as the panchayat's line rather than more banner copy. */
.hp-hero__tagline {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--gov-accent);
    margin-bottom: 12px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 10px rgba(0, 0, 0, 0.6);
}

.hp-hero__subtitle {
    max-width: 820px;
    margin: 0 auto;
    font-size: 0.98rem;
    line-height: 1.7;
    opacity: 1;

    /* The three lines are written as three lines in the data-te / data-en
       attributes. Without this they collapse into one run-on sentence -
       "మన జంగిలిగొండ – మన బాధ్యత మన భాగస్వామ్యం – మన అభివృద్ధి పారదర్శక..." -
       which is what made this the hardest line on the banner to read.
       pre-line keeps the newlines and still collapses the indentation. */
    white-space: pre-line;
    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);
}

/* "జంగిలిగొండ గ్రామ పంచాయతీ (పెద్దగా ఉండాలి)" - the model asks for the
   panchayat's own name to be the largest thing on the banner, so it is
   set above the governance title rather than matching it. */
.hp-hero__panchayat {
    max-width: 980px;
    margin: 0 auto 6px;
    font-size: 2.9rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85), 0 4px 18px rgba(0, 0, 0, 0.65);
}

/* The six pillars, laid over the hero photo in two columns of three.
   These are the banner's statement of what the portal stands for, not
   navigation: every one of them used to link to a page that the services
   strip or a card below already links to, which put the same destination
   on screen twice. The hover rule is scoped to a.hp-pillar so that if any
   of them is ever made a link again it still behaves like one. */
.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;
}

    a.hp-pillar:hover,
    a.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(--hp-accent, var(--gov-primary)), var(--hp-accent-2, var(--gov-secondary)));
    color: var(--gov-on-primary);
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
}

/* Seven tiles: the six village pages, plus the User Guide. (Three others that
   repeated a link further down the page were dropped from the strip - see the
   quickServices comment in Index.cshtml.) Keep this count in step with that
   array, or the last tile drops onto a row of its own. */
.hp-quick__grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(7, 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(--hp-tint, var(--gov-surface-2));
        color: var(--hp-accent, 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: linear-gradient(135deg, var(--hp-accent, var(--gov-surface-2)), var(--hp-accent-2, var(--gov-surface-2)));
    border-bottom: 2px solid var(--hp-accent-2, var(--gov-accent));
    color: var(--hp-on-accent, 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(--hp-accent, var(--gov-secondary));
    border-radius: 999px;
    background: transparent;
    color: var(--hp-accent, 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(--hp-accent, var(--gov-secondary));
        color: var(--gov-on-primary);
    }

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

    .hp-card__btn--solid:hover,
    .hp-card__btn--solid:focus {
        background: var(--hp-accent-2, 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(--fp-accent, var(--gov-accent));
    color: var(--fp-accent, var(--gov-brand));
    font-weight: 900;
}

/* ------------------------------------ GRAM PANCHAYAT FUNDS (నిధుల వివరాలు) */
/* The cash board, published on the home page as its own section. Five
   panels, each with its own colour, in the same order and the same
   wording as Views/Village/DigitalCashBoard.cshtml. Panels carry --fp-*
   rather than the section's --hp-* so a panel's colour is independent of
   the tone on the section wrapped around it. */
.hp-fund-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.hp-fund-mini {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    gap: 18px;
}

.hp-fundpanel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--gov-surface);
    border: 1px solid var(--fp-accent, var(--gov-border));
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 24px var(--gov-shadow-soft);
}

.hp-fundpanel--income  { --fp-accent: #0f7a45; --fp-accent-2: #17a35c; --fp-tint: #e8f6ee; }
.hp-fundpanel--expense { --fp-accent: #a82121; --fp-accent-2: #d33636; --fp-tint: #fdeceb; }
.hp-fundpanel--cash    { --fp-accent: #14538f; --fp-accent-2: #2478c8; --fp-tint: #e8f1fb; }
.hp-fundpanel--dues    { --fp-accent: #a35208; --fp-accent-2: #db7a19; --fp-tint: #fdf0e4; }
.hp-fundpanel--updated { --fp-accent: #5c2a86; --fp-accent-2: #8244bd; --fp-tint: #f3ebfa; }

.hp-fundpanel__head {
    margin: 0;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--fp-accent), var(--fp-accent-2));
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.6px;
    text-align: center;
}

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

/* Cash in hand is a single number, so it gets the room the rows don't need. */
.hp-fund-figure {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 110px;
    padding: 10px;
    border: 2px solid var(--fp-accent);
    border-radius: 14px;
    background: var(--fp-tint);
    color: var(--fp-accent);
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
}

.hp-fund-signoff {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--gov-border);
    color: var(--fp-accent);
    font-size: 0.82rem;
    font-weight: 800;
    text-align: center;
}

/* The complaint counts sit in a full-width section rather than a grid card,
   so they get one row of four instead of two rows of two. */
.hp-stat-grid--wide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px;
}

/* ------------------------------------------------------------- CHIP ROW */
/* The category lists the model prints inside a box - the kinds of problem
   that can be reported, the kinds of media in the gallery. As an <a> each
   chip is a real link; as a <span> it is a label, and .hp-chiprow--plain
   drops the hover so it does not pretend otherwise. */
.hp-chiprow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 18px;
}

.hp-chiplink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--hp-accent, var(--gov-border));
    border-radius: 999px;
    background: var(--hp-tint, var(--gov-surface-2));
    color: var(--hp-accent, var(--gov-brand));
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

a.hp-chiplink:hover,
a.hp-chiplink:focus {
    background: var(--hp-accent, var(--gov-secondary));
    color: var(--gov-on-primary);
    transform: translateY(-2px);
}

.hp-chiprow--plain {
    margin-top: 12px;
    margin-bottom: 0;
}

/* ------------------------------------------------------------ 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;
}

/* A row for something the model asks for that this application cannot do
   yet. Same shape as a link row, deliberately not a link, and badged - so
   the box matches the model without offering a tap that goes nowhere. */
.hp-linklist__soon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 2px;
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--gov-muted);
}

.hp-soon {
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--gov-surface-2);
    border: 1px dashed var(--hp-accent, var(--gov-border));
    color: var(--hp-accent, var(--gov-muted));
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

/* --------------------------------------------------------- ACTION CARDS */
/* These carry no .hp-card__head, so the tone has no coloured band to live
   in - it becomes a rule across the top of the card instead, which is what
   keeps "report a problem" / "contact" / "emergency" telling themselves
   apart at a glance the way the headed cards above them do. */
.hp-card--action {
    border-top: 5px solid var(--hp-accent, var(--gov-accent));
}

.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(--hp-tint, var(--gov-surface-2));
    border: 1px solid var(--hp-accent, var(--gov-border));
    font-size: 22px;
}

.hp-action__title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 900;
    color: var(--hp-accent, 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;
}

    /* Scoped to a.hp-linkrow: .hp-linkrow--soon uses the same row shape but
       is a <div>, and must not animate as though it were tappable. */
    a.hp-linkrow:hover,
    a.hp-linkrow:focus {
        background: var(--gov-media-bg);
        border-color: var(--gov-secondary);
        transform: translateX(2px);
    }

.hp-linkrow--soon {
    background: var(--gov-surface);
    border-style: dashed;
    cursor: default;
}

    .hp-linkrow--soon .hp-linkrow__title {
        color: var(--gov-muted);
        font-weight: 700;
    }

.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(--hp-accent, var(--gov-secondary));
        border-radius: 999px;
        background: var(--hp-accent, 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(--hp-accent-2, var(--gov-primary));
            border-color: var(--hp-accent-2, 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);

    /* The section's own colour, as a band across the top. Sections with no
       tone class fall back to the theme accent and look exactly as before. */
    border-top: 6px solid var(--hp-accent, var(--gov-accent));
    border-radius: 28px;
    padding: 26px;
    margin-bottom: var(--hp-gap);
    box-shadow: 0 14px 34px var(--gov-shadow-soft);
}

/* The heading block picks the tone up as a soft wash, which is what makes
   two neighbouring sections read as different places rather than as one
   long list. */
.hp-section__head {
    background: var(--hp-tint, transparent);
    border-radius: 18px;
    padding: 16px 18px;
}

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

.hp-chip {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--hp-accent, var(--gov-surface-2));
    border: 1px solid var(--hp-accent, var(--gov-border));
    color: var(--hp-on-accent, 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(--hp-accent, 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;
}

/* --------------------------------------------- CITIZEN SERVICE CHARTER */
/* The department's charter poster, as a page you can actually read on a
   phone. Wide screens get the table the poster prints; below 768px the
   rows stack (see the phone block at the bottom of this file), because a
   three-column table of Telugu + English + a timeline cannot survive
   being squeezed into 390px. */
.cs-block {
    margin-bottom: 18px;
    border: 1px solid var(--gov-border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--gov-surface);
}

.cs-block__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--hp-accent, var(--gov-primary)), var(--hp-accent-2, var(--gov-secondary)));
    color: #fff;
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.35;
}

.cs-block__icon {
    flex: 0 0 auto;
    font-size: 1.05rem;
}

.cs-block__no {
    flex: 0 0 auto;
    font-weight: 900;
}

.cs-block__title {
    flex: 1 1 auto;
    min-width: 0;
}

/* How many services sit in this block. */
.cs-block__count {
    flex: 0 0 auto;
    min-width: 26px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
    font-size: 0.76rem;
    font-weight: 800;
    text-align: center;
}

.cs-table {
    width: 100%;
    border-collapse: collapse;
}

    .cs-table thead th {
        padding: 7px 12px;
        background: var(--hp-tint, var(--gov-surface-2));
        border-bottom: 1px solid var(--gov-border);
        color: var(--hp-accent, var(--gov-brand));
        font-size: 0.74rem;
        font-weight: 800;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }

    .cs-table td {
        padding: 9px 12px;
        border-bottom: 1px dashed var(--gov-border);
        vertical-align: top;
    }

    .cs-table tr:last-child td {
        border-bottom: none;
    }

.cs-table__sn {
    width: 62px;
    color: var(--gov-muted);
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.cs-table__time {
    width: 130px;
    text-align: right;
    white-space: nowrap;
}

/* Both spellings of the service, one above the other. */
.cs-name-te {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--gov-heading);
}

/* The pill at the end of a row: a delivery time on the charter, a fee on
   the schedule of fines. Same shape, so the two pages read alike. */
.cs-days,
.cs-amount {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--hp-tint, var(--gov-surface-2));
    border: 1px solid var(--hp-accent, var(--gov-border));
    color: var(--hp-accent, var(--gov-brand));
    white-space: nowrap;
}

    .cs-days strong,
    .cs-amount strong {
        font-size: 1.02rem;
        font-weight: 900;
    }

.cs-days__unit {
    font-size: 0.72rem;
    font-weight: 700;
}

.cs-notes {
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid var(--hp-accent, var(--gov-border));
    border-radius: 14px;
    background: var(--hp-tint, var(--gov-surface-2));
}

.cs-notes__head {
    margin: 0 0 8px;
    color: var(--hp-accent, var(--gov-brand));
    font-size: 0.92rem;
    font-weight: 900;
}

.cs-notes__list {
    margin: 0;
    padding-left: 20px;
    color: var(--gov-text);
    font-size: 0.86rem;
    line-height: 1.65;
}

/* ---------------------------------------------------- OFFICIAL POSTERS */
/* A notice the panchayat publishes as a printed sheet, shown as-is: the
   service charter, the schedule of fines. Full width up to a readable cap,
   and always a link to the original so a phone can pinch-zoom the small
   print rather than squint at a scaled-down copy. */
.hp-poster {
    margin-top: 22px;
    text-align: center;
}

.hp-poster__head {
    margin: 0 0 10px;
    color: var(--hp-accent, var(--gov-brand));
    font-size: 0.92rem;
    font-weight: 900;
}

.hp-poster img {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--gov-border);
    border-radius: 12px;
    box-shadow: 0 10px 24px var(--gov-shadow-soft);
}

.hp-poster__hint {
    margin: 8px 0 0;
    color: var(--gov-muted);
    font-size: 0.78rem;
}

/* The line of context printed above a notice. */
.hp-note-line {
    margin: 0 0 16px;
    padding: 11px 14px;
    border-left: 4px solid var(--hp-accent, var(--gov-accent));
    border-radius: 0 10px 10px 0;
    background: var(--hp-tint, var(--gov-surface-2));
    color: var(--gov-text);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.6;
}

/* ------------------------------------------------------- SARPANCH ROLL */
/* The village presidents, oldest first. Four across on a desktop, and the
   card carries BOTH spellings of the name - see the note in the view. */
.hp-sarpanch-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.sp-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    background: var(--gov-surface);
    border: 1px solid var(--gov-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 24px var(--gov-shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

/* The sitting sarpanch is picked out by the section's own colour. */
.sp-card--current {
    border-color: var(--hp-accent, var(--gov-secondary));
    border-width: 2px;
}

.sp-card__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: var(--gov-media-bg);
    padding: 8px;
}

    /* contain, never cover: each portrait has the name printed across the
       bottom of the photograph, and a crop would cut it off. */
    .sp-card__photo > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        border-radius: 10px;
        background: var(--gov-surface);
    }

.sp-card__serial {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    min-width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--hp-accent, var(--gov-primary));
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
}

.sp-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 10px 14px;
    text-align: center;
    border-top: 3px solid var(--hp-accent, var(--gov-accent));
    background: var(--gov-surface-2);
}

.sp-card__name-te {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--gov-heading);
    overflow-wrap: anywhere;
}

/* The party an MPTC member was elected on. Sits above the term, and is
   quieter than it - the term is what people scan this roll for. */
.sp-card__party {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--gov-surface);
    border: 1px dashed var(--hp-accent, var(--gov-border));
    color: var(--gov-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.sp-card__period {
    margin-top: auto;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--hp-tint, var(--gov-surface));
    border: 1px solid var(--hp-accent, var(--gov-border));
    color: var(--hp-accent, var(--gov-brand));
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.4;
}

.sp-card__current {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--hp-accent, var(--gov-secondary));
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --------------------------------------------------------- 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;
        }

/* A line the staff typed about the picture, and the day it was recorded.
   Only the sanitation wall carries these today - everywhere else a media
   card is the photograph and nothing else. */
.hp-media-caption {
    margin-top: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--gov-text);
    text-align: center;
    word-break: break-word;
}

.hp-media-date {
    margin-top: 3px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--gov-muted);
    text-align: center;
}

/* ------------------------------------------------- PREVIEW BLOCK */
/* One entry inside a section that lists several - a celebration, say -
   shown as its name, a couple of its pictures and its own way in, instead
   of a bare line of text. Entries are separated by a rule rather than
   boxed: they already sit inside a section card, and a card inside a card
   makes the page look like it is stuttering. */
/* The rule goes between entries, never above the first. Written as
   "every child after the first" rather than :first-of-type, which would
   miss: the section's own head is a <div> too, so it - not the first
   entry - is what :first-of-type would match. Entries that fall back to a
   plain title row are separated the same way. */
.hp-preview-list > * + * {
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid var(--gov-border);
}

.hp-preview-block__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.hp-preview-block__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--hp-accent, var(--gov-heading));
}

.hp-preview-block__meta {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gov-muted);
    white-space: nowrap;
}

/* The per-entry link sits closer to its own pictures than the button that
   closes the whole section does. */
.hp-viewall--tight {
    margin-top: 12px;
    justify-content: flex-start;
}

    .hp-viewall--tight a {
        padding: 7px 18px;
        font-size: 0.85rem;
    }

/* -------------------------------------------------- HOME PREVIEW STRIP */
/* The four or five newest pictures shown inside a home-page box, before
   the villager opens the full page.

   These tiles crop, which the rest of the site deliberately does not: a
   box on the home page has to hold its shape whatever mix of portrait and
   landscape photographs the staff upload that week, and a ragged strip of
   part-height pictures reads as a fault. Nothing is lost by it - every
   tile links straight to the full page, where .vp-media shows the same
   photograph whole. Below 768px this inherits the horizontal scroller
   .hp-media-grid already turns into. */
.hp-media-grid--preview {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

    /* The photo tiles are links into the full page - the anchor has to fill
       the tile, or an inline <a> would leave a sliver of it untappable. */
    .hp-media-grid--preview .hp-media-card > a {
        display: block;
        text-decoration: none;
    }

    .hp-media-grid--preview .vp-media > img,
    .hp-media-grid--preview .vp-media > video {
        width: 100%;
        height: 170px;
        max-height: none;
        object-fit: cover;
    }

/* -------------------------------------------------- RELATED SITE TILES */
/* The official portals this panchayat's own work is filed into. Every one
   of them leaves the site, so the tile prints the host it opens - a
   villager can see where it goes before tapping it. The logos are served
   from wwwroot/images/sitelogos, not hot-linked, so the box does not go
   blank when one of those sites blocks an outside request. */
.hp-sitegrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.hp-site {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 16px 12px;
    border: 1px solid var(--gov-border);
    border-radius: 16px;
    background: var(--gov-surface-2);
    text-align: center;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

    a.hp-site:hover,
    a.hp-site:focus {
        background: var(--gov-surface);
        border-color: var(--hp-accent, var(--gov-secondary));
        transform: translateY(-2px);
        box-shadow: 0 10px 22px var(--gov-shadow-soft);
    }

/* The logo sits on its own white-ish plate: these are government emblems
   drawn for a white page and several of them disappear on a tinted one. */
.hp-site__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    padding: 8px;
    border: 1px solid var(--gov-border);
    border-radius: 16px;
    background: var(--gov-surface);
}

    .hp-site__logo img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }

.hp-site__name {
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--gov-heading);
    overflow-wrap: anywhere;
}

/* Pushed to the foot of the tile so the hosts line up across a row even
   when one name runs to two lines. */
.hp-site__host {
    margin-top: auto;
    padding-top: 2px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gov-muted);
    overflow-wrap: anywhere;
}

/* The emblem the state's own panchayat portal carries in its header. It
   is decoration next to the heading, so it is marked alt="" and simply
   drops out of the band on a narrow screen. */
.hp-section__logo {
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto 10px;
    object-fit: contain;
}

/* ----------------------------------------------------------- RESPONSIVE */

/* LAPTOP AND WIDER - DENSITY.
   The section head (chip over a 2rem title over a helper sentence, all
   centred) and the one-row-per-item title lists are built for a phone,
   where the screen is narrow and tall. On a laptop the same layout leaves
   the right half of every section empty and stretches the page to two or
   three screens more than it needs. From 992px up:
     - the head becomes a single band: chip and title on the left, the
       helper line on the right;
     - section padding and the gap between sections tighten;
     - and from 1200px the title lists split into two columns (next block).
   Nothing under 992px is touched - phones and tablets keep the tall,
   centred layout, which is the right shape for their screen. */
@media (min-width: 992px) {
    .hp {
        --hp-gap: 20px;
    }

    .hp-section {
        padding: 20px 22px;
    }

    .hp-section__head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 16px;
        row-gap: 4px;
        text-align: left;
        padding: 12px 18px;
        margin-bottom: 16px;
    }

        .hp-section__head .hp-chip {
            margin-bottom: 0;
        }

        /* Centred above the chip on a phone, first item of the band here. */
        .hp-section__head .hp-section__logo {
            margin: 0;
        }

        .hp-section__head .hp-title {
            flex: 0 1 auto;
            min-width: 0;
            font-size: 1.5rem;
            margin-bottom: 0;
        }

        /* Sits at the right end of the band and wraps its own text rather
           than dropping to a row of its own, so the head stays one strip
           however long the Telugu sentence is. */
        .hp-section__head .hp-subtitle {
            flex: 1 1 260px;
            min-width: 0;
            font-size: 0.88rem;
            text-align: right;
        }

        /* The gallery's media labels are more than chip / title / subtitle,
           so they take a row of their own under the band rather than
           competing for the line. */
        .hp-section__head .hp-chiprow {
            flex: 1 0 100%;
            justify-content: flex-start;
            margin-top: 8px;
        }
}

/* Two columns of navigating titles - half the scrolling for the same list.
   Held to 1200px and up: a row can carry a long title plus two pills (the
   complaints list carries a status and a date), and splitting the width at
   992px would leave those wrapping over three lines, which costs back the
   height the split just saved.
   Scoped with :has so the sections whose rows open in place (announcements,
   wishes) stay in one column - an expanding row would otherwise drag the
   row beside it to the same height. A browser without :has support simply
   keeps the single column. */
@media (min-width: 1200px) {
    .hp-acc-list:has(> .hp-linkrow) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 14px;
    }
}

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

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

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

    /* Seven tiles over three columns leaves the seventh alone on the last row
       beside two empty cells. Let it run the full width instead: it reads as a
       deliberate bar rather than a gap, and it puts the User Guide somewhere a
       phone user actually sees - the navbar it also lives in is collapsed
       behind the menu button at this width. Icon beside the text, not above
       it, because a full-width tile is a bar and not a square. */
    .hp-quick-tile:last-child {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        border-left: none;
    }

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

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

    /* Income beside expenditure needs the width to keep "₹ 2,48,00,000.00"
       on one line - below this it stacks instead of squeezing. */
    .hp-fund-grid,
    .hp-fund-mini {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hp-sarpanch-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    /* 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));
    }

    /* Four site tiles side by side leave the names breaking mid-word. */
    .hp-sitegrid {
        grid-template-columns: repeat(2, 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.94rem;
        gap: 9px;
        padding: 5px 8px;
        color: #fff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 6px rgba(0, 0, 0, 0.85);
    }

    .hp-pillar__icon {
        flex-basis: 27px;
        width: 27px;
        height: 27px;
        font-size: 13px;
    }

    /* 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(3, 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;
    }

    /* Four counts across is unreadable on a phone - back to two by two. */
    .hp-stat-grid--wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hp-chiprow {
        gap: 6px;
    }

    .hp-chiplink {
        padding: 5px 10px;
        font-size: 0.7rem;
        gap: 4px;
    }

    .hp-linklist__soon {
        font-size: 0.76rem;
        gap: 6px;
    }

    .hp-soon {
        font-size: 0.58rem;
        padding: 2px 7px;
    }

    /* 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;
    }

    /* BANNER ON A PHONE
       Nothing is laid over the photograph - the village picture stays fully
       visible. The words are held apart from it by size and by a tighter,
       darker shadow around each letter instead, which is what lets white
       type sit on a busy aerial shot without a panel behind it. */
    .hp-hero {
        border-radius: 20px;
        padding: 22px 14px;
    }

    .hp-hero__welcome,
    .hp-hero__panchayat,
    .hp-hero__title,
    .hp-hero__tagline,
    .hp-hero__subtitle {
        color: #fff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 6px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.7);
    }

    /* The tagline keeps the accent colour, so it needs its own darker
       backing to stay legible against pale rooftops. */
    .hp-hero__tagline {
        color: var(--gov-accent);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 2px 8px rgba(0, 0, 0, 0.9);
    }

    .hp-hero__badge {
        font-size: 11.5px;
        padding: 5px 12px;
        margin-bottom: 8px;
        background: rgba(0, 0, 0, 0.5);
    }

    /* Type comes up across the whole banner - these were sized to fit the
       banner, not to be read on a phone held at arm's length. */
    .hp-hero__welcome {
        font-size: 0.94rem;
        letter-spacing: 1.4px;
        margin-bottom: 5px;
    }

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

    .hp-hero__tagline {
        font-size: 1.04rem;
        margin-bottom: 9px;
    }

    .hp-hero__subtitle {
        font-size: 0.94rem;
        line-height: 1.6;
    }

    .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: 1.95rem;
        line-height: 1.15;
        margin-bottom: 6px;
    }

    .hp-fundpanel__head {
        font-size: 0.88rem;
        padding: 8px 10px;
    }

    .hp-fundpanel__body {
        padding: 10px;
    }

    .hp-fund-figure {
        min-height: 84px;
        font-size: 1.35rem;
    }

    /* A head like "గ్రాంట్లు & నిధులు (రాష్ట్ర / కేంద్ర)" beside a no-wrap
       "₹ 18,75,000.00" gives the table a min-content width wider than a
       phone, and a grid track will not shrink below that - which pushed the
       whole page sideways. Stacking the amount under its label drops that
       floor, and reads better at this width anyway. */
    .hp-fundpanel .hp-funds,
    .hp-fundpanel .hp-funds tbody,
    .hp-fundpanel .hp-funds tr {
        display: block;
    }

        .hp-fundpanel .hp-funds th,
        .hp-fundpanel .hp-funds td {
            display: block;
            width: 100%;
            padding: 0;
            border-bottom: none;
            text-align: left;
            white-space: normal;
        }

        .hp-fundpanel .hp-funds tr {
            padding: 7px 0;
            border-bottom: 1px dashed var(--gov-border);
        }

            .hp-fundpanel .hp-funds tr:last-child {
                border-bottom: none;
            }

        .hp-fundpanel .hp-funds td {
            margin-top: 2px;
            font-size: 1.02rem;
        }

    /* The rule that separates the total moves onto the row, so it is drawn
       once rather than once above the label and again above the amount. */
    .hp-fundpanel .hp-funds__total {
        margin-top: 4px;
        padding-top: 9px;
        border-top: 2px solid var(--fp-accent, var(--gov-accent));
    }

        .hp-fundpanel .hp-funds__total th,
        .hp-fundpanel .hp-funds__total td {
            border-top: none;
        }

    .hp-section__head {
        padding: 12px 10px;
        border-radius: 12px;
    }

    .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;
    }

    /* Two tiles still fit across a phone - the logo carries the tile, so
       it keeps most of its size and the text tightens instead. */
    .hp-sitegrid {
        gap: 10px;
    }

    .hp-site {
        padding: 12px 8px;
        gap: 7px;
    }

    .hp-site__logo {
        width: 60px;
        height: 60px;
        padding: 6px;
        border-radius: 14px;
    }

    .hp-site__name {
        font-size: 0.82rem;
        line-height: 1.35;
    }

    .hp-site__host {
        font-size: 0.66rem;
    }

    .hp-section__logo {
        width: 44px;
        height: 44px;
        margin-bottom: 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;
        }

        /* Preview tiles ride the same rail but narrower - a strip of two or
           three photos under a celebration name should hint that it scrolls
           by showing the edge of the next one, not fill the screen with one
           picture. */
        .hp-media-grid--preview > .hp-media-card {
            flex: 0 0 180px;
            min-width: 180px;
            max-width: 180px;
        }

    .hp-media-grid--preview .vp-media > img,
    .hp-media-grid--preview .vp-media > video {
        height: 135px;
    }

    /* PREVIEW BLOCK ON A PHONE
       Name above the count instead of beside it - side by side leaves a long
       Telugu festival name about six characters wide. */
    .hp-preview-list > * + * {
        padding-top: 14px;
        margin-top: 14px;
    }

    .hp-preview-block__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        margin-bottom: 10px;
    }

    .hp-preview-block__title {
        font-size: 0.95rem;
    }

    .hp-preview-block__meta {
        font-size: 0.72rem;
    }

    .hp-viewall--tight {
        margin-top: 8px;
    }

    /* CHARTER ON A PHONE
       The three-column table becomes one stacked block per service: serial
       and timeline ride together on a header line, and the two spellings of
       the service sit under it. A table this wide cannot be squeezed into a
       phone, and side-scrolling a government charter is worse than stacking
       it. The <thead> is hidden rather than removed so the markup stays a
       real table for screen readers on wide screens. */
    .cs-table thead {
        display: none;
    }

    .cs-table,
    .cs-table tbody,
    .cs-table tr,
    .cs-table td {
        display: block;
        width: 100%;
    }

    .cs-table tr {
        position: relative;
        padding: 10px 12px 11px;
        border-bottom: 1px dashed var(--gov-border);
    }

        .cs-table tr:last-child {
            border-bottom: none;
        }

    .cs-table td {
        padding: 0;
        border-bottom: none;
    }

    .cs-table__sn {
        width: auto;
        margin-bottom: 3px;
        font-size: 0.74rem;
    }

    /* Timeline pill moves up beside the serial instead of owning a column. */
    .cs-table__time {
        position: absolute;
        top: 8px;
        right: 12px;
        width: auto;
        text-align: right;
    }

    .cs-table__name {
        padding-right: 84px;
    }

    .cs-name-te {
        font-size: 0.84rem;
    }

    .cs-days,
    .cs-amount {
        padding: 3px 8px;
    }

        .cs-days strong,
        .cs-amount strong {
            font-size: 0.88rem;
        }

    .cs-days__unit {
        font-size: 0.64rem;
    }

    .cs-block__head {
        font-size: 0.86rem;
        gap: 7px;
        padding: 9px 11px;
    }

    .cs-notes {
        padding: 11px 12px;
    }

    .cs-notes__list {
        font-size: 0.78rem;
        padding-left: 17px;
    }

    /* Two across on a phone, not three: at three columns a long name wraps
       to unreadable slivers. */
    .hp-sarpanch-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .sp-card {
        border-radius: 12px;
    }

    .sp-card__body {
        padding: 9px 7px 11px;
        gap: 4px;
    }

    .sp-card__name-te {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .sp-card__party {
        padding: 2px 7px;
        font-size: 0.6rem;
    }

    .sp-card__period {
        padding: 5px 8px;
        font-size: 0.64rem;
    }

    .sp-card__current {
        font-size: 0.58rem;
        padding: 2px 8px;
    }

    .sp-card__serial {
        top: 7px;
        left: 7px;
        min-width: 20px;
        height: 20px;
        font-size: 0.64rem;
    }

    .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;
    }
}