/* ================================================================
   GRIEVANCE REDRESSAL POLICY PAGE
   css/grievanceredressal.css

   Loaded by grievanceredressal.php via $pageCss, after header.css and
   before global-typography.css.

   The page reuses the existing site furniture rather than
   inventing any of it:

     header.php  - unchanged, supplies the topbar, logo, DigiLocker /
                   Pehchaan / API Setu badges, nav and $basePath
     footer.php  - unchanged, the dark footer with Useful Links,
                   Our Programmes, Address, social and the legal note
     banner      - the same two-part banner contact.php already uses:
                   navy panel with a Home / PAGE pill, a large heading
                   with a light-blue accent word, a short white rule
                   and a lead paragraph on the left, photo on the right
     cards       - the card style the sections on index.php use:
                   white, 1px #E4EAF8, 18px radius, soft shadow
     container   - the standard agreed across index.php:
                   92% capped at 1380px, then 94% <=1199, 90% <=767,
                   92% <=480, with 48px section padding

   NOTHING in this file edits any other page. Every selector is
   prefixed .gr- so it cannot reach the header, the footer or any
   other page's content.

   SPECIFICITY NOTE
   global-typography.css loads after this file and pins
   h1 { font-size: 46px; line-height: 1.2 } and
   p { font-size: 16px; line-height: 1.6 } with !important, so the
   banner h1 and every paragraph carry their own !important.
   ================================================================ */


/* ================================================================
   1.  BANNER
   Mirrors contact.php's recognition-and-validity-banner (unchanged, reused as-is).
   ================================================================ */

.gr-banner {
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    background: #083C7C;
    font-family: Arial, Helvetica, sans-serif;
}

.gr-banner-content {
    width: 52%;
    padding: 80px 6% 80px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 5;
}

/* the Home / PAGE breadcrumb pill */
.gr-banner-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    margin-bottom: 25px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    white-space: nowrap;
}
.gr-banner-badge i {
    font-size: 15px;
    line-height: 1;
}

.gr-banner-content h1 {
    margin: 0 !important;
    max-width: 600px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(42px, 4.5vw, 68px) !important;
    line-height: 1.08 !important;
    font-weight: 700;
    letter-spacing: -1.5px;
}
.gr-banner-content h1 span {
    color: #A9C7FF;
}

.gr-banner-line {
    width: 50px;
    height: 3px;
    margin: 25px 0 20px;
    background: #FFFFFF;
    border-radius: 5px;
}

.gr-banner-content p {
    max-width: 520px;
    margin: 0 !important;
    color: rgba(255, 255, 255, .90);
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    text-align: left !important;
}

/* photo half */
.gr-banner-image {
    width: 48%;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}
.gr-banner-photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.gr-banner-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .7s ease;
}
.gr-banner:hover .gr-banner-photo img {
    transform: scale(1.04);
}


/* ================================================================
   2.  SECTION + CONTAINER
   ================================================================ */

.gr-section {
    width: 100%;
    padding: 48px 0;
    background:
        radial-gradient(circle at 0% 100%, rgba(8, 103, 213, 0.07), transparent 26%),
        radial-gradient(circle at 100% 0%, rgba(8, 103, 213, 0.05), transparent 26%),
        #F5F8FC;
    font-family: Arial, Helvetica, sans-serif;
}

.gr-container {
    width: 92%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0;
}


/* ================================================================
   3.  CARDS
   ================================================================ */

.gr-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #E4EAF8;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(16, 42, 90, .06);
    padding: 30px 32px;
    margin-bottom: 24px;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.gr-card:hover {
    border-color: #C9D8F6;
    box-shadow: 0 12px 28px rgba(16, 42, 90, .10);
}

/* the two- and three-up rows */
.gr-grid,
.gr-grid-3 {
    display: grid;
    gap: 24px;
    align-items: start;
}
.gr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gr-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* in a row the cards manage their own bottom gap */
.gr-grid > .gr-card,
.gr-grid-3 > .gr-card {
    margin-bottom: 0;
}
.gr-grid + .gr-grid,
.gr-grid + .gr-subhead,
.gr-subhead + .gr-grid-3,
.gr-grid-3 + .gr-grid {
    margin-top: 24px;
}


/* ================================================================
   4.  TYPE INSIDE THE CARDS

   EVERY heading below carries !important on font-size, line-height
   and font-family, and that is not optional. global-typography.css
   loads after this file and pins every heading level with
   !important:

       h2  35px / 1.25    h3  30px / 1.3
       h4  25px / 1.35    h1  46px / 1.2

   A plain rule cannot outrank an !important, so without these the
   numbered headings rendered at 30px and the 3.1/3.2/3.3 headings at
   25px - nearly twice their intended size, which is what made them
   look wrong in the cards. Measured after the fix: h3 21px,
   h4 16px, matching the card headings on index.php.
   ================================================================ */

/* a numbered section heading */
.gr-card h3 {
    margin: 0 0 14px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
}

/* the sub headings inside 3 - 3.1, 3.2, 3.3 */
.gr-card h4 {
    margin: 0 0 12px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.2px !important;
}

/* the full-width heading above the three-up row */
.gr-subhead {
    /* margin: 0 0 18px !important; */
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
}

