/* ==========================================================================
   mobile.css — Comprehensive Mobile Optimization for AIC-GBU Incubation Website
   Target: 320px – 768px screen widths
   Strategy: Additive only — all rules inside @media queries, desktop untouched
   ========================================================================== */

/* ==========================================================================
   1. Global Resets & Overflow Prevention
   ========================================================================== */

html,
body {
  overflow-x: hidden !important;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

/* ==========================================================================
   2. Fix: .vc_bag fixed width (causes horizontal scroll on any screen)
   ========================================================================== */

.vc_bag {
  width: auto !important;
  max-width: 100% !important;
}

/* ==========================================================================
   3. Fix: .ticker-title 2500px hardcoded width
   ========================================================================== */

.ticker-title {
  width: max-content !important;
  max-width: none;
}

/* ==========================================================================
   4. Breakpoint: ≤ 991px (Tablets & large mobile)
   ========================================================================== */

@media (max-width: 991px) {
  /* Reduce section padding for tablets */
  .main_page,
  .regis {
    padding-top: 100px !important;
  }

  /* Announcement detail: stack columns */
  .ann-detail-wrapper .row {
    flex-direction: column !important;
  }

  .ann-detail-wrapper .col-lg-6 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Recruitment page hero fonts */
  .rec-hero h1,
  .rec-page-title {
    font-size: clamp(24px, 5vw, 36px) !important;
  }
}

/* ==========================================================================
   5. Breakpoint: ≤ 768px (Tablets & phones)
   ========================================================================== */

@media (max-width: 768px) {

  /* --- 5a. Fix Inline Ticker Tip (overrides index.html inline styles) --- */
  .ticker-tip {
    width: calc(100% - 20px) !important;
    margin: 10px auto !important;
    padding: 10px 14px !important;
    transform: none !important;
    border-radius: 12px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .ticker-tip-info {
    margin-left: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
  }

  #blinking-button {
    display: inline-flex !important;
    margin: 6px auto 0 !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    min-height: 36px !important;
  }

  /* --- 5b. Hero / Intro Section --- */
  #intro,
  #intro .carousel-item {
    min-height: 60vh !important;
    height: auto !important;
  }

  #intro .carousel-container {
    padding: 90px 16px 50px !important;
  }

  #intro .carousel-content {
    width: 100% !important;
    text-align: left !important;
  }

  #intro h2 {
    font-size: clamp(24px, 7vw, 38px) !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }

  #intro p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
    width: 100% !important;
  }

  #intro .carousel-content::after {
    font-size: 12px !important;
    padding: 12px 14px !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  /* Hero buttons stack on very narrow */
  #intro .btn-get-started {
    width: 100% !important;
    max-width: 280px !important;
    justify-content: center !important;
  }

  /* --- 5c. Stats / Key Impact Section — force 2 per row on mobile --- */
  #stats-impact {
    padding: 24px 0 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  #stats-impact .section-header h3 {
    font-size: 1.25rem !important;
  }

  /* Override Bootstrap grid entirely — use CSS Grid for guaranteed 2-per-row */
  #stats-impact .row.counters {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    /* Cancel Bootstrap row negative margins */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Reset Bootstrap col padding/width overrides */
  #stats-impact .row.counters > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  .stat-card {
    padding: 14px 10px !important;
    height: 100% !important;
  }

  .stat-number {
    font-size: 1.5rem !important;
  }

  .stat-label {
    font-size: 0.85rem !important;
  }

  .stat-desc {
    font-size: 0.75rem !important;
  }

  /* --- 5d. Section Headers --- */
  .section-header h3 {
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.2 !important;
  }

  .section-header p {
    font-size: 14px !important;
    padding: 0 4px !important;
  }

  /* --- 5e. About / VC Message Section --- */
  .client_section .box,
  .client_section #message.box {
    flex-direction: column !important;
    text-align: center !important;
    padding: 24px 16px !important;
  }

  .client_section .box .img-box,
  .client_section #message.box .img-box {
    width: 130px !important;
    height: 130px !important;
    margin: 0 auto 16px !important;
  }

  /* --- 5f. Vision / Mission Cards --- */
  #about .about-col {
    margin-bottom: 30px !important;
  }

  #about .about-col .img img {
    height: 180px !important;
  }

  /* --- 5g. Speaker / Team Cards --- */
  .card {
    height: auto !important;
    min-height: 280px !important;
  }

  .spea_con {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* --- 5h. Startup Cards --- */
  .startup-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* --- 5i. Portfolio Filter Pills --- */
  #portfolio #portfolio-flters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    padding: 0 8px !important;
  }

  #portfolio #portfolio-flters li {
    margin: 0 !important;
    padding: 8px 14px !important;
    font-size: 11px !important;
  }

  /* --- 5j. Modal --- */
  .modal {
    padding: 12px !important;
    align-items: flex-start !important;
    padding-top: 80px !important;
  }

  .modal-content {
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 110px) !important;
    padding: 20px 16px !important;
    overflow-y: auto !important;
    margin: 0 auto !important;
  }

  /* --- 5k. Footer --- */
  #footer .footer-top {
    padding: 40px 16px 20px !important;
  }

  #footer .footer-top .footer-info,
  #footer .footer-top .footer-links,
  #footer .footer-top .footer-contact {
    margin-bottom: 20px !important;
  }

  #footer .footer-top .social-links {
    margin-top: 12px !important;
  }

  #footer .footer-top .social-links a {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
    padding: 9px 0 !important;
  }

  #footer .copyright {
    padding: 16px 12px !important;
    font-size: 12px !important;
    text-align: center !important;
  }

  /* --- 5l. Contact Section --- */
  #contact {
    padding: 40px 0 !important;
  }

  #contact .contact-info i {
    font-size: 36px !important;
  }

  #contact .form input,
  #contact .form textarea {
    font-size: 16px !important; /* Prevent iOS zoom on focus */
    width: 100% !important;
  }

  #contact .form button[type="submit"] {
    width: 100% !important;
    justify-content: center !important;
  }

  /* --- 5m. Services Section --- */
  #services .box {
    margin-bottom: 20px !important;
  }

  #services .icon {
    float: none !important;
    display: block !important;
    margin-bottom: 10px !important;
  }

  #services .title,
  #services .description {
    margin-left: 0 !important;
  }

  /* --- 5n. Idea Submission CTA --- */
  .idea-submission-cta {
    padding: 10px 12px !important;
  }

  .idea-submission-link {
    width: 100% !important;
    max-width: 340px !important;
    font-size: 13px !important;
  }

  /* --- 5o. Announcement Banner --- */
  .announcement-banner {
    padding: 6px 0 !important;
  }

  .announcement-inner {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 10px !important;
  }

  .announcement-ticker-wrap {
    width: 100% !important;
    order: 1 !important;
  }

  .announcement-right-controls {
    order: 2 !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .announcement-item {
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
  }

  .announcement-text {
    font-size: 12px !important;
  }

  .announcement-btn {
    font-size: 11px !important;
    padding: 4px 10px !important;
    min-height: 30px !important;
  }

  /* --- 5p. Back to Top --- */
  .back-to-top {
    right: 10px !important;
    bottom: 10px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 14px !important;
  }

  /* --- 5q. Section padding reduction --- */
  section,
  .client_section,
  .about_section,
  .server_section {
    padding: 48px 0 !important;
  }

  .main_page,
  .regis {
    padding-top: 88px !important;
    padding-bottom: 48px !important;
  }

  /* --- 5r. About/Server section image stacking --- */
  .about_section .img-box,
  .server_section .img-box {
    margin-bottom: 20px !important;
    width: 100% !important;
    text-align: center !important;
  }

  .about_section .img-box img,
  .server_section .img-box img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* --- 5s. Heading sizes --- */
  .heading_container h2,
  .server_section .detail-box h2 {
    font-size: clamp(22px, 6vw, 30px) !important;
  }
}

