/* life-info.responsive.patch.css (v14.4)
 * - Mobile overflow fixes for hero category overlay & slider paddings
 * - Include after life-info.css + life-info.slider.patch.css
 */

/* Prevent accidental horizontal scroll */
html, body{ overflow-x:hidden; }
/* Desktop~Tablet: prevent layout overflow by hiding side ads when the layout
 * can no longer fit reliably.
 * - Keep side ads visible on 1440px (user request)
 */
@media (max-width: 1399px){
  .left-ad, .right-ad{ display:none; }
  .layout-container{ justify-content:center; padding-left: 16px; padding-right: 16px; }
  .main-content{ width:100%; max-width: var(--layout-main-content); }
}


/* Desktop~Tablet: hide side ads earlier to prevent overflow on 1366/1440 widths *
 * (160 + 1200 + 160 + gaps + paddings > 1366)
 */
@media (max-width: 768px){
  .header-container{
    flex-wrap: wrap;
    gap: var(--spacing-3);
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
  }
  .logo{ flex: 0 0 auto; }
  .header-actions{ flex: 0 0 auto; margin-left: auto; }
  .search-container{
    order: 10;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
  .search-input{ width: 100%; }

  .main-container{ padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
  .business-slider{ padding-left: 32px; padding-right: 32px; }
}

@media (max-width: 480px){
  /* Hero category overlay: allow horizontal scroll instead of overflow */
  .hero-categories{ padding: var(--spacing-5) 0; }
  .hero-categories-center{
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: var(--spacing-3);
    padding: 0 var(--spacing-4);
  }
  .hero-categories-center::-webkit-scrollbar{ display:none; }
  .category-card{ min-width: 72px; scroll-snap-align: start; }
  .category-icon{ width: 48px; height: 48px; }
  .category-label{ font-size: 11px; }

  /* Slider padding/arrow hit-area */
  .business-slider{ padding: 0 28px; }
  .slider-arrow{ width: 30px; height: 30px; }

  /* Section titles should not overflow */
  .group-title{ font-size: 18px; line-height: 1.2; }
}

@media (max-width: 360px){
  .header-container{ gap: var(--spacing-2); }
  .search-input{ text-align:left; }
}

/* ========================================
   v2 additions (260303)
   - keep 1440 desktop within viewport (no horizontal overflow)
   - re-insert side ads as inline banners on tablet/mobile
======================================== */

/* 1440/1366: keep side ads but let main content shrink to fit */
/* NOTE:
 * - The 3-column layout uses fixed side ads (160px each) + gaps + paddings.
 *   On 1440/1366 widths this can overflow unless the main column is allowed
 *   to shrink (min-width:0) and container paddings/gaps are tightened.
 */

/* allow main column to shrink on smaller desktops (prevents horizontal overflow) */
@media (max-width: 1700px){
  .layout-container{ max-width: 100%; width: 100%; box-sizing: border-box; }
  .main-content{ min-width: 0; max-width: none; }
  .categories-wrapper{ width: 100%; box-sizing: border-box; }
}

@media (max-width: 1520px){
  .layout-container{
    padding-left: 16px;
    padding-right: 16px;
    gap: 16px;
  }
  /* keep side ads visible on 1440 (user request) */
  .left-ad, .right-ad{ width: 160px; }
  .main-content{
    min-width: 0;
    max-width: none; /* shrink via flex instead of calc to avoid edge overflows */
  }
  .categories-wrapper{ padding: 28px; }
}

/* Inline ads (used when side ads are hidden on <=1279px) */
.inline-ads{ display:none; margin: 18px 0; }
.inline-ads-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.inline-ads .ad-card{
  height: 120px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
}

.inline-ads .ad-icon{ width: 36px; height: 36px; margin: 0 12px 0 0; }
.inline-ads .ad-title{ margin: 0; font-size: 16px; }
.inline-ads .ad-subtitle{ margin: 2px 0 0 0; font-size: 12px; }
.inline-ads .ad-desc{ display:none; }
.inline-ads .ad-cta{
  margin-top: 0;
  margin-left: auto;
  white-space: nowrap;
}

@media (max-width: 1279px){
  .inline-ads{ display:block; }
  .inline-ads-row{ grid-template-columns: 1fr; }
  .inline-ads .ad-card{ height: 110px; }
}