/* ==========================================================================
   com_providerreviews — provider deals page (view=provider)

   Deal cards:      /css/postcodetrim.css (site standard, untouched)
   Review internals: site.css fb-* classes (Top 10 styles, untouched)
   This file:       page architecture — hero + review badge, stat strip,
                    Q&A typography, interlocking diagonal bands, review band.

   Brand variables set inline on .fbp-provider:
   --isp-colour, --isp-colour-dark, --isp-tint
   ========================================================================== */

/* No page-wide font/colour overrides — body copy inherits the site defaults.
   The vars below are used only by specific display components. */
.fbp-provider {
  --fbp-ink: #1d2530;
  --fbp-muted: #5b6572;
  --fbp-hairline: #e8e8ec;
  --fbp-review-bg: #eef1f6;
  --fbp-inset: 30px;
}

/* The providerdeals template supplies the sheet (.pd-sheet: zero padding,
   rounded top corners, overflow hidden) and smooth scrolling — no modern
   CSS selectors needed here. */

/* --------------------------------------------------------------------------
   Hero banner — fb-review-banner + logo circle from site.css, plus H1 + badge
   -------------------------------------------------------------------------- */
.fbp-provider .fbp-hero-banner {
  min-height: 125px;
  border-radius: 0;
  margin: 0 0 30px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

/* Title size comes from the site-wide h1 rules (em-based with their own
   breakpoints) — no font-size override here, so it snaps with the site.
   The title owns the middle of the row (flex: 1) and wraps within it,
   vertically centred against the logo; the badge never drops to a second
   line, so the banner stays at its natural height. */
.fbp-hero-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 0 0 170px;
  padding: 20px 24px 20px 0;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
}

/* Review score inside the banner — white text, no box, right-justified and
   kept compact so the title keeps most of the banner width */
.fbp-banner-review {
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: 26px;
  max-width: 34%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
  color: #fff;
  text-decoration: none;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.fbp-banner-review:hover,
.fbp-banner-review:focus {
  color: #fff;
  text-decoration: none;
}

.fbp-banner-review:hover .fbp-banner-review-cta {
  text-decoration: underline;
}

/* Label sized so short names (e.g. "BT rating") still carry visual weight —
   roughly matching the width of the score row beneath it */
.fbp-banner-review-label {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
}

.fbp-banner-review-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fbp-banner-review-score {
  font-size: 29px;
  font-weight: 700;
  line-height: 1.1;
}

.fbp-banner-review-cta {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
}

.fbp-banner-review-arrow {
  font-size: 19px;
  line-height: 1;
}

.fbp-banner-review .fbp-badge-star {
  color: #fff;
}

.fbp-banner-review .fbp-badge-star svg {
  width: 23px;
  height: 23px;
}

.fbp-review-badge-stars {
  display: inline-flex;
  gap: 1px;
  line-height: 0;
}

.fbp-badge-star {
  position: relative;
  display: inline-block;
  color: #f5b301;
}

.fbp-badge-star svg {
  display: block;
}

.fbp-badge-star svg path {
  fill: rgba(255, 255, 255, 0.25);
}

.fbp-badge-star::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: var(--star-fill, 0%);
  height: 100%;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6 6.6.9-4.8 4.6 1.2 6.5-5.9-3.1-5.9 3.1 1.2-6.5-4.8-4.6 6.6-.9z'/%3E%3C/svg%3E") left center / auto 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6 6.6.9-4.8 4.6 1.2 6.5-5.9-3.1-5.9 3.1 1.2-6.5-4.8-4.6 6.6-.9z'/%3E%3C/svg%3E") left center / auto 100% no-repeat;
}


/* --------------------------------------------------------------------------
   Light brand colours (fbp-light-brand set by the template when the brand's
   luminance is high, e.g. yellows) — brand-coloured surfaces switch from
   white to near-black text so they stay legible
   -------------------------------------------------------------------------- */
.fbp-provider.fbp-light-brand .fbp-hero-title {
  color: #161616;
  text-shadow: none;
}

.fbp-provider.fbp-light-brand .fbp-banner-review {
  color: #161616;
  text-shadow: none;
}

