/**
 * Responsive Large Screens - Desktop (1920px), 2K (2560px), Ultra Wide
 * Breakpoints: 768px (tablet), 1024px (desktop kecil), 1440px (desktop besar), 1920px+ (ultra wide)
 * Optimizes layout, spacing, and card grids for large displays
 */

:root {
  --container-max: 1320px;
  --container-wide: 1440px;
  --section-padding: clamp(40px, 4vw, 80px);
  --card-gap: clamp(16px, 2vw, 28px);
  --hero-max-width: 1440px;
}

/* ========== CONTAINER - Layar Besar ========== */
@media (min-width: 1200px) {
  .container {
    max-width: var(--container-max) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(20px, 3vw, 40px) !important;
    padding-right: clamp(20px, 3vw, 40px) !important;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: var(--container-wide) !important;
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: min(1600px, 85vw) !important;
    padding-left: clamp(40px, 5vw, 80px) !important;
    padding-right: clamp(40px, 5vw, 80px) !important;
  }
}

/* ========== HERO / BANNER ========== */
@media (min-width: 1024px) {
  .hero-slider-wrapper {
    height: clamp(500px, 55vh, 700px) !important;
  }
  
  .hero-slide-content {
    max-width: var(--hero-max-width) !important;
    margin: 0 auto !important;
    padding: 0 clamp(40px, 5vw, 120px) !important;
    gap: clamp(40px, 5vw, 80px) !important;
  }
  
  .hero-main-title {
    font-size: clamp(42px, 4vw, 72px) !important;
  }
  
  .hero-subtitle {
    font-size: clamp(16px, 1.2vw, 20px) !important;
    margin-bottom: clamp(16px, 1.5vw, 24px) !important;
  }
  
  .hero-cta-button {
    padding: clamp(14px, 1.2vw, 20px) clamp(32px, 3vw, 48px) !important;
    font-size: clamp(16px, 1.1vw, 20px) !important;
  }
}

