/**
 * Arbitrary utility classes used under templates/ but not emitted by the
 * compiled site.css (Tailwind content scan is rooted in eventmocks/).
 * When refreshing site.css from eventmocks, grep templates for bracket
 * utilities (e.g. min-h-[44px]) and extend this file if anything breaks.
 */

/* Compact card summary: single-line ellipsis without line-clamp / -webkit-box,
   which can inset the first line vs. the title on collection 2-up/3-up cards. */
.resource-compact-card__summary {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Showcase Key Takeaways: Markdown renders <ul>/<ol>/<li>. Tailwind preflight clears
 * list styles; arbitrary [&_ul]:… utilities on this block are not in compiled site.css
 * (content scan does not include trl_collections templates). Restore readable lists here.
 */
.key-takeaways-markdown ul {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 1.25rem;
  margin: 0.35rem 0 0.75rem;
}

.key-takeaways-markdown ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 1.5rem;
  margin: 0.35rem 0 0.75rem;
}

.key-takeaways-markdown li {
  margin: 0.2rem 0;
  padding-left: 0.125rem;
}

.key-takeaways-markdown li > p {
  margin: 0.35rem 0;
}

.key-takeaways-markdown li > p:first-child {
  margin-top: 0;
}

.key-takeaways-markdown li > p:last-child {
  margin-bottom: 0;
}

.key-takeaways-markdown ul ul,
.key-takeaways-markdown ol ol,
.key-takeaways-markdown ul ol,
.key-takeaways-markdown ol ul {
  margin-top: 0.35rem;
  margin-bottom: 0.35rem;
}

.key-takeaways-markdown ul ul {
  list-style-type: circle;
}

.key-takeaways-markdown > p {
  margin-bottom: 0.5rem;
}

.key-takeaways-markdown a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.key-takeaways-markdown code {
  font-size: 0.75em;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  background-color: color-mix(in oklch, currentColor 12%, transparent);
}

.key-takeaways-markdown pre {
  overflow-x: auto;
  margin: 0.5rem 0;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  background-color: color-mix(in oklch, currentColor 10%, transparent);
}

.z-\[3\] {
  z-index: 3;
}

.min-h-\[16rem\] {
  min-height: 16rem;
}

.min-h-\[44px\] {
  min-height: 44px;
}

@media (min-width: 640px) {
  .sm\:min-h-\[44px\] {
    min-height: 44px;
  }
}

@media (min-width: 768px) {
  .md\:min-h-0 {
    min-height: 0;
  }
}

/* Collection hero (`templates/trl_collections/partials/hero.html`): responsive
   `lg:mt-*` on the image column is not emitted in compiled `site.css`. Offset
   the figure so it lines up with the title (below kicker + spacing). */
@media (min-width: 1024px) {
  .collection-hero__media--with-image {
    margin-top: 3.5rem;
  }
}

/* Homepage hero stat cards (`templates/website/home.html`):
   - Compiled `site.css` does not scan `website/*.py`, so layout utilities from
     `hero_stats_layout_class` never shipped.
   - The group used `xl:block` with `hidden`, which forced `display: block` at
     xl — `gap` does not space block-flow children, so cards touched. At xl we
     override `hidden` and set flex/grid + gap here. */
@media (min-width: 1280px) {
  .hero-stats-group.hero-stats-layout--1,
  .hero-stats-group.hero-stats-layout--2-3 {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.75rem;
  }

  .hero-stats-group.hero-stats-layout--4,
  .hero-stats-group.hero-stats-layout--5-6 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    justify-items: end;
    align-content: start;
  }
}

/* Homepage hero carousel (`templates/website/home.html`): left-to-right scrim
   over slide images. Tailwind `from-background/90` etc. are not emitted into
   compiled `site.css` (content paths do not pick up these arbitrary stops), so
   the gradient lives here. */
.home-hero-carousel__scrim {
  pointer-events: none;
  /* Fallback when `color-mix` is not available (very old browsers). */
  background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5));
}

@supports (color: color-mix(in srgb, white, black)) {
  .home-hero-carousel__scrim {
    background: linear-gradient(
      to right,
      color-mix(in srgb, var(--background) 90%, transparent),
      color-mix(in srgb, var(--background) 50%, transparent)
    );
  }
}

/* Homepage hero video (`templates/website/home.html`): configurable scrim via
   --video-scrim-left / --video-scrim-right (0–90 and 0–50 at admin strength 100). */
.home-hero-video__scrim {
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, calc(var(--video-scrim-left, 0) / 100)),
    rgba(255, 255, 255, calc(var(--video-scrim-right, 0) / 100))
  );
}

