/* ==========================================================================
   LF CONTENT BOXES GRID
   Equal-size cards, 2x2 / 3x3 / 4-across, auto-condensing.

   How the sizing works
   --------------------
   - .lf-cb__grid is a CSS grid with N equal columns (minmax(0,1fr)), so
     every card is exactly the same width.
   - grid-auto-rows: 1fr makes every row the same height as the tallest row,
     and align-items: stretch makes each card fill its cell. Result: every
     card is the same width AND height no matter what's inside it.
   - The column count is NOT hard-coded here. module.html resolves it against
     the real number of cards and hands it over as three custom properties:
       --lf-cb-cols      wide
       --lf-cb-cols-md   mid  (2 max)
       --lf-cb-cols-sm   small (1)
     None of the three can ever leave a last row holding a single card, so
     the grid never renders "3 and 1". See the NO-ORPHAN RULE in module.html.
   - .lf-cb is a container-query container, so the condense points key off the
     width the MODULE is given and it still behaves inside a half-width
     HubSpot column. The @media rules are a fallback for older browsers.

   Tweak the breakpoints in the CONDENSE section at the bottom.
   ========================================================================== */

.lf-cb {
  /* Brand tokens */
  --lf-blue: #236092;
  --lf-dark-azure: #152f45;
  --lf-yellow: #f9db6c;

  /* Defaults; the module.html wrapper overrides these inline from the Style tab */
  --lf-cb-cols: 3;
  --lf-cb-cols-md: 2;
  --lf-cb-cols-sm: 1;
  --lf-cb-gap: 24px;
  --lf-cb-icon: 50px;
  --lf-cb-card-bg: #ffffff;
  --lf-cb-heading: var(--lf-blue);
  --lf-cb-text: #000000;

  /* Card look (matches existing dew Content Boxes on the site) */
  --lf-cb-radius: 14px;
  --lf-cb-pad: 40px;
  --lf-cb-border-w: 0px;
  --lf-cb-border-color: #dfe6eb;
  --lf-cb-h-size: 20px;
  --lf-cb-b-size: 18px;
  --lf-cb-h-gap: 10px;
  --lf-cb-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.2);
  --lf-cb-shadow-hover: 0 16px 34px rgba(21, 47, 69, 0.18);

  container-type: inline-size;
  container-name: lf-cb;

  width: 100%;
  font-family: "Lato", Arial, Helvetica, sans-serif;
}

.lf-cb,
.lf-cb *,
.lf-cb *::before,
.lf-cb *::after {
  box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.lf-cb__grid {
  display: grid;
  grid-template-columns: repeat(var(--lf-cb-cols), minmax(0, 1fr));
  grid-auto-rows: 1fr;          /* every row = tallest row  */
  align-items: stretch;         /* every card fills its row */
  gap: var(--lf-cb-gap);
  width: 100%;
  margin: 0;
  padding: 0;
}


/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.lf-cb__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;

  padding: var(--lf-cb-pad);

  background: var(--lf-cb-card-bg);
  border: var(--lf-cb-border-w) solid var(--lf-cb-border-color);
  border-radius: var(--lf-cb-radius);
  box-shadow: var(--lf-cb-shadow);

  color: var(--lf-cb-text);
  text-decoration: none;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

/* With the shadow off, keep at least a hairline border so cards don't float
   invisibly - a wider border from the Style tab wins via max(). */
.lf-cb--no-shadow .lf-cb__card {
  box-shadow: none;
  border-width: max(var(--lf-cb-border-w), 1px);
}


/* --------------------------------------------------------------------------
   Clickable cards
   The card itself is never an <a>; an invisible overlay anchor stretched
   across it carries the link. Card text therefore never sits inside an
   anchor, so theme link styling (hover underlines etc.) can't reach it.
   -------------------------------------------------------------------------- */

.lf-cb__card--linked {
  position: relative;
}

.lf-cb__card--linked .lf-cb__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  text-decoration: none;
}

/* Inline links typed into the card copy ride above the overlay so they stay
   individually clickable inside a clickable card. */
.lf-cb__body a {
  position: relative;
  z-index: 2;
}

/* Hover / focus state - every value below is set per-instance from the
   module's Style tab (Hover section) via the wrapper's custom properties. */
.lf-cb__card--linked:hover,
.lf-cb__card--linked:focus-within {
  transform: translateY(var(--lf-cb-hv-lift, -3px));
  box-shadow: var(--lf-cb-hv-shadow, var(--lf-cb-shadow-hover));
  background: var(--lf-cb-hv-bg, var(--lf-cb-card-bg));
  border-color: var(--lf-cb-hv-border, var(--lf-cb-border-color));
}

.lf-cb__card--linked:hover .lf-cb__heading,
.lf-cb__card--linked:focus-within .lf-cb__heading {
  color: var(--lf-cb-hv-heading, var(--lf-cb-heading));
}

.lf-cb__card--linked:hover .lf-cb__body,
.lf-cb__card--linked:focus-within .lf-cb__body {
  color: var(--lf-cb-hv-text, var(--lf-cb-text));
}

/* Shadow off means shadow off, hovered or not */
.lf-cb--no-shadow .lf-cb__card--linked:hover,
.lf-cb--no-shadow .lf-cb__card--linked:focus-within {
  box-shadow: none;
}

.lf-cb__overlay:focus-visible {
  outline: 2px solid var(--lf-yellow);
  outline-offset: 2px;
}


/* Alignment */
.lf-cb--align-center .lf-cb__card {
  align-items: center;
  text-align: center;
}

.lf-cb--align-left .lf-cb__card {
  align-items: flex-start;
  text-align: left;
}


