/* Layout utilities shim — deterministic export without Tailwind JIT */
.hidden { display: none !important; }

.h-full { height: 100%; }

.w-full { width: 100%; }

.inline-flex { display: inline-flex; }

.flex { display: flex; }

.flex-col { flex-direction: column; }

.flex-wrap { flex-wrap: wrap; }

.items-center { align-items: center; }

.items-start { align-items: flex-start; }

.items-stretch { align-items: stretch; }

.items-baseline { align-items: baseline; }

.justify-center { justify-content: center; }

.justify-start { justify-content: flex-start; }

.text-center { text-align: center; }

.grid { display: grid; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

.trf-media-frame img,
.trf-collage-tile__inner img,
[style*="aspect-ratio"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.trf-timeline-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--space-scale, 1.125) * 1rem);
  align-items: stretch;
}

.trf-timeline-spacer {
  display: none;
  min-width: 0;
}

/* Single-column (mobile) timeline: the step marker always precedes its card.
   Without this the marker sits above the card in one row and below it in the
   next, because the card swaps DOM slots to build the desktop zigzag. */
.trf-timeline-row .trf-timeline-order-2 {
  order: -1;
}

.trf-gallery figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Carousel card images must fill their fixed-aspect frame. !important is
   required because block templates may carry object-fit as an inline style
   (the old slider stub shipped `object-fit:contain`, which letterboxed
   landscape cards with portrait/odd-ratio photos). */
.trf-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}

.trf-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:order-3 { order: 3; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .md\:col-span-1 { grid-column: span 1 / span 1; }
  .md\:col-span-3 { grid-column: span 3 / span 3; }
  .md\:col-span-4 { grid-column: span 4 / span 4; }
  .md\:col-span-5 { grid-column: span 5 / span 5; }
  .md\:col-span-7 { grid-column: span 7 / span 7; }
  .md\:col-span-8 { grid-column: span 8 / span 8; }
  .md\:col-span-12 { grid-column: span 12 / span 12; }
  .lg\:justify-end { justify-content: flex-end; }

  .trf-timeline-row {
    grid-template-columns: 1fr auto 1fr;
  }

  .trf-timeline-spacer {
    display: block;
  }

  .trf-timeline-row .trf-timeline-order-1 { order: 1; }
  .trf-timeline-row .trf-timeline-order-2 { order: 2; }
  .trf-timeline-row .trf-timeline-order-3 { order: 3; }

  .trf-footer-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--spacing-xl);
    align-items: start;
  }

  .trf-footer-nav-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
  }

  .trf-section-header {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: calc(var(--space-scale, 1.125) * 1.25rem);
    align-items: end;
  }

  .trf-posts-list-header {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: calc(var(--space-scale, 1.125) * 1.25rem);
    align-items: end;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-12 { grid-column: span 12 / span 12; }
}

/* Landing anchor sections: the header menu scrolls to [data-trf-anchor]
   targets; scroll-margin keeps the section heading clear of the sticky
   header. Scoped via :has so regular multi-page sites are untouched. */
[data-trf-anchor] { scroll-margin-top: 6.5rem; }

html:has([data-trf-anchor]) { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html:has([data-trf-anchor]) { scroll-behavior: auto; }
}