/* =========================================================
   MERA SHATHI
   TERMS & CONDITIONS — RESPONSIVE CSS
   File: terms-conditions-responsive.css

   IMPORTANT:
   This file controls ONLY Terms & Conditions content.
   Common Navbar/Footer remain controlled by:
   style.css + responsive.css
   ========================================================= */


/* =========================================================
   01. LARGE LAPTOP
   ========================================================= */

@media (max-width: 1200px) {

    .legal-hero {
        padding: 65px 0 70px;
    }


    .legal-content-section {
        padding: 65px 0 75px;
    }


    .legal-layout {
        grid-template-columns:
            235px
            minmax(0, 1fr);

        gap: 30px;
    }


    .legal-section {
        padding: 31px 32px 32px;
    }


    .legal-sidebar-card {
        padding: 23px 18px 18px;
    }


    .legal-contact-grid {
        gap: 16px;
    }

}


/* =========================================================
   02. TABLET
   ========================================================= */

@media (max-width: 992px) {

    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .legal-hero {
        padding: 58px 0 62px;
    }


    .legal-hero-content {
        max-width: 760px;
    }


    .legal-hero-content h1 {
        font-size: clamp(36px, 6vw, 50px);
    }


    .legal-hero-content > p {
        max-width: 650px;

        font-size: 14.5px;
        line-height: 1.8;
    }


    /* -----------------------------------------
       CONTENT
    ----------------------------------------- */

    .legal-content-section {
        padding: 58px 0 68px;
    }


    .legal-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }


    /* -----------------------------------------
       SIDEBAR
    ----------------------------------------- */

    .legal-sidebar {
        position: relative;
        top: auto;

        width: 100%;
    }


    .legal-sidebar-card {
        padding: 21px;
    }


    .legal-sidebar-card h2 {
        margin-bottom: 14px;
    }


    .legal-sidebar-card nav {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 5px 8px;
    }


    .legal-sidebar-card nav a {
        min-height: 36px;

        padding: 8px 10px 8px 13px;

        font-size: 12px;
    }


    /* -----------------------------------------
       DOCUMENT
    ----------------------------------------- */

    .legal-document {
        padding: 0;
    }


    .legal-section {
        margin-bottom: 18px;

        padding: 29px 28px 30px;
    }


    .legal-section h2 {
        font-size: 27px;
    }


    .legal-section p {
        font-size: 13.8px;
        line-height: 1.8;
    }


    .legal-section > ul li {
        font-size: 13.2px;
    }


    /* -----------------------------------------
       CONTACT
    ----------------------------------------- */

    .legal-contact-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;
    }


    .legal-contact-card {
        min-height: 118px;

        padding: 20px;
    }


    .legal-contact-icon {
        width: 56px;
        height: 56px;

        flex: 0 0 56px;

        margin-right: 15px;

        border-radius: 15px;

        font-size: 19px;
    }


    .legal-contact-card h3 {
        font-size: 16px;
    }


    .legal-contact-card p,
    .legal-contact-card p a {
        font-size: 12.5px;
        line-height: 1.55;
    }

}


/* =========================================================
   03. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .legal-hero {
        padding: 48px 0 52px;
    }


    .legal-hero::before {
        width: 270px;
        height: 270px;

        top: -120px;
        right: -110px;
    }


    .legal-hero::after {
        width: 260px;
        height: 260px;

        bottom: -130px;
        left: -110px;
    }


    .legal-badge {
        padding: 8px 14px;

        margin-bottom: 15px;

        font-size: 12px;
    }


    .legal-hero-content h1 {
        margin-bottom: 15px;

        font-size: clamp(32px, 9vw, 44px);

        letter-spacing: -0.7px;
    }


    .legal-hero-content > p {
        font-size: 13.5px;
        line-height: 1.75;
    }


    .legal-meta {
        margin-top: 19px;

        font-size: 11.5px;
    }


    .legal-meta span {
        padding: 7px 11px;
    }


    /* -----------------------------------------
       MAIN CONTENT
    ----------------------------------------- */

    .legal-content-section {
        padding: 45px 0 55px;
    }


    .legal-layout {
        gap: 22px;
    }


    /* -----------------------------------------
       SIDEBAR
    ----------------------------------------- */

    .legal-sidebar-card {
        padding: 19px 16px 16px;

        border-radius: 17px;
    }


    .legal-sidebar-card h2 {
        font-size: 16px;
    }


    .legal-sidebar-card nav {
        grid-template-columns: 1fr;

        gap: 2px;
    }


    .legal-sidebar-card nav a {
        min-height: 34px;

        padding: 7px 9px 7px 13px;

        font-size: 11.5px;
    }


    /* -----------------------------------------
       DOCUMENT
    ----------------------------------------- */

    .legal-section {
        margin-bottom: 15px;

        padding: 25px 20px 26px;

        border-radius: 18px;
    }


    .legal-section-number {
        min-width: 39px;
        height: 25px;

        margin-bottom: 11px;

        font-size: 10px;
    }


    .legal-section h2 {
        margin-bottom: 13px;

        font-size: 23px;

        letter-spacing: -0.25px;
    }


    .legal-section h3 {
        margin-top: 22px;

        font-size: 16px;
    }


    .legal-section p {
        margin-bottom: 12px;

        font-size: 13px;
        line-height: 1.78;
    }


    /* -----------------------------------------
       LISTS
    ----------------------------------------- */

    .legal-section > ul {
        gap: 7px;

        margin-top: 14px;
    }


    .legal-section > ul li {
        padding: 10px 11px 10px 34px;

        border-radius: 10px;

        font-size: 12.5px;
        line-height: 1.65;
    }


    .legal-section > ul li::before {
        left: 11px;

        font-size: 12px;
    }


    /* -----------------------------------------
       CONTACT
    ----------------------------------------- */

    .legal-contact-section {
        padding-bottom: 27px;
    }


    .legal-contact-grid {
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 24px;
    }


    .legal-contact-card {
        min-height: 104px;

        padding: 18px 20px;

        border-radius: 17px;
    }


    .legal-contact-icon {
        width: 54px;
        height: 54px;

        flex: 0 0 54px;

        margin-right: 16px;

        border-radius: 15px;

        font-size: 18px;
    }


    .legal-contact-card h3 {
        font-size: 16px;

        line-height: 1.35;
    }


    .legal-contact-card p,
    .legal-contact-card p a {
        font-size: 12.5px;

        line-height: 1.55;
    }

}