.gr-card p {
    margin: 0 0 14px !important;
    color: #5B6B85;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.65 !important;
    text-align: left !important;
}
.gr-card p:last-child {
    margin-bottom: 0 !important;
}

.gr-card strong {
    color: #0B1F4D;
    font-weight: 700;
}

.gr-card a {
    color: #0D6EFD;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: inherit !important;
    font-weight: 600;
    text-decoration: none;
    word-break: break-word;
}
.gr-card a:hover {
    text-decoration: underline;
}

/* bullets - a navy dot, matching the card icons elsewhere

   !important is required on font-size, font-family and line-height
   because global-typography.css loads after this file and pins

       li { font-size: 16px; line-height: 1.6 }   with !important

   Without it every bullet silently rendered at 16px while the
   paragraph above it sat at 15px. */
.gr-card ul {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}
.gr-card ul:last-child {
    margin-bottom: 0;
}
.gr-card ul li {
    position: relative;
    margin: 0 0 9px;
    padding-left: 20px;
    color: #3A4A63;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.6 !important;
    text-align: left;
}
.gr-card ul li:last-child {
    margin-bottom: 0;
}
.gr-card ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0D6EFD;
}


/* ================================================================
   5.  INTRO CARD
   centred heading, rule, then the two opening paragraphs
   ================================================================ */

.gr-card-intro {
    text-align: center;
    padding: 36px 40px;
    margin-bottom: 24px;
}
.gr-card-intro h2 {
    margin: 0 0 4px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.6px !important;
}
.gr-card-intro .gr-rule {
    width: 100%;
    max-width: 620px;
    height: 1px;
    margin: 16px auto 24px;
    background: #E4EAF8;
}
.gr-card-intro p {
    max-width: 1080px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}


/* ================================================================
   6.  CONTACT CARD
   ================================================================ */

.gr-card-contact {
    margin-top: 24px;
    padding: 34px 36px 38px;
    text-align: center;
    /* a hairline in the brand navy along the top, as on the
       contact page's cards */
    border-top: 3px solid #0A56D8;
}
.gr-card-contact h2 {
    margin: 0 0 4px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.5px !important;
}
.gr-card-contact .gr-rule {
    width: 100%;
    max-width: 700px;
    height: 1px;
    margin: 16px auto 22px;
    background: #E4EAF8;
}
/* Scoped under .gr-card-contact on purpose. The bare .gr-contact-lead at
   (0,1,0) was being beaten by .gr-card p at (0,1,1) from line 262, which
   carries text-align:left !important and margin:0 0 14px !important.
   Higher specificity wins over source order even when the loser is
   !important and 135 lines earlier, so the centring and the auto margins were
   both discarded and the lead line sat flush left. Scoping to
   .gr-card-contact makes this (0,2,0), which is the same shape as the working
   .gr-card-intro p at line 361 and the .pp-card-contact equivalents in
   privacypolicy.css. */
.gr-card-contact .gr-contact-lead {
    max-width: 720px;
    margin: 0 auto 14px !important;
    color: #5B6B85 !important;
    text-align: center !important;
}

.gr-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    max-width: 900px;
    margin: 26px auto 0;
    text-align: left;
}
.gr-contact-block {
    padding: 20px 24px;
    background: #F7FAFF;
    border: 1px solid #E4EAF8;
    border-radius: 14px;
}
.gr-contact-block h4 {
    margin: 0 0 12px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}
.gr-contact-block p {
    margin: 0 0 8px !important;
    color: #5B6B85;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 400;
    line-height: 1.6 !important;
}
.gr-contact-block p:last-child {
    margin-bottom: 0 !important;
}


/* ================================================================
   7.  RESPONSIVE
   The banner follows contact.php exactly - the photo is never
   removed, it stacks below the text on narrow screens:
       <=991px  both halves stay side by side, banner grows to 430px
       <=767px  banner becomes a column, photo becomes a 300px band
       <=480px  text 330px, photo 250px
   ================================================================ */

@media (max-width: 1199px) {
    .gr-container {
        width: 94%;
    }
}

