/* =============================================================
   KENTS PHARMACY — HOMEPAGE SECTIONS
   ============================================================= */

.kp-sr {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- hero ---------- */

.kp-hero {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(560px, 82vh, 820px);
  overflow: hidden;
  background: var(--kp-slate-900);
  isolation: isolate;
}
.kp-hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* The scrim is what makes text on video legible. Two stops: a strong
   bottom-left wash for the copy, plus an overall darkening so the
   headline holds AA regardless of which video frame is showing. */
.kp-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(12,21,24,.94) 0%, rgba(12,21,24,.72) 34%, rgba(12,21,24,.30) 62%, rgba(12,21,24,.42) 100%),
    linear-gradient(to right, rgba(12,21,24,.55) 0%, rgba(12,21,24,0) 62%);
}
.kp-hero__inner {
  padding-top: var(--kp-s10);
  padding-bottom: var(--kp-s8);
  max-width: 1240px;
}
.kp-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--kp-s3);
  margin: 0 0 var(--kp-s4);
  font-size: var(--kp-t-xs); font-weight: 600;
  letter-spacing: var(--kp-ls-wide); text-transform: uppercase;
  color: var(--kp-brass-300);
}
.kp-hero__eyebrow::before { content:''; width:28px; height:2px; background: var(--kp-brass-500); }
.kp-hero__title {
  max-width: 16ch;
  margin: 0 0 var(--kp-s5);
  font-size: var(--kp-t-display);
  color: #fff;
  text-wrap: balance;
}
.kp-hero__lede {
  max-width: 48ch; margin: 0 0 var(--kp-s7);
  font-size: var(--kp-t-lg); color: rgba(255,255,255,.88);
}
.kp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--kp-s4); }

/* ---------- intent router ----------
   Sits ON the hero at desktop and below it on mobile. Four routes
   covering why people actually arrive, so the video is no longer the
   only thing above the fold. */
.kp-router { position: relative; z-index: 2; background: rgba(255,255,255,.06); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.14); }
.kp-router__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .kp-router__grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1040px) { .kp-router__grid { grid-template-columns: repeat(4,1fr); } }

.kp-router__item {
  display: flex; align-items: center; gap: var(--kp-s4);
  padding: var(--kp-s5) var(--kp-s4);
  color: #fff; text-decoration: none;
  border-right: 1px solid rgba(255,255,255,.12);
  transition: background var(--kp-fast) var(--kp-ease);
}
.kp-router__item:last-child { border-right: 0; }
.kp-router__item:hover { background: rgba(255,255,255,.10); color: #fff; }
.kp-router__icon {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: var(--kp-r);
  background: rgba(255,255,255,.10); color: var(--kp-brass-300);
}
.kp-router__icon svg { width: 21px; height: 21px; }
.kp-router__text { display: flex; flex-direction: column; font-size: var(--kp-t-xs); color: rgba(255,255,255,.72); line-height: 1.45; }
.kp-router__text strong { font-size: var(--kp-t-sm); color: #fff; font-weight: 600; }
.kp-router__item .kp-arrow { margin-left: auto; opacity: .5; transition: transform var(--kp-fast) var(--kp-ease), opacity var(--kp-fast); }
.kp-router__item:hover .kp-arrow { transform: translateX(3px); opacity: 1; }

@media (max-width: 639px) {
  .kp-router__item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
}

/* ---------- travel ---------- */

.kp-travel { display: grid; gap: var(--kp-s8); align-items: start; }
@media (min-width: 1000px) { .kp-travel { grid-template-columns: 1fr 1.05fr; gap: var(--kp-s9); } }
.kp-travel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kp-s5); margin-top: var(--kp-s6); }
.kp-travel__more { margin-top: var(--kp-s5); font-size: var(--kp-t-sm); }
.kp-row { text-decoration: none; color: inherit; }

/* ---------- split ---------- */