/* =========================================================
   04. SMALL MOBILE
   ========================================================= */

@media (max-width: 576px) {

    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .legal-hero {
        padding: 42px 0 46px;
    }


    .legal-hero-content h1 {
        font-size: 32px;
    }


    .legal-hero-content > p {
        font-size: 12.8px;
    }


    .legal-meta {
        margin-top: 16px;
    }


    .legal-meta span {
        flex-wrap: wrap;

        justify-content: center;

        gap: 5px 7px;

        max-width: 100%;

        text-align: center;
    }


    /* -----------------------------------------
       CONTENT
    ----------------------------------------- */

    .legal-content-section {
        padding: 38px 0 48px;
    }


    /* -----------------------------------------
       SIDEBAR
    ----------------------------------------- */

    .legal-sidebar-card {
        padding: 17px 14px 14px;
    }


    .legal-sidebar-card h2 {
        margin-bottom: 12px;

        font-size: 15px;
    }


    .legal-sidebar-card nav a {
        font-size: 11px;
    }


    /* -----------------------------------------
       DOCUMENT
    ----------------------------------------- */

    .legal-section {
        padding: 22px 16px 23px;

        border-radius: 16px;
    }


    .legal-section h2 {
        font-size: 21px;
    }


    .legal-section h3 {
        font-size: 15px;
    }


    .legal-section p {
        font-size: 12.5px;
        line-height: 1.75;
    }


    .legal-section > ul li {
        padding-left: 32px;

        font-size: 12px;
    }


    /* -----------------------------------------
       CONTACT
    ----------------------------------------- */

    .legal-contact-grid {
        gap: 12px;

        margin-top: 21px;
    }


    .legal-contact-card {
        min-height: 96px;

        padding: 16px;

        border-radius: 15px;
    }


    .legal-contact-icon {
        width: 48px;
        height: 48px;

        flex: 0 0 48px;

        margin-right: 13px;

        border-radius: 13px;

        font-size: 16px;
    }


    .legal-contact-icon::before {
        inset: -4px;

        border-radius: 17px;
    }


    .legal-contact-card h3 {
        margin-bottom: 3px;

        font-size: 15px;
    }


    .legal-contact-card p,
    .legal-contact-card p a {
        font-size: 12px;

        line-height: 1.5;
    }

}


/* =========================================================
   05. EXTRA SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .legal-hero {
        padding: 36px 0 40px;
    }


    .legal-badge {
        padding: 7px 11px;

        font-size: 10.5px;
    }


    .legal-hero-content h1 {
        font-size: 29px;
    }


    .legal-hero-content > p {
        font-size: 12px;
    }


    .legal-meta {
        font-size: 10.5px;
    }


    /* -----------------------------------------
       CONTENT
    ----------------------------------------- */

    .legal-content-section {
        padding: 32px 0 42px;
    }


    .legal-section {
        padding: 20px 14px 21px;
    }


    .legal-section-number {
        min-width: 36px;
        height: 23px;

        font-size: 9px;
    }


    .legal-section h2 {
        font-size: 19px;
    }


    .legal-section p {
        font-size: 11.8px;
    }


    .legal-section > ul li {
        padding:
            9px 9px 9px 29px;

        font-size: 11.5px;
    }


    .legal-section > ul li::before {
        left: 9px;

        font-size: 11px;
    }


    /* -----------------------------------------
       CONTACT
    ----------------------------------------- */

    .legal-contact-grid {
        gap: 10px;

        margin-top: 18px;
    }


    .legal-contact-card {
        min-height: 88px;

        padding: 14px;

        border-radius: 14px;
    }


    .legal-contact-icon {
        width: 44px;
        height: 44px;

        flex: 0 0 44px;

        margin-right: 11px;

        border-radius: 12px;

        font-size: 15px;
    }


    .legal-contact-card h3 {
        font-size: 14px;
    }


    .legal-contact-card p,
    .legal-contact-card p a {
        font-size: 11.5px;
    }

}


/* =========================================================
   06. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .legal-hero-content *,
    .legal-sidebar-card *,
    .legal-document *,
    .legal-contact-card * {
        transition: none !important;
    }


    .legal-sidebar-card nav a:hover,
    .legal-section:hover,
    .legal-section > ul li:hover,
    .legal-contact-card:hover,
    .legal-contact-card:hover .legal-contact-icon {
        transform: none !important;
    }

}