/* ============================================================================
   Category pages — mobile layout
   ----------------------------------------------------------------------------
   Covers the 19 product-category pages (platform-truck.php, pallet-truck.php,
   drum-equipment.php, …) and the category index products.php. All twenty share
   the same markup: a `.re-intro` blurb, a `.re-p-grid` / `.re-cat-grid` row of
   cards, and a `.re-faq` accordion.

   Why a separate file rather than the inline <style> blocks those pages carry:
   the card CSS is copy-pasted into every one of them, so a mobile fix written
   inline would have to be written twenty times and would drift apart the first
   time one page was touched. This file is linked once from meta.php.

   Every selector here is scoped to a `re-` class that exists only on those
   pages, so nothing else on the site is affected.

   Specificity note: the pages' own <style> blocks sit in the body, i.e. AFTER
   this file in document order, so at equal specificity they would win. Each
   rule below is therefore written one class deeper than the inline rule it
   overrides (`.re-p-grid .re-p-media`, not `.re-p-media`).

   The desktop layout is untouched — everything is inside a max-width query.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   TABLET AND BELOW (≤ 991px)
   Bootstrap already drops the grid to two-up here. Only the type needs easing.
   ------------------------------------------------------------------------ */
@media (max-width: 991px) {

  .re-intro .re-intro-h2,
  .re-cat-intro .re-intro-h2 {
    font-size: 26px;
    line-height: 1.3;
  }

  .re-intro .re-intro-p {
    font-size: 15px;
  }

  .re-p-grid .re-p-media,
  .re-cat-grid .re-cat-media {
    height: 200px;
  }
}


/* ---------------------------------------------------------------------------
   PHONES (≤ 767px) — headings and the FAQ
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {

  /* The theme sets h2.wt-title to 30px with no mobile step-down, which is too
     heavy against 15px body copy on a phone. */
  .re-intro .re-intro-h2,
  .re-cat-intro .re-intro-h2 {
    font-size: 23px;
  }

  h2.wt-title.re-faq-h2 {
    font-size: 23px;
    line-height: 1.3;
    margin-bottom: 20px;
  }

  /* The question button reserved 54px on the right for the chevron and 20px on
     the left. On a 360px screen that leaves ~285px for text that is often a
     full sentence, so it ran to four lines. Tighter padding, smaller chevron. */
  .re-faq .card .btn-link {
    padding: 14px 40px 14px 15px;
    font-size: 15px;
  }

  .re-faq .card .btn-link::after {
    right: 16px;
    width: 8px;
    height: 8px;
  }

  .re-faq .card .card-body {
    padding: 13px 15px 16px;
    font-size: 15px;
    line-height: 1.7;
  }

  /* Long category names ("Dock Leveller and Dock Ramp", "Permanent Magnetic
     Lifter") sat at the theme's 42px and pushed the breadcrumb against the
     bottom edge of a 330px banner. Scoped with :has() so only these pages
     change; browsers without :has() simply keep the theme size. */
  .page-content:has(.re-p-grid) .wt-bnr-inr-entry .banner-title-name h1,
  .page-content:has(.re-cat-grid) .wt-bnr-inr-entry .banner-title-name h1 {
    font-size: 32px;
    line-height: 1.2;
  }
}


/* ---------------------------------------------------------------------------
   SMALL PHONES (≤ 575px) — the card grid
   ----------------------------------------------------------------------------
   This is the real fix. Below 576px Bootstrap has no active column class, so
   every card fell to full width: pallet-truck.php and drum-equipment.php stack
   16 cards, each a 200px photograph plus a body, which is roughly nine screens
   of scrolling to reach the FAQ. Two-up halves that and still leaves each card
   legible, so the range can actually be scanned.

   Everything inside the card is re-proportioned for the ~150px column that
   results — the title, the capacity chip and the button were all sized for a
   360px card and would otherwise overflow it.
   ------------------------------------------------------------------------ */
