/* =============================================
   FLEET Flexi Cards — module.css

   Layout only; every value comes from a custom property the template sets, so
   the stroke, fill, radius, padding and gap are all editor settings rather than
   class names to remember.
   ============================================= */

/* The content column, identical to .fleet-section in child.css so a card row
   lines up with the accordions and Info Notes stacked above and below it.

   No box-sizing here on purpose — .fleet-section doesn't set one either, so
   leaving it unset makes both resolve the same way. Forcing border-box made the
   Info Note sit 40px inside the accordion's content edge; the same trap applies
   here. The CARD sets its own box-sizing below, which is a different question. */
.fleet-cards {
  max-width: var(--fc-max, 1200px);
  /* LEFT-ALIGNED, never centred. A max width narrower than the column used to
     centre the block, which put its left edge at a position that lines up with
     nothing on the page. Left-aligning means the cards - and a lefty bar on one
     of them - start exactly where the fleet-rule hairline is drawn. */
  margin: 0 auto 0 0;
  /* Vertical room is PADDING, not margin: the fleet-rule hairline spans this
     element, so padding keeps the line running through the gap between two
     stacked rows instead of breaking across it.

     The SIDE inset is a variable so a full-width instance can drop it. At 0 the
     card's own left edge sits on the column edge, which is where the rule is -
     the only way a lefty and the hairline can line up. */
  /* Right and left are separate so full width can drop only the LEFT inset:
     the left edge has to meet the hairline, the right edge should still line
     up with every other module's 27px (user, 2026-10-02). */
  padding: var(--fc-pt, 0px) var(--fc-pad-x, 27px) var(--fc-pb, 10px) var(--fc-pad-left, var(--fc-pad-x, 27px));
  /* The optional band - a solid colour or a two-stop gradient, from the
     section_bg fields. Transparent unless the author raises an opacity;
     painted on this box so it includes the vertical padding and stops where
     the block stops. `background` (not -color) so a gradient image lands too. */
  background: var(--fc-band, transparent);
}

/* ── Card groups ──
   The outer grid. Each group is a titled stack, and `groups_across` decides how
   many sit in a row. align-items:start so a short group does not stretch to the
   height of a tall one beside it. */
.fleet-cards__groups {
  display: grid;
  grid-template-columns: repeat(var(--fc-groups, 2), minmax(0, 1fr));
  gap: var(--fc-group-gap, 40px);
  align-items: start;
}

