/* ============================================================
   ALIVE x MIMV — shared responsive stylesheet
   Retrofits the inline-style pages with breakpoint behavior via
   utility classes. Inline styles set the desktop look; these
   rules use !important only to win against those inline styles
   at the two breakpoints below.
     - tablet:  max-width 1024px
     - mobile:  max-width 600px
   Linked page-by-page (currently just Main.dc.html) so rollout
   to the rest of the site can happen incrementally — the classes
   here are written generically so other pages can reuse them
   as-is once linked.
   ============================================================ */

/* ---------- generic section padding ---------- */
@media (max-width: 600px) {
  .rpad { padding-left: 20px !important; padding-right: 20px !important; padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* ---------- generic responsive grids ---------- */
@media (max-width: 1024px) {
  .rgrid-2 { grid-template-columns: 1fr !important; gap: 32px !important; }
  .rgrid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .rgrid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  /* grid items default to min-width:auto, which lets a wide image-slot
     placeholder force its track past the container; this makes tracks
     actually respect the 1fr/repeat() sizing instead of overflowing
     (silently, since the page root has overflow-x:hidden). */
  .rgrid-2 > *, .rgrid-3 > *, .rgrid-4 > * { min-width: 0 !important; }
}
@media (max-width: 600px) {
  .rgrid-3 { grid-template-columns: 1fr !important; }
  .rgrid-4 { grid-template-columns: 1fr !important; }
  /* trainer photo grid keeps 2-up on mobile instead of the generic 1-up */
  .trainer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px 12px !important; }
  .trainer-photo-circle { width: 104px !important; height: 104px !important; margin-bottom: 12px !important; }
  /* video thumbnail grid keeps 2-up on mobile instead of the generic 1-up */
  .video-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px 8px !important; }
  .video-duration-badge { font-size: 9px !important; padding: 1px 4px !important; right: 4px !important; bottom: 4px !important; }
  .video-title-text { font-size: 11px !important; line-height: 1.35 !important; margin-top: 6px !important; }
  /* alternating text+image feature panels (e.g. AliveAbout "왜 ALIVE인가") */
  .why-alive-panel { padding: 28px 20px !important; gap: 20px !important; }
  /* MIMV about page: alumni highlight panel + instructor profile panels */
  .mimv-alumni-panel > div { padding: 28px 20px !important; }
  .mimv-instructor-panel { padding: 28px 20px !important; gap: 20px !important; }
  .rphoto.mimv-instructor-photo { height: 320px !important; }
}