/* ==========================================================================
   6. Breakpoint: ≤ 576px (Small phones)
   ========================================================================== */

@media (max-width: 576px) {

  /* --- Announcement Pages --- */
  .ann-hero {
    padding: 40px 16px !important;
    margin-top: 6rem !important;
  }

  .ann-hero h1 {
    font-size: clamp(20px, 6vw, 28px) !important;
  }

  .ann-hero p {
    font-size: 14px !important;
  }

  /* Announcement detail card */
  .ann-detail-wrapper {
    margin-top: 6rem !important;
    margin-bottom: 30px !important;
  }

  .ann-detail-card {
    padding: 20px 16px !important;
    border-radius: 12px !important;
  }

  .ann-detail-title {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.3 !important;
  }

  .ann-detail-meta {
    font-size: 12px !important;
  }

  /* CoE page */
  .coe-hero,
  .coe-page-hero {
    padding: 40px 16px !important;
    margin-top: 6rem !important;
  }

  .coe-hero h1,
  .coe-page-hero h1 {
    font-size: clamp(20px, 6vw, 28px) !important;
  }

  /* Cards on announcements page */
  .ann-card {
    padding: 18px 14px !important;
  }

  .ann-card h3,
  .rec-card h3,
  .rec-notice-card h3 {
    font-size: clamp(15px, 4.5vw, 18px) !important;
  }

  /* Portfolio items */
  #portfolio .portfolio-item figure {
    height: 180px !important;
  }

  /* Section headers */
  .section-header h3 {
    font-size: clamp(20px, 6vw, 26px) !important;
  }

  /* Form inputs prevent iOS zoom */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Stats grid on very small screens */
  #stats-impact .row {
    gap: 8px !important;
  }

  .stat-number {
    font-size: 1.3rem !important;
  }

  /* Buttons full width on smallest screens */
  .ann-detail-actions .btn,
  .ann-detail-actions a {
    width: 100% !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
    margin-right: 0 !important;
  }
}

