/*
   Section styles for the richly-laid-out plan pages — currently Commercial
   Motor Insurance, and the same building blocks are ready for Comprehensive
   and Takaful when their designs land.

   Loaded only on gi_service single pages, alongside assets/pages.css, whose
   hero, tile and icon-disc rules this file builds on.
*/

/* ============================================================
   1. Hero additions
   ============================================================ */

/* The plan designs set the headline in capitals; tighten the tracking so it
   does not read as shouting at display sizes. */
.p-hero h1.is-caps {
  text-transform: uppercase;
  letter-spacing: -.005em;
  font-size: clamp(1.75rem, 5.6vw, 2.85rem);
}

/* "Why Choose Commercial Motor Insurance?" is longer than any heading the
   original design had to carry. site.css sets flex:none on the label, which
   pushes a long one off the side of a phone; let it shrink and wrap instead. */
.rule-heading > span { flex: 0 1 auto; }

/* The plan mockups set these section titles a step heavier and larger than the
   .8125rem/600 site.css draws for the original five pages, where they sit above
   much shorter sections. Trim the tracking a touch so the extra size does not
   push the longest title into the hairlines. */
.gi-plan-layout .rule-heading {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .13em;
  margin-bottom: 1.75rem;
}

/* The plan mockups run a much tighter section rhythm than the original five
   pages: neighbouring blocks sit about 40px apart, where two stacked --sec-y
   paddings put 140px of empty page between them. */
.gi-plan-layout .section--tight { padding-block: 1.25rem; }

/* The benefit row is drawn without the tinted disc pages.css puts behind an
   icon, at roughly twice the glyph size and in the full primary green — the
   discs made the row read as small and washed out next to the mockup. */
.tiles--6 .icon-disc {
  width: auto;
  height: auto;
  margin-bottom: 1.1rem;
  background: none;
  color: var(--primary);
}

.tiles--6 .icon-disc .ico { width: 2.75rem; height: 2.75rem; }

/* Six benefit tiles across, which only fits in a full-width container. */
.tiles--6 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 768px) { .tiles--6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .tiles--6 { grid-template-columns: repeat(6, 1fr); } }

.p-hero__ticks {
  display: grid;
  gap: .55rem;
  margin-top: 1.15rem;
}

.p-hero__ticks li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--dark);
}

.p-hero__ticks .ico {
  flex: none;
  margin-top: .18em;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--accent);
}

/* ============================================================
   2. Trust strip — a white card straddling the hero's lower edge
   ============================================================ */
.section--overlap {
  position: relative;
  z-index: 3;
  margin-top: -2.25rem;
  padding-block: 0 2.5rem;
}

.trust-strip {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: 1fr;
  padding: 1.35rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--sh);
}

.trust-strip li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
}

/* The design draws these at roughly a twelfth of the strip's width — far
   larger than the 1.9rem the first pass used, which is what made the row read
   as thin and undersized next to the mockup. */
.trust-strip .ico {
  flex: none;
  width: 3rem;
  height: 3rem;
  color: var(--primary);
}

.trust-strip h3 { font-size: .875rem; margin-bottom: .2rem; }
.trust-strip p { font-size: .75rem; line-height: 1.5; }

/* ============================================================
   3. Coverage panels
   ============================================================ */
.cover-panels {
  display: grid;
  gap: 2rem var(--gap);
  grid-template-columns: 1fr;
}

/* The design fills these a shade below the page rather than leaving them white
   on white, where only the hairline border separates them from the section. */
.cover-panel {
  position: relative;
  padding: 2.5rem 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  box-shadow: var(--sh-sm);
}

/* The green ribbon tab the design puts across the top of each panel: a banner
   whose bottom corners are cut back, not the rounded pill the first pass drew.
   clip-path rather than borders so the notch stays crisp at any width. */
.cover-panel__tab {
  position: absolute;
  top: -.9rem;
  left: 50%;
  transform: translateX(-50%);
  padding: .55rem 2.75rem;
  background: var(--primary);
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.15rem) 100%, 1.15rem 100%);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Hub and spokes. On a phone it degrades to a plain single-column list —
   the only honest way to render a radial diagram at 360px. */