.fbp-provider.fbp-light-brand .fbp-banner-review-cta {
  color: rgba(0, 0, 0, 0.75);
}

.fbp-provider.fbp-light-brand .fbp-banner-review .fbp-badge-star {
  color: #161616;
}

.fbp-provider.fbp-light-brand .fbp-banner-review .fbp-badge-star svg path {
  fill: rgba(0, 0, 0, 0.2);
}

.fbp-provider.fbp-light-brand .fbp-postcode-heading {
  color: #161616;
  text-shadow: none;
}

.fbp-provider.fbp-light-brand .fbp-postcode-sub {
  color: rgba(0, 0, 0, 0.78);
}

.fbp-provider.fbp-light-brand .fbp-band-postcode .fbp-postcodebox .postcode-btn {
  color: #161616;
}

/* --------------------------------------------------------------------------
   Intro + stat strip
   -------------------------------------------------------------------------- */
.fbp-intro {
  max-width: 860px;
  margin: 0 var(--fbp-inset) 24px;
}

/* Top row: intro + stats on the left, review badge + bundles on the right */
.fbp-toprow {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin: 0 var(--fbp-inset) 30px;
}

.fbp-topleft {
  flex: 1 1 62%;
  min-width: 0;
}

.fbp-topright {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fbp-toprow .fbp-intro {
  margin: 0 0 22px;
}

/* Stat pill — one white pill, hairline border and dividers; brand colour
   comes from the icons and numbers only. Labels and microcopy are nowrap
   by design: copy must be short enough to sit on one line. */
/* These glyphs exist in fasterbroadband.woff2 but style.css never mapped
   classes for them — mapped here for the stat pill. */
.icon-pound:before {
  content: '\f154';
}

.icon-gauge:before {
  content: '\e80f';
}

.fbp-stats {
  display: grid;
  grid-template-columns: repeat(var(--fbp-stat-cols, 3), 1fr);
  background: #fff;
  border: 1px solid #c9cad2;
  border-radius: 999px;
  padding: 12px 30px;
  margin: 0 var(--fbp-inset) 30px;
}

.fbp-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 22px;
  min-width: 0;
}

.fbp-stat + .fbp-stat {
  border-left: 1px solid var(--fbp-hairline);
}

.fbp-stat-ic {
  flex: 0 0 auto;
  font-size: 32px;
  color: var(--isp-colour-dark, var(--isp-colour));
}

/* Neutralise per-icon :before styling from other sheets — top-reviews.css
   sizes .icon-tag:before at 60px red for its own layout. Higher specificity
   (class + class) wins without !important. */
.fbp-stat-ic:before {
  font-size: inherit;
  color: inherit;
  margin: 0;
  position: static;
}

.fbp-stat-txt {
  min-width: 0;
}

.fbp-stat-lbl {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--fbp-ink);
  line-height: 1.2;
  white-space: nowrap;
}

