/*
 * obesity-mobile.css
 * Mobile overrides for obesity.php — one labeled block per section.
 * Edit each block freely. Loads after styles.css and obesity-schedule.css,
 * so any rule here will override the desktop styles on small screens.
 *
 * Main breakpoint : max-width: 768px  (tablets and phones)
 * Small phones    : max-width: 480px
 */


/* =====================================================================
   SCROLL OFFSET  (stops fixed navbar from covering section titles)
   Adjust the pixel values if the navbar height changes.
   ===================================================================== */
@media (max-width: 768px) {
    html {
        scroll-padding-top: 70px;   /* navbar height + a little breathing room */
    }
}

@media (max-width: 480px) {
    html {
        scroll-padding-top: 65px;
    }
}


/* =====================================================================
   NAVIGATION
   ===================================================================== */
@media (max-width: 768px) {
    .navbar {
        /* e.g. reduce padding on small screens */
    }

    .nav-container {
        padding: 0.8rem 1rem;
    }

    .logo {
        font-size: 0.95rem;
    }

    /* Hamburger menu panel */
    .nav-wrapper {
        top: 55px;
        padding: 1.5rem 1rem;
    }

    .nav-links a {
        font-size: 1.1rem;
        padding: 0.8rem;
    }

    .nav-register {
        display: inline-block;
        margin-top: 0.5rem;
    }
}


/* =====================================================================
   HERO SECTION
   ===================================================================== */
@media (max-width: 768px) {
    .hero {
        padding: 5rem 1.25rem 2.5rem;
        margin-top:50px
    }

    .hero-text h1 {
        font-size: 2.4rem;
        line-height: 1.15;
    }

    .hero-text .tagline {
        font-size: 1.1rem;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Hero image hidden by default on mobile — remove display:none to show it */
    .hero-image {
        display: none;
    }

    .acp-badge {
        width: 55px;
        height: 55px;
        top: 1rem;
        right: 1rem;
        background-size: contain;
    }

    .register-btn {
        padding: 0.8rem 1.8rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-text h1 {
        font-size: 2rem;
    }
}


/* =====================================================================
   ZOOM BANNER
   ===================================================================== */
@media (max-width: 768px) {
    .zoom-banner-container {
        padding: 12px 0;
    }

    .zoom-banner {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 1rem;
    }

    .zoom-banner-content h3 {
        font-size: 15px !important;
    }

    .zoom-banner-content p {
        font-size: 12px !important;
    }

    .quick-zoom-btn {
        padding: 9px 18px !important;
        font-size: 14px !important;
    }
}


/* =====================================================================
   PROGRAM COORDINATOR BAR  (.pc)
   ===================================================================== */
@media (max-width: 768px) {
    div.pc {
        font-size: 18px;
        padding: 0.5rem 0;
    }

    div.pc > .container {
        padding: 0.5rem 1rem;
    }
}


/* =====================================================================
   PARTNERS
   ===================================================================== */
@media (max-width: 768px) {
    #partner-list {
        flex-wrap: wrap;
        gap: 12px;
        padding: 0;
    }

    #partner-list li {
        margin-right: 0;
        width: calc(50% - 8px);
    }

    .partners h2 {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    #partner-list li {
        width: 100%;
    }
}


/* =====================================================================
   WHY US CARDS
   ===================================================================== */
@media (max-width: 768px) {
    .why-us {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin: 1.5rem 0;
    }

    .why-us-card {
        padding: 1.25rem;
    }

    .why-us-card h3 {
        font-size: 1.2rem;
    }
}


/* =====================================================================
   SCHEDULE / CALENDAR  (also see obesity-schedule.css)
   ===================================================================== */
@media (max-width: 768px) {
    .sched-cal-controls {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .sched-month-jump {
        width: 100%;
        margin-top: 0.3rem;
    }

    /* Calendar grid cells — minimum size so days don't collapse */
    .sched-cal-grid {
        padding: 0.25rem;
    }

    .sched-cal-grid .cell {
        min-height: 48px;
        padding: 0.2rem;
    }

    .sched-cal-grid .cell .mini-title {
        font-size: 0.6rem;
    }

    /* Event list rows — stack all columns */
    .event-line {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .event {
        padding: 0.6rem;
    }

    .event-actions {
        flex-wrap: wrap;
        gap: 0.3rem;
    }

    .btn {
        font-size: 0.85rem;
        padding: 0.4rem 0.55rem;
    }
}

@media (max-width: 480px) {
    .sched-cal-grid .cell {
        min-height: 38px;
    }
}


/* =====================================================================
   VIDEO ARCHIVE TABLE
   ===================================================================== */
@media (max-width: 768px) {
    /* Convert table to stacked cards on mobile */
    .video-archive-table thead {
        display: none; /* hide column headers */
    }

    .video-archive-table,
    .video-archive-table tbody,
    .video-archive-table tr,
    .video-archive-table td {
        display: block;
        width: 100%;
    }

    .video-archive-table tr {
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 4px 0;
        background: #fff;
    }

    .video-archive-table td {
        padding: 6px 12px;
        border-bottom: none;
    }

    /* Add a label before each value using data attributes */
    .video-archive-table td.col-date::before  { content: "Date: "; font-weight: 700; }
    .video-archive-table td.col-title::before { content: "Video: "; font-weight: 700; }

    .video-archive-table tr:nth-child(even) td {
        background: transparent !important; /* card handles bg */
    }
}


/* =====================================================================
   EDUCATIONAL LINKS  (#links)
   ===================================================================== */
@media (max-width: 768px) {
    #links ul {
        padding-left: 0;
    }

    #links ul li {
        margin-bottom: 1.2rem;
    }

    #links ul li a {
        font-size: 15px !important;
    }
}


/* =====================================================================
   CONTACT
   ===================================================================== */
@media (max-width: 768px) {
    .contact {
        padding: 2rem 1.25rem;
        margin: 1.5rem 0;
    }

    .contact h2 {
        font-size: 1.8rem;
    }

    .contact-info {
        font-size: 1rem;
    }

    .details-btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.95rem;
    }
}


/* =====================================================================
   REGISTRATION / LOGIN MODAL
   ===================================================================== */
@media (max-width: 768px) {
    .modal-content {
        width: 96%;
        margin: 2% auto;
    }

    .modal-header {
        padding: 1.25rem;
    }

    .modal-header h2 {
        font-size: 1.3rem;
    }

    .modal-body {
        padding: 1.25rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .submit-btn {
        font-size: 1rem;
        padding: 0.85rem;
    }
}


/* =====================================================================
   VIDEO POPUP MODAL
   ===================================================================== */
@media (max-width: 768px) {
    .video-modal {
        padding: 8px;
        align-items: flex-start;
        padding-top: 15px;
    }

    .video-modal-content {
        max-width: 100%;
        max-height: 95vh;
    }

    .video-modal-header {
        padding: 10px 14px;
    }

    .video-modal-header h3 {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .video-modal {
        padding: 4px;
        padding-top: 8px;
    }

    .video-modal-header h3 {
        font-size: 0.85rem;
        line-height: 1.2;
    }
}


/* =====================================================================
   GENERAL CONTAINER / SECTION SPACING
   ===================================================================== */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }

    .section {
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .section h2 {
        font-size: 1.5rem;
    }
}