/* ==========================================================================
   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;
}

/* 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);
}

/* Only clickable cards get the hover lift */
a.lf-cb__card:hover,
a.lf-cb__card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--lf-cb-shadow-hover);
  outline: none;
}

a.lf-cb__card: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;
}

/* 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;
}

.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;
  }
}