/* JTL Card — the card's own icon. Everything else about the card (tile, radius,
   layout, the default icon) is owned by the JTL Card Grid stylesheet, which the
   card opts into by carrying .jtl-card-grid__card. */

.jtl-card-grid__card > .jtl-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 65.42px;
  height: 65.42px;
  font-size: 52px;
  line-height: 1;
  color: #0b1b45;
}

/* The highlight tile is filled with Tech Blue, so the navy above renders a glyph
   that is all but invisible on it. Same weight as that rule, stated after it. */
.jtl-card-grid__card--feature > .jtl-card__icon {
  color: #ffffff;
}

/* Image icon. An SVG attachment has no intrinsic size in WordPress, so it comes
   back with width="1" height="1" and would collapse without both axes pinned
   here. object-fit keeps a non-square asset inside the slot instead of
   stretching it. */
.jtl-card-grid__card > .jtl-card__icon--img {
  display: block;
  object-fit: contain;
}

/* A card given a Link renders as an <a>. Strip the anchor's default underline
   and inherit the card copy's own colours so a linked card looks identical to
   a plain one - the only difference is that the whole tile is now clickable. */
.jtl-card-grid__card.jtl-card--linked {
  text-decoration: none;
  color: inherit;
}

/* ---------------------------------------------------------------------------
   Tech Blue card.

   One card of a row inverted to the brand's blue, which is how the design marks
   the offer among its neighbours. Opt-in per card: the class is only emitted
   when an author picks the ground, so no existing card moves.

   The text colours are asserted on the nested JTLText atoms rather than
   inherited, because those atoms set their own navy — inheritance never reaches
   them and the copy would stay navy on blue.
   --------------------------------------------------------------------------- */

.jtl-card-grid__card.jtl-card--tech-blue {
  background-color: #2722f8;
}
.jtl-card-grid__card.jtl-card--tech-blue .jtl-text--subline .jtl-text__eyebrow,
.jtl-card-grid__card.jtl-card--tech-blue .jtl-text--paragraph .jtl-text__body,
.jtl-card-grid__card.jtl-card--tech-blue .jtl-text__heading,
.jtl-card-grid__card.jtl-card--tech-blue .jtl-text__quote {
  color: #ffffff;
}
/* A glyph icon takes the ground's foreground; an uploaded image cannot be
   recoloured here, which is why the field asks for a white asset. */
.jtl-card-grid__card.jtl-card--tech-blue > .jtl-card__icon {
  color: #ffffff;
}

/* ---------------------------------------------------------------------------
   Layout modifiers.

   The grid places cards one to a cell. A design that features one of three —
   a tall card beside a stacked pair — needs that card to occupy two rows, which
   only the card itself can say: nothing in the grid's markup identifies which
   card is the featured one.
   --------------------------------------------------------------------------- */

/* A card placed in the middle column. Put first, it heads the grid on a row of
   its own and the cards after it flow into the rows below — the shape a design
   uses when one item introduces the set. It has to be said per card because
   nothing in the markup counts them, and the grid's own rules cannot tell a
   seven-card set from a nine-card one. Only the three-column grid has a middle
   column, so the rule is scoped to it; anywhere else the card stays in order.

   It takes the WHOLE row and is then centred at one track's width, rather than
   simply sitting in column 2: a card placed in one cell leaves the other two
   empty, and the grid's auto-placement fills them with the cards that follow —
   which is a row of three with a gap in it, not a card on a row of its own.
   The track width has to be reproduced by hand because CSS cannot ask the grid
   for it; both numbers it needs are the grid's own custom properties, so a
   change to either follows here. */
.jtl-card-grid--cols-3 .jtl-card-grid__card.jtl-card--place-centre {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: calc((100% - 2 * var(--jtl-card-grid-gap, 32px)) / 3);
}
/* Below the three-column breakpoint the grid re-tracks and there is no middle
   column to lead from, so the card returns to the flow at full width. */
@media (max-width: 992px) {
  .jtl-card-grid--cols-3 .jtl-card-grid__card.jtl-card--place-centre {
    grid-column: auto;
    justify-self: stretch;
    max-width: none;
  }
}

.jtl-card-grid__card.jtl-card--span-rows-2 {
  /* The grid's row-gap is 0 and the space between rows is each card's own top
     margin, so a card spanning both rows already ends level with the pair beside
     it — the span is all the placement needs. */
  grid-row: span 2;
  /* A card told to be two rows tall is taller than its content by definition, so
     its icon and copy sit in the middle of that height rather than hugging the
     top and leaving the whole difference as a hole underneath. Measured on the
     design: 110px of free space above the icon and 110 below the copy. */
  justify-content: center;
}

/* A wide card with a short line of copy reads better with the text pulled in
   from its sides; the card itself keeps its own padding. */
.jtl-card-grid__card.jtl-card--inset-wide > .jtl-text {
  padding-left: 56px;
  padding-right: 56px;
}

@media (max-width: 992px) {
  /* Stacked, every card is full width and one row tall, so neither modifier has
     anything left to say. */
  .jtl-card-grid__card.jtl-card--span-rows-2 {
    grid-row: auto;
  }
  .jtl-card-grid__card.jtl-card--inset-wide > .jtl-text {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Title size: the design system's H3 on the card's first line.

   Inter SemiBold 24/32 with -0.4 letter-spacing, the H3 COMPONENT token — which
   is not the same as the JTL Text widget's `h3` variant (28/36, no tracking), so
   this is a size the atom cannot supply and the container has to state. Only the
   size, leading and tracking are set: the colour, weight and case already come
   from the card title rule this builds on.

   The class is repeated to settle a specificity tie rather than to narrow scope.
   The card title is sized by
     .jtl-card-grid__card .jtl-text--subline .jtl-text__eyebrow          (0,3,0)
     .jtl-card-grid--scale-base .jtl-card-grid__card … __eyebrow         (0,4,0)
   and this rule has to beat the second one. Written once the selector would only
   TIE with it, leaving the outcome to which of the two widget sheets the page
   happens to enqueue last — which nothing here controls. Repeating the class
   makes it (0,5,0) and the result independent of load order. */
.jtl-card--title-h3.jtl-card--title-h3 .jtl-text--subline .jtl-text__eyebrow {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.4px;
}