.fleet-cards__group-title {
  color: var(--fc-title-c, #F5F8FA);
  margin: 0 0 16px;
}

/* The card grid inside a group. --fc-cols is set per group on the element
   itself, so two groups can run different card counts across. */
.fleet-cards__grid {
  display: grid;
  grid-template-columns: repeat(var(--fc-cols, 2), minmax(0, 1fr));
  gap: var(--fc-gap, 24px);
}

/* Flex column, so a card with a short body still stretches to the row height
   and the outlines line up along the bottom edge. */
.fleet-cards__card {
  display: flex;
  flex-direction: column;
  /* Explicit, unlike the wrapper: the card's padding and border have to sit
     INSIDE its grid track or a 1fr column overflows when the theme ships no
     global reset. */
  box-sizing: border-box;
  /* background-COLOR, not the shorthand: the lefty accent is a background-image
     and `background:` would reset it. */
  background-color: var(--fc-fill, transparent);
  border: var(--fc-stroke-w, 1px) solid var(--fc-stroke-c, #E5E9EF);
  border-radius: var(--fc-radius, 16px);
  padding: var(--fc-pad-t, 28px) var(--fc-pad-r, 28px)
           var(--fc-pad-b, 28px) var(--fc-pad-l, 28px);
  /* Cards in one row already match — the grid stretches them. This is for
     matching ACROSS rows and groups, where nothing otherwise relates them. */
  min-height: var(--fc-min-h, 0px);
}

/* ── Lefties ──
   A solid accent down the left edge of a card. The two LEFT corners go square:
   a rounded corner cuts the bar to a taper at each end.

   THE BAR IS AN OVERLAY, not a border and not a background. Two earlier cuts
   failed, and the reason is the same both times - a CSS border MITRES into its
   neighbours, and the join runs diagonally from the outer corner to the inner
   one:

     1. `border-left: 10px solid red` tapered at both ends, because its own
        mitre cut it away across its full width.
     2. A transparent border plus a border-box background gradient fixed the
        bar but not the card: the 1px top and bottom borders mitre INTO the
        bar's strip and paint their grey over it. Sampled at the card's top row
        the bar ran 216,67,79 -> 226,192,199 -> 229,233,239 across ten pixels.
        Backgrounds are painted UNDER borders, so no background can win that.

   Only a child paints on top of a border, so the bar is a pseudo-element. The
   left border stays, painted transparent, purely to reserve the bar's width so
   the card's padding does not move. */
.fleet-cards__card.fleet-cards__card--lefty {
  position: relative;
  border-left: var(--fc-lefty-w, 4px) solid transparent;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.fleet-cards__card.fleet-cards__card--lefty::before {
  content: "";
  position: absolute;
  /* An absolutely positioned child is placed against the PADDING box, so -W
     puts it exactly over the transparent left border, and -stroke on each end
     covers the top and bottom borders' mitre wedges. Nothing is left to taper. */
  left: calc(-1 * var(--fc-lefty-w, 4px));
  top: calc(-1 * var(--fc-stroke-w, 1px));
  bottom: calc(-1 * var(--fc-stroke-w, 1px));
  width: var(--fc-lefty-w, 4px);
  background: var(--fc-lefty-c, #2636C6);
  /* Chrome leaves a hairline of the card edge showing through a fractional
     device pixel at the ends; a rectangle cannot be antialiased away. */
  pointer-events: none;
}

/* A lefty card must stop clipping its own children, or the bar - which sits
   outside the padding box - is clipped away entirely on the media placements.
   The media then rounds itself, and because a lefty card's two LEFT corners are
   already square it only ever needs the RIGHT pair. */
.fleet-cards__card--lefty.fleet-cards__card--behind,
.fleet-cards__card--lefty.fleet-cards__card--media-left,
.fleet-cards__card--lefty.fleet-cards__card--media-right,
.fleet-cards__card--lefty.fleet-cards__card--media-top,
.fleet-cards__card--lefty.fleet-cards__card--media-bottom {
  overflow: visible;
}

.fleet-cards__card--lefty.fleet-cards__card--behind .fleet-cards__media,
.fleet-cards__card--lefty.fleet-cards__card--behind .fleet-cards__overlay {
  overflow: hidden;
  border-radius: 0 var(--fc-radius, 16px) var(--fc-radius, 16px) 0;
}

/* Each placement rounds only the corners it actually touches. A left-placed
   image touches the two square corners, so it needs no rounding at all. */
.fleet-cards__card--lefty.fleet-cards__card--media-right .fleet-cards__media {
  overflow: hidden;
  border-radius: 0 var(--fc-radius, 16px) var(--fc-radius, 16px) 0;
}
.fleet-cards__card--lefty.fleet-cards__card--media-top .fleet-cards__media {
  overflow: hidden;
  border-radius: 0 var(--fc-radius, 16px) 0 0;
}
.fleet-cards__card--lefty.fleet-cards__card--media-bottom .fleet-cards__media {
  overflow: hidden;
  border-radius: 0 0 var(--fc-radius, 16px) 0;
}

/* Rich text starts at the TOP of its padding box and stays there, however
   short it is. Without this a body that grows to fill the card would let the
   copy drift down as the card gets taller. */
.fleet-cards__body { align-content: start; }

/* ── Card backgrounds ──
   A card can carry its own picture. Two shapes of layout, and they differ in
   one structural way: BEHIND leaves the card exactly as it was and puts the
   picture underneath the text, while a SIDE placement bleeds the picture to the
   card edges — which means the padding has to come off the card and go on the
   body, or the picture would sit inside a 28px frame. */

.fleet-cards__media {
  position: relative;
  flex: none;
  /* NO radius and NO overflow of its own. The card already clips (it has
     overflow:hidden and the radius), and a second mask here was wrong twice:
     the card's clip sits 1px inside this box because of the card's border, so
     the two curves did not coincide and left a hairline at the top corners;
     and this box rounded its BOTTOM corners too, which sit mid-card against
     the body where they should be square. One mask, on the card. */
}

.fleet-cards__media > img {
  position: absolute;
  /* !important is load-bearing, not laziness: the theme ships a global
     `img { height: auto !important }` normalize rule that outranks every
     selector we could write here. Without it the picture keeps its own ratio
     inside a correctly-shaped 4:3 box and leaves dead space above the text —
     which is exactly the bug this rule exists to fix. */
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  /* CROP, not squash: the author is told which shape to supply, and cover
     makes a wrong one lose its edges rather than distort. */
  object-fit: cover;
}

.fleet-cards__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── behind the text ── */
.fleet-cards__card--behind { position: relative; overflow: hidden; }

.fleet-cards__card--behind .fleet-cards__media {
  position: absolute;
  inset: 0;
}

.fleet-cards__card--behind .fleet-cards__body { position: relative; }

/* ── side placements ──
   Padding moves to the body. The media keeps the aspect the field promised:
   a square beside the text, 4:3 above or below it. */
.fleet-cards__card--media-left,
.fleet-cards__card--media-right,
.fleet-cards__card--media-top,
.fleet-cards__card--media-bottom {
  padding: 0;
  overflow: hidden;
}

.fleet-cards__card--media-left  > .fleet-cards__body,
.fleet-cards__card--media-right > .fleet-cards__body,
.fleet-cards__card--media-top   > .fleet-cards__body,
.fleet-cards__card--media-bottom > .fleet-cards__body {
  padding: var(--fc-pad-t, 28px) var(--fc-pad-r, 28px)
           var(--fc-pad-b, 28px) var(--fc-pad-l, 28px);
  flex: 1 1 auto;
  /* The icon lives inside the body in this layout, so its bottom margin could
     collapse against the rich text's first heading. A flex column never
     collapses sibling margins. */
  display: flex;
  flex-direction: column;
}

/* flex-START, not stretch. A stretched flex item ignores aspect-ratio, which
   made the "square" crop 90x311 — the height came from the text beside it. The
   field promises a square, so the media has to keep its own height. */
.fleet-cards__card--media-left,
.fleet-cards__card--media-right { flex-direction: row; align-items: flex-start; }
.fleet-cards__card--media-right { flex-direction: row-reverse; }
.fleet-cards__card--media-bottom { flex-direction: column-reverse; }

.fleet-cards__card--media-left  .fleet-cards__media,
.fleet-cards__card--media-right .fleet-cards__media {
  width: 38%;
  aspect-ratio: 1 / 1;
  /* The cap is authored as a max HEIGHT but applied as a max WIDTH, because the
     square's height comes from its used width via aspect-ratio. Capping the
     height directly would clamp one side only and the "square" would flatten
     into a letterbox; capping the width narrows it and the height follows, so
     it stays square. */
  max-width: var(--fc-sq-max, none);
}

.fleet-cards__card--media-top    .fleet-cards__media,
.fleet-cards__card--media-bottom .fleet-cards__media {
  width: 100%;
  aspect-ratio: 2 / 1;
}

/* ── top, at the picture's own ratio ──
   The ratio'd placements crop to the shape the field promised, which is right
   for photographs and wrong for a logo strip or a diagram (user, 2026-10-06: a
   160x33 Visa / Mastercard / Amex strip in the 2:1 slot showed one Mastercard
   circle). This one keeps the card exactly as it is - padding on the card, the
   icon where it was - and lays the picture above the copy as a plain block:
   full content width, height from the picture, never cropped. The theme's
   global `img { height: auto !important }` is what we WANT here, so the
   height override above is undone with the same weight. */
.fleet-cards__card--media-top_fit .fleet-cards__media,
.fleet-cards__card--media-bottom_fit .fleet-cards__media {
  width: 100%;
  margin-bottom: 16px;
}
/* Bottom (user, 2026-10-06): the same block under the copy. The card is a
   flex column already, so reversing it puts the media last without moving
   the markup; the body then grows so the picture sits at the card's foot in a
   row of unequal cards, and the gap swaps sides. */
.fleet-cards__card--media-bottom_fit { flex-direction: column-reverse; }
.fleet-cards__card--media-bottom_fit .fleet-cards__media { margin-bottom: 0; margin-top: 16px; }
.fleet-cards__card--media-bottom_fit > .fleet-cards__body { flex: 1 1 auto; }
.fleet-cards__card--media-top_fit .fleet-cards__media > img,
.fleet-cards__card--media-bottom_fit .fleet-cards__media > img {
  position: static;
  /* The image field's Width, via --fc-media-w from module.html; full content
     width when the field is blank. Height follows the picture's own ratio, and
     the cap keeps a wide value inside the card on a narrow column. */
  width: var(--fc-media-w, 100%) !important;
  max-width: 100%;
  height: auto !important;
  object-fit: contain;
}
/* The icon lives inside the body on every media placement; a flex column
   keeps its 16px margin from collapsing into the copy's first heading. */
.fleet-cards__card--media-top_fit > .fleet-cards__body,
.fleet-cards__card--media-bottom_fit > .fleet-cards__body {
  display: flex;
  flex-direction: column;
}

/* Below the grid's own breakpoint a side-by-side card is too narrow to hold
   both, so it stacks — the picture always leading. */
@media (max-width: 640px) {
  .fleet-cards__card--media-left,
  .fleet-cards__card--media-right { flex-direction: column; }
  .fleet-cards__card--media-left  .fleet-cards__media,
  .fleet-cards__card--media-right .fleet-cards__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    /* The square cap must not follow the picture into the stacked layout: here
       the media is full-bleed rather than a square beside the text, so a 200px
       cap would strand a narrow image against the left edge instead of simply
       making the square smaller. */
    max-width: none;
  }
}


.fleet-cards__img {
  display: block;
  height: auto;
  max-width: 100%;
  margin-bottom: 16px;
}

/* Icon beside the copy instead of above it.

   The icon is centred on the FIRST LINE of the text, not on the text block:
   against a three-line paragraph, block-centring would leave it floating
   opposite the middle sentence instead of reading as a marker for the heading.

   translateY does that in one step - down half a line, then back up half the
   icon's own height. The percentage is the reason this is a transform and not a
   margin: percentages in translateY resolve against the element's OWN height,
   so it self-corrects for any icon size or aspect, while a margin percentage
   would resolve against the container's width and drift with the column. */
.fleet-cards__inline {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.fleet-cards__inline > .fleet-cards__img {
  flex: none;
  margin-bottom: 0;
  /* Fallback for browsers without the lh unit: 0.7em approximates half of a
     1.4 line-height, which is the range this theme's card copy sits in. */
  transform: translateY(calc(0.7em - 50%));
}
@supports (height: 1lh) {
  .fleet-cards__inline > .fleet-cards__img {
    transform: translateY(calc(0.5lh - 50%));
  }
}
/* WHEN THE FIRST LINE IS A BUTTON, centre on the button. `lh` is the copy's
   computed line-height (18.4px here), but a `.fleet-btn` is an inline-flex box
   48px tall, so the first LINE BOX is 48px while `0.5lh` still says 9px - the
   icon lands 15px high and, at 50px, pokes out over the card's top edge. The
   Mega Overview's index cards are exactly this: one chevron button per card.
   Half the button's fixed height, not a line unit. Browsers without :has()
   keep the line-height rule above. */
.fleet-cards__inline:has(> .fleet-cards__rt > :first-child > .fleet-btn:first-child) > .fleet-cards__img {
  /* The lone button is laid out as text below (height auto, no vertical
     padding), so its line box is the paragraph's 20px. Centring a 50px icon
     on a 20px line by pulling the ICON up put it 15px above the card's own
     padding (user, 2026-10-06: "we lost the icon's top padding"). So the icon
     stays put and the TEXT column comes down instead: half the icon less half
     the line, from the --fc-img the template sets on this row. */
  transform: none;
}
.fleet-cards__inline:has(> .fleet-cards__rt > :first-child > .fleet-btn:first-child) > .fleet-cards__rt {
  padding-top: max(0px, calc(var(--fc-img, 50px) / 2 - 10px));
}

/* A BUTTON USED AS A CARD'S HEADING LINE (the index cards: one chevron link,
   then one line of copy). child.css gives every .fleet-btn a 48px box with
   12px of vertical padding, which is right for a button in a row and wrong
   for a heading: the padding put 26px between the link and the copy under it
   (user, 2026-10-06: "tighten up the link to content spacing"). Lay the lone
   button out as text - height auto, no vertical padding - and own the gap to
   the next line here, over the inline margin-bottom: -5px the builder wrote
   to fight the padding (an !important rule beats an inline style; the -5
   only ever meant "closer"). 6px lands the copy ~8px under the link's
   baseline. !important throughout: the .fleet-btn rules are all !important. */
.fleet-cards__body p > .fleet-btn.fleet-btn--chevron:only-child {
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 20px !important;
  /* .fleet-btn carries a 2px transparent border for its pill shapes; here it
     indented the link 2px right of the copy under it (user, 2026-10-06) and
     added 4px of height. The chevron's focus ring is an underline, not the
     border, so nothing is lost. */
  border-width: 0 !important;
}
.fleet-cards__body p:has(> .fleet-btn.fleet-btn--chevron:only-child) {
  margin-bottom: 6px !important;
}
/* min-width:0 or a long unbroken word in the copy would refuse to shrink and
   push the card wider than its grid track. */
.fleet-cards__rt { min-width: 0; }
.fleet-cards__rt > :first-child { margin-top: 0; }
.fleet-cards__rt > :last-child { margin-bottom: 0; }

/* The rich text brings its own colours from the editor. Only the last child's
   trailing margin is worth removing, or the padding looks lopsided. */
.fleet-cards__body > *:last-child { margin-bottom: 0; }

/* Card copy leading. This lived as `style="line-height: 1.25"` on every
   paragraph the builder wrote - 155 of them across eleven pages - which meant
   the one number every card shares could not be changed without rewriting all
   of them. 1.25 is what they were all set to, so moving it here changes
   nothing on the page; it just makes it a number rather than a find-and-replace.

   It has to be stated, not left off: with no rule at all a card paragraph falls
   to the browser's `normal` (~1.2 at this size), which is tighter than intended
   and not a decision anybody made. Note the icon-alignment fallback further up
   assumes "a 1.4 line-height, which is the range this theme's card copy sits
   in" - the two have disagreed all along, and 1.25 is what actually ships. */
.fleet-cards__body p { line-height: 1.25; }

/* A pill used as a card's heading. .fleet-pill--md carries margin-bottom: 24px
   for the pill ROWS it was written for, and the paragraph under it already has
   a 16px top margin - the two stack, which is where the 40px void under every
   card pill came from. Zero it HERE only: the paragraph's own margin owns the
   gap, one source instead of two, and every pill outside a card keeps the
   spacing it was given.

   12px is a deliberate middle: the pill's own 24 gave a 40px gap, zeroing it
   gave 16, and this sits between them at 28.

   !important is not optional: every .fleet-pill--sm/md/lg declaration in
   child.css is itself !important, so a plain rule here loses no matter how
   specific it is. .fleet-pill--flow overrides the same margin the same way. */
.fleet-cards__body .fleet-pill { margin-bottom: 12px !important; }

/* ── The card's pill field ──
   Own line: the wrapper adds nothing, the pill's own 12px bottom margin above
   carries the gap to the copy.

   Inline: a flex row, pill left and the copy block right, aligned on the first
   line's baseline. The pill's bottom margin is zeroed here - in a row it would
   push the pill up off the line rather than create space under it - and
   .fleet-pill--flow (added by the template for this layout) is what gives an
   inline-flex pill a real baseline to align on. */
.fleet-cards__pill-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.fleet-cards__pill-row > .fleet-pill {
  flex: none;
  margin-bottom: 0 !important;
}

/* Without it a long unbroken word in the copy refuses to shrink and pushes the
   pill out of the card - the same reason .fleet-cards__rt carries it. */
.fleet-cards__pill-row > .fleet-cards__rt { min-width: 0; }

/* A dark band: the default hairline would read as a bright scratch, and the
   body copy needs lifting. Matches .fleet-rule--light in child.css. */
.fleet-cards.fleet-dark .fleet-cards__card {
  border-color: var(--fc-stroke-c, rgba(255, 255, 255, 0.16));
}

/* LIGHT CARDS ON A DARK BAND (module.html sets the class from the card fill's
   own luminance). The band is dark, so the module is `fleet-dark` and the rule
   is light - but the cards paint an opaque light fill, so everything INSIDE
   them reads on white and needs body ink, not the lifted `.fleet-dark` ink that
   child.css applies to p, li and chevrons at (0,2,0) !important. Four classes
   deep to outrank it. */
.fleet-cards.fleet-dark.fleet-cards--light-cards .fleet-cards__card p,
.fleet-cards.fleet-dark.fleet-cards--light-cards .fleet-cards__card li {
  color: var(--fleet-text-body, #3F4E56) !important;
}
.fleet-cards.fleet-dark.fleet-cards--light-cards .fleet-cards__card .fleet-cards__title {
  color: var(--fc-title-c, #123B57);
}
.fleet-cards.fleet-dark.fleet-cards--light-cards .fleet-cards__card .fleet-btn--chevron {
  color: var(--fleet-text-body, #3F4E56) !important;
}
.fleet-cards.fleet-dark.fleet-cards--light-cards .fleet-cards__card .fleet-btn--chevron:hover {
  color: var(--fleet-brand-purple) !important;
}

@media (max-width: 1024px) {
  .fleet-cards__grid {
    grid-template-columns: repeat(var(--fc-cols-t, 2), minmax(0, 1fr));
  }
}

/* Groups stack before the cards inside them do: two columns of cards side by
   side is already narrow at tablet width, and stacking the groups gives each
   one the full column back. */
@media (max-width: 900px) {
  .fleet-cards__groups { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* 23px, the same step .fleet-info-note-wrap takes. The top space collapses:
     at this width the cards are already one per row, so a row's top padding on
     top of the previous row's bottom padding reads as a band of nothing. This
     is what the marketplace module did too (padding_top_mobile 0). */
  .fleet-cards { padding: 0 var(--fc-pad-x-sm, 23px) var(--fc-pb, 10px) var(--fc-pad-left-sm, var(--fc-pad-x-sm, 23px)); }
  .fleet-cards__grid { grid-template-columns: 1fr; }
  /* Cap each side independently so a deliberately asymmetric card keeps its
     shape on a phone instead of collapsing to one uniform value. */
  .fleet-cards__card {
    padding: min(var(--fc-pad-t, 28px), 24px) min(var(--fc-pad-r, 28px), 24px)
             min(var(--fc-pad-b, 28px), 24px) min(var(--fc-pad-l, 28px), 24px);
  }
}