/* =======================================================
   GLOBAL MOBILE RESPONSIVE STYLESHEET
   Dr. Ambedkar College — All Pages
   Breakpoints: 480px | 640px | 768px | 900px | 1024px
   ======================================================= */

/* ── 0. Base resets ─────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent text overflow everywhere */
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
a,
li,
td,
th,
label,
div,
button,
input,
textarea,
select {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* ── 1. Container ───────────────────────────────────── */
.container {
    width: 100%;
    padding-left: clamp(12px, 3vw, 20px);
    padding-right: clamp(12px, 3vw, 20px);
}

/* ── 2. index.php <main> wrapper ────────────────────── */
/*  The home page's hero/news/sections need full viewport width.
    Pages that have their own .container inside don't need outer padding. */
main.main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

/* Inner pages that rely on the outer container keep their padding
   only if their own content doesn't supply one */
body.page-contact main.main-content,
body.page-faculty main.main-content,
body.page-non-teaching main.main-content {
    padding-left: clamp(12px, 3vw, 16px) !important;
    padding-right: clamp(12px, 3vw, 16px) !important;
}

/* ── 3. Hero / Slider (Home page) ───────────────────── */
.hero-section {
    position: relative;
    /* Replace the fixed 500 px height with a fluid value */
    height: clamp(220px, 45vw, 500px) !important;
}

.hero-slider {
    height: clamp(220px, 45vw, 500px) !important;
}

.hero-title {
    font-size: clamp(1.1rem, 4.5vw, 2.25rem) !important;
    line-height: 1.25;
    margin-bottom: 10px !important;
}

.hero-subtitle {
    font-size: clamp(0.78rem, 2.5vw, 1.2rem) !important;
    margin-bottom: 16px !important;
}

.hero-cta {
    padding: clamp(8px, 2vw, 12px) clamp(16px, 4vw, 32px) !important;
    font-size: clamp(13px, 2vw, 16px) !important;
}

/* Slider nav dots — hide on tiny screens */
@media (max-width: 360px) {
    .slider-dots {
        display: none;
    }
}

/* ── 4. Inner-page banner / page-header ─────────────── */
.page-header {
    min-height: auto !important;
    padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem) !important;
}

/* Giant title in page banners */
.page-header h1,
.page-header-title h1 {
    font-size: clamp(1.4rem, 5vw, 3rem) !important;
    line-height: 1.2;
}

.page-header p,
.page-header .hero-subtitle {
    font-size: clamp(0.8rem, 2.5vw, 1.25rem) !important;
}

/* Icon + title row — stack on mobile */
@media (max-width: 640px) {

    .page-header-title,
    .page-header .flex.items-center.space-x-6 {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.75rem !important;
    }

    .page-header-title i,
    .page-header .fas {
        font-size: 2rem !important;
    }
}

/* hero-section used in Contact / NAAC / About etc. */
.hero-section[style*="height"] {
    height: auto !important;
    min-height: clamp(140px, 30vw, 300px);
}

.hero-section .hero-title {
    font-size: clamp(1.4rem, 5vw, 4rem) !important;
}

.hero-section .hero-subtitle {
    font-size: clamp(0.85rem, 2.5vw, 1.5rem) !important;
}

/* ── 5. Content-grid (NAAC / Academics sidebar layouts) */
.content-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem;
}

@media (min-width: 900px) {
    .content-grid {
        grid-template-columns: 260px 1fr !important;
        gap: 2rem;
    }
}

/* ── 6. Sidebar / sticky side-menu ─────────────────── */
.main-navigation,
.side-menu-container {
    position: static !important;
    width: 100% !important;
    top: auto !important;
}

@media (min-width: 900px) {
    .main-navigation {
        position: sticky !important;
        top: 1rem !important;
    }

    .side-menu-container {
        width: 280px !important;
        flex-shrink: 0;
    }
}

/* ── 7. flex content-layout (library / dynamic_content) */
.content-layout {
    flex-direction: column !important;
    gap: 1rem;
}

@media (min-width: 900px) {
    .content-layout {
        flex-direction: row !important;
        gap: 2rem;
        align-items: flex-start;
    }
}

/* ── 8. Contact grid ────────────────────────────────── */
.contact-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 1rem !important;
}

@media (min-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr 1.5fr !important;
        gap: 2.5rem !important;
        padding: 2rem !important;
    }
}

/* ── 9. President / Principal sections (Home) ───────── */
.section-content {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .section-content {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 1rem;
    }

    .section-text {
        width: 100% !important;
        order: 2;
    }

    .section-profile {
        width: 100% !important;
        max-width: 180px !important;
        margin: 0 auto !important;
        order: 1;
    }

    .section-description {
        font-size: 0.9rem !important;
    }
}

.president-section,
.principal-section {
    padding: clamp(1.5rem, 4vw, 3rem) 0;
}

/* ── 10. Tables ─────────────────────────────────────── */
.table-container,
.overflow-x-auto,
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* Give tables a minimum so columns don't crunch */
.data-table,
table.w-full {
    min-width: 540px;
}

@media (max-width: 600px) {

    .data-table th,
    .data-table td {
        padding: 0.55rem 0.5rem !important;
        font-size: 0.78rem !important;
    }
}

