/**
 * Shared styling for the Blog V2 ("Insights") elements.
 *
 * Holds only what more than one element needs: the design tokens and the card
 * primitives. Anything specific to a single element lives in that element's
 * default.css, and anything the editor can change lives in its css.twig.
 *
 * Everything is prefixed .tbv- so it cannot collide with the site's existing CSS.
 */

:root {
  --tbv-cream: #F6F6EE;
  --tbv-cream2: #F0F0E6;
  --tbv-orange: #EB6A25;
  --tbv-orange-d: #D25A18;
  --tbv-navy: #112447;
  --tbv-body: #4D4D4D;
  --tbv-soft: #5F5F59;
  --tbv-mute: #8C8C86;
  --tbv-line: #E2E2DA;
  --tbv-dark: #050A15;

  --tbv-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tbv-serif: "Merriweather", Georgia, serif;

  /* Matched to the site header's container (.bde-header-builder__container),
     which is max-width 1300px with 20px side padding at every breakpoint — so the
     content lines up with the logo and nav above it. */
  --tbv-maxw: 1300px;
  --tbv-pad: 20px;
  --tbv-rail: 300px;

  --tbv-s1: 8px;
  --tbv-s2: 16px;
  --tbv-s3: 24px;
  --tbv-s4: 32px;
  --tbv-s5: 48px;
  --tbv-s6: 64px;
  --tbv-s7: 80px;
}

/* ------------------------------------------------------------------ layout */

.tbv-wrap {
  max-width: var(--tbv-maxw);
  margin: 0 auto;
  padding: 0 var(--tbv-pad);
}

.tbv [hidden],
[data-tomo-blog][hidden] {
  display: none !important;
}

.tbv a {
  color: inherit;
  text-decoration: none;
}

.tbv img {
  max-width: 100%;
  display: block;
}

.tbv i {
  font-style: normal;
}

/* ------------------------------------------------------------- primitives */

.tbv-meta {
  display: block;
  font-size: 12.5px;
  color: var(--tbv-mute);
  margin-top: var(--tbv-s2);
  font-family: var(--tbv-sans);
}

.tbv-dot {
  opacity: .5;
  padding: 0 6px;
}

.tbv-pill {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tbv-orange);
  font-family: var(--tbv-sans);
  margin-bottom: 10px;
}

.tbv-arw {
  color: var(--tbv-orange);
  font-size: .7em;
  margin-left: 8px;
  vertical-align: 3px;
  display: inline-block;
  transition: transform .2s ease;
}

.tbv-card:hover .tbv-arw {
  transform: translate(3px, -3px);
}

/* ------------------------------------------------------------------ cards */

.tbv-card {
  display: block;
}

.tbv-card__img {
  display: block;
  overflow: hidden;
  background: var(--tbv-cream2);
  aspect-ratio: 16 / 9;
}

.tbv .tbv-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.tbv .tbv-card:hover .tbv-card__img img {
  transform: scale(1.04);
}

.tbv-card__body {
  display: block;
  padding-top: var(--tbv-s2);
}

.tbv-card__title {
  display: block;
  font-family: var(--tbv-serif);
  font-weight: 700;
  color: var(--tbv-navy);
  font-size: 17px;
  line-height: 1.34;
  letter-spacing: -.01em;
}

.tbv-card:hover .tbv-card__title {
  color: var(--tbv-orange);
}

.tbv-card__exc {
  display: block;
  font-size: 14px;
  line-height: 1.55;
  margin-top: 10px;
  color: var(--tbv-soft);
}

/* --------------------------------------------------------- section header */

.tbv-sec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--tbv-s6);
  margin-bottom: var(--tbv-s4);
}

.tbv-sec__headL {
  max-width: 640px;
  min-width: 0;
}

.tbv .tbv-sec__title {
  font-family: var(--tbv-serif);
  color: var(--tbv-navy);
  margin: 0;
  font-weight: 700;
  letter-spacing: -.015em;
  font-size: 28px;
  line-height: 1.2;
}

.tbv-sec__deck {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--tbv-soft);
}

.tbv-viewall {
  flex: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tbv-orange);
  white-space: nowrap;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0 0 4px;
  cursor: pointer;
  font-family: var(--tbv-sans);
  transition: .15s;
}

.tbv-viewall i {
  margin-left: 7px;
}

.tbv-viewall:hover {
  border-bottom-color: var(--tbv-orange);
}

/* ------------------------------------------------------------ grid of four */

.tbv-grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tbv-s4);
}

/* Cards in a grid stretch to equal height and pin their meta line to the bottom,
   so dates line up across the row however long the titles run. */
.tbv-grid4 .tbv-card,
.tbv-featured__sub .tbv-card {
  display: flex;
  flex-direction: column;
}

.tbv-grid4 .tbv-card__body,
.tbv-featured__sub .tbv-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tbv-grid4 .tbv-card .tbv-meta,
.tbv-featured__sub .tbv-card .tbv-meta {
  margin-top: auto;
  padding-top: var(--tbv-s2);
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1119px) {
  :root {
    --tbv-s7: 64px;
  }

  .tbv-grid4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  :root {
    --tbv-s5: 32px;
    --tbv-s6: 40px;
    --tbv-s7: 48px;
  }

  .tbv .tbv-sec__title {
    font-size: 23px;
  }

  .tbv-grid4 {
    grid-template-columns: 1fr;
  }

  .tbv-sec__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tbv-s2);
  }
}