/* ==========================================================================
   Responsive layout.

   The design handoff has one breakpoint (1150px, nav burger) and is otherwise
   desktop-only. These rules add tablet and mobile behaviour.

   !important is required throughout: the port kept the design's inline styles,
   which win over any stylesheet rule. The inline values remain the desktop
   case; everything here applies only below 1150px, so desktop is untouched.
   ========================================================================== */

/* Nothing may exceed the viewport. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg, table, iframe { max-width: 100%; }

/* ------------------------------------------------ tablet: up to 1150px --- */
@media (max-width: 1150px) {
  /* Copy and its side panel stop being a two-column grid. The panel is
     absolutely positioned inside its cell, so it must go static or it
     collapses to nothing. */
  .kk-split { grid-template-columns: 1fr !important; gap: 30px !important; }
  .kk-panel { position: static !important; inset: auto !important;
              max-height: none !important; }

  .kk-col4  { flex: 0 0 calc((100% - 60px) / 3) !important; }
  .kk-col3  { flex: 0 0 calc((100% - 30px) / 2) !important; }
  .kk-col3s { flex: 0 0 calc((100% - 16px) / 2) !important; }
  .kk-g3    { grid-template-columns: repeat(2, 1fr) !important; }
  .kk-g4    { grid-template-columns: repeat(2, 1fr) !important; }

  .kk-card    { flex: 0 0 calc((100% - 60px) / 3) !important; }
  .kk-card-sm { flex: 0 0 calc((100% - 36px) / 4) !important; }

  /* Keep the peek that signals more to scroll, with fewer items visible. */
  .kk-vid  { flex: 0 0 calc((100% - 30px) / 1.6) !important; }
  .kk-lang { flex: 0 0 calc((100% - 60px) / 3) !important; }
}

/* -------------------------------------------------- mobile: up to 700px --- */
@media (max-width: 700px) {
  .kk-col4, .kk-col3 { flex: 0 0 100% !important; }
  .kk-col3s { flex: 0 0 calc((100% - 16px) / 2) !important; }
  .kk-g3, .kk-g4 { grid-template-columns: 1fr !important; gap: 26px !important; }

  .kk-card    { flex: 0 0 calc((100% - 26px) / 2) !important; }
  .kk-card-sm { flex: 0 0 calc((100% - 24px) / 3) !important; }

  .kk-vid  { flex: 0 0 calc((100% - 30px) / 1.15) !important; }
  .kk-lang { flex: 0 0 calc((100% - 30px) / 2) !important; }

  /* Headings are sized for a 1111px canvas; scale them to the viewport. */
  h1 { font-size: clamp(28px, 8vw, 42px) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(21px, 6vw, 30px) !important; line-height: 1.25 !important; }
  h3 { font-size: clamp(16px, 4.5vw, 22px) !important; line-height: 1.3 !important; }

  /* Centred ragged text reads badly at this width. */
  footer p, footer span { text-align: left !important; }
}

/* -------------------------------------------------- narrow: up to 360px --- */
/* 390px is the commonest phone width, so this must sit below it: at 390 the
   practitioner cards stay two across, which suits a directory of 21 people. */
@media (max-width: 360px) {
  .kk-card { flex: 0 0 100% !important; }
  .kk-col3s { flex: 0 0 100% !important; }
}

/* --------------------------------------------------- hero logo overlap --- */
@media (max-width: 1150px) {
  .kk-hero-logo { width: 76px !important; }
  .kk-hero-disc { width: 120px !important; height: 120px !important; }
}
@media (max-width: 700px) {
  .kk-hero-logo { width: 54px !important; }
  .kk-hero-disc { width: 86px !important; height: 86px !important; }
}

/* --------------------------------------------------------- data tables --- */
@media (max-width: 700px) {
  /* The practitioner table becomes a stack of cards: phone and email are the
     point of this page and must stay tappable, not hidden behind a scroll. */
  .kk-contact-table, .kk-contact-table tbody, .kk-contact-table tr,
  .kk-contact-table td { display: block !important; width: 100% !important; }
  .kk-contact-table thead { display: none !important; }
  .kk-contact-table tr {
    border-bottom: 1px solid rgba(0,0,0,0.14) !important;
    padding: 16px 0 !important;
  }
  .kk-contact-table td {
    border: 0 !important;
    padding: 2px 0 !important;
    text-align: left !important;
  }
  .kk-contact-table td img { margin: 0 0 8px !important; }

  /* The parking table keeps its shape and scrolls. */
  .kk-scroll-table { display: block !important; overflow-x: auto !important;
                     white-space: nowrap !important; }
}

/* ------------------------------------------------ rework, 7 Sept 2026 --- */
@media (max-width: 1150px) {
  /* Home intro: the two text columns and their hairline become one column,
     rather than a second column that reads half-width and clips. */
  .kk-two { grid-template-columns: 1fr !important; gap: 26px !important; }
  .kk-rule { display: none !important; }

  /* The bicycle sits centred rather than hard right. */
  .kk-bike { display: block !important; margin: 0 auto !important; }
}

