/* =========================================================
   polish.css
   Load LAST — after responsive.css.

   <link rel="stylesheet" href="<?= e(base_url('assets/css/polish.css?v=1')) ?>">
   ========================================================= */

/* =========================================================
   1. MOBILE BANNER — shorter box, gentler crop
   A 1920×720 image forced into a tall portrait frame loses most
   of its width. Until a 900×1200 mobile banner is uploaded, a
   shorter frame keeps more of the scene visible.
   ========================================================= */

@media (max-width: 680px) {
    .banner-slider,
    .banner-slide { min-height: clamp(400px, 92vw, 460px); }

    /* Faces sit slightly below the top edge in most group photos. */
    .banner-slide picture img { object-position: center 22%; }

    /* Lighter scrim: the photograph is the most persuasive thing
       on the page, so let it stay visible. */
    .banner-shade {
        background: linear-gradient(
            0deg,
            rgba(0, 25, 55, .82) 0%,
            rgba(0, 25, 55, .58) 30%,
            rgba(0, 25, 55, .16) 58%,
            transparent 80%
        );
    }

    .banner-content { padding: 28px 0 44px; }
}

/* =========================================================
   2. QUIETER HEADINGS
   Tamil at 700 weight carries far more visual mass than Latin at
   the same size — the display sizes were shouting.
   ========================================================= */

.section-heading h2,
.two-column h2 {
    font-size: clamp(25px, 2.4vw, 31px);
    font-weight: 600;
    letter-spacing: -.005em;
}

.section-heading p {
    max-width: 56ch;
    margin-inline: auto;
    font-size: 16px;
}

.feature-card h3,
.content-card h2,
.content-card h3,
.news-card h2 {
    font-size: 21px;
    font-weight: 600;
}

.page-hero h1 { font-size: clamp(28px, 3vw, 38px); font-weight: 600; }
.hero h1      { font-size: clamp(32px, 3.8vw, 48px); }

.eyebrow { font-size: 11.5px; letter-spacing: 1.8px; }

@media (max-width: 680px) {
    .section-heading h2,
    .two-column h2 { font-size: 24px; }

    .feature-card h3,
    .content-card h2,
    .content-card h3,
    .news-card h2 { font-size: 19px; }
}

/* =========================================================
   3. BULLET-SEPARATED HEADING
   "கதை • பாடல் • செயல் • கலை • விளையாட்டு" currently wraps with
   a bullet stranded at the end of a line. As a flex list the
   separator belongs to the word that follows it, so a line can
   never end on one.

   Markup:
     <h2 class="dot-list">
         <span>கதை</span>
         <span>பாடல்</span>
         <span>செயல்</span>
         <span>கலை</span>
         <span>விளையாட்டு</span>
     </h2>
   ========================================================= */

.dot-list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: .18em .6em;
    margin: 8px 0;
}

.dot-list > span { display: inline-flex; align-items: baseline; }