@media (min-width: 1920px) {
  .hero-slider-wrapper {
    height: clamp(600px, 50vh, 750px) !important;
  }
  
  .hero-slide-content {
    max-width: min(1600px, 80vw) !important;
    padding: 0 6vw !important;
  }
  
  .hero-pamflet-image,
  .hero-laptop-wrapper img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* ========== JADWAL KEGIATAN (Events) ========== */
@media (min-width: 1024px) {
  .events .container {
    max-width: var(--container-wide) !important;
  }
  
  .events .section-padding {
    padding: var(--section-padding) 0 !important;
  }
  
  .events .top-content {
    margin-bottom: clamp(35px, 4vw, 55px) !important;
    padding-top: clamp(35px, 4vw, 55px) !important;
  }
  
  .events .section-title {
    font-size: clamp(36px, 3.5vw, 56px) !important;
  }
  
  .events .section-title-line {
    height: clamp(50px, 5vw, 75px) !important;
  }
}

/* Events Grid - CSS Grid dengan auto-fit */
@media (min-width: 1024px) {
  .events .row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--card-gap) !important;
    margin: 0 !important;
  }
  
  .events .row [class*="col-"] {
    flex: none !important;
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

@media (min-width: 1440px) {
  .events .row {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  
  .events .event-details {
    padding: clamp(18px, 1.5vw, 24px) !important;
  }
  
  .events .event-title {
    font-size: clamp(17px, 1.1vw, 20px) !important;
  }
}

@media (min-width: 1920px) {
  .events .row {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(24px, 2vw, 36px) !important;
  }
}

/* Event Images - Responsive */
.events .event-thumb img,
.events .event-thumb {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 180px !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ========== PELATIHAN & WEBINAR (Popular Courses) ========== */
@media (min-width: 1024px) {
  .popular-courses .container {
    max-width: var(--container-wide) !important;
  }
  
  .popular-courses .section-padding {
    padding: var(--section-padding) 0 !important;
  }
  
  .popular-courses .top-content {
    margin-bottom: clamp(35px, 4vw, 55px) !important;
  }
  
  .popular-courses .section-title {
    font-size: clamp(36px, 3.5vw, 56px) !important;
  }
}

@media (min-width: 1440px) {
  .popular-courses .item-thumb img {
    width: 100% !important;
    height: auto !important;
    min-height: 160px !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  
  .popular-courses .item-details {
    padding: clamp(18px, 1.5vw, 26px) !important;
  }
}

/* ========== BLOG / ARTIKEL (Recent Posts) ========== */
@media (min-width: 1024px) {
  .recent-posts .section-padding {
    padding: var(--section-padding) 0 !important;
  }
  
  .recent-posts .section-title {
    font-size: clamp(36px, 3.5vw, 56px) !important;
  }
  
  .recent-posts .top-content {
    margin-bottom: clamp(35px, 4vw, 55px) !important;
  }
}

.recent-posts .entry-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ========== VIDEO PELATIHAN ========== */
@media (min-width: 1024px) {
  .video-pelatihan-section-modern .container {
    max-width: var(--container-wide) !important;
  }
  
  .video-pelatihan-section-modern .py-5 {
    padding-top: var(--section-padding) !important;
    padding-bottom: var(--section-padding) !important;
  }
  
  .video-title-main-modern {
    font-size: clamp(28px, 2.5vw, 42px) !important;
  }
}

@media (min-width: 1440px) {
  .video-pelatihan-section-modern #video-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--card-gap) !important;
  }
  
  .video-pelatihan-section-modern #video-cards-grid .col-12 {
    flex: none !important;
    max-width: none !important;
    width: auto !important;
  }
}

@media (min-width: 1920px) {
  .video-pelatihan-section-modern #video-cards-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(24px, 2vw, 36px) !important;
  }
}

.video-pelatihan-section-modern .video-thumbnail-new {
  width: 100% !important;
  height: auto !important;
  min-height: 160px !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ========== HEADER / NAVBAR ========== */
@media (min-width: 1024px) {
  .masthead .header-bottom .container,
  .masthead .container {
    max-width: var(--container-wide) !important;
  }
}

@media (min-width: 1920px) {
  .masthead .header-bottom .container,
  .masthead .container {
    max-width: min(1600px, 85vw) !important;
  }
}

/* ========== FOOTER ========== */
@media (min-width: 1024px) {
  .footer-top .container,
  .footer-bottom .container,
  footer .container {
    max-width: var(--container-wide) !important;
  }
}

@media (min-width: 1920px) {
  .footer-top .container,
  .footer-bottom .container,
  footer .container {
    max-width: min(1600px, 85vw) !important;
  }
}

/* ========== GLOBAL - Images & Banners ========== */
section img,
.banner-section img,
.hero-slider-section img,
.events .event-thumb img,
.popular-courses .item-thumb img,
.recent-posts .entry-thumbnail img,
.video-pelatihan-section-modern .video-thumbnail-new {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* ========== BREAKPOINT 768px (Tablet) ========== */
@media (min-width: 768px) and (max-width: 1023px) {
  .container {
    max-width: 720px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ========== BREAKPOINT 1024px (Desktop Kecil) ========== */
@media (min-width: 1024px) and (max-width: 1439px) {
  .events .row {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

/* ========== SPACING - Prevent cramped layout on large screens ========== */
@media (min-width: 1440px) {
  .section-padding {
    padding-top: clamp(50px, 5vw, 90px) !important;
    padding-bottom: clamp(50px, 5vw, 90px) !important;
  }
  
  .box-body,
  .mailbox-messages {
    padding: clamp(20px, 2vw, 36px) !important;
  }
}

/* ========== BANNER SECTIONS - Full width with centered content ========== */
@media (min-width: 1920px) {
  .banner-section .container,
  .hero-slider-section .hero-slide-content {
    max-width: min(1600px, 82vw) !important;
  }
}