/*
 * bi_hometiles - sections of tiles on the homepage.
 *
 * Every visual aspect is driven by public `--bi-htl-*` custom properties so a
 * theme can re-skin the sections without touching this file: declare the ones
 * you need on `.bi-htl` (or one of its layout modifiers). This file never
 * declares a public token itself, it only reads them with a fallback where
 * they are used, so a theme wins even from inside a CSS cascade layer.
 *
 * --bi-htl-columns is the one exception: the template sets it inline from the
 * back-office setting, the number of tiles on a desktop row.
 */

/* Section */

.bi-htl {
  padding-block: var(--bi-htl-padding-block, clamp(2.5rem, 6vw, 4.5rem));
  color: var(--bi-htl-color, inherit);
  background-color: var(--bi-htl-bg, transparent);
}

.bi-htl--tinted {
  background-color: var(--bi-htl-tinted-bg, var(--bs-tertiary-bg, #f6f6f6));
}

/*
 * Two sections in a row on the same background read as one: the padding
 * between them gives way to the gap between their two blocks of tiles.
 */
.bi-htl--tinted:has(+ .bi-htl--tinted),
.bi-htl:not(.bi-htl--tinted):has(+ .bi-htl:not(.bi-htl--tinted)) {
  padding-bottom: 0;
}

.bi-htl--tinted + .bi-htl--tinted,
.bi-htl:not(.bi-htl--tinted) + .bi-htl:not(.bi-htl--tinted) {
  padding-top: var(--bi-htl-joined-gap, 2.5rem);
}

/* Header */

.bi-htl__header {
  display: flex;
  flex-direction: column;
  align-items: var(--bi-htl-header-align, center);
  margin-bottom: var(--bi-htl-header-gap, clamp(1.5rem, 4vw, 3rem));
  text-align: var(--bi-htl-header-text-align, center);
}

.bi-htl__kicker {
  margin: 0;
  font-size: var(--bi-htl-kicker-size, 0.75rem);
  font-weight: var(--bi-htl-kicker-weight, 600);
  letter-spacing: var(--bi-htl-kicker-letter-spacing, 0.16em);
  text-transform: uppercase;
  color: var(--bi-htl-kicker-color, inherit);
}

.bi-htl__title {
  margin: var(--bi-htl-title-margin, 0.75rem 0 0.625rem);
  font-family: var(--bi-htl-title-font, inherit);
  font-size: var(--bi-htl-title-size, clamp(1.75rem, 1.3rem + 1.6vw, 2.625rem));
  font-weight: var(--bi-htl-title-weight, 700);
  line-height: var(--bi-htl-title-line-height, 1.1);
  color: inherit;
  text-wrap: balance;
}

.bi-htl__kicker + .bi-htl__intro,
.bi-htl__header > .bi-htl__intro:first-child {
  margin-top: 0.75rem;
}

.bi-htl__intro {
  max-width: var(--bi-htl-intro-width, 35rem);
  margin: 0;
  font-size: var(--bi-htl-intro-size, 1rem);
  color: var(--bi-htl-muted, inherit);
}

/* Footer: small print and "see all" button */

.bi-htl__note {
  margin: var(--bi-htl-note-gap, 1rem) 0 0;
  font-size: var(--bi-htl-note-size, 0.75rem);
  font-style: italic;
  text-align: center;
  color: var(--bi-htl-note-color, var(--bi-htl-muted, inherit));
}

.bi-htl__footer {
  display: flex;
  justify-content: center;
  margin: var(--bi-htl-footer-gap, 2.5rem) 0 0;
}

.bi-htl__cta {
  --bs-btn-color: var(--bi-htl-cta-color, #111);
  --bs-btn-bg: var(--bi-htl-cta-bg, transparent);
  --bs-btn-border-color: var(--bi-htl-cta-border, #111);
  --bs-btn-hover-color: var(--bi-htl-cta-hover-color, #fff);
  --bs-btn-hover-bg: var(--bi-htl-cta-hover-bg, #111);
  --bs-btn-hover-border-color: var(--bi-htl-cta-hover-border, #111);
  --bs-btn-active-color: var(--bi-htl-cta-hover-color, #fff);
  --bs-btn-active-bg: var(--bi-htl-cta-hover-bg, #111);
  --bs-btn-active-border-color: var(--bi-htl-cta-hover-border, #111);

  padding: var(--bi-htl-cta-padding, 0.75rem 1.75rem);
  font-size: var(--bi-htl-cta-size, inherit);
  font-weight: var(--bi-htl-cta-weight, 600);
  letter-spacing: var(--bi-htl-cta-letter-spacing, normal);
  text-transform: var(--bi-htl-cta-transform, none);
  border-radius: var(--bi-htl-radius, 0.25rem);
}

/* Tiles list, shared by the cards and overlay layouts */

.bi-htl__list {
  display: grid;
  gap: var(--bi-htl-gap, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bi-htl__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* Cards */

/* Below 768 px the cards turn into a horizontal, snapping strip. */
.bi-htl--cards .bi-htl__list {
  grid-auto-columns: var(--bi-htl-strip-width, 75%);
  grid-auto-flow: column;
  padding-bottom: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.bi-htl--cards .bi-htl__item {
  scroll-snap-align: start;
}

.bi-htl__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.bi-htl__card:hover,
.bi-htl__card:focus-visible {
  color: inherit;
}

.bi-htl__card:focus-visible {
  outline: 2px solid var(--bs-focus-ring-color, currentcolor);
  outline-offset: 3px;
}

.bi-htl__media {
  position: relative;
  aspect-ratio: var(--bi-htl-card-ratio, 4 / 5);
  overflow: hidden;
  border-radius: var(--bi-htl-radius, 0.25rem);
  background-color: var(--bi-htl-media-bg, var(--bs-tertiary-bg, #f3f3f3));
}

.bi-htl__media .bi-htl__image {
  position: absolute;
  inset: 0;
}

.bi-htl__card:hover .bi-htl__image {
  transform: scale(var(--bi-htl-image-hover-scale, 1.04));
}

.bi-htl__badge {
  position: absolute;
  top: var(--bi-htl-badge-offset, 0.875rem);
  left: var(--bi-htl-badge-offset, 0.875rem);
  padding: var(--bi-htl-badge-padding, 0.375rem 0.75rem);
  font-size: var(--bi-htl-badge-size, 0.625rem);
  font-weight: var(--bi-htl-badge-weight, 600);
  line-height: 1.2;
  letter-spacing: var(--bi-htl-badge-letter-spacing, 0.12em);
  text-transform: uppercase;
  color: var(--bi-htl-badge-color, #fff);
  background-color: var(--bi-htl-badge-bg, #111);
  border-radius: var(--bi-htl-badge-radius, 0);
}

.bi-htl__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--bi-htl-card-body-padding, 1.25rem 0.25rem 0);
}

.bi-htl__card .bi-htl__tile-title {
  margin: 0;
  font-family: var(--bi-htl-card-title-font, inherit);
  font-size: var(--bi-htl-card-title-size, 1.5rem);
  font-weight: var(--bi-htl-card-title-weight, 600);
  line-height: 1.2;
  color: inherit;
}

.bi-htl__card .bi-htl__tile-kicker {
  margin: 0.25rem 0 0.5rem;
  font-size: var(--bi-htl-card-kicker-size, 0.75rem);
  letter-spacing: var(--bi-htl-card-kicker-letter-spacing, 0.14em);
  text-transform: uppercase;
}

.bi-htl__tile-text {
  font-size: var(--bi-htl-card-text-size, 0.875rem);
  color: var(--bi-htl-muted, inherit);
}

.bi-htl__tile-cta {
  margin-top: 0.75rem;
  padding-bottom: 0.1875rem;
  font-size: var(--bi-htl-card-cta-size, 0.75rem);
  letter-spacing: var(--bi-htl-card-cta-letter-spacing, 0.14em);
  text-transform: uppercase;
  border-bottom: 1px solid currentcolor;
}

/* Full-bleed visuals */

/* Two per row on phones. */
.bi-htl--overlay .bi-htl__list {
  grid-template-columns: repeat(var(--bi-htl-columns-mobile, 2), minmax(0, 1fr));
  gap: var(--bi-htl-overlay-gap, var(--bi-htl-gap, 1.5rem));
}

.bi-htl__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: var(--bi-htl-overlay-ratio, 3 / 4);
  overflow: hidden;
  color: var(--bi-htl-overlay-color, #fff);
  text-decoration: none;
  border: var(--bi-htl-overlay-border, 0);
  border-radius: var(--bi-htl-radius, 0.25rem);
  background-color: var(--bi-htl-media-bg, var(--bs-tertiary-bg, #f3f3f3));
  isolation: isolate;
}

.bi-htl__tile:hover,
.bi-htl__tile:focus-visible {
  color: var(--bi-htl-overlay-color, #fff);
}

.bi-htl__tile:focus-visible {
  outline: 2px solid var(--bs-focus-ring-color, currentcolor);
  outline-offset: 3px;
}

.bi-htl__tile .bi-htl__image {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.bi-htl__tile::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: var(--bi-htl-overlay-gradient, linear-gradient(to top, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 0%) 55%));
}

.bi-htl__tile--empty {
  background-color: var(--bi-htl-empty-bg, #2b2b2b);
}

.bi-htl__tile:hover .bi-htl__image {
  transform: scale(var(--bi-htl-image-hover-scale, 1.04));
}

.bi-htl__caption {
  display: flex;
  flex-direction: column;
  padding: var(--bi-htl-caption-padding, 1rem 1.125rem);
}

.bi-htl__tile .bi-htl__tile-kicker {
  font-size: var(--bi-htl-overlay-kicker-size, 0.6875rem);
  letter-spacing: var(--bi-htl-overlay-kicker-letter-spacing, 0.14em);
  text-transform: uppercase;
  opacity: 0.85;
}

.bi-htl__tile .bi-htl__tile-title {
  margin: 0;
  font-family: var(--bi-htl-overlay-title-font, inherit);
  font-size: var(--bi-htl-overlay-title-size, clamp(1.125rem, 1rem + 0.6vw, 1.625rem));
  font-weight: var(--bi-htl-overlay-title-weight, 600);
  line-height: 1.2;
  color: inherit;
  text-wrap: balance;
}

/* Links under a visual */

.bi-htl__panel {
  padding: var(--bi-htl-panel-padding, 1.125rem 0.625rem 0);
  background-color: var(--bi-htl-panel-bg, #fff);
  border: 1px solid var(--bi-htl-border, #e6e6e6);
}

.bi-htl__visual,
.bi-htl__links {
  max-width: var(--bi-htl-panel-width, 60rem);
  margin-inline: auto;
}

.bi-htl__visual-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Two per row on phones, framed by thin rules. */
.bi-htl__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--bi-htl-border, #e6e6e6);
}

.bi-htl__links-item {
  display: flex;
  border-bottom: 1px solid var(--bi-htl-border, #e6e6e6);
}

.bi-htl__links-item:nth-child(odd) {
  border-right: 1px solid var(--bi-htl-border, #e6e6e6);
}

.bi-htl__link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--bi-htl-link-padding, 0.875rem 0.25rem);
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.bi-htl__link:hover,
.bi-htl__link:focus-visible {
  color: var(--bi-htl-link-hover-color, inherit);
  background-color: var(--bi-htl-link-hover-bg, var(--bs-tertiary-bg, #f6f6f6));
}

.bi-htl__link:focus-visible {
  outline: 2px solid var(--bs-focus-ring-color, currentcolor);
  outline-offset: -2px;
}

.bi-htl__link-title {
  font-size: var(--bi-htl-link-size, 0.75rem);
  font-weight: var(--bi-htl-link-weight, 600);
  letter-spacing: var(--bi-htl-link-letter-spacing, 0.12em);
  text-transform: uppercase;
}

.bi-htl__link-text {
  margin-top: 0.25rem;
  font-size: var(--bi-htl-link-text-size, 0.625rem);
  letter-spacing: 0.06em;
  color: var(--bi-htl-muted, inherit);
}

@media (min-width: 768px) {
  .bi-htl--cards .bi-htl__list {
    grid-template-columns: repeat(var(--bi-htl-columns, 3), minmax(0, 1fr));
    grid-auto-columns: auto;
    grid-auto-flow: row;
    gap: var(--bi-htl-card-gap, var(--bi-htl-gap, 1.5rem));
    padding-bottom: 0;
    overflow: visible;
  }

  .bi-htl--overlay .bi-htl__list {
    grid-template-columns: repeat(var(--bi-htl-columns, 3), minmax(0, 1fr));
  }

  .bi-htl__panel {
    padding: var(--bi-htl-panel-padding-desktop, 2rem 1.25rem 0);
  }

  /* A single row: every link side by side, separated by thin rules. */
  .bi-htl__links {
    grid-template-columns: repeat(var(--bi-htl-columns, 5), minmax(0, 1fr));
  }

  .bi-htl__links-item {
    border-bottom: 0;
  }

  .bi-htl__links-item:nth-child(odd) {
    border-right: 0;
  }

  .bi-htl__links-item:not(:last-child) {
    border-right: 1px solid var(--bi-htl-border, #e6e6e6);
  }

  .bi-htl__link {
    padding: var(--bi-htl-link-padding-desktop, 1.125rem 0.375rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bi-htl__image,
  .bi-htl__link {
    transition: none;
  }
}