@media (max-width: 700px) {
  /* Non-featured practitioners two across, as asked. */
  .kk-card-sm { flex: 0 0 calc((100% - 26px) / 2) !important; }

  /* Booking panel: show about five, then scroll inside the panel. */
  /* flex:1 1 0 with min-height:0 collapses to nothing once the panel is
     static, which is why no practitioners appeared. Give it real height. */
  .kk-panel-list { flex: 0 1 auto !important; min-height: 0 !important;
                   max-height: 360px !important; overflow-y: auto !important; }

  /* Contact list reads as cards rather than a stripped table. */
  .kk-contact-table tr {
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    border-radius: 2px !important;
    padding: 16px !important;
    margin: 0 0 14px !important;
  }
  .kk-contact-table td:first-child { float: left !important; width: auto !important;
                                     margin: 0 14px 6px 0 !important; }
  .kk-contact-table td img { width: 60px !important; height: auto !important;
                             aspect-ratio: 1/1 !important; border-radius: 50% !important; }
  .kk-contact-table a[href^="tel:"], .kk-contact-table a[href^="mailto:"] {
    display: inline-block !important; padding: 6px 0 !important; word-break: break-word !important;
  }
}

/* ------------------------------- contact list as cards, 7 Sept 2026 --- */
/* Applies at every width: the table shape never served this page well. */
.kk-contact-table, .kk-contact-table tbody, .kk-contact-table tr, .kk-contact-table td {
  display: block !important; width: 100% !important;
}
.kk-contact-table thead { display: none !important; }
.kk-contact-table { border-collapse: separate !important; }
.kk-contact-table tr {
  background: #fff !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  padding: 20px !important;
  margin: 0 0 16px !important;
  overflow: hidden !important;
}
.kk-contact-table td { border: 0 !important; padding: 0 !important; text-align: left !important; }
.kk-contact-table td:first-child { float: left !important; width: auto !important; margin: 0 18px 0 0 !important; }
.kk-contact-table td img {
  width: 92px !important; height: auto !important; aspect-ratio: 1/1 !important;
  border-radius: 50% !important; object-fit: cover !important;
}
/* phone and email rows, each with its own icon */
.kk-contact-table td:nth-child(3), .kk-contact-table td:nth-child(4) {
  padding: 6px 0 0 !important; font-size: 16px !important; line-height: 24px !important;
}
.kk-contact-table td:nth-child(3)::before, .kk-contact-table td:nth-child(4)::before {
  content: ""; display: inline-block; width: 30px; height: 30px;
  vertical-align: middle; margin-right: 12px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.kk-contact-table td:nth-child(3)::before { background-image: url("/img/icons/phone.svg"); }
.kk-contact-table td:nth-child(4)::before { background-image: url("/img/icons/email.svg"); }
.kk-contact-table td a { word-break: break-word !important; }

/* Author block: links inside the biography, and a smaller portrait on phones. */
.rich-bio p { margin: 0 0 8px; }
.rich-bio a { color: #00717f; text-decoration: underline; word-break: break-word; }
@media (max-width: 700px) {
  .kk-author-pic { flex: 0 0 84px !important; width: 84px !important; }
}

/* Citation links inside article text. */
.kk-article-body a, [data-band="Author and body"] p a {
  color: #00717f; text-decoration: underline; word-break: break-word;
}

/* Membership logos: one per row, equal tiles whatever the logo's own aspect
   ratio, so a wide BACP mark and a square one still line up. */
.kk-logos > span { max-width: 260px; }
@media (max-width: 1150px) {
  /* The sidebar is full width here, so two across reads better than one very
     wide tile. */
  .kk-logos { grid-template-columns: repeat(2, 1fr) !important; max-width: 560px; }
}
@media (max-width: 700px) {
  .kk-logos { grid-template-columns: 1fr !important; max-width: 300px; }
}
}

/* Services disclosure in the main bar. Native <details>, no JavaScript. */
.kk-svc > summary { list-style: none; }
.kk-svc > summary::-webkit-details-marker { display: none; }
.kk-svc[open] > summary { border-bottom-color: currentColor; }
/* Opens on hover for a mouse, and stays keyboard- and tap-operable. */
@media (hover: hover) and (min-width: 1151px) {
  .kk-svc:hover > div { display: block !important; }
  .kk-svc:not([open]) > div { display: none; }
  .kk-svc:hover > div, .kk-svc[open] > div { display: block; }
}
.kk-burger details > summary::-webkit-details-marker { display: none; }

/* Modality chips on a profile: framed, and they expand in place. */
.kk-mod > summary::-webkit-details-marker { display: none; }
.kk-mod[open] { border-color: #00717f; }
.kk-mod[open] > summary > span[aria-hidden] { transform: rotate(180deg); display: inline-block; }