/*
  Theme base styles (not overwritten by generator).

  CASCADE LAYERS — read before adding rules here.

  The runtime Tailwind build ships every utility inside a cascade layer
  (`@import './utilities.css' layer(utilities)`). Unlayered author rules beat
  layered ones unconditionally — stronger than specificity, stronger than
  document order. So an unlayered `.w-full` used to defeat a real `md:w-auto`,
  and `.hidden { display: none !important }` made `hidden md:block` impossible
  to ever open.

  Therefore this file is split in two:

  * `@layer base` / `@layer utilities` — rules that merely duplicate Tailwind
    so the exported site survives a CDN outage. Inside the layer they lose ties
    to Tailwind (which is injected later), and Tailwind's own responsive
    variants outrank them again, which is the whole point.

  * unlayered — the theme's own design decisions: reset-adjacent body rules and
    every `trf-*` component. These must keep outranking Tailwind utilities;
    moving them into a layer would let an arbitrary LLM-emitted utility class
    break the mobile navigation or the image crop frames.
*/

@layer theme, base, components, utilities;

html, body {
  height: 100%;
}

body {
  /*
    Split into longhands on purpose: the `background` shorthand would reset
    background-image, and this file is enqueued AFTER the generated stylesheet
    that defines --bg-image (site background treatment, variability tranche 6b).
    Sites with a solid treatment simply never define the variable.
  */
  background-color: var(--color-bg);
  background-image: var(--bg-image, none);
  background-size: var(--bg-size, auto);
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

@media (prefers-reduced-transparency: reduce) {
  body {
    background-image: none;
  }
}

/*
  Sticky header (applied by assets/js/header-sticky.js).
  Do not put position:sticky on the whole <header> in generated header.php for tall multi-band layouts.
*/
.trf-is-sticky {
  position: sticky;
  top: var(--trf-admin-bar-offset, 0px);
  z-index: 40;
}

header.trf-site-header[data-trf-sticky="none"] .trf-is-sticky {
  position: static;
}

/* Mobile nav must render above hero, cookie notice, and page stacking contexts */
.trf-site-header,
header.trf-site-header {
  position: relative;
  z-index: 1100;
  overflow: visible;
}

.trf-header__bar,
.trf-mnav {
  overflow: visible;
}

.trf-mnav {
  position: relative;
  z-index: 1101;
}

.trf-mnav__panel {
  z-index: 1102;
}

@media (max-width: 767px) {
  .trf-is-sticky {
    z-index: 1100;
  }

  .trf-header__backdrop {
    z-index: 10050 !important;
  }

  .trf-header__sheet {
    z-index: 10051 !important;
    max-height: min(85vh, calc(100dvh - 4rem));
    padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom, 0px));
  }

  .trf-header__toggle {
    position: relative;
    z-index: 10052 !important;
  }

  .trf-site-header.trf-header.is-open .trf-header__sheet {
    transform: translateY(0) !important;
  }
}

/*
 * Brand must fit the phone, whatever the generated header CSS says.
 *
 * Gen #269 and #270 both shipped a header whose brand name sat on one
 * unbreakable line: at 390px it ran to 402px and pushed the burger off-screen
 * (the whole layout viewport stretched to 470px). Asking the model for a
 * mobile exception in the prompt did not hold, so the guarantee lives here —
 * flex children default to min-width:auto, which is what lets the name refuse
 * to shrink in the first place.
 */
@media (max-width: 767px) {
  .trf-header__bar {
    min-width: 0;
  }

  .trf-brand {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .trf-brand__name,
  .trf-brand span {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .trf-header__toggle,
  .trf-header__actions {
    flex-shrink: 0;
  }
}

/* Cookie notice stays below open mobile menu */
.trf-site-header.trf-header.is-open ~ * .trf-cookie-notice,
body.trf-menu-open .trf-cookie-notice {
  z-index: 9000 !important;
}

.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: 768px) {
  .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;
  }
}

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

/*
  Tailwind stand-ins below this line — layered on purpose.

  `img` lives in `base` (Tailwind's own preflight sets the same pair there), so
  a height utility on the element itself still wins. Unlayered, this rule beat
  every `h-*` class, which is why the `h-64` on the blog index thumbnails never
  applied and the covers came out at mixed heights.
*/
@layer base {
  img {
    max-width: 100%;
    height: auto;
  }
}

/*
  Static layout shim — a deterministic subset of Tailwind so an exported site
  still lays out if cdn.jsdelivr.net is unreachable. Keep this list to classes
  Tailwind defines identically: inside the layer Tailwind wins every tie, so a
  divergent declaration here would only ever apply during a CDN outage and go
  unnoticed otherwise.
*/
@layer utilities {
  /*
    Deterministic container behavior.
    Even if Tailwind fails to load, generated templates keep correct gutters.
  */
  .container {
    width: 100%;
    max-width: var(--content-width-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  /* Ensure "readable" sections can opt-in via inline max-width */
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  /* Screen reader only — для доступности */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .hidden { display: none; }

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

  @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\:flex-row { flex-direction: row; }
    .md\:flex-col { flex-direction: column; }
    .md\:items-center { align-items: center; }
    .md\:justify-between { justify-content: space-between; }
    .md\:order-1 { order: 1; }
    .md\:order-2 { order: 2; }
    .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:` means >=1024px. This block used to sit inside the 768px query, so
     `lg:justify-end` fired on tablets and — being unlayered — also beat the
     real Tailwind utility it was standing in for. */
  @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; }
    .lg\:justify-end { justify-content: flex-end; }
  }
}