.dot-list > span + span::before {
    content: "•";
    margin-inline-end: .6em;
    color: var(--gold, #f0b83d);
    font-weight: 400;
}

@media (max-width: 680px) {
    .dot-list { gap: .1em .45em; }
    .dot-list > span + span::before { margin-inline-end: .45em; }
}

/* =========================================================
   4. LEARNING-METHOD CARDS
   ========================================================= */

.learning-card h3,
.learning-method-card h3 { font-size: 20px; font-weight: 600; }

.learning-card h4,
.learning-method-card h4 {
    margin: 2px 0 8px;
    color: var(--teal, #008e9a);
    font-size: 13px;
    font-weight: 600;
}

.learning-card p,
.learning-method-card p { font-size: 15px; line-height: 1.7; }

.learning-method-section h2,
.learning-methods h2,
.method-section h2,
section[class*="learning"] h2 {
    font-size: clamp(24px, 2.4vw, 31px);
    font-weight: 600;
    letter-spacing: -.005em;
}

@media (max-width: 680px) {
    section[class*="learning"] h2 { font-size: 23px; }
}
/* =========================================================
   TAMIL PHONICS HEADER
========================================================= */

.tp-top-contact{
    width:100%;
    background:#073f87;
    color:#fff;
}

.tp-top-contact-inner{
    min-height:38px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;
}

.tp-top-message{
    font-size:12px;
    font-weight:700;
}

.tp-top-contact-links{
    display:flex;
    align-items:center;
    gap:22px;
}

.tp-top-contact-links a{
    display:inline-flex;
    align-items:center;
    gap:6px;

    color:#fff;

    text-decoration:none;

    font-size:12px;
    font-weight:700;
}

.tp-top-contact-links a:hover{
    opacity:.82;
}

.tp-whatsapp-link{
    color:#dfffee !important;
}


/* =========================================================
   BRAND
========================================================= */

.tp-brand-row{
    min-height:132px;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

.tp-main-brand{
    display:flex;
    align-items:center;

    gap:20px;

    text-decoration:none;
}

.tp-main-brand > img{
    width:120px;
    height:120px;

    object-fit:contain;

    flex:0 0 120px;
}

.tp-brand-copy{
    display:flex;
    flex-direction:column;
}

.tp-brand-copy strong{
    color:#0b4b9f;

    font-family:"Hind Madurai",sans-serif;

    font-size:27px;
    line-height:1.25;

    font-weight:700;
}

.tp-brand-copy small{
    margin-top:5px;

    color:#008e99;

    font-family:"Hind Madurai",sans-serif;

    font-size:15px;
    font-weight:700;
}


/* =========================================================
   NAV BAR
========================================================= */

.tp-nav-bar{
    border-top:1px solid #edf1f4;
    border-bottom:1px solid #e9eef2;

    background:#fff;
}

.tp-main-nav{
    min-height:62px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:32px;
}

.tp-main-nav > a,
.tp-course-button{
    color:#15243b;

    background:none;
    border:0;

    font-family:"Hind Madurai",sans-serif;

    font-size:16px;
    font-weight:700;

    text-decoration:none;

    cursor:pointer;
}

.tp-main-nav > a:hover,
.tp-course-button:hover{
    color:#0757a7;
}


/* =========================================================
   COURSE DROPDOWN
========================================================= */

.tp-course-nav{
    position:relative;
}

.tp-course-button{
    display:flex;
    align-items:center;
    gap:7px;

    padding:20px 0;
}

.courses-dropdown-menu{
    position:absolute;

    top:100%;
    left:50%;

    width:760px;

    transform:
        translateX(-50%)
        translateY(8px);

    padding:22px;

    border:1px solid #dfe8ed;
    border-radius:16px;

    background:#fff;

    box-shadow:
        0 24px 55px
        rgba(15,46,76,.15);

    opacity:0;
    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .18s ease,
        transform .18s ease;

    z-index:1000;
}

.tp-course-nav:hover
.courses-dropdown-menu,
.tp-course-nav:focus-within
.courses-dropdown-menu{
    opacity:1;
    visibility:visible;

    pointer-events:auto;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================================================
   DROPDOWN HEADER
========================================================= */

.courses-dropdown-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    margin-bottom:16px;

    padding-bottom:14px;

    border-bottom:1px solid #edf1f3;
}

.courses-dropdown-head span{
    display:block;

    color:#078d98;

    font-size:10px;
    font-weight:800;
}

.courses-dropdown-head strong{
    display:block;

    margin-top:2px;

    color:#123e74;

    font-size:17px;
}

.courses-dropdown-head > a{
    color:#14599c;

    font-size:11px;
    font-weight:800;

    text-decoration:none;
}


/* =========================================================
   COURSE ITEMS
========================================================= */

.courses-dropdown-grid{
    display:grid;

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

    gap:8px;
}

.course-dropdown-item{
    display:grid;

    grid-template-columns:
        34px
        minmax(0,1fr)
        20px;

    align-items:center;

    gap:10px;

    padding:10px;

    border-radius:10px;

    color:#1c3342;

    text-decoration:none;

    transition:
        background .18s ease,
        transform .18s ease;
}

.course-dropdown-item:hover{
    background:#f1f8fa;

    transform:translateX(2px);
}

.course-dropdown-icon{
    width:32px;
    height:32px;

    display:grid;
    place-items:center;

    border-radius:8px;

    background:#e6f6f8;
    color:#078d98;

    font-weight:850;
}

.course-dropdown-text{
    min-width:0;
}

.course-dropdown-text strong{
    display:block;

    overflow:hidden;

    color:#173d69;

    font-size:12px;
    line-height:1.4;

    font-weight:750;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.course-dropdown-text small{
    display:block;

    margin-top:2px;

    color:#73838d;

    font-size:9px;
}

.course-dropdown-arrow{
    color:#0c7d89;
}


/* =========================================================
   COURSE MENU FOOTER
========================================================= */

.courses-dropdown-footer{
    margin-top:14px;

    padding-top:14px;

    border-top:1px solid #edf1f3;
}

.course-all-button{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    min-height:40px;

    border-radius:9px;

    background:#164d8c;
    color:#fff;

    text-decoration:none;

    font-size:11px;
    font-weight:800;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:900px){

    .tp-top-contact-inner{
        padding-top:7px;
        padding-bottom:7px;

        flex-direction:column;

        gap:5px;
    }

    .tp-top-contact-links{
        gap:12px;

        flex-wrap:wrap;
        justify-content:center;
    }

    .tp-brand-row{
        min-height:96px;
    }

    .tp-main-brand{
        gap:10px;
    }

    .tp-main-brand > img{
        width:78px;
        height:78px;

        flex-basis:78px;
    }

    .tp-brand-copy strong{
        font-size:18px;
    }

    .tp-brand-copy small{
        font-size:12px;
    }

    .tp-main-nav{
        display:none;

        padding:14px;

        flex-direction:column;

        align-items:stretch;

        gap:0;
    }

    .tp-main-nav.is-open{
        display:flex;
    }

    .tp-main-nav > a,
    .tp-course-button{
        width:100%;

        padding:13px 10px;

        text-align:left;

        border-bottom:1px solid #edf1f3;
    }

    .courses-dropdown-menu{
        position:static;

        width:100%;

        margin-top:0;

        padding:12px;

        transform:none;

        border:0;

        border-radius:0;

        box-shadow:none;

        opacity:1;
        visibility:visible;

        pointer-events:auto;
    }

    .courses-dropdown-grid{
        grid-template-columns:1fr;
    }

}