.fbp-stat-val {
  display: block;
  font-size: 29px;
  font-weight: 700;
  color: var(--isp-colour-dark, var(--isp-colour));
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.fbp-stat-sub {
  display: block;
  font-size: 13px;
  color: var(--fbp-muted);
  line-height: 1.25;
  white-space: nowrap;
}

/* Bundles checklist — what this provider offers, using the deal card icon set.
   Borderless: hairline rows echo the stat strip, the ticks/crosses carry the
   meaning. Title matches the Q&A question scale (23px). */
.fbp-bundles {
  padding: 0;
}

.fbp-bundles-title {
  font-size: 23px;
  font-weight: 700;
  margin: 0 0 8px;
}

.fbp-bundle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.fbp-bundle-ic {
  flex: 0 0 28px;
  font-size: 20px;
  text-align: center;
}

.fbp-bundle-ic.icon-mobile {
  font-size: 24px;
}

.fbp-bundle-name {
  flex: 1;
}

.fbp-bundle-mark {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.fbp-bundle-yes {
  background: #2f9e44;
}

.fbp-bundle-no {
  background: #d9534f;
}

/* --------------------------------------------------------------------------
   Q&A — editorial columns, dash kicker (candidate for the brushstroke swap)
   -------------------------------------------------------------------------- */
/* Two explicit columns (template renders .fbp-qa-col wrappers): headings
   top-align across the page, and blocks stack at natural height inside each
   column, so a tall block never forces a gap beside it. */
.fbp-qa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 44px;
  align-items: start;
  margin: 0 var(--fbp-inset) 12px;
}

.fbp-qa {
  margin-bottom: 26px;
}

.fbp-qa:last-child {
  margin-bottom: 0;
}

.fbp-qa-q {
  font-size: 23px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.3;
}

/* Hand-drawn underline beneath the provider name in question headings.
   Self-hosted SVG (media/com_providerreviews/images/underline.svg) stretched
   with background-size: cover, sitting behind the text. */
.fbp-sweep {
  /* z-index: 0 creates a stacking context so the negative-z underline sits
     behind the text but stays in front of the page's white background */
  position: relative;
  z-index: 0;
}

.fbp-sweep::after {
  content: '';
  position: absolute;
  bottom: -0.24em;
  left: -0.3em;
  right: -0.3em;
  height: 0.55em;
  z-index: -1;
  background-image: url('../images/underline.svg');
  background-repeat: no-repeat;
  background-size: cover;
}

/* Body copy inherits the site-wide font size and colour deliberately */
.fbp-qa p {
  margin: 0 0 10px;
}

.fbp-qa p:last-child {
  margin-bottom: 0;
}

.fbp-hl {
  color: var(--isp-colour-dark, var(--isp-colour));
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Bands — clip-path slopes; the postcode band overlaps its neighbours so the
   cut corners reveal band colours, never white
   -------------------------------------------------------------------------- */
.fbp-band {
  padding-left: var(--fbp-inset);
  padding-right: var(--fbp-inset);
}

.fbp-band-title {
  font-size: 1.9rem;
  font-weight: 800;
  margin: 0 0 12px;
}

/* Deals band — brand tint, sloped top edge (steeper so the intent is obvious) */
.fbp-band-deals {
  background: var(--isp-tint, #f4f2f8);
  clip-path: polygon(0 56px, 100% 0, 100% 100%, 0 100%);
  margin-top: 26px;
  padding-top: 78px;
  padding-bottom: 60px;
}

/* Deals band header sits in the tall (right) corner of the sloped band,
   month on its own line above the provider name */
.fbp-deals-title {
  text-align: right;
  margin-top: -20px;
  margin-bottom: 22px;
  line-height: 1.15;
}

.fbp-deal-list .deal-item {
  margin-bottom: 4px;
}

/* Postcode band — brand colour. Top slope matches the deals band's angle
   direction (rising to the right); bottom edge straight against the review
   band. Negative top margin overlaps the tint band so the cut corner shows
   lilac, never white. */
.fbp-band-postcode {
  position: relative;
  z-index: 2;
  background: var(--isp-colour);
  clip-path: polygon(0 0, 100% 56px, 100% 100%, 0 100%);
  margin-top: -64px;
  margin-bottom: 0;
  padding-top: 72px;
  padding-bottom: 46px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* Form sits a step lower than the copy so it tucks under the steeper slope */
.fbp-band-postcode .fbp-postcodebox {
  margin-top: 44px;
}

/* No deals band above it: straight edges */
.fbp-band-postcode--solo {
  clip-path: none;
  margin-top: 26px;
  padding-top: 36px;
}

/* Branded postcode entry — white pill, brand-dark button (page-scoped
   overrides of the global postcodebox widget; the global CSS is untouched) */
.fbp-band-postcode .fbp-postcodebox .input-group {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 3px solid var(--isp-colour-dark, rgba(0, 0, 0, 0.32));
  border-radius: 30px;
  padding: 5px;
  /* White ring outside the brand-dark border (same treatment as the site's
     Next buttons), then the soft drop shadow */
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.95),
    0 5px 12px rgba(0, 0, 0, 0.25);
}

/* Inner shadow ring — same treatment as the site's .goto deal buttons */
.fbp-band-postcode .fbp-postcodebox .input-group::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 26px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.14) inset;
  pointer-events: none;
}

/* Input typography matches the site's standard postcode boxes
   (.postcode-form: 1.3em / 400 / #313131) */
.fbp-band-postcode .fbp-postcodebox input.postcode-form {
  flex: 1;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  height: 48px;
  margin-bottom: 0;
  padding: 6px 22px;
  font-size: 1.3em;
  font-weight: 400;
  line-height: 1.4;
  color: #313131 !important;
  border-radius: 26px;
}

.fbp-band-postcode .fbp-postcodebox .input-group-btn {
  flex: none;
  position: relative;
  z-index: 1;
}

/* Search button shaped like the site's deal buttons (30px radius pill) */
.fbp-band-postcode .fbp-postcodebox .postcode-btn {
  height: auto;
  background: var(--isp-colour-dark, #1d2530);
  background-color: var(--isp-colour-dark, #1d2530);
  color: #fff;
  border: none;
  border-radius: 26px;
  padding: 12px 30px;
  font-size: 19px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease;
}

.fbp-band-postcode .fbp-postcodebox .postcode-btn:hover,
.fbp-band-postcode .fbp-postcodebox .postcode-btn:focus {
  filter: brightness(0.85);
}

.fbp-postcode-copy {
  flex: 1 1 420px;
  min-width: 300px;
}

.fbp-postcode-heading {
  font-size: 1.9rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.fbp-postcode-sub {
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

.fbp-postcodebox {
  flex: 1 1 380px;
  max-width: 520px;
  margin: 0;
}

/* Review band — a step darker than the original tone, flat, no vignette */
.fbp-band-review {
  background: #e3e8f0;
  padding-top: 48px;
  padding-bottom: 44px;
  margin-bottom: 0;
  scroll-margin-top: 90px;
}

/* Full-width score panel: identity block | divider | bars */
.fbp-review-panel {
  background: #fff;
  border: 1px solid #d8dee8;
  border-radius: 6px;
  display: flex;
  align-items: stretch;
  margin: 0 0 26px;
}

.fbp-review-identity {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px 20px;
}

/* Page-scoped overrides of the shared Top 10 review styles (site.css) —
   slightly smaller stars/score, larger dates, tighter panel. Top 10 pages
   are unaffected. */
.fbp-provider .fb-starbox {
  width: 33px;
  height: 33px;
}

.fbp-provider .fb-score-big {
  font-size: 37px;
}

.fbp-provider .fb-review-updated {
  font-size: 15px;
}

.fbp-provider .fb-trustpilot-updated {
  margin-top: 0;
}

.fbp-review-identity .fbp-review-logo {
  margin-bottom: 14px;
}

.fbp-review-identity .fb-score-big {
  margin-bottom: 8px;
}

.fbp-review-identity .fb-starsboxed {
  margin-bottom: 0;
}

.fbp-review-identity .fb-review-updated {
  margin-top: 12px;
}

.fbp-review-divider {
  width: 1px;
  background: #e2e6ee;
  margin: 22px 0;
}

.fbp-review-scores {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 34px 16px 58px;
  max-width: 580px;
}

.fbp-review-scores .fb-score-bars {
  margin-top: 0;
}

.fbp-review-scores .fb-score-row {
  margin: 10px 0;
}

.fbp-review-text {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Responsive — snap points match the site-wide breakpoints (991 / 767 / 550)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* The title owns the banner: the star rating is dropped as soon as space
     gets tight so the H1 never shrinks or wraps to accommodate it, and the
     banner slims down (with breathing room for the logo circle). */
  .fbp-banner-review {
    display: none;
  }

  .fbp-provider .fbp-hero-banner {
    min-height: 104px;
  }

  /* Stack the top row before the columns get cramped: intro, stats and
     bundles each take the full width */
  .fbp-toprow {
    flex-direction: column;
    gap: 18px;
  }

  .fbp-topright {
    flex: 1 1 auto;
    width: 100%;
  }

  /* Three nowrap tiles need desktop width — below 992px the deal-count
     tile goes and the pill runs two columns */
  .fbp-stats {
    grid-template-columns: 1fr 1fr;
  }

  .fbp-stat--deals {
    display: none;
  }
}

@media (max-width: 767px) {
  .fbp-provider {
    --fbp-inset: 16px;
  }

  /* Small screens: keep the flex row — a smaller logo circle sits in flow
     and the title takes the remaining width beside it, vertically centred.
     The site's h1 sizes (2.1em, 1.9em at 550px) stay untouched; if "deals"
     wraps to a second line the block stays beside the logo. Scoped to this
     banner only so Top 10 pages are unaffected. */
  .fbp-provider .fbp-hero-banner {
    min-height: 96px;
    margin-bottom: 24px;
    flex-wrap: nowrap;
  }

  .fbp-provider .fbp-hero-banner .fb-review-logo-wrap {
    position: static;
    transform: none;
    flex: 0 0 auto;
    margin-left: 16px;
  }

  .fbp-provider .fbp-hero-banner .fb-review-logo-circle {
    width: 64px;
    height: 64px;
    border-width: 2px;
  }

  .fbp-hero-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 14px 16px 14px 16px;
  }

  /* Tighter pill spacing below tablet width */
  .fbp-stats {
    padding: 10px 16px;
  }

  .fbp-stat {
    gap: 10px;
    padding: 0 12px;
  }

  .fbp-qa-grid {
    grid-template-columns: 1fr;
  }

  .fbp-qa,
  .fbp-qa:last-child {
    margin-bottom: 22px;
  }

  /* Only the very last block on the page drops its margin when the two
     columns stack into one. */
  .fbp-qa-col:last-child .fbp-qa:last-child {
    margin-bottom: 0;
  }

  /* Four-block pages pair price + phone/TV left and speed + dynamic right on
     desktop. When stacking, dissolve the column wrappers and restore the
     reading order: price, speed, phone/TV, dynamic. */
  .fbp-qa-grid--split .fbp-qa-col {
    display: contents;
  }

  .fbp-qa-grid--split .fbp-qa-col:first-child .fbp-qa:nth-child(1) { order: 1; }
  .fbp-qa-grid--split .fbp-qa-col:first-child .fbp-qa:nth-child(2) { order: 3; }
  .fbp-qa-grid--split .fbp-qa-col:last-child .fbp-qa:nth-child(1) { order: 2; }
  .fbp-qa-grid--split .fbp-qa-col:last-child .fbp-qa:nth-child(2) { order: 4; }

  .fbp-band-deals {
    clip-path: polygon(0 32px, 100% 0, 100% 100%, 0 100%);
    padding-top: 52px;
  }

  .fbp-band-postcode {
    clip-path: polygon(0 0, 100% 30px, 100% 100%, 0 100%);
    margin-top: -38px;
    margin-bottom: 0;
    padding-top: 46px;
    padding-bottom: 40px;
  }

  .fbp-band-postcode .fbp-postcodebox {
    margin-top: 10px;
  }

  .fbp-band-postcode--solo {
    clip-path: none;
    margin-top: 20px;
    padding-top: 26px;
  }

  .fbp-band-review {
    padding-top: 44px;
  }

  .fbp-review-panel {
    flex-direction: column;
  }

  .fbp-review-identity {
    flex: 1 1 auto;
    padding-bottom: 18px;
  }

  .fbp-review-divider {
    width: auto;
    height: 1px;
    margin: 0 22px;
  }

  .fbp-review-scores {
    max-width: none;
    padding: 20px 18px 22px;
  }
}

@media (max-width: 550px) {
  /* This heading only: the sitewide 1.6em h1 still wraps to three lines
     beside the logo at very small widths. !important is needed to outweigh
     the sitewide h1 rule (also !important); higher specificity wins. */
  .fbp-hero-title {
    font-size: 1.4em !important;
  }

  /* Phones: scale the two remaining tiles down. Same pill radius. */
  .fbp-stat-ic {
    font-size: 24px;
  }

  .fbp-stat-lbl {
    font-size: 13px;
  }

  .fbp-stat-val {
    font-size: 22px;
  }

  /* Microcopy can't fit beside an icon at phone widths without wrapping or
     overlapping — label + number only on phones */
  .fbp-stat-sub {
    display: none;
  }
}

@media (max-width: 380px) {
  /* Very small screens: the icons go before anything can overlap — the
     numbers are the content, the icons are decoration. Matches the site's
     existing 380px breakpoint. */
  .fbp-stat-ic {
    display: none;
  }

  .fbp-stat {
    gap: 0;
    padding: 0 8px;
  }
}