/* ==========================================================================
   7. Breakpoint: ≤ 414px (iPhone standard and common Android)
   ========================================================================== */

@media (max-width: 414px) {
  /* Reduce more aggressive hero heading size */
  #intro h2 {
    font-size: clamp(22px, 7vw, 30px) !important;
  }

  /* Announcement badge pill smaller */
  .ann-badge-pill,
  .ann-detail-badge {
    font-size: 10px !important;
    padding: 4px 10px !important;
  }

  /* Logo in header smaller */
  #header #logo h1 {
    font-size: 14px !important;
  }

  #header #logo h1 a::before {
    width: 34px !important;
    height: 34px !important;
  }

  #header #logo h1 a {
    padding-left: 42px !important;
    min-height: 36px !important;
  }

  /* Modal even more compact */
  .modal-content {
    padding: 16px 12px !important;
  }

  /* Footer copyright text */
  #footer .copyright {
    font-size: 11px !important;
  }
}

/* ==========================================================================
   8. Breakpoint: ≤ 360px (Very small Android phones)
   ========================================================================== */

@media (max-width: 360px) {
  #intro h2 {
    font-size: 20px !important;
  }

  .section-header h3 {
    font-size: 19px !important;
  }

  .stat-number {
    font-size: 1.2rem !important;
  }

  .stat-label {
    font-size: 0.78rem !important;
  }

  /* Even smaller card padding */
  .ann-card,
  .stat-card {
    padding: 12px 10px !important;
  }

  /* Hamburger button remains accessible */
  #mobile-nav-toggle {
    width: 40px !important;
    height: 40px !important;
    top: 12px !important;
    right: 12px !important;
  }
}

/* ==========================================================================
   9. Breakpoint: ≤ 320px (Galaxy S5, iPhone SE 1st gen)
   ========================================================================== */