@media (max-width: 575px) {

  /* Two per row. The attribute selector catches every column in the row
     regardless of which col-* classes it carries. */
  .re-p-grid > [class*="col-"],
  .re-cat-grid > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 7px;
    padding-right: 7px;
    margin-bottom: 14px;
  }

  /* Matching negative gutter, so the row still lines up with the container. */
  .section-content .re-p-grid,
  .section-content .re-cat-grid {
    margin-left: -7px;
    margin-right: -7px;
  }

  .re-p-grid .re-p-card,
  .re-cat-grid .re-cat-card {
    border-width: 1px;
    border-radius: 6px;
    padding-bottom: 14px;
  }

  /* No hover state on a touch screen — the lift and shadow only ever fired as
     a sticky artefact of the tap, so they are dropped here. */
  .re-p-grid .re-p-card:hover,
  .re-cat-grid .re-cat-card:hover {
    transform: none;
    box-shadow: none;
  }

  .re-p-grid .re-p-media,
  .re-cat-grid .re-cat-media {
    height: 130px;
    padding: 16px 10px 6px;
  }

  /* ---- the model-code / product-count ribbon ---- */
  .re-p-grid .re-p-model,
  .re-cat-grid .re-cat-ribbon {
    top: 8px;
    left: -1px;
    max-width: 88%;
    font-size: 9px;
    letter-spacing: .06em;
    padding: 4px 14px 4px 8px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%);
  }

  .re-p-grid .re-p-body,
  .re-cat-grid .re-cat-body {
    padding: 0 9px;
  }

  /* break-word matters here: "Double Wheel Barrow with Scooter Wheel" has no
     short words to break on and would otherwise widen the column. */
  .re-p-grid .re-p-title,
  .re-cat-grid .re-cat-title {
    font-size: 13px;
    line-height: 1.3;
    margin: 0 0 8px;
    min-height: 0;
    overflow-wrap: break-word;
  }

  /* The capacity chip is the one figure a buyer compares on, so it stays —
     but it has to be allowed to wrap onto two lines inside a 130px body. */
  .re-p-grid .re-p-cap {
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
    font-size: 11px;
    padding: 4px 9px;
    margin-bottom: 10px;
    line-height: 1.4;
  }

  .re-p-grid .re-p-cap-k {
    font-size: 9px;
    letter-spacing: .05em;
  }

  /* "VIEW PRODUCT →" at 12px with tracking measured wider than the column it
     sat in. Full-width and smaller, which also gives a bigger tap target than
     the inline pill did. */
  .re-p-grid .re-p-btn,
  .re-cat-grid .re-cat-btn {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 5px;
    font-size: 10px;
    letter-spacing: .04em;
    border-width: 1px;
    border-radius: 3px;
    padding: 9px 6px;
  }
}


/* ---------------------------------------------------------------------------
   SINGLE-PRODUCT CATEGORIES (≤ 575px)
   ----------------------------------------------------------------------------
   car-washing-lift.php, permanent-magnetic-lifter.php, order-picker.php and
   industrial-weighing.php each list exactly one product. Two-up would leave a
   lone 150px card marooned in the middle of the screen, which reads as a broken
   layout rather than a category of one — so a sole card takes the full width
   and keeps its full-size proportions.
   ------------------------------------------------------------------------ */
@media (max-width: 575px) {

  .re-p-grid > [class*="col-"]:only-child,
  .re-cat-grid > [class*="col-"]:only-child {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .re-p-grid > :only-child .re-p-media,
  .re-cat-grid > :only-child .re-cat-media {
    height: 210px;
    padding: 26px 20px 10px;
  }

  .re-p-grid > :only-child .re-p-card,
  .re-cat-grid > :only-child .re-cat-card {
    padding-bottom: 22px;
  }

  .re-p-grid > :only-child .re-p-body,
  .re-cat-grid > :only-child .re-cat-body {
    padding: 0 18px;
  }

  .re-p-grid > :only-child .re-p-model,
  .re-cat-grid > :only-child .re-cat-ribbon {
    top: 14px;
    font-size: 11px;
    letter-spacing: .09em;
    padding: 6px 20px 6px 12px;
  }

  .re-p-grid > :only-child .re-p-title,
  .re-cat-grid > :only-child .re-cat-title {
    font-size: 17px;
    margin-bottom: 12px;
  }

  .re-p-grid > :only-child .re-p-cap {
    font-size: 13px;
    padding: 5px 13px;
    margin-bottom: 16px;
  }

  .re-p-grid > :only-child .re-p-cap-k {
    font-size: 10px;
    letter-spacing: .07em;
  }

  .re-p-grid > :only-child .re-p-btn,
  .re-cat-grid > :only-child .re-cat-btn {
    width: auto;
    font-size: 12px;
    letter-spacing: .07em;
    padding: 10px 20px;
  }
}


/* ---------------------------------------------------------------------------
   NARROW PHONES (≤ 360px)
   iPhone SE and the Android 360px class. One more step down so two-up holds
   instead of the title spilling out of the card.
   ------------------------------------------------------------------------ */
@media (max-width: 360px) {

  .re-p-grid > [class*="col-"],
  .re-cat-grid > [class*="col-"] {
    padding-left: 5px;
    padding-right: 5px;
  }

  .section-content .re-p-grid,
  .section-content .re-cat-grid {
    margin-left: -5px;
    margin-right: -5px;
  }

  .re-p-grid .re-p-media,
  .re-cat-grid .re-cat-media {
    height: 115px;
    padding: 14px 8px 5px;
  }

  .re-p-grid .re-p-title,
  .re-cat-grid .re-cat-title {
    font-size: 12px;
  }

  .re-p-grid .re-p-cap {
    font-size: 10px;
    padding: 3px 7px;
  }

  .re-p-grid .re-p-btn,
  .re-cat-grid .re-cat-btn {
    font-size: 9px;
    padding: 8px 4px;
  }

  .re-intro .re-intro-h2,
  .re-cat-intro .re-intro-h2,
  h2.wt-title.re-faq-h2 {
    font-size: 21px;
  }
}


/* ---------------------------------------------------------------------------
   No motion where it was asked to be off. The pages already carry a
   prefers-reduced-motion block; this repeats it for the rules added here.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {

  .re-p-grid .re-p-card,
  .re-p-grid .re-p-media img,
  .re-cat-grid .re-cat-card,
  .re-cat-grid .re-cat-media img {
    transition: none !important;
  }
}