.kp-split { display: grid; gap: var(--kp-s8); align-items: center; }
@media (min-width: 900px) { .kp-split { grid-template-columns: 1fr 1fr; gap: var(--kp-s9); } }
@media (min-width: 900px) { .kp-split--media { grid-template-columns: 1.05fr 1fr; } }
@media (min-width: 900px) { .kp-split--reverse .kp-figure { order: 2; } }

.kp-figure { margin: 0; border-radius: var(--kp-r-lg); overflow: hidden; box-shadow: var(--kp-shadow-lg); }
.kp-figure img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.kp-figure--tall img { aspect-ratio: 4/3; }
.kp-figure figcaption {
  padding: var(--kp-s3) var(--kp-s5);
  background: var(--kp-slate-900); color: var(--kp-slate-200);
  font-size: var(--kp-t-xs); letter-spacing: .01em;
}

/* ---------- chips (the long tail of services) ---------- */

.kp-chips { list-style: none; margin: var(--kp-s7) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--kp-s3); }
.kp-chips a {
  display: inline-flex; align-items: center; gap: var(--kp-s3);
  padding: 11px var(--kp-s4) 11px var(--kp-s5);
  background: #fff; border: 1px solid var(--kp-line); border-radius: var(--kp-r-full);
  font-size: var(--kp-t-sm); font-weight: 500; color: var(--kp-ink-2); text-decoration: none;
  transition: border-color var(--kp-fast) var(--kp-ease), background var(--kp-fast) var(--kp-ease);
}
.kp-chips a:hover { border-color: var(--kp-slate-400); background: var(--kp-slate-50); color: var(--kp-ink); }

/* ---------- pharmacy first ----------
   Was seven near-empty cards in a four-column grid — 140px boxes holding a
   name and an age, with an orphan on the second row. Now a split: the pitch
   on the left (what it is, three facts, two actions), the seven conditions
   as a tight list in an NHS-blue panel on the right. Seven reads as a list,
   not as a grid that failed to divide. NHS blue is used because this IS an
   NHS-funded service — the one place the palette rule allows it. */

.kp-pf { display: grid; gap: var(--kp-s7); align-items: start; }
@media (min-width: 900px) { .kp-pf { grid-template-columns: 1fr 1.05fr; gap: var(--kp-s9); align-items: center; } }

.kp-pf__intro h2 { margin-bottom: var(--kp-s4); }
.kp-pf__lede { max-width: 48ch; color: var(--kp-ink-2); margin: 0 0 var(--kp-s6); }

.kp-pf__facts { list-style: none; margin: 0 0 var(--kp-s6); padding: 0; display: grid; gap: var(--kp-s4); }
.kp-pf__facts li { display: flex; gap: var(--kp-s3); align-items: flex-start; color: var(--kp-ink-2); }
.kp-pf__facts svg { flex: 0 0 auto; width: 22px; height: 22px; padding: 3px; margin-top: 1px; border-radius: 50%; background: var(--kp-nhs-bg); color: var(--kp-nhs); }
.kp-pf__facts strong { color: var(--kp-ink); }

.kp-pf__actions { display: flex; flex-wrap: wrap; gap: var(--kp-s4); }

