/* =====================================================================
   Investor Section pages — mobile responsive
   ---------------------------------------------------------------------
   Sirf Investor Section ke pages par load hoti hai (dekhein component/meta.php).
   investors.css ke BAAD load honi chahiye, warna override kaam nahi karenge.
   ===================================================================== */


/* =====================================================================
   1. BREADCRUMB / PAGE TITLE
   ===================================================================== */
@media (max-width: 767px) {

    .pager-details.full {
        padding: 25px 0 !important;
        margin-top: 15px;
    }

    .pager-details .heading-title {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 15px;
    }

    .pager-details ul li a,
    .pager-details ul li span {
        font-size: 14px;
    }
}


/* =====================================================================
   2. SECTION + CARD LAYOUT
   ===================================================================== */
@media (max-width: 767px) {

    .investor-section {
        padding: 25px 0 30px;
    }

    .investor-section h1 {
        font-size: 21px;
        line-height: 29px;
        margin-bottom: 15px;
    }

    /* investors.css me `.investor-section .col-md-6 { padding: 25px }` hai —
       mobile par ye container ke apne padding ke upar 25px aur jod deta hai,
       yaani card ki width bahut kam ho jati hai. */
    .investor-section .col-md-6 {
        padding: 0 12px;
    }

    /* BUG: `.investor-inner` par `min-height: 328px` hai. Jin cards me sirf
       1–2 links hain (Shareholding Pattern, Industry Report, Outstanding
       Dues) wo mobile par bade khali dabbe ban jate the.
       Pagination absolute thi (bottom:20 right:20) — isliye min-height
       zaruri tha. Ise static kar dene se min-height ki zarurat khatam. */
    .investor-section .investor-inner {
        min-height: 0;
        padding: 18px 16px;
        margin-bottom: 16px;
    }

    .investor-section .pagination {
        position: static;
        justify-content: flex-end;
        margin: 12px 0 0;
        padding-left: 0;
    }

    .investor-section .pagination li {
        padding: 6px 14px;
        font-size: 16px;
        line-height: 1;
    }

    .investor-section .investor-inner h3 {
        font-size: 17px;
        line-height: 25px;
        margin-bottom: 14px;
        border-left-width: 4px;
        padding-left: 10px;
    }
}


/* =====================================================================
   3. DOCUMENT LISTS
   ===================================================================== */
@media (max-width: 767px) {

    .investor-section .list-container ul {
        padding-left: 0;
    }

    .investor-section .list-container ul li {
        padding: 8px 0 8px 24px;
    }

    /* Icon `top: 50%; translateY(-50%)` se multi-line item ke beech me
       aa jata tha — mobile par PDF ke naam 2–3 line lete hain, isliye
       icon ko pehli line ke saath align kar rahe hain. */
    .investor-section .list-container ul li::before {
        top: 11px;
        transform: none;
        font-size: 16px;
    }

    .investor-section .list-container ul li.has-child::before {
        top: 11px;
    }

    .investor-section .list-container ul li a,
    .investor-section .list-container ul li .video-slide {
        font-size: 14.5px;
        line-height: 21px;
        display: inline-block;
        overflow-wrap: break-word;
    }

    /* Investor Grievance page — lambe email/address text ko wrap karo */
    .investor-section .list-container p {
        font-size: 14.5px;
        line-height: 22px;
        margin-bottom: 10px;
        overflow-wrap: break-word;
    }

    .investor-section .list-container p a {
        overflow-wrap: break-word;
    }
}


/* =====================================================================
   4. CORPORATE ANNOUNCEMENT PANEL
   ---------------------------------------------------------------------
   Desktop par ye ek sticky, poori viewport-height ka panel hai. Mobile par
   list ke neeche stack hone ke baad wo 100vh ghera aur page ke saath chipka
   rehta tha.
   ===================================================================== */
@media (max-width: 991.98px) {

    .corporate-announcement {
        position: static;
        top: auto;
    }

    .corporate-announcement .investor-inner {
        height: auto;
    }

    .corporate-announcement .list-container {
        height: auto;
        max-height: 60vh;
        padding-bottom: 10px;
    }
}


/* =====================================================================
   5. COMMITTEE TABLES → STACKED CARDS
   ---------------------------------------------------------------------
   3-column table jisme "Mr. Hasmukhbhai Meghjibhai Viradiya" aur
   "Non-Executive Director" jaise lambe values hain — 360px par har cell
   3–4 line le leta tha. Mobile par har row ek card ban jati hai.
   ===================================================================== */
@media (max-width: 767px) {

    .investor-inner3 {
        margin-bottom: 24px !important;
    }

    .investor-inner3 table {
        border: 0;
        margin-bottom: 0;
    }

    .investor-inner3 table thead {
        display: none;
    }

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

    .investor-inner3 table tr {
        border: 1px solid #dee2e6;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 12px;
        background: #fff;
    }

    .investor-inner3 table td {
        text-align: left;
        border: 0;
        border-top: 1px solid #f0f0f0;
        padding: 9px 14px;
        font-size: 14px;
        line-height: 21px;
    }

    /* investors.css me `td:first-child { width: 40% }` hai — usko yahan
       reset karna zaruri hai (same specificity, baad me aane ki wajah se
       ye jeetega). Pehla cell card ka title ban jata hai. */
    .investor-inner3 table td:nth-child(1) {
        width: 100%;
        background-color: var(--blue);
        color: #fff;
        font-weight: 600;
        font-size: 14.5px;
        border-top: 0;
    }

    .investor-inner3 table td:nth-child(2)::before {
        content: "Position: ";
    }

    .investor-inner3 table td:nth-child(3)::before {
        content: "Designation: ";
    }

    .investor-inner3 table td:nth-child(2)::before,
    .investor-inner3 table td:nth-child(3)::before {
        font-weight: 600;
        color: var(--blue);
    }
}