/* Quick links bands — About "Quick Links" (4 items) and Services "Category Nav" (6 items).
   One row when there's room. When the band is too narrow for one row, whole items
   move to a second row instead of labels breaking mid-word, with dividers only
   between items on the same row:
     .rw-quicklinks--4  dividers are the left border on items 2–4  → 2 × 2
     .rw-quicklinks--6  dividers are their own groups               → 3 + 3
   The switch is a container query on the band's column, set at the band width one
   row needs (measured on Redwood, re-measured 2026-11-06 after the tracking change). Hook classes sit on each band's items group
   (Divi → Advanced → Attributes). Phone/tablet (≤980px) keep Divi's stacked layout. */

.et_pb_column:has(> .rw-quicklinks--4) { container: rw-ql4 / inline-size; }
.et_pb_column:has(> .rw-quicklinks--6) { container: rw-ql6 / inline-size; }

@media (min-width: 981px) {

  /* ── 4 items: tighter tracking + 1.5rem side padding so all four fit one row
        at 1440 (design audit 2026-11-06: "all in one line without breaking"). ── */
  .rw-quicklinks--4 .et_pb_text,
  .rw-quicklinks--4 .et_pb_text a { letter-spacing: 0.15em !important; }
  .rw-quicklinks--4 .et_pb_text { white-space: nowrap; }
  .rw-quicklinks--4 { column-gap: 0 !important; }   /* item padding spaces them; the dividers sit between */
  .et_pb_column .rw-quicklinks--4.et_pb_group > .et_pb_group {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* ── 4 items → 2 × 2. Left cells sit right against the divider, right cells start
        just after it, so every divider keeps the same 2rem either side. ── */
  @container rw-ql4 (width < 1180px) {
    .rw-quicklinks--4 { flex-wrap: wrap !important; column-gap: 0 !important; row-gap: 1.5rem; }
    /* the column + group classes outrank Divi's own !important item padding */
    .et_pb_column .rw-quicklinks--4.et_pb_group > .et_pb_group {
      flex: 0 0 50% !important;
      box-sizing: border-box;
      padding-left: 2rem !important;
      padding-right: 2rem !important;
      border-left-width: 0 !important;
    }
    .et_pb_column .rw-quicklinks--4.et_pb_group > .et_pb_group:nth-child(odd)  { justify-content: flex-end !important; }
    .et_pb_column .rw-quicklinks--4.et_pb_group > .et_pb_group:nth-child(even) { justify-content: flex-start !important; border-left-width: 1px !important; }
    .rw-quicklinks--4 .et_pb_text { white-space: nowrap; }
  }

  /* ── 6 items → 3 + 3. The 3rd divider (6th child) becomes an invisible
        full-width line break, so Aesthetics, Telehealth and After-Hours Care start the second row. ── */
  @container rw-ql6 (width < 1520px) {
    .rw-quicklinks--6 { flex-wrap: wrap !important; justify-content: center !important; column-gap: 2rem !important; row-gap: 0.75rem; }
    .rw-quicklinks--6 > :nth-child(6) {
      flex: 0 0 100% !important;
      height: 0 !important;
      min-height: 0 !important;
      overflow: hidden;
      opacity: 0;
    }
    .rw-quicklinks--6 .et_pb_text { white-space: nowrap; }
  }
}