.spokes {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.spoke {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--dark);
}

/* White discs with a soft shadow, so each peril glyph floats on its own plate
   as the mockup draws it, rather than a faint tint that blends into the panel. */
.spoke .icon-disc {
  width: 3rem;
  height: 3rem;
  background: #fff;
  color: var(--primary);
  box-shadow: 0 4px 12px rgba(11, 78, 59, .1);
}

.spoke .icon-disc .ico { width: 1.65rem; height: 1.65rem; }

.spokes__hub { display: none; }

/* ============================================================
   4. Exclusions
   ============================================================ */
.exclusions {
  position: relative;
  display: grid;
  gap: 1.15rem;
  grid-template-columns: 1fr;
}

.exclusion { display: flex; gap: .8rem; align-items: flex-start; }

/* An open red ring with a bold cross inside it, not the tinted plate the first
   pass used — the mockup leans on the outline for its weight. */
.exclusion__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border: 2px solid #c0392b;
  border-radius: 50%;
  background: transparent;
  color: #c0392b;
}

.exclusion__mark .ico { width: 1.25rem; height: 1.25rem; }
.exclusion h3 { font-size: .8125rem; margin-bottom: .2rem; }
.exclusion p { font-size: .75rem; line-height: 1.55; }

/* ============================================================
   5. Vehicle classes
   ============================================================ */
.vehicles {
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(2, 1fr);
}

.vehicle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
  padding: 1.1rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--sh-sm);
  text-align: center;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.vehicle:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: var(--accent); }
.vehicle .ico { width: 2.4rem; height: 2.4rem; color: var(--primary); }
.vehicle img { width: 100%; max-width: 8rem; height: auto; }
.vehicle span { font-size: .75rem; font-weight: 600; line-height: 1.3; color: var(--dark); }

/* ============================================================
   6. How it works — a horizontal rail on desktop
   ============================================================ */
.flow {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  padding: 1.35rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--sh-sm);
}

/* Each step is a two-by-two: the numbered badge and its title across the top,
   the icon and the description beneath. Laying it out as a grid rather than
   nesting a header div keeps the badge and the icon on one column, which is
   the alignment the design hangs the whole rail off. */
.flow__step {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .5rem .7rem;
}

.flow__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
}

/* Sized to sit under the badge and read as the step's picture, not a bullet —
   the design draws it a good half again bigger than the number. */
.flow__step > .ico { justify-self: center; width: 2.4rem; height: 2.4rem; color: var(--primary); }
.flow__step h3 { font-size: .8125rem; margin: 0; color: var(--primary); }
.flow__step p { font-size: .75rem; line-height: 1.5; margin: 0; }
.flow__arrow { display: none; align-self: center; color: var(--gray-light); }

/* ============================================================
   7. Wide call-to-action — heading left, actions right
   ============================================================ */
.cta-wide {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, var(--primary-dark) 0%, var(--primary) 55%, #0f6349 100%);
  color: #fff;
}

.cta-wide__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .12;
  pointer-events: none;
}

.cta-wide__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.5rem;
  padding-block: 2.5rem;
  align-items: center;
}

.cta-wide h2 { color: #fff; font-size: clamp(1.35rem, 3.6vw, 1.875rem); line-height: 1.2; }
.cta-wide p { margin-top: .6rem; color: rgba(255, 255, 255, .82); font-size: .875rem; }

.cta-wide__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* Phone block: number over label, as the design shows it. */
.btn--phone {
  align-items: center;
  gap: .65rem;
  padding: .6rem 1.2rem;
  background: #fff;
  color: var(--primary);
  box-shadow: var(--sh-sm);
  text-align: left;
}

.btn--phone:hover { background: #fff; color: var(--primary-dark); }
.btn--phone .ico { width: 1.45rem; height: 1.45rem; flex: none; color: var(--primary); }
.btn--phone strong { display: block; font-size: .9375rem; font-weight: 700; line-height: 1.25; }
.btn--phone small { display: block; font-size: .6875rem; font-weight: 500; color: var(--gray); }

/* ============================================================
   8. Bottom assurance bar
   ============================================================ */
.assure-bar {
  display: grid;
  gap: 1.25rem 0;
  grid-template-columns: repeat(2, 1fr);
  padding-block: 1.75rem;
}

.assure-bar li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding-inline: .75rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dark);
  text-align: left;
}

