/* Responsive Overrides — kaadumedu.com
   Loaded after all existing stylesheets to retrofit mobile/tablet support.
   Do not edit the other CSS files; override here instead. */


/* ============================================================
   ASPECT RATIO FIX (Task 4) — applies at all viewport sizes
   ============================================================ */

/* Recent-page thumbnails: enforce 16:9 with cover cropping */
.recentimage {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

/* Hamburger button hidden by default (desktop); shown inside the media query */
#mobile-menu-toggle {
    display: none;
}


/* ============================================================
   TABLET (≤ 1024px) — make layout fluid, collapse to column
   ============================================================ */
@media screen and (max-width: 1024px) {

    /* Remove hard min-widths */
    body {
        min-width: 0 !important;
    }

    /* Fluid main container */
    .container_16 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* All fixed-pixel grid columns become full-width stacked blocks */
    .grid_1,  .grid_2,  .grid_3,  .grid_4,
    .grid_5,  .grid_6,  .grid_7,  .grid_8,
    .grid_9,  .grid_10, .grid_11, .grid_12,
    .grid_13, .grid_14, .grid_15, .grid_16 {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }


    /* ---- Header ---- */
    #header {
        width: 100% !important;
        height: 80px !important;
        background-size: cover !important;
        background-position: center top !important;
        box-sizing: border-box;
    }


    /* ---- Navigation / Mobile Menu ---- */
    #menu {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        position: relative;
    }

    /* Hamburger button: hidden on desktop, shown here */
    #mobile-menu-toggle {
        display: block;
        width: 100%;
        background: #2a2a2a;
        color: #fff;
        border: none;
        padding: 10px 14px;
        font-size: 20px;
        text-align: left;
        cursor: pointer;
        line-height: 1;
        box-sizing: border-box;
        letter-spacing: 0.5px;
    }

    /* Flatten the horizontal-centering positioning wrapper */
    .horizontal-centering > * > * {
        float: none !important;
        left: 0 !important;
        position: static !important;
        width: 100%;
    }
    .horizontal-centering > * > * > * {
        float: none !important;
        right: 0 !important;
        position: static !important;
    }

    /* Nav list: hidden by default; JS toggles .mobile-open to reveal */
    ul#nav {
        display: none !important;
        float: none !important;
        width: 100% !important;
        position: static !important;
    }

    ul#nav.mobile-open {
        display: block !important;
    }

    /* Vertical list items */
    ul#nav li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid #444;
        box-sizing: border-box;
    }

    ul#nav a,
    ul#nav a.dir,
    ul#nav span {
        display: block !important;
        padding: 10px 14px !important;
        color: #eee !important;
        background: #2a2a2a !important;
        text-decoration: none !important;
        font-size: 14px !important;
        box-sizing: border-box;
        width: auto !important;
    }

    /* Arrow indicator on parent items */
    ul#nav li > a.dir::after {
        content: ' \25B6';
        float: right;
        display: inline-block;
        transition: transform 0.2s;
    }

    ul#nav li.menu-open > a.dir::after {
        transform: rotate(90deg);
    }

    /* Override dropdown.css: use display instead of visibility so hover has no effect */
    ul.dropdown ul {
        display: none !important;
        visibility: visible !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        z-index: auto !important;
    }

    /* Disable hover-based submenu reveal */
    ul.dropdown li:hover > ul {
        display: none !important;
        visibility: visible !important;
    }

    /* JS-driven: show submenu when parent li has .menu-open */
    ul#nav li.menu-open > ul {
        display: block !important;
    }

    /* Indent submenu items */
    ul#nav ul a,
    ul#nav ul a.dir {
        background: #3a3a3a !important;
        padding-left: 28px !important;
        width: auto !important;
        font-size: 13px !important;
    }

    /* Indent third-level items */
    ul#nav ul ul a,
    ul#nav ul ul a.dir {
        background: #4a4a4a !important;
        padding-left: 42px !important;
        width: auto !important;
    }


    /* ---- Homepage: slider + right panel stack vertically ---- */
    #sliderdiv {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        box-shadow: none;
    }

    #sliderdiv p {
        height: auto !important;
    }

    #rightpanel {
        width: 100% !important;
        float: none !important;
        height: auto !important;
        margin-right: 0 !important;
    }

    #rightpanel p {
        height: auto !important;
    }


    /* ---- Bytepanes (homepage featured panels) ---- */
    #bytepanes {
        width: 100% !important;
        height: auto !important;
    }

    #bytepanes > div {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 8px 0 !important;
        box-sizing: border-box;
    }

    .bytetext {
        height: auto !important;
    }

    .byteimage {
        max-width: 100%;
        height: auto;
    }


    /* ---- Footer / misc sections ---- */
    #footer {
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
    }

    #othergalleries {
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    /* Let each .gal shrink to its content width so empty spacer divs collapse
       to zero and button-only gals sit side-by-side in the flex row */
    #othergalleries > .gal {
        width: auto !important;
        max-width: 100% !important;
    }

    #recent,
    #workshop {
        height: auto !important;
    }

    #recent p {
        height: auto !important;
    }

    #contactusmsg {
        height: auto !important;
    }


    /* ---- Gallery pages ---- */
    #gallery {
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
    }

    /* ---- Gallery nav buttons (#othergalleries: Birds/Mammals/etc. tabs) ----
       Desktop uses empty spacer divs (.gal, fixed height:60px) to centre the
       buttons horizontally. On mobile those spacers stack vertically → large
       blank gaps. Fix: collapse all .gal to auto; overflow:hidden creates a
       block-formatting context so the floated .linkbutton child is still
       contained (parent won't collapse to 0 around a float). */
    .gal {
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden;
        text-align: center !important;
    }

    /* #galbox1: strip with 7 nav buttons (mara, birdsofkerala pages).
       Desktop: floated row at fixed 960px + margin-left:80px.
       Mobile fix: text-align:center + inline-block avoids the display:flex vs
       display:block !important fight from .grid_16; inline-block elements wrap
       naturally and are centered by text-align. */
    #galbox1 {
        text-align: center !important;
        height: auto !important;
        margin-left: 0 !important;
        overflow: visible !important;
        padding: 4px 0;
    }

    /* inline-block so text-align:center applies; float:none removes the desktop float */
    .linkbutton {
        display: inline-block !important;
        float: none !important;
    }


    /* ---- Contact page ---- */
    .contactwrapper {
        height: auto !important;
        width: 100% !important;
        box-sizing: border-box;
    }


    /* ---- Images scale fluidly ---- */
    img {
        max-width: 100%;
        height: auto;
    }

    /* ---- Global p height override (kaadumedu.css sets p { height: 33px }) ---- */
    p {
        height: auto !important;
        overflow: visible !important;
    }


    /* Prevent gallery title links from being clipped (kaadumedu.css sets height:30px) */
    .recent_row1_a {
        height: auto !important;
        white-space: normal !important;
    }


    /* ---- Recent page grid: 2 columns on tablet ---- */
    #recent_row1,
    #recent_row2,
    #recent_row3 {
        height: auto !important;
        overflow: hidden; /* contain the 2-col floats */
    }

    #recent_row1 div,
    #recent_row2 div,
    #recent_row3 div {
        height: auto !important;
    }

    /* Direct children of each row become 2-column */
    #recent_row1 > div,
    #recent_row2 > div,
    #recent_row3 > div {
        width: 50% !important;
        float: left !important;
        display: block !important;
        box-sizing: border-box;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Inner wrapper inside each cell: full width of its parent */
    #recent_row1 > div > div,
    #recent_row2 > div > div,
    #recent_row3 > div > div {
        width: 100% !important;
        height: auto !important;
    }

    /* Fluid thumbnail images */
    .recentimage {
        width: 100% !important;
        height: auto !important;
        float: none !important;
        display: block;
        margin: 0 0 4px 0;
    }
}


/* ============================================================
   PHONE (≤ 480px) — single column everywhere
   ============================================================ */
@media screen and (max-width: 480px) {

    /* Recent grid collapses to 1 column */
    #recent_row1 > div,
    #recent_row2 > div,
    #recent_row3 > div {
        width: 100% !important;
        float: none !important;
    }

    /* Smaller header on phone */
    #header {
        height: 56px !important;
    }
}