/* ──────────────────────────────────────────────
   TRU Realty — resources.css

   The four Resources pages: E-Books, Newsletters, Blogs, Testimonials.
   Loaded fourth, after tokens → base → home, exactly like project.css,
   treos.css and contact.css. home.css is still required above it: it
   carries .loader-hero, .curtain and .lightbox.

   Scroll reveal follows the same contract as css/treos.css — this file
   owns its own hidden-state block, so css/home.css is not touched. The
   selector list at the bottom must stay in sync with REVEAL in
   js/reveal.js.
   ────────────────────────────────────────────── */

/* ─────────────────  SHARED SECTION SHELL  ───────────────── */

/* .loader-hero is position:sticky, so every section below it needs its own
   stacking context or the hero paints straight over it. Same note as
   css/contact.css:10. */
.res-section {
  position: relative;
  z-index: 1;
  background: var(--paper);
  padding: var(--s-10) 0 var(--s-9);
}
.res-section--alt { background: var(--paper-2); }

.res-section__head {
  max-width: 60ch;
  margin: 0 0 var(--s-9);
}
.res-section__head--center {
  margin-inline: auto;
  text-align: center;
}
.res-section__lede {
  font-size: var(--fs-lede);
  line-height: var(--lh-prose);
  color: var(--mute);
  margin-top: var(--s-4);
}

/* ─────────────────  DOWNLOAD CARD  ─────────────────
   Shared by E-Books and Newsletters: a portrait cover, a title, and a
   direct PDF link. auto-fit with a bounded track rather than a fixed
   column count, so the 3-item set and the 7-item set both centre their
   last row without the hand-written nth-child rules .awards-grid needed. */

.res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 250px));
  justify-content: center;
  gap: var(--s-8) var(--s-7);
}

.res-card { display: flex; flex-direction: column; }

.res-card__media {
  margin: 0 0 var(--s-5);
  aspect-ratio: 500 / 707;          /* measured from the supplied covers */
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
/* contain, not cover: the source pages publish no titles, so the cover art
   is the only place a title exists. Cropping it destroys the content. */
.res-card__cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--d-cinema) var(--ease-out);
}
.res-card:hover .res-card__cover { transform: scale(1.02); }

.res-card__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--mute-2);
  margin-bottom: var(--s-2);
}
.res-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: var(--lh-snug);
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.res-card__desc {
  font-size: 0.95rem;
  line-height: var(--lh-prose);
  color: var(--mute);
  margin-bottom: var(--s-5);
}
/* Pushes the action row to the bottom so buttons line up across a row of
   cards whose descriptions differ in length. */
.res-card__actions { margin-top: auto; }
.res-card__size {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--mute-2);
}

@media (max-width: 560px) {
  .res-grid { grid-template-columns: minmax(0, 280px); }
}

/* ─────────────────  TESTIMONIAL VIDEO CARD  ─────────────────
   Geometry borrowed from .voice__player in css/home.css, at a smaller
   play badge to suit a three-up grid. Every poster is 1920x1080 —
   including the one portrait clip, which is composited over a blurred
   fill of itself at build time — so the grid never goes ragged. */

.vid-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-7) var(--s-6);
}

.vid-card { margin: 0; }

.vid-card__player {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--ink);
  cursor: pointer;
  transition: border-color var(--d-base) var(--ease-out);
}
.vid-card__player:hover,
.vid-card__player:focus-visible { border-color: var(--gold); }

.vid-card__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-cinema) var(--ease-out);
}
.vid-card__player:hover .vid-card__poster { transform: scale(1.02); }

.vid-card__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(12, 10, 9, 0.62);
  color: var(--paper);
  border: 1px solid rgba(250, 250, 249, 0.5);
  backdrop-filter: blur(3px);
  transition: background var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
.vid-card__player:hover .vid-card__play {
  background: var(--gold);
  transform: scale(1.06);
}

/* Warns that this one opens tall, so the lightbox is not a surprise. */
.vid-card__badge {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  background: rgba(12, 10, 9, 0.62);
  color: var(--paper);
  backdrop-filter: blur(3px);
}

.vid-card__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--s-3);
  margin-top: var(--s-4);
}
.vid-card__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
}
.vid-card__where {
  width: 100%;
  font-size: 0.9rem;
  color: var(--mute);
  margin-top: 2px;
}
.vid-card__len {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--mute-2);
}

@media (max-width: 940px) {
  .vid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .vid-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ─────────────────  BLOG LISTING  ───────────────── */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-8) var(--s-6);
}
.blog-card { display: flex; flex-direction: column; }