.assure-bar .ico { flex: none; width: 1.65rem; height: 1.65rem; color: var(--primary); }

/* ============================================================
   9. Responsive
   ============================================================ */
@media (min-width: 576px) {
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .exclusions { grid-template-columns: repeat(2, 1fr); column-gap: 1.75rem; }

  /* The hairline the design runs between the two columns of exclusions. Drawn
     on the grid rather than per row so it stays unbroken across the gaps. */
  .exclusions::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--line);
  }
  .vehicles { grid-template-columns: repeat(3, 1fr); }
  .assure-bar { grid-template-columns: repeat(3, 1fr); }

  /* Too wide for one step per row long before there is room for the full
     horizontal rail, which only fits at 992px. */
  .flow { grid-template-columns: repeat(2, 1fr); gap: 1.15rem 1.75rem; }
}

@media (min-width: 768px) {
  /* The design squares the two panels off against each other rather than
     letting the shorter one stop early, and spreads the exclusions down the
     height it gains. */
  .cover-panels { grid-template-columns: 1fr 1fr; }

  .cover-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.75rem 1.5rem 1.75rem;
  }

  .exclusions { flex: 1; align-content: space-between; }

  /* The panel drops to half the screen at this breakpoint, which is too narrow
     to keep the two columns 576px gave it — they squeezed "Racing & Speed
     Testing" onto three lines. One column until 992px widens the panel again. */
  .exclusions { grid-template-columns: 1fr; }
  .exclusions::before { display: none; }
  .cta-wide__inner { padding-block: 3rem; }
  .vehicles { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 992px) {
  .section--overlap { margin-top: -3rem; }

  /* Panel is wide enough for the two columns and their hairline again. */
  .exclusions { grid-template-columns: repeat(2, 1fr); }
  .exclusions::before { display: block; }

  /* Heading beside the actions, not above them. The three buttons need about
     620px on their own, so at 768px this left the heading a column barely one
     word wide — it only earns its keep once the container is this size. */
  .cta-wide__inner { grid-template-columns: 1fr auto; }
  .cta-wide__actions { justify-content: flex-end; }

  .trust-strip { grid-template-columns: repeat(4, 1fr); padding: 1.5rem 1.75rem; }
  .trust-strip li + li { padding-left: 1.5rem; border-left: 1px solid var(--line); }

  .vehicles { grid-template-columns: repeat(7, 1fr); gap: .65rem; }
  .vehicle { padding: 1rem .5rem; }

  .assure-bar { grid-template-columns: repeat(5, 1fr); }
  .assure-bar li + li { border-left: 1px solid var(--line); }

  /* Three columns: perils, the shield hub, more perils. The odd one out sits
     under the hub, which is how the approved layout balances seven items. */
  .spokes {
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
  }

  .spokes__col { display: grid; gap: 1.5rem; }

  /* The labels get whatever the diagram does not need. A step down from the
     .8125rem the stacked phone layout uses buys "Loading & Unloading" a line
     back at this width, which is what the mockup shows. */
  .spokes__col .spoke { gap: .5rem; font-size: .75rem; }

  /* Both columns face the hub: the disc always sits on the inner edge with its
     label running outwards, so the diagram reads from the shield outwards
     rather than left to right down the whole panel. */
  .spokes__col--left .spoke { flex-direction: row-reverse; text-align: right; }

  /* The node each peril hangs off the orbit by. Taken out of flow rather than
     sat in the flex row, so it costs the label none of the width it needs. */
  .spokes .spoke { position: relative; }

  /* A dotted line runs from each peril's disc in to the hub, so every peril
     reads as joined to the shield, as the mockup draws it. */
  .spokes .spoke::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 0;
    border-top: 2px dotted rgba(11, 78, 59, .4);
    margin-top: -1px;
  }

  .spokes__col--left .spoke::after  { left: 100%;  width: 2.7rem; margin-left: -.15rem; }
  .spokes__col--right .spoke::after { right: 100%; width: 2.7rem; margin-right: -.15rem; }

  .spokes__foot .spoke::after {
    top: auto;
    bottom: 100%;
    left: 50%;
    width: 0;
    height: 2.2rem;
    border-top: 0;
    border-left: 2px dotted rgba(11, 78, 59, .4);
    margin: -.15rem 0 0 -1px;
  }

  /* The hub is the crested shield itself now, so the element is just a frame
     for it — the artwork carries its own shading. */
  /* The middle track is sized by the flood label under the hub, not by the hub
     itself, so the shield has to be centred in it explicitly — left to itself
     it sits at the start of the track and throws the two columns off-axis. */
  .spokes__hub {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    position: relative;
    width: 6.5rem;
    height: 7.8rem;
  }

  /* The connecting circle the spokes hang off — a large ring around the shield,
     as the mockup draws it, with the dotted connector lines meeting its edge.
     Out of flow, so widening it never squeezes the labels. */
  .spokes__hub::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14rem;
    height: 14rem;
    margin: -7rem 0 0 -7rem;
    border-radius: 50%;
    border: 1.5px solid rgba(11, 78, 59, .17);
  }

  .spokes__hub .ico--hub {
    position: relative;
    width: 6.5rem;
    height: 7.8rem;
    filter: drop-shadow(0 10px 22px rgba(11, 78, 59, .28));
  }

  .spokes__foot { grid-column: 2; justify-self: center; max-width: 8rem; }
  .spokes__foot .spoke { flex-direction: column; text-align: center; gap: .5rem; }

  /* Five equal steps with an arrow between each. Equal tracks rather than
     auto ones so the badges line up across the rail instead of drifting with
     however long each title happens to be. */
  .flow {
    grid-template-columns: repeat(4, 1fr auto) 1fr;
    gap: .85rem;
    align-items: start;
    padding: 1.1rem 1.5rem;
  }

  .flow__arrow { display: block; }
}