@media (max-width: 320px) {
  #header {
    padding: 8px 10px !important;
  }

  #header #logo h1 {
    font-size: 12px !important;
  }

  #header #logo h1 a {
    padding-left: 38px !important;
  }

  #header #logo h1 a::before {
    width: 30px !important;
    height: 30px !important;
  }

  #intro h2 {
    font-size: 18px !important;
  }

  #intro p {
    font-size: 13px !important;
  }

  .section-header h3 {
    font-size: 17px !important;
  }

  .stat-number {
    font-size: 1.1rem !important;
  }

  /* Stat cards: keep 2-per-row even at 320px but reduce padding */
  .stat-card {
    padding: 10px 8px !important;
  }

  .stat-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  /* Footer minimal */
  #footer .footer-top {
    padding: 28px 12px 16px !important;
  }

  /* Announcement banner text */
  .announcement-text {
    font-size: 11px !important;
  }

  .announcement-btn {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
}

/* ==========================================================================
   10. Touch Friendliness — minimum 44×44px touch targets
   ========================================================================== */

@media (max-width: 768px) {
  /* All buttons and links */
  a[href],
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  input[type="reset"] {
    min-height: 36px;
  }

  /* Nav links */
  #mobile-nav ul li a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 18px !important;
  }

  /* CTA buttons */
  .btn-get-started,
  .link-btn,
  .announcement-btn,
  .ann-detail-actions a,
  .ann-detail-actions .btn {
    min-height: 44px !important;
  }

  /* Close/control buttons on modals */
  .modal-content .close,
  .modal-content .close_about,
  .modal-content .close_host,
  .modal-content .close_cour {
    font-size: 24px !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }
}

/* ==========================================================================
   11. Accessibility — Focus States (visible across all widths)
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #2563EB !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* ==========================================================================
   12. Performance — Reduce heavy animations on mobile
   ========================================================================== */

@media (max-width: 768px) {
  /* 3D background canvas: reduce opacity on mobile (saves GPU) */
  #bg-canvas-3d {
    opacity: 0.4 !important;
  }

  /* Disable wow.js bounce animations on mobile (can cause layout reflow) */
  .wow {
    visibility: visible !important;
    animation: none !important;
  }
}

/* ==========================================================================
   13. Recruitment Page — Responsive Fixes
   ========================================================================== */

@media (max-width: 768px) {
  /* Recruitment hero/header section */
  .rec-hero,
  .recruitment-hero {
    padding: 48px 16px !important;
  }

  /* Recruitment cards grid */
  .rec-card {
    margin-bottom: 16px !important;
  }

  /* Position/job cards */
  .rec-poster-card,
  .rec-notice-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   14. Gallery Page — Responsive Fixes
   ========================================================================== */

@media (max-width: 576px) {
  /* Gallery grid tighter on small screens */
  #portfolio .portfolio-item {
    min-height: auto !important;
    margin-bottom: 16px !important;
  }

  /* Lightbox close button larger on touch */
  .lb-close {
    width: 44px !important;
    height: 44px !important;
    font-size: 28px !important;
  }
}

/* ==========================================================================
   15. CoE Page — Center of Excellence
   ========================================================================== */

@media (max-width: 768px) {
  /* CoE card grid */
  .coe-card-grid,
  .coe-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .coe-card {
    padding: 20px 16px !important;
  }

  .coe-card h3,
  .coe-card .card-title {
    font-size: clamp(16px, 5vw, 20px) !important;
  }
}

/* ==========================================================================
   16. Table Responsiveness — horizontal scroll wrapper
   ========================================================================== */

@media (max-width: 768px) {
  /* Wrap any data tables for horizontal scrolling */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  /* Admin tables (portal) */
  .table-responsive {
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ==========================================================================
   17. Lazy-load Image Aspect Ratio Placeholder
   ========================================================================== */

img[loading="lazy"] {
  content-visibility: auto;
}

/* ==========================================================================
   18. Safe Area Insets (iPhone X+ notch support)
   ========================================================================== */

@supports (padding: max(0px)) {
  #header {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  #footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  #mobile-nav {
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }
}