@supports (color: color-mix(in srgb, white, black)) {
  .home-hero-video__scrim {
    background: linear-gradient(
      to right,
      color-mix(
        in srgb,
        var(--video-scrim-color, var(--background)) calc(var(--video-scrim-left, 0) * 1%),
        transparent
      ),
      color-mix(
        in srgb,
        var(--video-scrim-color, var(--background)) calc(var(--video-scrim-right, 0) * 1%),
        transparent
      )
    );
  }
}

/* Homepage hero video copy tones (`website/homepage_hero_video_text.py`). */
.home-hero-video__headline--white,
.home-hero-video__subheadline--white {
  color: #ffffff;
}

.home-hero-video__headline--light,
.home-hero-video__subheadline--light {
  color: var(--brand-gray-light);
}

.home-hero-video__headline--medium,
.home-hero-video__subheadline--medium {
  color: #767676;
}

.home-hero-video__headline--dark,
.home-hero-video__subheadline--dark {
  color: var(--brand-gray-dark);
}

.home-hero-video__headline--black,
.home-hero-video__subheadline--black {
  color: var(--brand-ink);
}

/* Video hero readability: soft layered text-shadow on tone classes (no background box). */
.home-hero-video__subheadline--white,
.home-hero-video__subheadline--light {
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.34),
    0 3px 14px rgba(0, 0, 0, 0.26),
    0 10px 36px rgba(0, 0, 0, 0.16);
}

.home-hero-video__headline--white,
.home-hero-video__headline--light {
  text-shadow:
    0 1px 5px rgba(0, 0, 0, 0.38),
    0 4px 18px rgba(0, 0, 0, 0.3),
    0 12px 40px rgba(0, 0, 0, 0.19);
}

.home-hero-video__subheadline--medium,
.home-hero-video__subheadline--dark,
.home-hero-video__subheadline--black {
  text-shadow:
    0 0 20px rgba(255, 255, 255, 0.72),
    0 1px 4px rgba(255, 255, 255, 0.45),
    0 4px 16px rgba(0, 0, 0, 0.1);
}

.home-hero-video__headline--medium,
.home-hero-video__headline--dark,
.home-hero-video__headline--black {
  text-shadow:
    0 0 24px rgba(255, 255, 255, 0.76),
    0 1px 5px rgba(255, 255, 255, 0.5),
    0 5px 20px rgba(0, 0, 0, 0.11);
}

/* /partners/ (`templates/website/partners.html`): utilities from
   partnermocks/partners.html not emitted when site.css is synced from eventmocks. */
.aspect-\[3\/2\] {
  aspect-ratio: 3 / 2;
}

@media (min-width: 768px) {
  .md\:grid-cols-\[200px_1fr\] {
    grid-template-columns: 200px 1fr;
  }
}

/* Partner logo tiles: centered, scaled to fit inside 3:2 cards (no crop) */
.partners-logo-frame {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.partners-logo-frame__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 1rem;
}

.partners-logo-frame__inner img {
  display: block;
  flex: 0 1 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* object-position: left utility (Tailwind's object-left isn't in the compiled
   bundle for event templates). Pairs with object-cover to anchor the crop to
   the image's left edge instead of the center default. */
.object-left {
  object-position: left;
}

/* Event listing thumbnail: round the thumbnail's own outer corners so the image
   is clipped to match the card's radius. The card is rounded + overflow-hidden,
   but this container is a stacking context (isolate/z-index), which browsers
   don't clip to an ancestor's border-radius — leaving square corners. Radius is
   the card's 1rem minus its 2px border. Corners follow the flex-col→md:flex-row
   layout: top corners stacked (mobile), left corners side-by-side (md+). */
.event-thumb {
  border-top-left-radius: 0.875rem;
  border-top-right-radius: 0.875rem;
}

@media (min-width: 768px) {
  .event-thumb {
    border-top-right-radius: 0;
    border-bottom-left-radius: 0.875rem;
  }
}

/* All Partners: same column widths as grid-cols-2/3/4, but centers partial last rows */
.partners-all-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.partners-all-grid__item {
  flex: 0 1 calc((100% - 1.5rem) / 2);
  max-width: calc((100% - 1.5rem) / 2);
  min-width: 0;
}

@media (min-width: 640px) {
  .partners-all-grid__item {
    flex: 0 1 calc((100% - 3rem) / 3);
    max-width: calc((100% - 3rem) / 3);
  }
}

@media (min-width: 768px) {
  .partners-all-grid__item {
    flex: 0 1 calc((100% - 4.5rem) / 4);
    max-width: calc((100% - 4.5rem) / 4);
  }
}