/* ==========================================================================
   MOBILE REFINEMENTS  (loaded LAST — after style.css and pages.css)

   style.css accumulated a long chain of per-breakpoint patches that shrink
   things step by step (hamburger 44px -> 20px, page gutter 24px -> 8px,
   drawer 340px -> 96vw). This file replaces those phone-size results with a
   single, consistent set of rules instead of editing each patch:

     1. Page gutter        one variable (--m-gutter) for every container
     2. Horizontal scroll  root causes removed + a safety net
     3. Header / top bar   compact, centered
     4. Mobile menu        44px toggler, full-height drawer, visible close
     5. Hero search panel  full-width, two-row grid, 16px inputs
     6. Sections           tighter vertical rhythm, centered headings
     7. Category grid, footer, banners

   Everything is wrapped in max-width media queries, so desktop is untouched.
   ========================================================================== */

:root {
    --m-gutter: 16px;      /* left/right page padding on phones            */
    --m-section-y: 40px;   /* top/bottom padding of each section            */
}
@media (min-width: 576px) and (max-width: 991.98px) {
    :root {
        --m-gutter: 24px;
        --m-section-y: 52px;
    }
}

/* Drawer header only exists for the mobile menu. */
.nav-drawer-head { display: none; }

/* ==========================================================================
   1 + 2. GUTTERS  &  HORIZONTAL OVERFLOW
   Root cause of the sideways scroll: at <=390px style.css cut the container
   padding to 10px (8px at 320px), but Bootstrap's `.row.g-4` pulls itself out
   by 12px on each side — so every row poked 2-4px past the screen edge.
   A 16px gutter is always larger than the 12px row bleed.
   ========================================================================== */
@media (max-width: 991.98px) {
    .container-xl-custom,
    .container-compact,
    .site-header .navbar .container-xl-custom,
    .top-bar .container.container-compact {
        padding-left: var(--m-gutter);
        padding-right: var(--m-gutter);
    }

    /* Blog listing shell used its own 32px side padding. */
    .container-xl-custom.blog-listing-shell {
        padding-left: var(--m-gutter);
        padding-right: var(--m-gutter);
    }

    /* Safety net: AOS slide-in transforms / wide children can never create a
       sideways scrollbar. `clip` (unlike `hidden`) does not create a scroll
       container, so the sticky header keeps working. */
    main,
    .site-footer {
        overflow-x: clip;
    }

    img, video, iframe, svg { max-width: 100%; }

    /* Long words / URLs wrap instead of stretching their column. */
    h1, h2, h3, h4, h5, h6, p, li, a, label {
        overflow-wrap: break-word;
    }
}

