/* =====================
   ASIAMS MOBILE-FIRST
   ===================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Arial, Verdana, sans-serif;
  font-size: 15px;
  background: #f5f5f5;
  color: #222;
}

a { text-decoration: none; color: #222; }
a:hover { color: #FA3178; }
img { max-width: 100%; height: auto; display: block; }

/* ---- HEADER ---- */
#site-header {
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 16px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
}

#site-logo { font-size: 28px; font-weight: 500; }
#site-logo .pink { color: #FA3178; }

#hamburger {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #444;
  padding: 4px;
}

/* ---- MOBILE NAV DRAWER ---- */
#nav-drawer {
  display: none;
  flex-direction: column;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  padding: 8px 0;
}

#nav-drawer.open { display: flex; }

#nav-drawer a {
  padding: 12px 20px;
  font-size: 15px;
  color: #222;
  border-bottom: 0.5px solid #f5f5f5;
}

#nav-drawer a:hover { color: #FA3178; background: #fdf0f5; }

.nav-sub a {
  padding-left: 36px !important;
  font-size: 13px !important;
  color: #888 !important;
}

/* ---- BOTTOM NAV ---- */
#bottom-nav {
  display: flex;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  position: sticky;
  bottom: 0;
  z-index: 1000;
}

#bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  font-size: 10px;
  color: #999;
  gap: 3px;
}

#bottom-nav a.active,
#bottom-nav a:hover { color: #FA3178; }

#bottom-nav i { font-size: 20px; }

/* ---- SECTION HEADERS ---- */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 8px;
  background: #fff;
}

.section-header h2 {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #222;
  border-left: 3px solid #FA3178;
  padding-left: 8px;
}

.section-header a {
  font-size: 11px;
  color: #FA3178;
}

/* ---- HERO VIDEO ---- */
#hero-video {
  background: #1a1a1a;
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

#hero-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.75));
  padding: 16px;
}

.hero-cat {
  font-size: 10px;
  color: #FA3178;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.hero-title {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
}

/* ---- VIDEO GRID ---- */
#video-section { background: #fff; padding-bottom: 12px; }

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 16px;
  align-items: start;
}

.video-grid .video-card {
  width: 100%;
  max-width: 100%;
}

.video-card { border-radius: 8px; overflow: hidden; background: #f5f5f5; }

.video-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: #2a2a2a;
  overflow: hidden;
}

.video-thumb img { width: 100%; height: 100%; object-fit: cover; }

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FA3178;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-btn i { font-size: 14px; color: #fff; margin-left: 2px; }

.video-info { padding: 8px; background: #fff; }
.video-title { font-size: 11px; font-weight: 500; color: #222; line-height: 1.3; }
.video-source { font-size: 10px; color: #FA3178; margin-top: 3px; }

/* ---- PODCAST SECTION ---- */
#podcast-section { background: #fff; padding-bottom: 12px; }

.podcast-list { padding: 0 16px; }

.podcast-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 0.5px solid #f0f0f0;
  align-items: center;
}

.podcast-item:last-child { border-bottom: none; }

.podcast-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  aspect-ratio: 1/1;
  background: #FA3178;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.podcast-thumb i { font-size: 22px; color: #fff; }
.podcast-thumb.dark { background: #222; }

.podcast-info { flex: 1; min-width: 0; }
.podcast-title { font-size: 13px; font-weight: 500; color: #222; line-height: 1.3; }
.podcast-meta { font-size: 11px; color: #999; margin-top: 3px; }

/* ---- ARTICLES GRID ---- */
#articles-section { background: #fff; padding-bottom: 16px; }

.articles-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 16px;
}

.article-card { border-radius: 8px; overflow: hidden; }

.article-img {
  aspect-ratio: 3/2;
  background: #eee;
  overflow: hidden;
}

.article-img img { width: 100%; height: 100%; object-fit: cover; }

.article-body { padding: 6px 0; }
.article-cat { font-size: 9px; color: #FA3178; text-transform: uppercase; letter-spacing: 0.5px; }
.article-title { font-size: 12px; font-weight: 500; color: #222; line-height: 1.35; margin-top: 3px; }

/* ---- DIVIDER ---- */
.section-divider { height: 8px; background: #f5f5f5; }

/* ---- HIDE COMMENTS ---- */
#comments, .comments, p.comment-note, 
div#comment-intro { display: none !important; }

/* ---- DESKTOP OVERRIDES ---- */
@media (min-width: 768px) {
  #site-header { padding: 0 32px; }
  #hamburger { display: none; }
  #bottom-nav { display: none; }

  #desktop-nav {
    display: flex;
    gap: 16px;
    align-items: center;
    overflow: visible;
    white-space: nowrap;
  }

  #desktop-nav a {
    font-size: 13px;
    color: #444;
    font-weight: 500;
    letter-spacing: 1px;
  }

  #desktop-nav a:hover { color: #FA3178; }

  #page-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    padding: 24px 24px 0;
  }

  #main-content { min-width: 0; }

  #sidebar {
    display: block;
  }

  #hero-video { border-radius: 10px; overflow: hidden; }

  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .articles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  #desktop-nav { display: none; }
  #sidebar { display: none; }
}