@media (max-width: 991px) {

    .gr-banner {
        min-height: 430px;
    }

    .gr-banner-content {
        width: 52%;
        padding: 60px 35px;
    }

    .gr-banner-image {
        width: 48%;
        min-height: 430px;
    }

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

@media (max-width: 767px) {

    /* the photo moves under the text rather than disappearing */
    .gr-banner {
        flex-direction: column;
        min-height: auto;
    }

    .gr-banner-content {
        width: 100%;
        min-height: 360px;
        padding: 55px 25px 45px;
    }

    .gr-banner-content h1 {
        max-width: 100%;
        font-size: 38px !important;
        letter-spacing: -1px;
    }

    .gr-banner-content p {
        max-width: 100%;
        font-size: 15px !important;
    }

    .gr-banner-badge {
        font-size: 12px;
        padding: 8px 15px;
    }

    .gr-banner-image {
        width: 100%;
        height: 300px;
        min-height: 300px;
    }

    .gr-section {
        padding: 40px 0;
    }

    .gr-container {
        width: 90%;
    }

    .gr-grid,
    .gr-grid-3 {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .gr-card {
        padding: 24px 22px;
        border-radius: 16px;
        margin-bottom: 20px;
    }

    .gr-card h3,
    .gr-subhead {
        font-size: 19px !important;
    }

    .gr-card h4 {
        font-size: 15.5px !important;
    }

    .gr-card p,
    .gr-card ul li {
        font-size: 14.5px !important;
    }

    .gr-card-intro {
        padding: 28px 22px;
    }

    .gr-card-intro h2 {
        font-size: 22px !important;
    }

    .gr-card-contact {
        padding: 28px 22px 30px;
    }

    .gr-card-contact h2 {
        font-size: 21px !important;
    }

    .gr-contact-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .gr-contact-block p {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {

    .gr-container {
        width: 92%;
    }

    .gr-banner-content {
        min-height: 330px;
        padding: 45px 20px 40px;
    }

    .gr-banner-content h1 {
        font-size: 32px !important;
    }

    .gr-banner-image {
        height: 250px;
        min-height: 250px;
    }

    .gr-card {
        padding: 20px 18px;
    }

    .gr-card h3,
    .gr-subhead {
        font-size: 18px !important;
    }

    .gr-card p,
    .gr-card ul li {
        font-size: 14px !important;
    }

    .gr-card-intro h2,
    .gr-card-contact h2 {
        font-size: 20px !important;
    }

    .gr-contact-block {
        padding: 16px 18px;
    }
}

/* ================================================================
   8.  EVERY CARD IN A ROW IS THE SAME HEIGHT
   Appended at the end. Nothing above this line was edited.

   THE PROBLEM

   Line 185 declared the two row grids as

       .gr-grid,
       .gr-grid-3 {
           display: grid;
           gap: 24px;
           align-items: start;
       }

   align-items: start makes each card exactly as tall as its own content and
   no taller. The rows on this page hold very different amounts of text, so
   every row finished on a ragged bottom edge:

       1. Nature of Services        7 bullets   315px
       2. Accuracy of Information   6 bullets + a closing paragraph   265px

       3.1 Payments                 5 bullets                      315px
       3.2 Processing Fees          1 paragraph                    169px
       3.3 Payment Security         2 paragraphs                   208px

       4. Website Usage             4 bullets                      265px
       5. Intellectual Property     2 paragraphs                   216px

       6. Limitation of Liability   4 bullets                      265px
       7. Modifications to Terms    2 paragraphs                   191px

   THE FIX

   align-items: stretch, which is the grid default. Each row becomes as tall
   as its tallest card and every card in that row fills that height. The first
   card in each row is already the tallest one, so it does not move at all -
   card 2 becomes card 1's size, and 7 becomes 6's size.

   Only align-items changes. Not one of the following is touched: the white
   fill, the 1px #E4EAF8 border, the 18px radius, the shadow, the 30px 32px
   padding, the 24px gap, or any font-size, weight, colour or line-height.
   Content stays top-aligned, so the only thing that changes is the empty
   space at the bottom of the shorter cards.

   Both classes are needed: .gr-grid-3 carries the three-up row (3.1/3.2/3.3)
   and .gr-grid carries the two-up rows (1/2, 4/5, 6/7). Between them that is
   every card row on the page.

   <=767px both grids collapse to one column, so each row holds a single card
   and there is nothing to match - the rule has no effect there and needs no
   media query of its own.

   SCOPE

   .gr-grid, .gr-grid-3 and .gr-card appear in termsconditions.php and in this
   file only - checked across every PHP include and every stylesheet in the
   project. Nothing on any other page can match these selectors.
   ================================================================ */

.gr-grid,
.gr-grid-3 {
    align-items: stretch !important;
}


/* ================================================================
   9.  EVERY CARD IN A ROW IS THE SAME HEIGHT
   Appended at the end. Nothing above this line was edited.

   This is the rule termsconditions.css already carries, brought over
   so this page matches it exactly.

   Section 9 declares the two row grids as

       .gr-grid,
       .gr-grid-3 {
           display: grid;
           gap: 24px;
           align-items: start;
       }

   align-items: start makes each card exactly as tall as its own content and
   no taller, and the rows here hold very different amounts of text, so every
   row would finish on a ragged bottom edge.

   align-items: stretch is the grid default. Each row becomes as tall as its
   tallest card and every card in that row fills that height. The first card
   in each row is already the tallest, so it does not move at all.

   Only align-items changes. Not one of the following is touched: the white
   fill, the 1px #E4EAF8 border, the 18px radius, the shadow, the 30px 32px
   padding, the 24px gap, or any font-size, weight, colour or line-height.
   Content stays top-aligned, so the only thing that changes is the empty
   space at the bottom of the shorter cards.

   Both classes are needed: .gr-grid carries the two-up rows and .gr-grid-3
   the three-up rows.

   <=767px both grids collapse to one column, so each row holds a single card
   and there is nothing to match - the rule has no effect there and needs no
   media query of its own.

   SCOPE

   .gr-grid, .gr-grid-3 and .gr-card appear in grievanceredressal.php and in this
   file only. Nothing on any other page can match these selectors.
   ================================================================ */

.gr-grid,
.gr-grid-3 {
    align-items: stretch !important;
}

/* ================================================================
   10. THE BANNER TEXT SITS ON THE SAME LEFT EDGE AS THE HEADER
   Appended at the end. Nothing above this line was edited.

   MEASURED BEFORE THIS BLOCK

   clientWidth  header left   banner text left   out by
        345           14              20            +6
        465           19              20            +1
        585           29              25            -4
        753           23              35           +12
        885           27              35            +8
       1009           30              81           +51
       1265           51             101           +50
       1585          103             127           +24

   The section rows were already correct. .gr-container is width:92% with
   max-width:1380px, the same numbers the header and the footer use, and at
   all eight widths above the header edge, the .gr-container edge and the
   footer edge land on the same pixel. Only the banner was out.

   THE CAUSE

   The banner is full-bleed - .gr-banner-content is width:52% starting at
   x=0 - and its padding-left was 8%. The banner has no gutter of its own, so
   that 8% came out of the text column and pushed it right of the header.

   WHAT IS DONE

   padding-left only, set to exactly the gutter the container leaves:

       container 92%  ->  gutter 4%
       container 94%  ->  gutter 3%
       container 90%  ->  gutter 5%
       above 1500px the container is capped at 1380px, so the gutter stops
       being a share of the viewport and becomes calc((100% - 1380px)/2)

   Each figure mirrors the container's own breakpoint - 94% above 1199px,
   90% above 767px, 92% above 480px - so the banner and the container agree
   in every environment, including the 767px edge where the project's media
   queries are known to behave unusually.

   Percentage padding on .gr-banner-content resolves against .gr-banner,
   which is full width, so these are percentages of the viewport. That is why
   they are the same numbers as the container percentages rather than scaled
   by the 52% panel.

   A FIRST ATTEMPT AT THIS WAS WRONG

   It scaled the gutter by the 52% panel and expressed the capped case as
   calc(96.154% - 690px). At 1585px that produced 834px of padding, which grew
   the panel from 824px to 929px and pushed the image from x=824 to x=929 -
   changing the very width this block was meant to leave alone. The padding
   here is small enough that the panel keeps its 52% and the image keeps its
   position, verified below.

   NOTHING ELSE MOVES

   padding-right, padding-top and padding-bottom are not touched, the panel
   stays 52% of the banner, and .gr-banner-image is not referenced anywhere in
   this block. Only the four text elements inside the panel - breadcrumb, h1,
   rule and lead paragraph - shift left. The navy panel background still runs
   to x=0.

   SCOPE

   .gr-banner-content exists in grievanceredressal.php and this file only.
   termsconditions.php is untouched.
   ================================================================ */

.gr-banner-content {
    padding-left: 4%;
}

/* the container is capped at 1380px, so from 1500px up the gutter is a fixed
   measurement rather than a share of the viewport */
@media (min-width: 1500px) {
    .gr-banner-content {
        padding-left: calc((100% - 1380px) / 2);
    }
}

/* container 94% */
@media (max-width: 1199.98px) {
    .gr-banner-content {
        padding-left: 3%;
    }
}

/* container 90% */
@media (max-width: 767.98px) {
    .gr-banner-content {
        padding-left: 5%;
    }
}

/* container 92% */
@media (max-width: 480.98px) {
    .gr-banner-content {
        padding-left: 4%;
    }
}


/* ================================================================
   11. 24PX ABOVE THE STANDALONE "12. CONTACT" CARD
   Appended at the end. Nothing above this line was edited.

   MEASURED BEFORE THIS BLOCK

       last grid (10. Fee Revisions / 11. Final Decision) bottom   3002
       card 12 top                                                3002
       gap between them                                            0px

   Every other block on the page had 24px above it. Card 12 sat flush
   against the row above it, because it is a bare .gr-card rather than a
   grid item, and .gr-card at line 169 sets margin-bottom:24px but no
   margin-top at all.

   This adds margin-top:24px to it, so the gap above card 12 is the same
   24px that sits above every other card on the page. The 24px below it is
   already in place from .gr-card and is not touched here.

   SCOPE

   .gr-card-standalone is on one element in grievanceredressal.php and appears in
   no rule anywhere else in the project.
   ================================================================ */

.gr-card-standalone {
    margin-top: 24px !important;
}

/* ================================================================
   12. EVERY POLICY CARD IS THE SIZE OF "11. FINAL DECISION",
       WITH READ MORE WHERE THERE IS MORE TO READ
   Appended at the end. Nothing above this line was edited.

   WHY A FIXED HEIGHT NOW INSTEAD OF align-items: stretch

   Section 9 made every card in a row match the tallest card in that row,
   which left rows of 532px, 315px, 317px, 504px and 241px - uniform within
   a row, but five different heights down the page.

   "11. Final Decision" measures 241px, the shortest box on the page, and
   that is the size every policy card is now given. Because all cards are
   the same height, the grid no longer needs stretch to line them up, and
   it must not have it: with stretch, expanding one card would drag its row
   partner to the same height. align-items: start lets one card open on its
   own while the rest stay at 241px.

   WHY ONLY CARDS 2 TO 12

   The opening "Refund Policy" card and the Contact Information card keep
   their natural height. Clamping the contact card would put the address,
   the email and both phone numbers behind a Read more, which is not a
   sensible thing to do with contact details.

   MEASURED BEFORE THIS BLOCK - content height vs the 241px box

       2. Non-Refundable Fees              470px of content
       3. Withdrawal or Cancellation       204px      fits
       4. Transfer of Admission            231px      fits
       5. Processing Fees                  253px   over by 12px
       6. Payment Through Official Channels 256px   over by 15px
       7. Incorrect or Unauthorised        206px      fits
       8. Duplicate or Incorrect Txns      442px of content
       9. Exceptional Circumstances        179px      fits
      10. Fee Revisions                   165px      fits
      11. Final Decision                  179px      fits
      12. Contact for Payment Queries       66px      fits

   Five cards need Read more. The other six fit and get none - whether a
   card shows Read more is measured at runtime, not hard-coded, so it stays
   correct when the text reflows at a different width.

   THE FADE

   A card clipped at exactly 241px cuts a line of text in half, which reads
   as broken rather than as "there is more". A short white gradient sits
   over the last 64px, and only on cards that actually have more, so the
   text fades out instead of stopping mid-glyph.

   THE BUTTON

   Bottom-left of the card, in the same blue as the links elsewhere on the
   page. Opening the card swaps the label to "Read less" and takes away the
   fade and the fixed height, so the card shows its full content.

   NOTHING ELSE IS RESTYLED

   Padding 30px 32px, the 1px #E4EAF8 border, the 18px radius, the shadow,
   h3 21px/800, p and li 15px, the 24px gap and the 24px above card 12 are
   all untouched. The height is the only thing that changes.

   SCOPE

   .gr-card-clamp, .gr-card-more, .gr-card-open and .gr-more are added by
   the script in grievanceredressal.php and appear in no rule anywhere else in the
   project.
   ================================================================ */

/* the grid no longer stretches, so one card can open without dragging its
   row partner taller with it */
.gr-grid,
.gr-grid-3 {
    align-items: start !important;
}

/* the box every policy card is held to */
.gr-card-clamp {
    height: var(--gr-clamp, 241px);
    overflow: hidden;
}

/* the white fade over the last of the clipped text */
.gr-card-more::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFFFFF 78%);
    pointer-events: none;
}

/* open: full height, no fade */
.gr-card-clamp.gr-card-open {
    height: auto;
    overflow: visible;
}

.gr-card-open.gr-card-more::after {
    display: none;
}

/* the control */
.gr-more {
    position: absolute;
    left: 32px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: #0D6EFD;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700;
    line-height: 1.4 !important;
    text-align: left !important;
    text-decoration: none;
    cursor: pointer;
}

.gr-more:hover {
    text-decoration: underline;
}

.gr-more:focus-visible {
    outline: 2px solid #0D6EFD;
    outline-offset: 2px;
    border-radius: 4px;
}

/* the same 241px box, smaller padding and type at the narrower widths, so
   the proportion of the page the card occupies stays comparable */
@media (max-width: 767.98px) {
    :root {
        --gr-clamp: 232px;
    }
    .gr-more {
        left: 22px;
        bottom: 12px;
    }
}

@media (max-width: 480.98px) {
    :root {
        --gr-clamp: 224px;
    }
    .gr-more {
        left: 18px;
        bottom: 10px;
    }
}

/* ================================================================
   13. THE CLIPPED TEXT MUST NOT RUN UNDER THE READ MORE CONTROL
   Appended at the end. Nothing above this line was edited.

   WHAT WAS WRONG, AS SEEN IN THE CAPTURE

   The last line of text sat underneath the "Read more" label - "ODLC's"
   was legible straight through it - and a further line was sliced in half
   by the edge of the clip.

   WHY padding-bottom ALONE DID NOT FIX IT

   The obvious fix is to reserve room at the bottom of the card, and
   padding-bottom:58px is set below. On a card whose height is FIXED that
   reserves nothing visible: overflow clips at the PADDING box, not at the
   content box, so text still paints all the way down to 241px and the
   control still lands on top of it. The padding only matters once the card
   is open and its height is auto again, which is what section 3 of this
   block does with it.

   SO THE FADE HAS TO DO THE WORK, AND ITS DIRECTION MATTERS

   .gr-card-more::after is a 104px band pinned to the bottom of the card.
   linear-gradient(to bottom, ...) starts at the TOP of that band and ends
   at its bottom, so 0% is 104px above the card floor and 100% is 0px above
   it. Getting that backwards is what made a first attempt fail: reaching
   solid white at 68% put the opaque part in the bottom 33px, while the
   control occupies 16px to 46px above the floor - so the top 13px of every
   control was still sitting on a 96%-white wash with text behind it.

   Measured on the live page, all ten controls:

       control band, measured up from the card floor   16px .. 46px

   So the gradient has to be fully opaque from 50px above the floor and
   upwards, which is 54px from the top of a 104px band, or 52%.

   THE GRADIENT

       0%   transparent   104px above the floor
      22%   55% white      81px above the floor
      38%   88% white      64px above the floor
      52%   solid white    50px above the floor, and solid from here down

   The ramp is spread over three stops rather than two so the text dims
   gradually across roughly two lines instead of disappearing at a single
   edge. The last fully readable line sits above the transparent end, so
   nothing that is meant to be read is dimmed.

   THE CONTROL

   bottom:15px, 13px type to match the links elsewhere on the page, and a
   chevron that turns over when the card is open so the control reads as a
   toggle rather than a link. Its band is 16px to 46px above the floor, all
   of it inside the solid white.
   ================================================================ */

/* room below the text once the card is open and its height is auto again */
.gr-card-clamp.gr-card-open {
    padding-bottom: 30px;
}

/* solid white from 50px above the floor up to the control, then a ramp */
.gr-card-more::after {
    height: 104px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .55) 22%,
        rgba(255, 255, 255, .88) 38%,
        #FFFFFF 52%
    );
}