@media (max-width: 575.98px) {
    /* A 3rem gutter (g-5) would bleed 24px — more than the 16px page gutter. */
    .row.g-5,
    .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

/* ==========================================================================
   3. TOP BAR + HEADER ROW
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Was `padding: 6px 0` — text touched the screen edge. */
    .top-bar .container.container-compact {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .site-header .navbar.py-3 {
        padding-top: .5rem !important;
        padding-bottom: .5rem !important;
    }
}

@media (max-width: 575.98px) {
    /* The tagline was truncated ("...Hub for Event..."); keep the strip slim
       and centered with just the social icons. */
    .top-bar .top-bar-text { display: none; }
    .top-bar .container.container-compact { justify-content: center !important; }
    .top-bar-social { gap: 10px; }
    .top-social-icon { width: 30px; height: 30px; font-size: .75rem; }
}

/* ==========================================================================
   4. MOBILE MENU  (hamburger + drawer + close button)
   ========================================================================== */
@media (max-width: 991.98px) {

    /* --- Hamburger: was shrunk to 20-38px; keep a 44px touch target --- */
    .site-header .navbar-toggler {
        width: 44px;
        height: 44px;
        margin-left: auto;
        border-radius: 12px;
    }
    .site-header .navbar-toggler i { font-size: 1.15rem; }
    .site-header .navbar-toggler[aria-expanded="true"] i { transform: none; }

    /* --- Drawer: full height, comfortable width, leaves a tap-to-close strip --- */
    .site-header .navbar-collapse {
        width: min(340px, 88vw);
        max-width: none;
        padding: 0 0 24px;
        overscroll-behavior: contain;
    }

    /* Scroll lock that also works on iOS Safari */
    html.nav-open { overflow: hidden; }

    /* --- Drawer header with the visible close button --- */
    .nav-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 12px 16px 12px 20px;
        background: #fff;
        border-bottom: 1px solid var(--border);
    }
    .nav-drawer-brand { display: inline-flex; align-items: center; }
    .nav-drawer-logo {
        width: 64px;
        height: auto;
        max-height: 44px;
        object-fit: contain;
        display: block;
    }
    .nav-close {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: var(--bg);
        color: var(--text);
        font-size: 1.15rem;
        line-height: 1;
        padding: 0;
        cursor: pointer;
        transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .nav-close:hover,
    .nav-close:focus-visible {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
        outline: none;
    }
    .nav-close:active { transform: scale(.94); }

    /* --- Links --- */
    .site-header .navbar-collapse .main-nav {
        padding: 12px 16px 0;
        margin: 0 0 4px !important;
        gap: 2px !important;
    }
    .site-header .navbar-collapse .main-nav .nav-link {
        padding: 13px 16px !important;
        min-height: 48px;
        font-size: 1rem;
    }

    /* --- Login / account block (was rendered at 18-42px with 6px text) --- */
    .site-header .navbar-collapse .header-actions {
        margin: 12px 16px 0;
        padding: 16px 0 0;
        width: auto;
    }
    .site-header .navbar-collapse .header-actions .icon-btn {
        height: 48px;
        font-size: .95rem;
    }
    .site-header .navbar-collapse .header-actions .icon-btn i { font-size: 1rem; }
}

/* ==========================================================================
   5. HERO + SEARCH PANEL
   Root cause of the small search box: `.hero-col-content` is a centered
   flex column, so the form shrink-wrapped to its content (~190px) and ignored
   its own `max-width`. It needs an explicit `width: 100%`.
   ========================================================================== */
@media (max-width: 991.98px) {
    .hero-section { padding: 24px 0 40px; }
    .hero-row { row-gap: 24px; }

    .hero-col-content { width: 100%; }

    .hero-section h1 { text-wrap: balance; }
    .hero-section .hero-desc { font-size: .95rem; line-height: 1.6; margin: 12px auto 22px; }

    /* Row 1: keyword (full width). Row 2: location + search button. */
    .hero-col-content .hero-search-panel {
        width: 100%;
        max-width: 100%;
        margin: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 52px;
        gap: 8px;
        padding: 8px;
        border-radius: 20px;
        box-shadow: var(--shadow-md);
    }
    .hero-col-content .hero-search-panel .divider-v { display: none; }

    .hero-col-content .hero-search-panel .search-field {
        grid-column: 1 / -1;
        min-width: 0;
        width: auto;
        gap: 10px;
        min-height: 52px;
        padding: 0 14px;
        background: var(--bg);
        border-radius: 14px;
    }
    .hero-col-content .hero-search-panel .search-field.search-field-location {
        grid-column: 1 / 2;
    }

    /* 16px stops iOS Safari zooming the page on focus (a classic cause of
       the layout shifting sideways after tapping a field). */
    .hero-col-content .hero-search-panel .search-field input,
    .hero-col-content .hero-search-panel .search-field select {
        width: 100%;
        min-width: 0;
        height: 50px;
        font-size: 16px;
        text-overflow: ellipsis;
    }

    .hero-col-content .hero-search-panel .btn-search-round {
        grid-column: 2;
        width: 52px;
        height: 52px;
        border-radius: 14px;
    }
    .hero-col-content .hero-search-panel .btn-search-round:hover { transform: none; }

    .hero-chips { gap: 8px; margin-top: 16px; }
    .hero-info-widgets { margin-top: 22px !important; gap: 12px; }
}

/* ==========================================================================
   6. SECTIONS — consistent rhythm, centered headings
   ========================================================================== */
@media (max-width: 991.98px) {
    .section-padding {
        padding-top: var(--m-section-y);
        padding-bottom: var(--m-section-y);
    }
    .section-padding-sm { padding-top: 28px; padding-bottom: 28px; }
    .stories-section {
        padding-top: var(--m-section-y);
        padding-bottom: var(--m-section-y);
    }
}

@media (max-width: 767.98px) {
    .section-eyebrow { font-size: .7rem; padding: 5px 12px; margin-bottom: 8px; }
    .section-title { font-size: 1.5rem; line-height: 1.25; text-wrap: balance; }
    .section-sub { font-size: .92rem; line-height: 1.55; }

    /* Section header rows: title block on top, "View all" link below, centered. */
    .container-xl-custom > .d-flex.justify-content-between.align-items-end {
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
        text-align: center;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }
    .container-xl-custom > .d-flex.justify-content-between.align-items-end > div {
        text-align: center;
    }

    /* Sub-header rows ("Jobs in Coimbatore  View All Jobs ->", "Explore by Area ...")
       follow the same centered pattern as the section headers above. */
    .container-xl-custom .d-flex.justify-content-between.align-items-center:has(> h4 + .link-arrow) {
        flex-direction: column;
        align-items: center !important;
        text-align: center;
        gap: 6px !important;
        margin-bottom: 16px !important;
    }
    .container-xl-custom .d-flex.flex-wrap:has(> .area-chip) {
        justify-content: center;
    }
}

/* ==========================================================================
   7. CATEGORY GRID, PAGE BANNERS, FOOTER
   ========================================================================== */
@media (max-width: 767.98px) {
    /* `1fr` = minmax(auto, 1fr), so long words stopped the columns shrinking
       (that is what overflowed at 320px). minmax(0, 1fr) lets them shrink. */
    .row.category-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }
    .row.category-cards-grid > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
        margin-top: 0;
        min-width: 0;
    }
    .category-card {
        min-width: 0;
        padding: 20px 10px 16px;
        border-radius: 18px;
        overflow-wrap: anywhere;
    }

    /* Promo cards: 44-54px of inner padding left barely 250px for text. */
    .discover-banner {
        padding: 24px 20px;
        border-radius: 20px;
        margin-top: 16px;
    }
    .discover-banner h3 { font-size: 1.3rem; line-height: 1.3; }
    .discover-banner p { font-size: .92rem; margin-bottom: 16px; }

    .grow-cta {
        padding: 28px 20px;
        border-radius: 22px;
    }
    .grow-cta h3 { font-size: 1.5rem; line-height: 1.25; }
    .grow-cta p { font-size: .95rem; }
    .grow-cta .grow-actions { margin-top: 20px; }

    /* Plain banners only — the ones with an overlapping content card
       (.page-banner-overlap) depend on their large bottom padding. */
    .page-banner.blog-listing-banner,
    .page-banner:not(.cls-banner):not(.jb-banner):not(.evl-banner):has(+ :not(.page-banner-overlap)) {
        padding-top: 30px;
        padding-bottom: 38px;
    }
    .page-banner h1 { font-size: 1.6rem; }

    /* Footer */
    .site-footer { padding-top: 44px; text-align: center; }
    .site-footer .footer-desc { margin-left: auto; margin-right: auto; }
    .site-footer .col-lg-4 > a.d-flex { justify-content: center; }   /* brand row was left-aligned */
    .site-footer .footer-contact-item {
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    .site-footer .footer-contact-item i { margin-top: 0; }
    .site-footer .footer-bottom {
        margin-top: 28px;
        padding: 18px 0;
        flex-direction: column;
        align-items: center;
        justify-content: center !important;
        text-align: center;
        gap: 6px !important;
    }
}