/* ---------- header / nav ---------- */
@media (max-width: 768px) {
  .site-header { flex-wrap: wrap !important; padding: 14px 16px !important; gap: 10px !important; }
  .site-logo { font-size: 15px !important; }
  .site-nav {
    order: 3 !important;
    width: 100% !important;
    flex: none !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    gap: 20px !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav-link { white-space: nowrap !important; font-size: 12px !important; }
  .nav-cta { font-size: 11px !important; padding: 8px 14px !important; white-space: nowrap !important; }
}

/* ---------- modal cards ---------- */
@media (max-width: 600px) {
  .consult-card { padding: 24px !important; }
  .video-modal-card { max-width: 100% !important; }
}

/* ---------- hero ---------- */
@media (max-width: 1024px) {
  .hero-wrap { height: auto !important; }
  .hero-section { padding: 64px 32px 120px !important; }
  .hero-photo { width: 280px !important; height: 280px !important; }
  .hero-heading { font-size: 40px !important; }
}
@media (max-width: 600px) {
  .hero-wrap { border-radius: 0 0 24px 24px !important; }
  .hero-section { padding: 48px 20px 168px !important; }
  .hero-row { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
  .hero-text { max-width: 100% !important; }
  .hero-heading { font-size: 28px !important; margin-bottom: 14px !important; }
  .hero-photo { width: 100% !important; height: 220px !important; }
  .hero-cta-row { flex-wrap: wrap !important; margin-bottom: 32px !important; }
  .hero-cta-btn { flex: 1 1 auto !important; justify-content: center !important; }
  .hero-stats { gap: 20px !important; }
  .hero-nav-wrap { padding: 0 10px !important; bottom: 24px !important; gap: 4px !important; flex-wrap: nowrap !important; }
  .hero-nav-btn { padding: 5px 4px !important; font-size: 8px !important; white-space: nowrap !important; flex: 1 1 0; text-align: center; }
}

/* ---------- campus photos ---------- */
@media (max-width: 600px) {
  .campus-photo-grid { grid-template-columns: 1fr !important; }
  .campus-img-main { height: 240px !important; }
  .campus-img-sub { height: 160px !important; }
}

/* ---------- trainers ---------- */
@media (max-width: 600px) {
  .trainer-link-wrap { text-align: left !important; }
  .trainer-photo { height: 280px !important; }
}

/* ---------- audition table ---------- */
@media (max-width: 600px) {
  .audition-table-wrap { overflow-x: hidden !important; max-width: 100% !important; }
  .audition-table-wrap table { table-layout: fixed !important; width: 100% !important; }
  .aud-col-cat { width: 68px !important; text-align: center !important; padding-left: 4px !important; padding-right: 4px !important; }
  .aud-col-cat span { display: inline-block; white-space: nowrap; padding: 4px 6px !important; box-sizing: border-box; }
  .aud-col-title { padding-left: 14px !important; overflow: hidden; }
  .aud-col-title a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .aud-col-date { display: none !important; }
}

/* ---------- footer ---------- */
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-col { padding: 0 !important; }
  .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .site-footer { padding: 40px 20px 24px !important; }
}

/* ============================================================
   Sub-page utilities — shared by ALIVE/MIMV about|pricing|location,
   Campus (hub + 4 detail pages), Trainer, Audition, Videos.
   ============================================================ */

/* ---------- hero/intro heading ---------- */
@media (max-width: 1024px) {
  .rhero-h1 { font-size: 32px !important; }
}
@media (max-width: 600px) {
  .rhero-h1 { font-size: 26px !important; }
}

/* ---------- sub-nav pill bar ---------- */
@media (max-width: 600px) {
  .subnav-bar { padding: 24px 16px 8px !important; gap: 8px !important; }
  .subnav-bar a { padding: 9px 16px !important; font-size: 12px !important; }
}

/* ---------- individual fixed-height photo/map/image-slot ---------- */
@media (max-width: 1024px) {
  .rphoto { height: 260px !important; }
}
@media (max-width: 600px) {
  .rphoto { height: 200px !important; }
  /* AliveGreeting.dc.html CEO portrait — the generic 200px crop cuts off the
     face on a portrait photo; give this one specifically more room. */
  .rphoto.greeting-ceo-photo { height: 340px !important; }
}

/* ---------- campus detail page full-bleed slideshow ---------- */
@media (max-width: 1024px) {
  .rslideshow { height: 360px !important; }
}
@media (max-width: 600px) {
  .rslideshow { height: 240px !important; }
}

/* ---------- pricing table (AlivePricing) ---------- */
@media (max-width: 600px) {
  .price-table { table-layout: fixed !important; width: 100% !important; font-size: 12px !important; }
  .price-table th, .price-table td { padding: 12px 4px !important; }
  .price-table th:nth-child(3), .price-table td:nth-child(3) { width: 84px !important; }
}

/* ---------- audition board (full list page) ---------- */
@media (max-width: 600px) {
  .audition-board-table { table-layout: fixed !important; width: 100% !important; }
  .abd-col-cat { width: 56px !important; padding: 10px 4px !important; }
  .abd-col-date { width: 76px !important; padding: 10px 4px !important; font-size: 10px !important; }
  .abd-col-title { padding: 10px 4px !important; }
}

/* ---------- campus map box (CampusJamsil/Suwon "위치 및 운영시간") ---------- */
@media (max-width: 1024px) {
  .campus-map-box { height: 320px !important; }
}
@media (max-width: 600px) {
  .campus-map-box { height: 260px !important; }
}