/* Icon */
.lf-cb__icon {
  flex: 0 0 auto;
  width: var(--lf-cb-icon);
  height: var(--lf-cb-icon);
  margin: 0 0 20px;
}

.lf-cb__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* Heading */
.lf-cb h4.lf-cb__heading {
  margin: 0 0 var(--lf-cb-h-gap);
  color: var(--lf-cb-heading);
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: var(--lf-cb-h-size);
  font-weight: 900;
  line-height: 1.25;
  transition: color 0.2s ease;
}

/* The gap belongs between heading and body - no trailing gap when the
   heading is the last thing in the card. */
.lf-cb h4.lf-cb__heading:last-child {
  margin-bottom: 0;
}


/* Body */
.lf-cb__body {
  flex: 1 1 auto;
  width: 100%;
  color: var(--lf-cb-text);
  font-size: var(--lf-cb-b-size);
  line-height: 1.4;
  transition: color 0.2s ease;
}

.lf-cb__body p {
  margin: 0 0 10px;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.lf-cb__body p:last-child {
  margin-bottom: 0;
}

.lf-cb__body ul,
.lf-cb__body ol {
  margin: 0 0 10px;
  padding-left: 1.2em;
  text-align: left;
}

.lf-cb__body a {
  color: var(--lf-blue);
  text-decoration: underline;
}


/* ==========================================================================
   CONDENSE
   Wide -> mid -> single file as the module gets narrower.

   Each step just swaps which pre-resolved column count is in play, so the
   no-orphan rule survives every breakpoint. The wide count sets the class,
   which only decides WHEN the first step happens (4 columns need more room
   than 3, which need more than 2).

     4 cards @ 4 cols  ->  4 across  ->  2 x 2  ->  single file
     4 cards @ 3 cols  ->  2 x 2     ->  2 x 2  ->  single file
   ========================================================================== */

/* --- Container queries (modern browsers) --- */

@container lf-cb (max-width: 1080px) {
  .lf-cb--cols-4 .lf-cb__grid {
    grid-template-columns: repeat(var(--lf-cb-cols-md), minmax(0, 1fr));
  }
}

@container lf-cb (max-width: 900px) {
  .lf-cb--cols-3 .lf-cb__grid {
    grid-template-columns: repeat(var(--lf-cb-cols-md), minmax(0, 1fr));
  }
}

@container lf-cb (max-width: 560px) {
  /* Two classes on purpose: this has to out-rank (or at least tie, and it comes
     later) the .lf-cb--cols-N mid rules above, or single file never wins. */
  .lf-cb .lf-cb__grid {
    grid-template-columns: repeat(var(--lf-cb-cols-sm), minmax(0, 1fr));
  }

  .lf-cb__card {
    padding: min(var(--lf-cb-pad), 28px);
  }
}


/* --- Media query fallback (browsers without @container) --- */

@supports not (container-type: inline-size) {

  @media (max-width: 1180px) {
    .lf-cb--cols-4 .lf-cb__grid {
      grid-template-columns: repeat(var(--lf-cb-cols-md), minmax(0, 1fr));
    }
  }

  @media (max-width: 1000px) {
    .lf-cb--cols-3 .lf-cb__grid {
      grid-template-columns: repeat(var(--lf-cb-cols-md), minmax(0, 1fr));
    }
  }

  @media (max-width: 640px) {
    .lf-cb .lf-cb__grid {
      grid-template-columns: repeat(var(--lf-cb-cols-sm), minmax(0, 1fr));
    }

    .lf-cb__card {
      --lf-cb-pad: 28px;
    }
  }

}


/* Mobile type tweaks (screen-based, regardless of container) */

@media (max-width: 520px) {
  .lf-cb h4.lf-cb__heading {
    font-size: min(var(--lf-cb-h-size), 18px);
  }

  .lf-cb__body {
    font-size: min(var(--lf-cb-b-size), 16px);
  }
}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .lf-cb__card {
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   Orphan card at the two-column step

   The wide count still follows the no-orphan rule, but the mid step is now
   always two columns. When the card count is odd, the last card would sit
   alone in the left column, so it is stretched across both columns and
   centered at half width instead - same treatment the Loan Program Boxes
   module uses.

   Each query is bounded on BOTH sides so it can only ever fire inside the
   two-column range. Nothing has to undo it at the single-column step, where
   every card must be full width.
   -------------------------------------------------------------------------- */

@container lf-cb (min-width: 561px) and (max-width: 1080px) {
  .lf-cb--mid-2.lf-cb--cols-4 .lf-cb__grid > .lf-cb__card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - (var(--lf-cb-gap) / 2));
    justify-self: center;
  }
}

@container lf-cb (min-width: 561px) and (max-width: 900px) {
  .lf-cb--mid-2.lf-cb--cols-3 .lf-cb__grid > .lf-cb__card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - (var(--lf-cb-gap) / 2));
    justify-self: center;
  }
}

@supports not (container-type: inline-size) {

  @media (min-width: 641px) and (max-width: 1180px) {
    .lf-cb--mid-2.lf-cb--cols-4 .lf-cb__grid > .lf-cb__card:last-child:nth-child(odd) {
      grid-column: 1 / -1;
      width: calc(50% - (var(--lf-cb-gap) / 2));
      justify-self: center;
    }
  }

  @media (min-width: 641px) and (max-width: 1000px) {
    .lf-cb--mid-2.lf-cb--cols-3 .lf-cb__grid > .lf-cb__card:last-child:nth-child(odd) {
      grid-column: 1 / -1;
      width: calc(50% - (var(--lf-cb-gap) / 2));
      justify-self: center;
    }
  }
}