.blog-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}
.blog-card__media {
  margin: 0 0 var(--s-4);
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--paper-2);
}
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-cinema) var(--ease-out);
}
.blog-card__link:hover .blog-card__media img { transform: scale(1.03); }

.blog-card__date {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--mute-2);
  margin-bottom: var(--s-2);
}
.blog-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: var(--lh-snug);
  color: var(--ink);
  margin-bottom: var(--s-3);
  transition: color var(--d-fast) var(--ease-out);
}
.blog-card__link:hover .blog-card__title { color: var(--gold); }
.blog-card__excerpt {
  font-size: 0.95rem;
  line-height: var(--lh-prose);
  color: var(--mute);
  margin-bottom: var(--s-4);
}
.blog-card__more {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

@media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .blog-grid { grid-template-columns: minmax(0, 1fr); } }

/* ─────────────────  ARTICLE  ───────────────── */

.article {
  position: relative;
  z-index: 1;
  background: var(--paper);
}
/* Dark, like every other page's hero. Two reasons, and the first is not
   cosmetic: .site-header paints light text on a transparent bar and only
   flips to ink once you scroll past 60px, so over a paper background the
   whole nav is invisible at rest. These pages have no photographic hero to
   sit on, so the masthead supplies the dark ground itself.
   The +64px clears the fixed header, same as css/treos.css:18. */
.article__head {
  position: relative;
  z-index: 1;
  background: var(--ink);
  color: var(--paper);
  padding: calc(var(--s-9) + 64px) 0 var(--s-9);
}
.article__inner {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.article__crumbs {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: rgba(250, 250, 249, 0.6);
  margin-bottom: var(--s-6);
}
.article__crumbs a { color: rgba(250, 250, 249, 0.6); }
.article__crumbs a:hover { color: var(--gold-soft); }
.article__crumbs span { margin: 0 6px; }

.article__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: rgba(250, 250, 249, 0.6);
  margin-bottom: var(--s-4);
}
.article__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--paper);
}

/* Sits below the dark band, overlapping it, so the band reads as a masthead
   rather than as a second hero competing with the picture. */
.article__media {
  position: relative;
  z-index: 1;
  background: linear-gradient(var(--ink) 0 50%, var(--paper) 50% 100%);
}
/* .article__inner supplies the 760px measure and the gutter. */
.article__figure {
  margin: 0;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.article__figure img { width: 100%; height: auto; display: block; }

.article__body { padding: var(--s-9) 0 var(--s-10); }

/* base.css resets `p { margin: 0 }` and `ul, ol { list-style: none; padding: 0 }`
   globally, which silently strips every paragraph gap and every bullet from
   prose. These four rules put them back inside the article only. */
.article__body p {
  margin: 0 0 var(--s-5);
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink-3);
}
.article__body ul {
  list-style: disc;
  padding-inline-start: 1.3em;
  margin: 0 0 var(--s-5);
}
.article__body li {
  margin-bottom: var(--s-2);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-3);
}
.article__body li::marker { color: var(--gold); }

.article__body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: var(--s-8) 0 var(--s-4);
}
.article__body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: var(--s-6) 0 var(--s-3);
}
.article__body > *:first-child { margin-top: 0; }
.article__body a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Foot: back link + prev/next */
.article__foot {
  border-top: 1px solid var(--line);
  padding: var(--s-7) 0 var(--s-10);
}
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}
.article-nav__item { display: flex; flex-direction: column; gap: var(--s-2); }
.article-nav__item--next { text-align: right; }
.article-nav__dir {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute-2);
}
.article-nav__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: var(--lh-snug);
  color: var(--ink);
}
.article-nav a:hover .article-nav__title { color: var(--gold); }
@media (max-width: 640px) {
  .article-nav { grid-template-columns: 1fr; }
  .article-nav__item--next { text-align: left; }
}

/* ─────────────────  SCROLL REVEAL  ─────────────────
   Same contract as css/home.css: hidden only when `.js` is present, and
   `.reveal-off` (set by the reveal.js failure path) kills the transition. */
.js :where(
  .res-section__head > *,
  .res-card,
  .vid-card,
  .blog-card
) {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--d-slow) var(--ease-emph),
    transform var(--d-slow) var(--ease-emph);
}
.js .is-revealed { opacity: 1; transform: none; }
.reveal-off :where(
  .res-section__head > *,
  .res-card,
  .vid-card,
  .blog-card
) {
  transition: none;
}