.kp-pf__panel {
  padding: var(--kp-s6);
  background: var(--kp-nhs-bg);
  border: 1px solid #cfe0f2;
  border-top: 4px solid var(--kp-nhs);
  border-radius: var(--kp-r-lg);
}
.kp-pf__panel-title {
  margin: 0 0 var(--kp-s4);
  font-size: var(--kp-t-xs); font-weight: 600; letter-spacing: var(--kp-ls-wide); text-transform: uppercase;
  color: var(--kp-nhs);
}
.kp-pf__list { list-style: none; margin: 0; padding: 0; }
.kp-pf__list li + li { border-top: 1px solid rgba(0, 94, 184, .14); }
.kp-pf__list a {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: var(--kp-s4);
  padding: var(--kp-s3) var(--kp-s2);
  margin: 0 calc(-1 * var(--kp-s2));
  border-radius: var(--kp-r-sm);
  color: var(--kp-ink); text-decoration: none;
}
.kp-pf__list a:hover { background: rgba(255, 255, 255, .7); }
.kp-pf__list strong { font-weight: 600; }
.kp-pf__list span { font-size: var(--kp-t-sm); color: var(--kp-ink-3); white-space: nowrap; }
.kp-pf__list .kp-arrow { color: var(--kp-nhs); }
.kp-pf__note { margin: var(--kp-s4) 0 0; font-size: var(--kp-t-sm); color: var(--kp-ink-3); }

@media (max-width: 480px) {
  .kp-pf__list a { grid-template-columns: 1fr auto; }
  .kp-pf__list span { grid-column: 1; white-space: normal; }
  .kp-pf__list .kp-arrow { grid-row: 1 / span 2; grid-column: 2; }
}

/* ---------- steps ---------- */

.kp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kp-s5); }
.kp-steps li { display: flex; gap: var(--kp-s5); align-items: flex-start; }
.kp-steps span {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--kp-brass-500); color: var(--kp-ink);
  font-weight: 700; font-size: var(--kp-t-sm);
}
.kp-steps strong { display: block; color: #fff; margin-bottom: 2px; }
.kp-steps div { font-size: var(--kp-t-sm); color: var(--kp-slate-200); }

/* ---------- facts ---------- */

.kp-facts { list-style: none; margin: var(--kp-s7) 0 0; padding: var(--kp-s6) 0 0; border-top: 1px solid var(--kp-line); display: flex; flex-wrap: wrap; gap: var(--kp-s8); }
.kp-facts li { display: flex; flex-direction: column; }
.kp-facts strong { font-family: var(--kp-font-display); font-size: 2rem; color: var(--kp-brass-700); line-height: 1; }
.kp-facts span { margin-top: 6px; font-size: var(--kp-t-xs); color: var(--kp-ink-3); letter-spacing: var(--kp-ls-wide); text-transform: uppercase; }

/* ---------- visit ---------- */

.kp-visit { display: grid; gap: var(--kp-s5); grid-template-columns: 1fr; }
@media (min-width: 760px)  { .kp-visit { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1060px) { .kp-visit { grid-template-columns: 1fr 1fr 1.3fr; } }
.kp-visit__card, .kp-visit__map {
  background: #fff; border: 1px solid var(--kp-line);
  border-radius: var(--kp-r-lg); padding: var(--kp-s6);
}
.kp-visit__card h3 { font-family: var(--kp-font-body); font-size: var(--kp-t-base); letter-spacing: var(--kp-ls-wide); text-transform: uppercase; color: var(--kp-ink-3); font-size: var(--kp-t-xs); }
.kp-hours--light dt { color: var(--kp-ink-3); }
.kp-hours--light dd { color: var(--kp-ink); font-weight: 500; }
.kp-hours--light div { padding: 7px 0; border-bottom: 1px solid var(--kp-line-soft); }
.kp-hours--light div:last-child { border-bottom: 0; }
/* The dashed, padded, grey look belongs to the EMPTY state only — it had been
   on the base class, so a real map sat inside a dotted box with padding. A
   real map fills the frame edge to edge. Doubled class per the convention. */
.kp-visit__map { padding: 0; overflow: hidden; }
.kp-visit__map.kp-visit__map--empty { display: grid; place-items: center; padding: var(--kp-s6); background: var(--kp-slate-50); border-style: dashed; }
.kp-visit__mapinner { text-align: center; max-width: 40ch; }

/* ---------- head row ---------- */
.kp-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--kp-s5); max-width: none; flex-wrap: wrap; }
.kp-head--row h2 { margin: 0; }

