/* ============================================================
   Darelmed V2 — Mobile & Tablet responsive refinements.
   Enqueued LAST so these overrides win. Desktop design is left
   intact; this tightens type scale, spacing and button sizing on
   small screens, and enables native drag+snap on the categories
   slider. (Offre + Découvrez buttons are intentionally excluded —
   they scale with their own banner/card via clamp()/cqw.)
   ============================================================ */

/* ========================= TABLET (≤1024px) ========================= */
@media (max-width: 1024px) {

  /* Headings + descriptions — smaller than desktop */
  .dm-sec-head__title,
  .vitrine-section .vitrine-title { font-size: 30px !important; }
  .dm-partners__title             { font-size: 26px !important; }
  .dm-sec-head__desc,
  .vitrine-section .vitrine-desc  { font-size: 16px !important; }
  .dm-partners__desc              { font-size: 14px !important; }

  /* Primary red CTAs — a little smaller */
  .dm-pagenav__btn, .dm-prow-all,
  .vitrine-section .vitrine-cta-all,
  .dm-about__btn, .dm-contacth__btn {
    height: 50px !important;
    padding-left: 24px !important; padding-right: 24px !important;
    font-size: 13px !important;
  }

  /* Categories slider: native touch drag + snap (arrows are hidden here) */
  .dmv2-slider-viewport {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 24px;
  }
  .dmv2-card-wrapper { scroll-snap-align: start; }

  /* Whole hero card is tappable on touch, not just the arrow button. The card
     holds no other links (image is pointer-events:none, title/desc are plain
     text), so a stretched-link overlay on the existing "Explorer" <a> is safe.
     Native scroll-snap still distinguishes gestures: tap = navigate, horizontal
     swipe = scroll. Desktop (drag slider) keeps button-only click, so a drag
     never fires an accidental navigation. Scoped to .dmv2-hero-section so the
     Catégories-page grid cards are left alone. */
  .dmv2-hero-section .dmv2-category-card { position: relative; }
  .dmv2-hero-section .dmv2-card-btn { overflow: visible; } /* else the pill clips the overlay */
  .dmv2-hero-section .dmv2-card-btn::after {
    content: "";
    position: absolute;
    inset: 0;            /* covers the whole card (nearest positioned ancestor) */
    z-index: 2;
  }

  /* Categories hero card: show the FULL category description on small screens.
     It was locked to a 30%-height header and hard-cut (WordPress forces
     display:flow-root, which disables -webkit-line-clamp). Let the text block
     size to its content and give the image the remaining space, so the card's
     outer size stays consistent in the slider. A generous max-height still
     guards against an unusually long description spilling the card. */
  .dmv2-card-header { height: auto !important; min-height: 0 !important; max-height: 58cqh !important; overflow: hidden !important; }
  .dmv2-card-desc { -webkit-line-clamp: unset !important; overflow: visible !important; flex: 0 1 auto !important; }
}

/* ========================= MOBILE (≤640px) ========================= */
@media (max-width: 640px) {

  /* ---- Headings + descriptions ---- */
  .dm-sec-head__title,
  .vitrine-section .vitrine-title { font-size: 23px !important; }
  .dm-partners__title             { font-size: 20px !important; }
  .dm-sec-head                    { margin-bottom: 20px !important; }
  .dm-sec-head__desc,
  .vitrine-section .vitrine-desc  { font-size: 14px !important; line-height: 1.45 !important; }
  .dm-partners__desc              { font-size: 13px !important; }
  .dm-about__text                 { font-size: 14px !important; line-height: 1.6 !important; }

  /* ---- Buttons: smaller everywhere ---- */
  .dm-contacth__btn,
  .dm-prow-all, .vitrine-section .vitrine-cta-all, .dm-about__btn {
    height: 46px !important;
    padding-left: 20px !important; padding-right: 20px !important;
    font-size: 12.5px !important;
    letter-spacing: .03em !important;
    gap: 8px !important;
  }
  .product-cta,
  .dm-pcards .product-card .product-cta { font-size: 12px !important; }

  /* Bottom-nav labels are long and wrap → full width, auto height, tidy */
  .dm-pagenav__btn {
    width: 100% !important;
    height: auto !important;
    min-height: 46px !important;
    padding: 12px 18px !important;
    font-size: 12.5px !important;
    letter-spacing: .03em !important;
  }

  /* ---- Tighter vertical rhythm between sections ---- */
  .dmv2-hero-section     { padding-top: 1rem !important; }
  .dm-offre-section      { margin-bottom: 20px !important; }
  .vitrine-section       { padding: 8px 0 !important; gap: 16px !important; }
  .dm-decouvrez-section  { margin-bottom: 22px !important; }
  .dm-autres-section     { margin-bottom: 6px !important; }
  .dm-about-section      { margin: 8px auto 24px !important; }
  .dm-partners-section   { margin-bottom: 24px !important; }
  .dm-contacth-section   { margin: 4px auto 24px !important; }

  /* ---- Contact block: tighter + smaller ---- */
  .dm-contacth__cards { gap: 20px !important; }
  .dm-contacth__label { font-size: 17px !important; }
  .dm-contacth__value { font-size: 16px !important; }

  /* ---- Bottom nav: tighter ---- */
  .dm-pagenav-section { padding: 8px 20px 28px !important; }
  .dm-pagenav         { gap: 10px !important; }
}