/*
 * landing-polish.css — visual QA pass for the services landing pages
 * (Main, Directory, PrivateGP, BloodTests, Scans, Treatments, Vaccinations,
 * HealthyMeals, HealthStore). Loaded after mygp.css; overrides only.
 * Uses mygp.css tokens throughout — no new colours, radii or shadows.
 */

/* ======================================================================
 * 1. Typography: no orphaned words in headings, tidier rag in leads
 * ==================================================================== */
.h1,
.h2,
.h2-blog,
.h3,
.reviews__title,
.offer-card__title,
.how-step__title,
.in-app__title,
.service-card__title,
.footer-join__title {
  text-wrap: balance;
}
.lead,
.body-l,
.body,
.service-hero__from,
.service-card__line,
.dir-row__line,
.footer-join__text p {
  text-wrap: pretty;
}

/* One section-heading size everywhere: "You might also need" used the
 * 36px blog size while every other section heading is --fs-h2. */
.related .h2-blog {
  font-size: var(--fs-h2);
}

/* FAQ head has no __text wrapper, so heading → lead was 16px instead of
 * the 8px used by every other section header. */
.faq__head .h2 + .body-l {
  margin-top: -8px;
}

/* ======================================================================
 * 2. Grid alignment: everything starts on the container edge
 * ==================================================================== */

/* Hero copy sat 24px inside the grid (8px on phones) while the trust bar,
 * section headings and cards below start on the container edge. */
.hero--static .hero__content {
  padding-left: 0;
  padding-right: 0;
}

/* NHS strip on /services was inset 48px (28px on phones). */
.nhs__inner {
  padding-left: 0;
  padding-right: 0;
}

/* Footer link columns were inset 32px from the newsletter row and legal row. */
.footer-links__inner {
  padding-left: 0;
  padding-right: 0;
}

/* Hero visual: the right-hand floating tag touched the right edge of the
 * 1440 frame (and was cut off between 1280 and 1439, where the disc bled
 * 40px off the edge); keep the disc and its tags inside the frame. */
.store-circle.hero__circle {
  right: max(0px, calc(50% - 720px));
}
.hero__circle .product-tag[style*='right:'] {
  right: 4.5% !important;
}

/* ======================================================================
 * 3. Vertical rhythm: 64px top/bottom on every content section
 *    (= 128px between sections on desktop, 80px on phones)
 * ==================================================================== */
@media (min-width: 768px) {
  .related {
    padding-bottom: 64px;
  }
  .related__inner {
    gap: 40px; /* match options / how-it-works header → content gap */
  }
  .services-index {
    padding-bottom: 64px;
  }
  .reviews {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .services-band {
    padding-bottom: 64px;
  }
}
@media (max-width: 767px) {
  .related,
  .services-index {
    padding-bottom: 40px;
  }
}

/* ======================================================================
 * 4. Cards: one border/shadow treatment across offer, how and service cards
 * ==================================================================== */
.service-card {
  border: 1px solid var(--grey-very-light);
}
@media (hover: hover) {
  a.service-card:hover {
    border-color: var(--primary-50);
  }
}

/* ======================================================================
 * 5. Hero rating: stars and caption stacked in a column at every width
 *    (on phones the caption ran straight into the fifth star)
 * ==================================================================== */
.rating > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.rating .stars,
.rating .stars .icon {
  line-height: 1;
}
.rating__caption {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-rating);
}
.rating .stars .icon {
  font-size: 18px !important;
}
.rating__num {
  line-height: 1;
}

/* Button and rating sit on one centre line, the rating's number and its
 * stars/caption block centred against each other (they were bottom-aligned,
 * so the rating hung below the button's middle). */