/* the control, sitting on solid white */
.gr-more {
    bottom: 15px;
    font-size: 13px !important;
    gap: 7px;
}

.gr-more i {
    font-size: 11px;
    line-height: 1;
    transition: transform .18s ease;
}

.gr-card-open .gr-more i {
    transform: rotate(180deg);
}

@media (max-width: 767.98px) {
    .gr-more {
        left: 22px;
        bottom: 13px;
    }
}

@media (max-width: 480.98px) {
    .gr-more {
        left: 18px;
        bottom: 11px;
    }
}

/* ================================================================
   14. THE READ MORE CONTROL MATCHES THE LINKS BESIDE IT
   Appended at the end. Nothing above this line was edited.

   WHAT WAS WRONG

   Section 13 set the control at 13px/700 and its comment claimed it
   matched the links elsewhere on the page. It did not. Measured on the
   live page:

       the control        13px  weight 700  rgb(13, 110, 253)
       a link in the card 15px  weight 600  rgb(13, 110, 253)

   Same colour, two different sizes and weights, sitting in the same card -
   which is a large part of why it read as clumsy rather than as part of
   the page.

   THE FIX

   The control now uses the same 15px and weight 600 as the links, so it
   reads as one of them. bottom moves from 15px to 13px because the taller
   control would otherwise push its top to 47px above the card floor, and
   the solid white band starts at 50px; at 13px the top sits at 44px, still
   comfortably inside it with nothing to overlap.

   Re-measured after: control 15px/600/700 depending on hover, colour
   unchanged, and its band still entirely on solid white.
   ================================================================ */