/* ---------- photography gaps, made visible ----------
   The client said they like the existing images. Two of them do not hold up
   (see notes/assets.md). Rather than paper over that with the same weak shot,
   the gap is shown. Delete these rules once real photography lands. */

.kp-card__media--todo {
  display: grid; place-items: center; align-content: center; gap: var(--kp-s3);
  aspect-ratio: 3/2;
  background: repeating-linear-gradient(45deg, var(--kp-slate-50), var(--kp-slate-50) 10px, #fff 10px, #fff 20px);
  border-bottom: 1px solid var(--kp-line);
  color: var(--kp-slate-400);
}
.kp-card__media--todo svg { width: 34px; height: 34px; }
.kp-card__media--todo span { font-size: var(--kp-t-xs); font-weight: 600; letter-spacing: var(--kp-ls-wide); text-transform: uppercase; }

.kp-shot {
  position: absolute; left: var(--kp-s3); bottom: var(--kp-s3); z-index: 2;
  padding: 4px 9px; border-radius: var(--kp-r-sm);
  background: rgba(168,35,42,.94); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.kp-shot--minor { background: rgba(123,85,20,.94); }

/* ---------- placeholders ----------
   Anything not yet confirmed by the client is wrapped in .ph. Append ?ph to
   the URL to highlight every one of them. Same convention as leanvita.
   Nothing marked .ph may go live unchecked. */
body.ph-on .ph {
  background: rgba(190,137,45,.22);
  box-shadow: 0 0 0 2px rgba(190,137,45,.55);
  border-radius: 3px;
}
body.ph-on .ph::after { content: ' ?'; font-weight: 700; color: var(--kp-brass-700); }

/* ---------- booking (Titanverse iframe) ----------
   The provider gives a fixed-height iframe. It is given its own section
   rather than a grid cell, and capped in width so the form does not stretch
   to 1240px on desktop, which no booking form is designed for.

   In the theme this markup comes from a Customizer field, so switching
   provider is a paste. Nothing here is Titanverse-specific except the src. */

.kp-booking {
  max-width: 860px;
  background: #fff;
  border: 1px solid var(--kp-line);
  border-radius: var(--kp-r-lg);
  box-shadow: var(--kp-shadow);
  overflow: hidden;
}
.kp-booking__frame {
  display: block;
  width: 100%;
  height: 600px;
  border: 0;
}
/* Sized for the TALLEST step, not the average one.

   The provider does not post its height to the parent, so the frame cannot
   adapt: whatever number is written here is what every step gets. Size it
   short and the service list — the first thing every patient sees — becomes a
   scrollbox inside a scrolling page. Size it tall and later, shorter steps
   trail some of the provider's pale blue below the content. The first happens
   to everybody; the second happens only to people already booking. So it is
   sized tall.

   Their app renders at the FRAME's width, not the viewport's, and it has its
   own breakpoints, so the height does not fall as the frame gets wider — it
   swings. Measured against the live service list:

     frame width   340   420   480   620   680   760   860   1120
     content       2950  2320  2000  1850  2250  2220  2260  2160

   Narrow is by far the worst, the middle is the shortest, and everything from
   680px up sits around 2250. Two bands cover that without chasing every kink,
   and the numbers carry roughly 250px of headroom on purpose: every service
   the client adds to the booking system makes their list about 66px taller,
   and the failure we are avoiding is the scrollbar coming back. Re-measure if
   more than three or four are added.

   If the provider ever adds postMessage, delete all of this and listen for
   the height instead. */
.kp-booking__frame { height: 3100px; }
@media (min-width: 460px) { .kp-booking__frame { height: 2500px; } }

/* Sits under the frame, not inside the white card. */
.kp-booking__out {
  max-width: 860px;
  margin: var(--kp-s4) 0 0;
  font-size: var(--kp-t-sm);
}
.kp-booking__out a { color: var(--kp-ink-3); }
.kp-booking__out a:hover { color: var(--kp-brand); }

.kp-booking__fallback { padding: var(--kp-s6); margin: 0; }

/* ---------- services grid ----------
   Name, funding badge, link. No image, no price, no description — so the tile
   is short, and four fit across comfortably. The set reads as an index rather
   than twelve competing cards. */

.kp-sgrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--kp-s4); grid-template-columns: 1fr;
}
@media (min-width: 560px)  { .kp-sgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .kp-sgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .kp-sgrid { grid-template-columns: repeat(4, 1fr); } }

