/* dhat.news custom CSS.
   Pure CSS — no @tailwind, no @apply. Served verbatim in both dev
   (alongside the Tailwind Play CDN) and prod (alongside the compiled
   tailwind.css). Single source of truth for rules Tailwind can't
   express via utilities: masonry column-count, @keyframes, grid-
   template-areas, etc. */

html {
  scroll-behavior: smooth;
}

/* Masonry */
.masonry-grid {
  column-count: 1;
  column-gap: 1.5rem;
}
@media (min-width: 640px)  { .masonry-grid { column-count: 2; } }
@media (min-width: 1024px) { .masonry-grid { column-count: 3; } }
@media (min-width: 1280px) { .masonry-grid { column-count: 4; } }

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(30px);
  animation: reveal 0.6s ease-out forwards;
}
.masonry-item:nth-child(1) { animation-delay: 0.05s; }
.masonry-item:nth-child(2) { animation-delay: 0.10s; }
.masonry-item:nth-child(3) { animation-delay: 0.15s; }
.masonry-item:nth-child(4) { animation-delay: 0.20s; }
.masonry-item:nth-child(5) { animation-delay: 0.25s; }
.masonry-item:nth-child(6) { animation-delay: 0.30s; }
.masonry-item:nth-child(7) { animation-delay: 0.35s; }
.masonry-item:nth-child(8) { animation-delay: 0.40s; }
.masonry-item:nth-child(n+9) { animation-delay: 0.45s; }

@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Parallax hero */
.hero-parallax {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
.parallax-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 10;
}
.hero-fade-bottom {
  background: linear-gradient(to bottom, transparent 0%, #020D15 100%);
}

.scroll-indicator-fade { animation: fade-pulse 3s infinite; }
@keyframes fade-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.8; }
}

/* news-section grid templates (named areas) */
.news-section {
  display: grid;
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.news-section > * {
  background: #020D15;
  min-height: 0;
  overflow: hidden;
}
.news-section > * > article { height: 100%; }
.news-section--lead {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "feat b"
    "feat c";
}
.news-section--row {
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: "a b c";
}
.news-section--pair {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "a b";
}
.news-section--single {
  grid-template-columns: 1fr;
  grid-template-areas: "a";
}

@media (max-width: 639px) {
  .news-section--lead,
  .news-section--row,
  .news-section--pair {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: none;
  }
  .news-section > * { grid-area: auto; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .news-section--row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: none;
  }
  .news-section--row > * { grid-area: auto; }
}

/* ─────────────────────────────────────────────────────────────────────────
   PRIOR-WORK GRID VARIANTS (restored from
   docs/research/grid-packing-newspaper-layout/ — see README there).
   ───────────────────────────────────────────────────────────────────────── */

/* Variant 1 — auto-fit + dense (was the production CSS pre-mosaic). */
.news-grid-auto-v1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: minmax(11rem, auto);
  grid-auto-flow: dense;
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0.75rem;
  overflow: hidden;
}
.news-grid-auto-v1 > * { background: #020D15; min-height: 0; overflow: hidden; }
.news-grid-auto-v1 > [data-rank="featured"] { grid-column: 1 / -1; grid-row: span 2; }
.news-grid-auto-v1 > [data-rank="large"]    { grid-column: span 2; grid-row: span 2; }
.news-grid-auto-v1 > [data-rank="medium"]   { grid-column: span 2; grid-row: span 1; }
.news-grid-auto-v1 > [data-rank="small"]    { grid-column: span 1; grid-row: span 1; }
@media (max-width: 639px) {
  .news-grid-auto-v1 > [data-rank="featured"],
  .news-grid-auto-v1 > [data-rank="large"],
  .news-grid-auto-v1 > [data-rank="medium"] {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* 4-shape mosaic grid (Large 2x2, Wide 2x1, Tall 1x2, Small 1x1).
   Driven by data-rank emitted from App.Html.Stories.renderNewsItem. */
.news-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: 11rem;
  grid-auto-flow: dense;
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.news-grid-auto > * { background: #020D15; min-height: 0; overflow: hidden; }
.news-grid-auto > [data-rank="large"] { grid-column: span 2; grid-row: span 2; }
.news-grid-auto > [data-rank="wide"]  { grid-column: span 2; grid-row: span 1; }
.news-grid-auto > [data-rank="tall"]  { grid-column: span 1; grid-row: span 2; }
.news-grid-auto > [data-rank="small"] { grid-column: span 1; grid-row: span 1; }
@media (max-width: 639px) {
  .news-grid-auto > [data-rank="large"],
  .news-grid-auto > [data-rank="wide"],
  .news-grid-auto > [data-rank="tall"] {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* Variant 3 — fixed 12-col Guardian/FT-style. */
.news-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(8rem, auto);
  grid-auto-flow: dense;
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0.75rem;
  overflow: hidden;
}
.news-grid-12 > * { background: #020D15; min-height: 0; overflow: hidden; }
.news-grid-12 > [data-rank="featured"] { grid-column: 1 / -1; grid-row: span 3; }
.news-grid-12 > [data-rank="large"]    { grid-column: span 6; grid-row: span 2; }
.news-grid-12 > [data-rank="medium"]   { grid-column: span 4; grid-row: span 2; }
.news-grid-12 > [data-rank="small"]    { grid-column: span 3; grid-row: span 1; }
@media (max-width: 1023px) {
  .news-grid-12 { grid-template-columns: repeat(6, 1fr); }
  .news-grid-12 > [data-rank="large"]  { grid-column: span 6; }
  .news-grid-12 > [data-rank="medium"] { grid-column: span 3; }
  .news-grid-12 > [data-rank="small"]  { grid-column: span 3; }
}
@media (max-width: 639px) {
  .news-grid-12 { grid-template-columns: 1fr; }
  .news-grid-12 > * { grid-column: 1 / -1; grid-row: span 1; }
}

/* Prototype card — simple flex-col, rank-tag + headline + meta. No image. */
.proto-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  background: #042333;
  position: relative;
  overflow: hidden;
}
.proto-card .rank-tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.4rem;
}
.proto-card .headline {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: #fff;
  letter-spacing: -0.01em;
}
.proto-card[data-rank="featured"] .headline { font-size: 1.6rem; }
.proto-card[data-rank="large"]    .headline { font-size: 1.2rem; }
.proto-card[data-rank="medium"]   .headline { font-size: 1rem; }
.proto-card[data-rank="small"]    .headline { font-size: 0.85rem; }
.proto-card .meta {
  display: flex;
  justify-content: space-between;
  margin-top: 0.6rem;
  font-size: 0.7rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Custom scrollbar (referenced by Core.Html.Tw.customScrollbar) */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #012E40;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #038C8C;
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #026e6e;
}

/* Auth-page details: when open, hide the summary so the form
   visually replaces the button (true swap). Click-to-close happens
   via the "← back" link inside the form (no JS required). Scoped
   to the auth POST forms so unrelated <details> elsewhere stay
   default-styled. */
details[open]:has(> form[action="/login"]) > summary,
details[open]:has(> form[action="/register"]) > summary {
  display: none;
}
</content>
</invoke>