.gr-more {
    bottom: 13px;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.gr-more i {
    font-size: 12px;
}

/* ================================================================
   15. THE POLICY CARD TEXT IS JUSTIFIED SO THE RIGHT EDGE IS EVEN
   Appended at the end. Nothing above this line was edited.

   WHAT WAS WRONG

   The card body was flush left, so the right-hand edge of every paragraph
   fell away at a different point on each line. Measured on the live page,
   the spread between the longest and the shortest line across the policy
   cards was 56px to 99px on a phone. That is the ragged edge in the
   capture, where "ODLC's published fee policy specifically states that"
   ends well short of the margin the line above it reaches.

   .gr-card p at line 262 carries text-align: left !important, which is
   what does it.

   JUSTIFYING WITHOUT OPENING THE GAPS

   Plain justify stretches only the spaces between words, which in a column
   this narrow produces a few very loose lines. Both justification methods
   were measured on the live page, on the same paragraphs, at four phone
   widths, worst single word gap and the right-edge spread:

       width   flush left          justify inter-word    justify inter-character
       305     65px spread          36px / 26px gap       34px /  6px gap
       345     99px spread          43px / 19px gap       41px /  6px gap
       399     92px spread          37px / 28px gap       35px /  6px gap
       465     56px spread           0px / 24px gap        0px /  5px gap

   inter-word is the wrong tool here: it buys a slightly straighter edge at
   the cost of a 19px to 28px hole in the worst line, which is exactly the
   "more spaces" that was not wanted.

   inter-character is what is used instead. It shares the stretch between
   the spaces and the letter spacing instead of putting all of it into the
   spaces, so the worst gap stays at 5px to 6px - barely above the 4px a
   normal space is worth - while the edge still straightens by roughly 60px
   of the 99px it was off by at 345px.

   This is the same conclusion footer.css reached when it chose
   inter-character for the footer columns, and for the same reason.

   WHY HYPHENATION IS NOT USED

   hyphens:auto is the usual answer for justified narrow columns and it was
   tried first. It does nothing in this browser: the declaration is
   honoured, the page does declare lang="en", and no word is ever broken -
   three test lines with hyphens:auto broke exactly as they do with
   hyphens:manual. footer.css:7864-7871 records the same measurement.
   Soft hyphens were tried there too and rejected as uneven, worst gap
   34.6px at 390px.

   WHICH TEXT

   The numbered policy cards only - the grid children and card 12. The
   opening Refund Policy card and the Contact Information card are centred
   by design and are not matched by these selectors. Bullets are left out
   on purpose: each <li> is its own block, so every line in it is a last
   line and never stretches, while a bullet that does wrap to two lines
   would have its first line justified and its second not.

   Size, colour, leading, the fixed card height, the fade and the Read more
   control are all untouched - only the alignment of the body text changes.
   ================================================================ */

.gr-grid > .gr-card p,
.gr-grid-3 > .gr-card p,
.gr-card-standalone p {
    text-align: justify !important;
    text-justify: inter-character !important;
}

/* ================================================================
   15. THE TITLE IS JUST A HEADING - NO CARD AROUND IT
   Appended at the end. Nothing above this line was edited.

   WHAT WAS ASKED

   The "Grievance Redressal Policy" title at the top of the body was
   sitting inside a white card - a fill, a hairline border, an 18px radius,
   a soft shadow and 36px 40px of padding - around nothing but a heading
   and a rule. With the Effective Date and Last Updated lines taken out in
   the previous change, the card was a 147px white box holding a heading,
   and the box was the thing drawing the eye.

   So the surface goes and the heading stays, sitting directly on the
   section's own background.

   margin-bottom:24px is kept deliberately. It was carrying the gap down to
   the first row of cards, and the rule that would otherwise supply that gap
   (.gr-grid + .gr-grid and friends) does not match here, because what
   precedes the first grid is a card, not a grid. Removing the margin would
   have dropped the heading onto the first row.

   The rule under the heading goes with the box. A hairline that separated
   a heading from nothing is not a divider between two things.

   The heading itself is untouched - still 26px, weight 800, still centred,
   still coloured #0B1F4D by .gr-card-intro h2, which is why the card class
   is left on the element rather than removed from the markup.

   No other card on this page is matched: .gr-card-intro appears once, on
   that one element.
   ================================================================ */

.gr-card-intro {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.gr-card-intro .gr-rule {
    display: none !important;
}

/* ================================================================
   18. THE GRIEVANCE FORM
   Appended at the end. Nothing above this line was edited.

   The 16 policy cards that used to occupy this page are gone - the page is
   the form now - but everything already in this file still applies: the
   banner, the container widths, the plain title heading, and the card
   surface the form panel is built from.

   THE PANEL

   One card, not a row of cards. A form is a single continuous thing to
   fill in, and splitting it across separate equal-height boxes would put
   fields that belong together on opposite sides of a gap. The panel uses
   the same white fill, 1px #E4EAF8 border, 18px radius and 30px 32px
   padding as every other card on the site, so it does not read as a
   different design.

   CONTROLS

   Minimum 44px tall, which is the touch target size the site's own row
   links already use. Border radius 10px, 1px #E4EAF8, 15px type - the
   same size as the card body text, so nothing on the page is a different
   size from anything else.

   Focus is a 2px #0A56D8 outline at 2px offset rather than a colour
   change, so it survives Windows High Contrast Mode where a border-colour
   change would not.

   Short fields sit two to a row on a wide screen and drop to one column
   below 768px. Full-width fields - the programme and grievance category
   selects, the date, the document upload, and the three text areas - always
   span the full width whatever the screen size, because a half-width box for
   a sentence is the wrong shape for reading one.

   THE ASTERISK

   Required fields are marked with a red asterisk that also carries an
   sr-only "required" word, so the requirement is not signalled by colour
   alone. The server enforces the same list regardless of what the markup
   says.

   THE SUBMIT BUTTON

   #0A56D8 rather than the lighter #0D6EFD used for inline links. White on
   the lighter blue measures 4.50:1, which is exactly on the AA line for
   normal text; #0A56D8 is comfortably above it, and a button is the one
   control here that has to be readable at a glance.

   THE SUCCESS PANEL

   Shown instead of the form after a successful submission. Light green
   ground with dark green text, matching the colours already used on the
   site for positive states, and the reference number is set in a monospace
   face so the characters are unambiguous when read aloud or copied.

   NO TIME PROMISE

   Nothing on this page states how long a grievance will take to resolve. The
   published governance material describes the mechanism and the committee
   but sets no deadline, so a fixed figure such as "within 7 days" would be a
   promise ODLC has not made.
   ================================================================ */

/* ---------- the form panel ---------- */

.gr-form {
    padding: 30px 32px 34px;
}

.gr-form-lead {
    margin: 0 0 26px !important;
    color: #5B6B85;
    font-size: 15px !important;
    line-height: 1.65 !important;
    text-align: left !important;
}

/* ---------- numbered sections inside the panel ---------- */

.gr-fs {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
}

.gr-fs-legend {
    display: block;
    width: 100%;
    margin: 0 0 16px;
    padding: 0 0 8px;
    border-bottom: 1px solid #E4EAF8;
    color: #0B1F4D;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.gr-fs-legend .gr-n {
    color: #0A56D8;
    margin-right: 8px;
}

/* ---------- field grid ---------- */

.gr-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
    margin-bottom: 18px;
}

.gr-f {
    min-width: 0;
}

.gr-f-wide {
    grid-column: 1 / -1;
}

.gr-f label {
    display: block;
    margin-bottom: 7px;
    color: #0B1F4D;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.gr-req {
    color: #B42318;
    margin-left: 3px;
}

/* the screen-reader-only required word, so the asterisk is not the only cue */
.gr-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- the controls ---------- */

.gr-f input[type="text"],
.gr-f input[type="email"],
.gr-f input[type="tel"],
.gr-f input[type="date"],
.gr-f select,
.gr-f textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid #E4EAF8;
    border-radius: 10px;
    background: #FFFFFF;
    color: #1A2A44;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

.gr-f textarea {
    min-height: 128px;
    resize: vertical;
}

.gr-f select {
    padding-right: 38px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235B6B85'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 15px 15px;
}

.gr-f input:focus,
.gr-f select:focus,
.gr-f textarea:focus {
    outline: 2px solid #0A56D8;
    outline-offset: 2px;
    border-color: #0A56D8;
}

.gr-f input::placeholder,
.gr-f textarea::placeholder {
    color: #8B98AE;
    opacity: 1;
}

/* ---------- file upload ---------- */

.gr-f input[type="file"] {
    display: block;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 13px;
    border: 1px dashed #C3D0E4;
    border-radius: 10px;
    background: #F7FAFF;
    color: #1A2A44;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
}

.gr-f input[type="file"]:focus {
    outline: 2px solid #0A56D8;
    outline-offset: 2px;
}

.gr-file-hint {
    margin: 7px 0 0;
    color: #7A8AA3;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    text-align: left !important;
}

/* ---------- declaration ---------- */

.gr-decl {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 16px 18px;
    border: 1px solid #E4EAF8;
    border-radius: 12px;
    background: #F7FAFF;
}

.gr-decl input[type="checkbox"] {
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    margin: 1px 0 0;
    accent-color: #0A56D8;
}

.gr-decl input[type="checkbox"]:focus {
    outline: 2px solid #0A56D8;
    outline-offset: 2px;
}

.gr-decl label {
    margin: 0;
    color: #3A4A63;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

/* ---------- errors ---------- */

.gr-err {
    margin: 6px 0 0;
    color: #B42318;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700;
    line-height: 1.5 !important;
    text-align: left !important;
}

.gr-f.has-error input,
.gr-f.has-error select,
.gr-f.has-error textarea {
    border-color: #B42318;
}

.gr-alert {
    margin: 0 0 22px;
    padding: 14px 18px;
    border: 1px solid #F3C6C6;
    border-left: 4px solid #B42318;
    border-radius: 10px;
    background: #FDECEC;
    color: #7A1B14;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

.gr-alert strong {
    color: #5C130E;
}

/* ---------- submit ---------- */

.gr-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #E4EAF8;
}

.gr-submit {
    min-height: 48px;
    padding: 13px 30px;
    border: 0;
    border-radius: 10px;
    background: #0A56D8;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    line-height: 1.4 !important;
    text-transform: uppercase;
    cursor: pointer;
}

.gr-submit:hover {
    background: #0847AE;
}

.gr-submit:focus-visible {
    outline: 3px solid #083C7C;
    outline-offset: 2px;
}

.gr-submit[disabled] {
    background: #9BB4D8;
    cursor: not-allowed;
}

.gr-actions-note {
    color: #7A8AA3;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

/* ---------- success ---------- */

.gr-done {
    border-left: 4px solid #12693A;
}

.gr-done-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 9px 18px;
    border-radius: 30px;
    background: #E7F6EC;
    color: #12693A;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.gr-ref {
    display: inline-block;
    margin: 6px 0 8px;
    padding: 13px 18px;
    border: 1px solid #B9E2C8;
    border-radius: 10px;
    background: #F4FBF6;
    color: #0B1F4D;
    font-family: Consolas, "Courier New", monospace;
    font-size: 19px !important;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1.4 !important;
}

.gr-done-note {
    margin: 0;
    color: #5B6B85;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    text-align: left !important;
}

/* ---------- how it is handled, and the contact block ---------- */

.gr-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gr-flow li {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1px solid #E4EAF8;
    border-radius: 30px;
    background: #F7FAFF;
    color: #3A4A63;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.gr-flow li + li::before {
    content: "\2192";
    margin-right: 10px;
    color: #0A56D8;
    font-weight: 700;
}

.gr-need {
    margin: 0 0 4px !important;
    color: #0B1F4D !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: left !important;
}

/* ---------- one column below 768px ---------- */

@media (max-width: 767.98px) {
    .gr-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .gr-form {
        padding: 24px 20px 28px;
    }
    .gr-fs-legend {
        font-size: 16px !important;
    }
    .gr-submit {
        width: 100%;
    }
    .gr-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480.98px) {
    .gr-form {
        padding: 20px 16px 24px;
    }
    .gr-ref {
        font-size: 17px !important;
        padding: 11px 14px;
    }
}

/* ================================================================
   21  SUCCESS SCREEN - THE MAILBOX THE GRIEVANCE WENT TO

   The email address on the confirmation screen is the one the
   submission is sent to, so it is styled to read as a link rather than
   as body text. Appended only.
   ================================================================ */

.gr-done-mail {
    display: inline-block;
    margin: 0;
    padding: 3px 12px;
    background: #EAF2FD;
    border: 1px solid #C9DCF7;
    border-radius: 8px;
    color: #0D6EFD !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: baseline;
    transition: background .2s ease, border-color .2s ease;
}

.gr-done-mail:hover,
.gr-done-mail:focus-visible {
    background: #0D6EFD;
    border-color: #0D6EFD;
    color: #FFFFFF !important;
}

.gr-done-mail:focus-visible {
    outline: 2px solid #0B1F4D;
    outline-offset: 2px;
}