@media (min-width: 768px) {
  .hero__actions,
  .hero--static .hero__actions {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
  .rating {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: auto;
  }
}

/* ======================================================================
 * 6. Tablet (768–1279) — scoped so phones keep mygp.css's mobile hero
 * ==================================================================== */
@media (min-width: 768px) and (max-width: 1279px) {
  /* Hero visual: the disc bled 120px off the right edge, cutting off the
   * phone and the right-hand product tag at 1024. */
  .store-circle.hero__circle {
    right: -60px;
  }
  .hero__circle .product-tag[style*='right:'] {
    right: 16% !important;
  }
  .hero__circle .product-tag[style*='left:0%'],
  .hero__circle .product-tag[style*='left: 0%'] {
    left: 6% !important;
  }
  /* Keep hero copy clear of the disc and its floating tags. */
  .hero--static .hero__content {
    width: 480px;
  }
  .hero--static .h1 {
    font-size: 40px;
  }

  /* How it works: 24px titles broke onto two lines in narrow columns. */
  .how-step {
    padding: 24px;
  }
  .how-step__title {
    font-size: 20px;
  }

  /* "What you can do" / FAQs: give the right-hand column more room. */
  .in-app__inner,
  .faq__inner {
    grid-template-columns: minmax(0, 320px) 1fr;
    gap: 40px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* Small tablets: smaller disc and narrower copy so they don't collide. */
  .hero--static .hero__content {
    width: 400px;
  }
  .store-circle.hero__circle {
    width: 420px;
    height: 420px;
    right: -70px;
    top: -20px;
  }
  .hero__circle .product-tag {
    scale: 0.85;
  }
  .hero__circle .product-tag[style*='right:'] {
    right: 18% !important;
  }
  .hero__circle .product-tag[style*='left:0%'],
  .hero__circle .product-tag[style*='left: 0%'] {
    left: 14% !important;
  }
  .in-app__inner,
  .faq__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ======================================================================
 * 7. Phones (≤767)
 * ==================================================================== */
@media (max-width: 767px) {
  /* Hero visual: smaller disc so the floating tags stay inside the frame. */
  .store-circle.hero__circle {
    width: 340px;
    height: 340px;
    top: -36px;
    right: 50%;
  }
  .hero__circle .product-tag {
    scale: 0.85;
  }
  /* "Already booked?" link: keep the arrow with the text when it wraps. */
  .hero__web-link {
    display: inline;
  }
  .hero__web-link .icon {
    vertical-align: -4px;
  }
  .hero__circle .product-tag[style*='left:'] {
    left: 4% !important;
  }
  .hero__circle .product-tag[style*='right:'] {
    right: 4% !important;
  }

  /* Trust bar with 3 points: a clean list instead of three cramped columns. */
  .trust-bar--3 {
    grid-template-columns: 1fr;
    padding: 4px 16px;
    row-gap: 0;
  }
  .trust-bar--3 .trust-bar__item {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
    padding: 12px 0;
    font-size: 14px;
  }
  .trust-bar--3 .trust-bar__item::before,
  .trust-bar--3 .trust-bar__item::after {
    display: none !important;
  }
  .trust-bar--3 .trust-bar__item + .trust-bar__item {
    border-top: 1px solid var(--neutral-100);
  }

  .faq__inner,
  .in-app__inner {
    gap: 24px;
  }

  /* Store promo copy on /services was inset 12px from the phone grid. */
  .store__content {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ######################################################################
 * DETAIL PASS — element-level alignment and polish
 * #################################################################### */

/* ======================================================================
 * 8. Hero visual: floating product tags
 * ==================================================================== */
/* The right-hand tag sat over the phone's option rows and hid their
 * prices (£89 on Private GP, £160 on Scans, £40 on Vaccinations…). Drop it
 * onto the phone's empty lower half so no phone content is covered. */
@media (min-width: 1280px) {
  .hero__circle .product-tag[style*='right:'] {
    top: 80% !important;
    right: 7% !important;
  }
}
/* Tablet: the 1.15x phone filled the 560px disc, so every tag landed on
 * phone content (the left tag hid the phone's title, the right one its
 * prices and CTA). Smaller phone, left tag clear of the title, and the
 * right-hand tag dropped — there is no free space for it at this size. */
@media (min-width: 768px) and (max-width: 1279px) {
  .hero__circle .store-circle__phone {
    transform: translateX(-50%) rotate(-8deg) scale(0.85);
    top: 12%;
  }
  .hero__circle .product-tag[style*='left:0%'],
  .hero__circle .product-tag[style*='left: 0%'] {
    left: 2% !important;
    top: 22% !important;
  }
  .hero__circle .product-tag[style*='right:'] {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__circle .product-tag[style*='left:0%'],
  .hero__circle .product-tag[style*='left: 0%'] {
    top: 9% !important;
  }
}

/* ======================================================================
 * 9. Marquee: the bullet hugged the text before it (24px) and sat 300px+
 *    from the next item. Each item now takes an equal share of the run,
 *    text centred, with the bullet on the boundary between items, so it
 *    sits midway between neighbours.
 * ==================================================================== */
.marquee__run {
  justify-content: stretch;
}
.marquee__item {
  flex: 1 1 0;
  justify-content: center;
  position: relative;
  gap: 0;
  padding: 0 24px;
  line-height: 16px;
}
.marquee__item::after {
  position: absolute;
  right: -2px;
  top: 50%;
  margin-top: -2px;
}

/* ======================================================================
 * 10. Breadcrumb: the chevron is the right half of a rotated square, so
 *     it read 11px from the previous crumb and 7px from the next.
 *     Shift it back so both gaps are 9px.
 * ==================================================================== */
.crumbs li + li::before {
  transform: translateX(-2px) rotate(45deg);
}

/* ======================================================================
 * 11. How it works
 * ==================================================================== */
/* Serif numerals sat 1.5px below the circle's centre. */
.how-step__num {
  padding-bottom: 3px;
  line-height: 1;
}
/* Connector line was 1px above the circle centre on desktop, and 7px
 * above it wherever the card padding drops to 24px. */
@media (min-width: 768px) {
  .how-step + .how-step::before {
    top: 51.5px;
  }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .how-step + .how-step::before {
    top: 43.5px;
  }
}

/* ======================================================================
 * 12. Offer cards (options & prices)
 * ==================================================================== */
/* Store "Buy" buttons used the generic 28px button padding; every other
 * card CTA (Book, Order, Request, Subscribe) uses 20px. */
.offer-card__foot .btn {
  padding-left: 20px;
  padding-right: 20px;
}
/* 4-up rows: "£149 /month" + "Request" ran 20px into the card padding
 * (Treatments, Weight management) — tighten the footer for every 4-up
 * card so prices stay the same size across the row. */
@media (min-width: 1280px) {
  .offer-grid--4 .offer-card__price strong {
    font-size: 28px;
  }
  .offer-grid--4 .offer-card__price {
    gap: 4px;
  }
  .offer-grid--4 .offer-card__foot {
    gap: 8px;
  }
  .offer-grid--4 .offer-card__foot .btn {
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* Between 1101 and 1279 four columns are too narrow for the footer at
 * all; use two columns (as below 1100) instead. */
@media (min-width: 768px) and (max-width: 1279px) {
  .offer-grid--4 {
    --cols: 2;
  }
}

/* ======================================================================
 * 13. Reviews carousel: the disabled "previous" arrow was 35% opacity,
 *     so the background doodle showed through it. Same look, solid.
 * ==================================================================== */
.arrow-btn--prev:disabled {
  opacity: 1;
  background: var(--white);
  border-color: color-mix(in srgb, var(--primary-500) 35%, var(--white));
  color: color-mix(in srgb, var(--primary-500) 35%, var(--white));
}

/* ======================================================================
 * 14. Store badges: App Store and Google Play badges were different
 *     widths (186 vs 202, 112 vs 119 in the footer). Equal columns.
 * ==================================================================== */
.store-badges {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: max-content;
  max-width: 100%;
}
.store-badge {
  justify-content: center;
}

/* ======================================================================
 * 15. Footer
 * ==================================================================== */
/* LinkedIn's glyph fills its whole 24-unit box, the others ~20 — it read
 * 4px larger than its neighbours. Match its ink size to the rest. */
.footer-socials a[aria-label*='LinkedIn'] svg {
  width: 18px;
  height: 18px;
}
/* "OR" divider label was 10px light. */
.footer-or span {
  font-size: 12px;
  line-height: 16px;
}
/* Copyright and legal links sat on different baselines. */
.footer-legal__inner {
  align-items: baseline;
}
.footer-legal__links a {
  line-height: 21px;
}

/* ======================================================================
 * 16. Directory: price units (/month, /week, /dose) were bold like the
 *     amount; match the offer cards — regular, smaller, muted.
 * ==================================================================== */
.dir-option__unit {
  font-weight: 400;
  font-size: 14px;
  color: var(--grey-80);
  margin-left: 1px;
}

/* ======================================================================
 * 17. Trust bar, 1024–1279: "Appointments 7am–10pm, 7 days" broke onto
 *     two centred lines beside a 32px icon. Smaller icon + 14px text so
 *     every item stays on one line; left-aligned text next to its icon.
 * ==================================================================== */
@media (min-width: 1024px) {
  .trust-bar__item {
    text-align: left;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .trust-bar__item {
    gap: 12px;
    font-size: 14px;
  }
  .trust-bar__item .icon {
    font-size: 24px;
  }
}

/* ======================================================================
 * 18. Offer-card titles: balanced wrapping split "Face-to-face" at its
 *     hyphen ("Face-to- / face appointment") in narrow cards.
 * ==================================================================== */
.offer-card__title {
  text-wrap: pretty;
}

/* ======================================================================
 * 19. Hero visual on phones: a 1.15x phone filled the 340px disc and all
 *     three tags sat on its text (titles, banners, prices). Smaller phone,
 *     two tags on the disc rim — top-left and bottom-right — third dropped.
 * ==================================================================== */
@media (max-width: 767px) {
  .hero__circle .store-circle__phone {
    transform: translateX(-50%) rotate(-8deg) scale(0.8);
    top: 13%;
  }
  .hero__circle .product-tag[style*='right:'] {
    display: none;
  }
  .hero__circle .product-tag[style*='left:0%'],
  .hero__circle .product-tag[style*='left: 0%'] {
    left: 0% !important;
    top: 13% !important;
  }
  .hero__circle .product-tag[style*='bottom:'] {
    left: auto !important;
    right: 0% !important;
    bottom: 7% !important;
  }
}

/* ======================================================================
 * 20. NHS strip: the badge artwork has a 4-unit inner margin, so "NHS" and
 *     "Providing NHS services" stopped 4px short of the container edge the
 *     "All services" button and footer align to. Pull it out by that margin
 *     at each badge size (300 / 220 / 169px wide).
 * ==================================================================== */
.nhs__badge {
  display: flex;
}
.nhs__badge svg {
  flex-shrink: 0;
  max-width: none;
  width: 300px;
  height: auto;
  margin-right: -4px;
}
@media (max-width: 1023px) {
  .nhs__badge svg {
    width: 220px;
    margin-right: -3px;
  }
}
@media (max-width: 767px) {
  .nhs__badge svg {
    width: 169px;
    margin-right: -2px;
  }
}

/* ======================================================================
 * 21. Home "Get more with myGP" store disc: the top tag hid the phone's
 *     "myGP Store" title and the right tag hid the "BP monitor" tile label.
 *     Move both onto empty parts of the phone (status bar / below the CTA).
 * ==================================================================== */
.store__circle .product-tag[style*='left:0%'],
.store__circle .product-tag[style*='left: 0%'] {
  top: 9% !important;
}
.store__circle .product-tag[style*='right:'] {
  top: 74% !important;
  right: -3% !important;
}
.store__circle .product-tag[style*='bottom:'] {
  bottom: 4% !important;
  left: 2% !important;
}
@media (max-width: 767px) {
  /* Phones: the two lower tags collided and covered "Shop all"; keep two
   * tags, as in the hero. */
  .store__circle .product-tag[style*='right:'] {
    display: none;
  }
  .store__circle .product-tag[style*='bottom:'] {
    left: auto !important;
    right: 0% !important;
    bottom: 3% !important;
  }
}

/* ======================================================================
 * 22. Store "full range" note: when it wraps (phones) the phone icon sat
 *     between the two lines; pin it to the first line.
 * ==================================================================== */
.options__more {
  align-items: flex-start;
}
.options__more .icon {
  margin-top: 3px; /* (24px line − 18px icon) / 2 */
  flex-shrink: 0;
}

/* ======================================================================
 * 23. Download banner: the only shadowed card with the darker outline
 *     border; match offer / service / directory cards.
 * ==================================================================== */
.install-banner {
  border-color: var(--grey-very-light);
}