.kp-sbox { display: flex; }

.kp-sbox__link {
  display: flex; flex-direction: column; gap: var(--kp-s4);
  width: 100%; padding: var(--kp-s5);
  border: 1px solid var(--kp-line); border-radius: var(--kp-r-lg);
  background: #fff; text-decoration: none; color: inherit;
  transition: border-color var(--kp-fast) var(--kp-ease),
              box-shadow var(--kp-fast) var(--kp-ease),
              transform var(--kp-fast) var(--kp-ease);
}
.kp-sbox__link:hover {
  border-color: var(--kp-slate-400);
  box-shadow: var(--kp-shadow);
  transform: translateY(-2px);
  color: inherit;
}

.kp-sbox__top { display: flex; align-items: center; justify-content: space-between; gap: var(--kp-s3); }
.kp-sbox__count { font-size: var(--kp-t-xs); color: var(--kp-ink-3); white-space: nowrap; }

/* Title and arrow share a row, with the arrow pinned right. Without a price
   in the footer there is nothing else to anchor the bottom of the tile. */
.kp-sbox__title {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--kp-s3);
  margin-top: auto;
}
.kp-sbox h3 {
  margin: 0;
  font-family: var(--kp-font-body);
  font-size: var(--kp-t-lg); font-weight: 600;
  letter-spacing: 0; line-height: 1.3;
  color: var(--kp-ink);
}
.kp-sbox__title .kp-arrow {
  flex: none; color: var(--kp-slate-400);
  transition: transform var(--kp-fast) var(--kp-ease), color var(--kp-fast);
}
.kp-sbox__link:hover .kp-arrow { transform: translateX(3px); color: var(--kp-brass-700); }

/* ---------- The Skin Bar ---------- */

.kp-skin__role {
  margin-top: calc( var(--kp-s3) * -1 );
  font-size: var(--kp-t-lg); font-weight: 600; color: var(--kp-brass-700);
}
.kp-figure--portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 899px) { .kp-figure--portrait img { aspect-ratio: 3 / 2; } }

.kp-creds {
  list-style: none; margin: var(--kp-s6) 0 0; padding: var(--kp-s5) 0 0;
  border-top: 1px solid var(--kp-brass-200);
  display: flex; flex-wrap: wrap; gap: var(--kp-s6);
}
.kp-creds li { display: flex; flex-direction: column; gap: 2px; }
.kp-creds strong {
  font-family: var(--kp-font-display); font-size: 1.35rem;
  color: var(--kp-ink); line-height: 1.1;
}
.kp-creds span { font-size: var(--kp-t-xs); color: var(--kp-ink-3); }

.kp-skin__actions { display: flex; flex-wrap: wrap; gap: var(--kp-s4); margin-top: var(--kp-s7); }

/* Tile footer, used on the services index where prices are shown. */
.kp-sbox__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--kp-s3);
  margin-top: auto; padding-top: var(--kp-s3);
  border-top: 1px solid var(--kp-line-soft);
}
.kp-sbox__foot .kp-arrow { color: var(--kp-slate-400); transition: transform var(--kp-fast) var(--kp-ease), color var(--kp-fast); }
.kp-sbox__link:hover .kp-sbox__foot .kp-arrow { transform: translateX(3px); color: var(--kp-brass-700); }
.kp-sbox__foot .kp-price small { font-weight: 500; }