/* ---------- Commercial hero "Strong Coverage" shield ----------
   The badge is a supplied graphic (photos/commercial-shield.png), passed to
   the hero as crest_image, so page-hero renders it as .crest-img. It sits on
   the right of the scene, over the large truck. Scoped to .gi-plan-layout so
   the About / Contact / legal heroes are untouched. */
.gi-plan-layout .p-hero__media .crest-img {
  width: min(32%, 13.5rem);
  margin-left: auto;
  margin-right: 0;
  filter: drop-shadow(0 10px 14px rgba(6, 30, 20, .3));
}

/* ---------- Commercial hero as a city-road scene --------------
   The mockup sets the fleet on a road with the skyline behind it. The copy
   pages run this backdrop as a faint watermark (opacity .1); here it reads
   as a real photograph, and the fleet floats on it instead of sitting in a
   rounded card. Scoped to .gi-plan-layout — the home hero sets its own
   .home .p-hero__bg opacity later, so it is unaffected. */
/* The commercial hero is a single composed photograph (fleet + skyline +
   road) supplied as the background, so it runs full-bleed at full strength —
   not the faint watermark the copy pages use. The left-to-right white wash
   (.p-hero::after) keeps the heading legible over the bright sunset side. */
.gi-plan-layout .p-hero__bg {
  opacity: 1;
  filter: saturate(1.12) contrast(1.06);
  object-position: center 62%;
}

/* The copy pages need a heavy white wash to read over faint artwork; here the
   fleet is the point, so the wash is lightened — the heading still sits over
   the bright, near-empty left of the photograph, so it stays legible while the
   trucks come through clearly. */
.gi-plan-layout .p-hero::after {
  background: linear-gradient(100deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .22) 38%, rgba(255, 255, 255, 0) 72%);
}