/* ── 11. Faculty / Staff card grids ─────────────────── */
/* Tailwind responsive overrides */
@media (max-width: 640px) {

    /* 2-col grids → 1 col */
    [class*="grid-cols-2"]:not(.keep-cols),
    [class*="sm:grid-cols-2"],
    .faculty-grid,
    .staff-grid {
        grid-template-columns: 1fr !important;
    }

    /* 3-col → 1 col */
    [class*="grid-cols-3"],
    [class*="md:grid-cols-3"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {

    /* 4-col → 2 col */
    [class*="grid-cols-4"],
    [class*="lg:grid-cols-4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Faculty card image sizes */
@media (max-width: 480px) {

    .faculty-card img,
    .staff-card img {
        width: 80px !important;
        height: 80px !important;
    }
}

/* ── 12. Gallery ────────────────────────────────────── */
.gallery-grid,
[class*="gallery"] .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
}

@media (min-width: 640px) {

    .gallery-grid,
    [class*="gallery"] .grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 1024px) {

    .gallery-grid,
    [class*="gallery"] .grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 360px) {

    .gallery-grid,
    [class*="gallery"] .grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── 13. NIRF / GoverningBody / Student Services ────── */
@media (max-width: 768px) {

    .nirf-grid,
    .rti-grid,
    .governing-grid,
    .services-grid {
        grid-template-columns: 1fr !important;
    }

    .governing-table-wrap {
        overflow-x: auto;
    }
}

/* ── 14. File items ─────────────────────────────────── */
@media (max-width: 500px) {
    .file-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.4rem !important;
    }

    .file-actions {
        width: 100%;
        justify-content: flex-end;
        display: flex;
    }
}

/* ── 15. Modals ─────────────────────────────────────── */
.modal-content {
    max-width: 95vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
}

@media (max-width: 480px) {
    .modal-content {
        padding: 1rem !important;
    }
}

/* ── 16. Footer ─────────────────────────────────────── */
@media (max-width: 640px) {
    .footer {
        padding: 30px 16px 20px !important;
        margin-top: 40px !important;
    }

    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .footer-col h3 {
        font-size: 1rem !important;
    }

    .footer-col p,
    .footer-col a {
        font-size: 0.85rem;
    }
}

/* ── 17. News ticker ────────────────────────────────── */
@media (max-width: 480px) {
    .news-ticker {
        font-size: 13px;
    }

    .news-title {
        font-size: 1rem !important;
    }
}

/* ── 18. Announcement / Marquee bar ─────────────────── */
@media (max-width: 480px) {
    .announcement-item {
        margin: 0 8px;
        font-size: 12px;
    }
}

/* ── 19. Buttons / Forms ────────────────────────────── */
@media (max-width: 480px) {

    button,
    .btn,
    [class*="btn-"] {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    input,
    textarea,
    select {
        font-size: 16px !important;
        /* prevents iOS zoom */
        width: 100%;
    }
}

/* ── 20. Section headings inside content ────────────── */
@media (max-width: 640px) {

    .section-title,
    h2.text-4xl,
    h2.text-3xl,
    h1.text-5xl,
    h1.text-4xl {
        font-size: clamp(1.3rem, 5vw, 2rem) !important;
    }

    h3.text-2xl,
    h3.text-xl {
        font-size: clamp(1rem, 3.5vw, 1.4rem) !important;
    }

    .info-description,
    .section-description {
        font-size: 0.88rem !important;
        line-height: 1.65;
    }
}

/* ── 21. Header (top bar + nav) ─────────────────────── */
/* Already mostly handled in Header.php but reinforce */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
        padding: 10px 12px !important;
    }

    .college-name {
        font-size: 18px !important;
    }

    .college-title {
        font-size: 14px !important;
    }

    .college-accreditation {
        font-size: 11px !important;
    }

    .college-logo {
        width: 52px !important;
        height: 52px !important;
    }
}

@media (max-width: 380px) {
    .college-name {
        font-size: 15px !important;
    }

    .college-title {
        font-size: 12px !important;
    }

    .college-logo {
        width: 44px !important;
        height: 44px !important;
    }
}

/* ── 22. Padding / spacing helpers ─────────────────── */
@media (max-width: 640px) {

    /* Tailwind py-16 / px-16 are too big on mobile */
    .py-16 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .px-16 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .py-12 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .mt-16 {
        margin-top: 2rem !important;
    }

    .mb-16 {
        margin-bottom: 2rem !important;
    }

    .gap-8 {
        gap: 1.25rem !important;
    }

    .max-w-7xl,
    .max-w-6xl {
        max-width: 100% !important;
    }
}

/* ── 23. Content-block / card inner padding ─────────── */
@media (max-width: 640px) {

    .content-block,
    .content-container {
        padding: 1rem !important;
        border-radius: 0.75rem !important;
    }
}

/* ── 24. Horizontal scroll prevention ──────────────── */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ── 25. Print / utility ────────────────────────────── */
@media print {

    .mobile-menu-toggle,
    .slider-btn,
    .slider-dots {
        display: none !important;
    }
}