/* ═══════════════════════════════════════════════════════════
   AloApple Blog — Responsive v4 (light only, no dark mode)
   Mobile • Tablet • iPad • Mac • Android • Safari
   Covers: index / category / tag / search / single
   ═══════════════════════════════════════════════════════════ */

/* ── 0. Base guards: never overflow horizontally, keep sticky working ── */
.blog-page{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
/* Images: only cap width globally — never force height, so fixed-size
   images (author logo, thumbs, card/slider fills) keep base dimensions.
   Article-body images are already handled in blog.css (.blog-article__content img). */
.blog-page img{
  max-width:100%;
}
.blog-article__content img,
.blog-article__content figure,
.blog-article__content table,
.blog-article__content pre{
  max-width:100%;
}
.blog-layout{
  max-width:100%;
  min-width:0;
}
.blog-main,
.blog-article,
.blog-article__content,
.blog-hero,
.blog-hero-zone,
.blog-category-hero,
.blog-sidebar,
.blog-grid,
.blog-products,
.blog-featured-grid,
.blog-card-slider,
.blog-card-slider__track,
.blog-subchips,
.blog-share,
.blog-tags,
.blog-authorbox,
.blog-search-hero,
.blog-pagination,
.blog-category-slider,
.blog-empty{
  max-width:100%;
  min-width:0;
}
/* NOTE: .blog-layout must NOT get overflow-x:hidden (breaks sticky sidebar) */
.blog-main,
.blog-article,
.blog-hero,
.blog-category-hero,
.blog-grid{
  overflow-x:clip;
}
@supports not (overflow: clip) {
  .blog-main,
  .blog-article,
  .blog-hero,
  .blog-category-hero,
  .blog-grid{ overflow-x:hidden; }
}
.blog-hero-zone > *,
.blog-layout > *,
.blog-article__layout > *{
  min-width:0;
}

/* ── 1. Safe-area insets (notched iPhone / Android) ── */
@supports (padding: env(safe-area-inset-top)) {
  .blog-page{
    padding-top:calc(10px + env(safe-area-inset-top));
    padding-bottom:calc(48px + env(safe-area-inset-bottom));
  }
  .blog-reading-progress{
    top:env(safe-area-inset-top);
  }
}

/* ── 2. Touch targets: 44px minimum (Apple HIG / Material) ──
   Controls keep 44px on all sizes; inline pills (chips/tags/more) only
   get 44px on phones (see ≤767px block) so desktop design is untouched. */
.blog-sidebar__toggle,
.blog-share__btn,
.blog-pagination .page-link,
.blog-toc__toggle{
  min-width:44px;
  min-height:44px;
}
.blog-sidebar__search button,
.blog-hero__search button,
form.blog-search-form button{
  min-width:44px;
  min-height:44px;
}
.blog-sidebar__parent,
.blog-sidebar__home,
.blog-sidebar__children li a{
  min-height:44px;
}
  /* ── 3. Horizontal scrollers: smooth + touch momentum (Safari/iOS) ── */
.blog-hero__chips,
.blog-subchips,
.blog-featured-grid,
.blog-card-slider__track,
.blog-article__figure-col .blog-breadcrumb{
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.blog-article__content table,
.blog-article__content pre{
  -webkit-overflow-scrolling:touch;
}

/* ── 4. Keen slider (category sub-cats): never overflow ── */
.blog-category-slider{
  /* overflow:hidden REMOVED — it was clipping the navigation arrows
     positioned outside the container (right:-14px / left:-14px) */
  margin-bottom:22px;
  position:relative;
}
.blog-category-slider .keen-slider{
  display:flex;
  max-width:100%;
}
.blog-category-slider .keen-slider__slide{
  min-width:0;
}
.blog-subcat-card{
  min-height:84px;
}

/* ── 5. Search form (search page): class-based, wraps on mobile ── */
form.blog-search-form{
  display:flex;
  gap:8px;
  align-items:stretch;
}
form.blog-search-form input{
  flex:1 1 auto;
  min-width:0;
}

/* ═══ 6. Tablet / iPad portrait (≤1024px) ═══ */
@media (max-width:1024px){
  .blog-hero-zone{ grid-template-columns:1fr; }
  .blog-side-slider{ min-height:200px; }
  .blog-grid{
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:14px;
  }
  .blog-products{
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  }
  .blog-section--category .blog-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ═══ 7. Phones & small tablets (≤991px): sidebar stacks ═══ */
@media (max-width:991px){
  .blog-article__layout{ grid-template-columns:1fr; }
  .blog-toc{ position:relative; top:0; order:-1; }
  .blog-toc__toggle{ display:block; }
  .blog-toc__nav{ display:none; }
  .blog-toc__nav.is-open{ display:block; margin-top:10px; }
}

/* ═══ 8. Phones (≤767px) ═══ */
@media (max-width:767px){
  .blog-page{ padding:14px 0 48px; }
  .blog-wrap{ padding-inline:12px; }

  /* iOS Safari: 16px inputs prevents auto-zoom on focus */
  .blog-page input,
  .blog-page textarea,
  .blog-page select{
    font-size:16px;
  }
  .blog-page .blog-hero__search input,
  .blog-page .blog-sidebar__search input,
  .blog-page form.blog-search-form input{
    font-size:16px;
  }

  /* Hero */
  .blog-hero{ padding:14px 12px; border-radius:16px; }
  .blog-hero__search{
    flex-direction:column;
    background:transparent; border:0; padding:0;
    max-width:100%; width:100%;
  }
  .blog-hero__search input{
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.16);
    border-radius:12px; padding:13px 15px; width:100%;
  }
  .blog-hero__search button{
    justify-content:center; padding:13px; width:100%;
  }
  .blog-hero__chips{
    overflow-x:auto; flex-wrap:nowrap;
    padding-bottom:4px;
  }
  .blog-hero__chips::-webkit-scrollbar{ display:none; }
  .blog-hero__chips a{ flex-shrink:0; }

  /* Category hero: keep some padding, fix layout on phones */
  .blog-category-hero{ padding:12px; }
  .blog-category-hero__topline{
    flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between;
  }
  .blog-category-hero__titleside{ max-width:100%; flex:1; min-width:0; }
  .blog-category-hero__desc{
    white-space:normal; max-width:100%;
    display:-webkit-box; -webkit-line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden;
    margin-top:6px;
  }
  .blog-category-hero__topline .blog-breadcrumb{ max-width:100%; order:3; width:100%; margin-top:8px; }

  /* Search page form: full-width row that wraps */
  form.blog-search-form{
    flex:1 1 100% !important;
    max-width:100% !important;
    min-width:0 !important;
    width:100% !important;
    margin-top:10px;
  }
  form.blog-search-form input{ width:100%; }
  .blog-search-hero{ padding:18px 14px; }
  .blog-search-hero h1{ font-size:1.1rem; }

  /* Article */
  .blog-article__header--hero{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
    padding:18px 14px;
    align-items:start;
    text-align:right;
  }
  .blog-article__figure-col{
    max-width:100%;
    order:2;
  }
  .blog-article__header-inner{
    order:1;
    max-width:100%;
  }
  .blog-article__featured--inline{ max-height:220px; }
  .blog-article__featured--inline img{ max-height:220px; }
  .blog-article__body-pad{ padding:20px 14px; }
  .blog-article__content{ font-size:1rem; line-height:2.1; }
  .blog-article__content h2{ font-size:1.15rem; }
  .blog-article__content h3{ font-size:1rem; }
  .blog-article__content th,
  .blog-article__content td{
    padding:10px 12px;
    white-space:normal; word-break:break-word;
  }
  .blog-article__content iframe,
  .blog-article__content video{ min-height:200px; }

  /* Grids */
  .blog-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .blog-post-card__excerpt{ display:none; }
  .blog-post-card__body{ padding:10px; }
  .blog-post-card__title{ font-size:.78rem; }
  .blog-popular-grid,
  .blog-popular-list{ grid-template-columns:1fr; }
  .blog-products{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .blog-product-card img{ height:100px; }
  .blog-section--category .blog-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .blog-featured-grid .blog-featured-card,
  .blog-card-slider__track .blog-featured-card{ flex-basis:90%; }

  /* Hero slider: compact overlay like side sliders (title only) */
  .blog-hero-slider__overlay{
    padding:8px 10px 26px;
  }
  .blog-hero-slider__overlay h2{
    font-size:.78rem; font-weight:800; line-height:1.6; margin:0;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    max-width:100%;
  }
  .blog-hero-slider__subtitle,
  .blog-hero-slider__cta,
  .blog-hero-slider__meta,
  .blog-hero-slider__top,
  .blog-hero-slider__progress{ display:none; }
  .blog-hero-slider__controls{ bottom:8px; left:10px; gap:6px; }
  .blog-hero-slider__count{ display:none; }
  .blog-hero-slider__dots{ background:transparent; border:0; padding:0; gap:5px; }
  .blog-hero-slider__dot{ width:7px; height:7px; }
  .blog-hero-slider__dot.is-active{ width:18px; }

  /* Share / tags / author */
  .blog-share{ flex-direction:column; align-items:stretch; }
  .blog-share__btns{ justify-content:center; }
  .blog-authorbox{ flex-direction:column; text-align:center; align-items:center; }

  /* Pagination */
  .blog-pagination .page-link{
    min-width:44px; min-height:44px; font-size:.78rem;
  }

  /* Pills get touch height on phones only (desktop keeps original design) */
  .blog-hero__chips a,
  .blog-subchips a,
  .blog-tag,
  .blog-section__more{
    /* min-height:44px; */
  }

  /* Sidebar accordion list scrolls if long (grid-based, no max-height jump) */
  .blog-sidebar__group.is-open .blog-sidebar__children{
    grid-template-rows:1fr;
  }
  .blog-sidebar__children > li{
    overflow:hidden;
  }
  .blog-empty{ padding:40px 16px; }
}

/* ═══ 9. Small phones (≤480px): single column, readable sizes ═══ */
@media (max-width:480px){
  .blog-grid{ grid-template-columns:1fr; }
  .blog-post-card__excerpt{ display:block; font-size:.75rem; }
  .blog-post-card__title{ font-size:.85rem; }
  .blog-products{ grid-template-columns:1fr 1fr; }
  .blog-hero__title{ font-size:1.1rem; }
  .blog-hero__subtitle{ font-size:.8rem; }
  .blog-category-hero__title{ font-size:1.1rem; }
  .blog-article__header--hero .blog-article__title{ font-size:1.1rem; }
  .blog-article__header--hero .blog-article__meta{ font-size:.72rem; gap:6px 12px; }
  .blog-section__title{ font-size:1rem; }
  .blog-section__desc{ font-size:.75rem; }
  .blog-popular-item__thumb{ width:60px; height:60px; }
  .blog-hero-slider__cta{ font-size:.75rem; padding:8px 16px; }
  .blog-breadcrumb{ font-size:.7rem; }
  .blog-breadcrumb > span:last-child{ max-width:200px; }
}

/* ═══ 10. Phone landscape: use width wisely ═══ */
@media (max-width:991px) and (orientation:landscape){
  .blog-grid{ grid-template-columns:repeat(3,1fr); }
  .blog-products{ grid-template-columns:repeat(3,1fr); }
  .blog-hero__search{ flex-direction:row; max-width:340px; }
  .blog-hero__search button{ width:auto; }
}

/* ═══ 11. Large Mac / desktop (≥1400px): cap line length ═══ */
@media (min-width:1400px){
  .blog-article__content{ font-size:1rem; }
  .blog-grid{ gap:22px; }
}

/* ═══ 12. Retina / high-DPI ═══ */
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi){
  .blog-post-card__image-wrap img,
  .blog-featured-card__media img,
  .blog-hero-slider__slide img,
  .blog-side-slider__slide img{
    image-rendering:-webkit-optimize-contrast;
  }
}

/* ═══ 13. Reduced motion ═══ */
@media (prefers-reduced-motion:reduce){
  .blog-reveal{ animation:none; }
  .blog-hero-slider__slide,
  .blog-side-slider__slide{ transition:none; }
  .blog-hero-slider__slide.is-active .blog-hero-slider__progress i{
    animation:none; width:100%;
  }
  .blog-post-card:hover,
  .blog-featured-card:hover,
  .blog-popular-item:hover,
  .blog-product-card:hover,
  .blog-share__btn:hover{ transform:none; }
}

/* ═══ 14. Print ═══ */
@media print{
  .blog-reading-progress,
  .blog-hero-slider__controls,
  .blog-side-slider__dots,
  .blog-sidebar,
  .blog-share,
  .blog-tags,
  .blog-authorbox,
  .blog-products,
  .blog-pagination,
  .blog-toc__toggle,
  .blog-section__more{ display:none !important; }
  .blog-page{ background:#fff; color:#000; padding:0; }
  .blog-article{ box-shadow:none; border:0; }
  .blog-article__header--hero{ background:#fff; color:#000; }
  .blog-article__header--hero .blog-article__title{ color:#000; }
  .blog-article__header--hero .blog-article__meta,
  .blog-article__header--hero .blog-article__excerpt{ color:#333; }
  .blog-article__content{ color:#000; font-size:12pt; line-height:1.8; }
  .blog-article__content h2,
  .blog-article__content h3,
  .blog-article__content h4{ color:#000; }
  .blog-article__content a{ color:#000; text-decoration:underline; }
  .blog-article__content img{ max-width:100%; page-break-inside:avoid; }
  .blog-article__content pre{
    background:#f5f5f5; color:#000; border:1px solid #ddd;
  }
  .blog-article__content blockquote{
    background:#f9f9f9; border-color:#ddd; color:#333;
  }
}