/* =========================
   FintechNewsPH — Responsive Breakpoints
   Consolidated: removed 3 duplicate @media(max-width:1000px) blocks,
   fixed broken clamp nav positioning, added new feature responsive styles.
   ========================= */

/* ---------- TABLET & BELOW: ≤ 1000px ---------- */
@media (max-width: 1000px) {

  /* --- Layout --- */
  .container { max-width: 100%; padding: 0 20px; }
  .search_holder { flex-direction: column; }
  .search_holder form { width: 100%; max-width: 100%; }
  .search_holder input[type="text"] { height: 45px; font-size: 0.9rem; padding: 0 2.5rem 0 2.5rem; background-position: 0.8rem center; background-size: 1rem; }
  .search_holder button { right: 0.8rem; font-size: 1rem; }

  /* --- Header --- */
  .header_holder { flex-direction: row; gap: 10px; }
  .fintech_logo img { max-width: 120px; }
  .news_letter_holder .btn { width: 120px; height: 40px; font-size: 0.9rem; line-height: 40px; }

  /* --- Navigation: hide desktop links, show hamburger --- */
  .nav_menu { display: none; }
  .nav_toggle { display: flex; align-items: center; }
  .owl-nav { display: none; }

  /* --- Mobile nav panel (fullscreen below header) --- */
  .nav_menu.open {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    position: fixed;
    top: 0;            /* full viewport; JS sets padding-top if needed */
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    padding: 80px 18px 24px; /* 80px ≈ header height */
    background: var(--white-text);
    z-index: 1200;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 20px 40px rgba(10,20,30,0.08);
    animation: fadeIn 0.3s ease-in-out;
  }
  body.dark-mode .nav_menu.open { background: #1a1a1a; }

  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  /* staggered list item animations */
  .nav_menu.open > li {
    opacity: 0; transform: translateY(20px);
    animation: slideUpFade 0.4s ease forwards;
  }
  .nav_menu.open > li:nth-child(1) { animation-delay: 0.05s; }
  .nav_menu.open > li:nth-child(2) { animation-delay: 0.1s; }
  .nav_menu.open > li:nth-child(3) { animation-delay: 0.15s; }
  .nav_menu.open > li:nth-child(4) { animation-delay: 0.2s; }
  .nav_menu.open > li:nth-child(5) { animation-delay: 0.25s; }
  .nav_menu.open > li:nth-child(6) { animation-delay: 0.3s; }
  .nav_menu.open > li:nth-child(7) { animation-delay: 0.35s; }

  @keyframes slideUpFade {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* touch-friendly link targets (min 48px) */
  .nav_menu.open li { width: 100%; text-align: center; }
  .nav_menu.open li a {
    display: block;
    padding: 16px 12px;        /* 48px+ touch target height */
    min-height: 48px;
    font-size: 1.15rem;
    width: 100%;
    border-radius: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 0.2s ease, color 0.2s ease;
  }
  .nav_menu.open li a:hover,
  .nav_menu.open li a:focus { background: rgba(0,102,195,0.06); color: var(--blue-light); }
  .nav_menu.open li a::after { display: none; } /* hide underline animation in mobile nav */

  /* sub-menu in mobile */
  .nav_menu.open .sub-menu { background: rgba(0,0,0,0.02); margin: 4px 12px; border-radius: 8px; padding: 8px; }
  .nav_menu.open .sub-menu a { font-size: 1rem; padding: 12px 15px; }

  /* close affordance */
  .nav_toggle.active .menu-label { font-weight: 700; color: var(--blue-light); }

  /* --- Latest & Trend --- */
  .latest_and_trend_flex_holder { display: flex; flex-direction: column; }
  .latest { width: 100%; }
  .trend { width: 100%; }
  .latest_image img { height: 300px; }
  .latest_text h2 { font-size: 1.6rem; }
  .latest_text p { font-size: 0.9rem; -webkit-line-clamp: 2; line-clamp: 2; }
  .trend_info_holder { align-items: center; }
  .trend_content { flex-direction: row; } /* keep row on tablet, not column */
  .trend_content { width: 100%; }
  .trend_image { width: 110px; flex: 0 0 110px; }
  .trend_image img { width: 110px; height: 80px; object-fit: cover; }
  .trend .trend_contents { flex-wrap: wrap; padding: 0 10px; max-height: none; }
  .trend_view_all a { display: unset; }
  .trend_content .trend_text h2 { font-size: 1.2rem; }
  #latest_and_trend_section_holder { padding: 16px 0; }
  #latest_and_trend_section_holder .trend .trend_contents .trend_image img { width: 100%; height: 100%; object-fit: contain; }

  /* --- Marquee --- */
  .marquee-track h1 { font-size: 1rem; margin: 0 1.5rem; }

  /* --- Featured Carousel --- */
  .owl-carousel .carousel_item img { height: 200px; }
  .owl-carousel .carousel_item h3 { font-size: 1.2rem; }
  .owl-carousel .carousel_item p { font-size: 0.8rem; }

  /* --- Dynamic Section --- */
  .content_holder { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .content img { height: 140px; }
  .content_text h3 { font-size: 1rem; }

  /* --- Video --- */
  .video_grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

  /* --- Opinion --- */
  .opinion_grid { grid-template-columns: repeat(2, 1fr); }
  .opinion_item img { height: 150px; }

  /* --- Footer --- */
  .footer_nav { display: flex; flex-wrap: wrap; align-items: center; align-content: center; text-align: center; }
  .newsletter_form { max-width: 100%; }
  .social_links a { font-size: 1.3rem; }

  /* --- Author info (single pages) --- */
  .author_info h3 { font-weight: bold; }
  .author_info h3 a { font-size: clamp(0.875rem, 0.617vw + 0.759rem, 1.5rem); color: var(--blue-dark); text-decoration: none; }
  .author_info h3 a:hover { text-decoration: underline; }
  .author_info p { font-size: 15px; }

  .related_posts { display: none !important; }

  /* --- NEW FEATURES: responsive --- */
  .category-pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .cookie-consent__inner { flex-direction: column; text-align: center; gap: 10px; }
  .breadcrumb-list { font-size: 13px; overflow-x: auto; white-space: nowrap; }
  .load-more-wrapper { padding: 16px 0; }
  .load-more-btn { width: 100%; max-width: 320px; }
  .back-to-top { bottom: 20px; right: 20px; width: 44px; height: 44px; }
}

/* lock body scroll when mobile menu is open */
body.nav-open { overflow: hidden; touch-action: none; }

/* ---------- PHONE: ≤ 600px ---------- */
@media (max-width: 600px) {
  .container { max-width: 100%; padding: 0 10px; }

  /* Header */
  .header_holder { flex-direction: row; align-items: center; gap: 8px; }
  .fintech_logo img { max-width: 100px; }
  .news_letter_holder .btn { width: 100%; max-width: 140px; height: 38px; font-size: 0.85rem; }
  .dark-mode-toggle { width: 36px; height: 36px; }

  /* Search */
  .search_section { padding: 0.5rem 0; }
  .search_holder input[type="text"] { height: 40px; font-size: 0.85rem; padding: 0 2rem 0 2rem; background-position: 0.5rem center; background-size: 0.9rem; }
  .search_holder button { right: 0.5rem; font-size: 0.9rem; }
  .socials_holder { max-width: 100%; justify-content: center; }

  /* Marquee */
  .marquee { padding: 0.3rem 0; }
  .marquee-track h1 { font-size: 0.9rem; margin: 0 1rem; }

  /* Featured Carousel */
  .owl-carousel .carousel_item { padding: 0.5rem; }
  .owl-carousel .carousel_item img { height: 150px; }
  .owl-carousel .carousel_item p { display: none; }

  /* Latest and Trend */
  #latest_and_trend_section_holder { padding: 1rem 0; }
  .latest_image img { height: 200px; }
  .latest_text h1 { font-size: 1.3rem; }
  .latest_text p, #latest-desc { font-size: 0.85rem; -webkit-line-clamp: 2; line-clamp: 2; }
  .latest_info_holder { flex-direction: column; gap: 0.5rem; font-size: 0.8rem; }
  .trend_text h2, .trend_text-1 h1 { font-size: 1.1rem; }
  .trend_image img { width: 90px; height: 65px; }
  .trend_image { width: 90px; flex: 0 0 90px; }

  /* Dynamic Section */
  #dynamic_section { padding: 1rem 0; }
  .link1 a { font-size: 1.3rem; }
  .link2 a { font-size: 0.85rem; }
  .content_holder { grid-template-columns: 1fr; gap: 1rem; }
  .content img { height: auto; max-height: 200px; }
  .content_text h3 { font-size: 1rem; }

  /* Video Section */
  .video_grid { grid-template-columns: 1fr; }
  .video_overlay { font-size: 0.9rem; padding: 0.3rem 0.5rem; }

  /* Opinion Section */
  .opinion_grid { grid-template-columns: 1fr; }
  .opinion_item img { height: 150px; }

  /* Footer */
  .footer_section { padding: 1rem 0; }
  .footer_nav { grid-template-columns: 1fr; gap: 1rem; }
  .newsletter_signup h3 { font-size: 1.2rem; }
  .newsletter_signup p { font-size: 0.9rem; }
  .newsletter_form input[type="email"] { padding: 0.5rem; font-size: 0.9rem; }
  .btn_subscribe { padding: 0.5rem; font-size: 0.9rem; }
  .social_links { justify-content: center; gap: 0.8rem; }
  .footer_bottom p { font-size: 0.8rem; }

  /* New Features */
  .category-pills { gap: 8px; }
  .category-pill { padding: 6px 14px; font-size: 13px; }
  .content_meta { font-size: 12px; gap: 8px; }
  .breadcrumb-nav { padding: 8px 0; }
  .breadcrumb-list { font-size: 12px; gap: 6px; }
  .cookie-consent__inner p { font-size: 13px; }
  .load-more-btn { width: 100%; }
}

/* ---------- SMALL PHONE: ≤ 420px ---------- */
@media (max-width: 420px) {
  .fintech_logo img { max-width: 90px; }
  .latest_image img { height: 170px; }
  .content_holder { grid-template-columns: 1fr; }
  .marquee-track { animation-duration: 12s; }
  .marquee-track h1 { font-size: 0.85rem; }
  .search_holder input[type="text"] { height: 42px; padding: 10px 44px; background-position: 12px center; }
  .trend_image { width: 80px; flex: 0 0 80px; }
  .trend_image img { width: 80px; height: 60px; }
  .category-pill { padding: 5px 12px; font-size: 12px; }
  .back-to-top { bottom: 16px; right: 16px; width: 40px; height: 40px; }
  .back-to-top .material-symbols-outlined { font-size: 20px; }
}