/* ============================================================
   TDR Section Pages — tdr-sections.css
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */
.tdr-section {
  background: #fff;
  min-height: 60vh;
}

/* ── Hero ────────────────────────────────────────────────── */
.tdr-section-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 520px;
  background: linear-gradient(160deg, #0d1520 0%, #1a2d40 55%, #12151a 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
}

.tdr-section-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.55) 60%,
    rgba(0,0,0,0.80) 100%
  );
}

.tdr-section-hero-content {
  position: relative;
  z-index: 2;
  padding: 0 48px 48px;
  max-width: 760px;
}

.tdr-section-hero-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c9a551;
  margin-bottom: 12px;
}

.tdr-section-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 20px;
}

.tdr-section-hero-cta {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c9a551;
  text-decoration: none;
  border-bottom: 1px solid rgba(201,165,81,0.4);
  padding-bottom: 2px;
  transition: border-color 0.2s, color 0.2s;
}
.tdr-section-hero-cta:hover {
  color: #fff;
  border-color: #fff;
}

/* ── Section band ────────────────────────────────────────── */
.tdr-section-band {
  background: #12151a;
  padding: 18px 48px;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.tdr-section-band-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #c9a551;
}

.tdr-section-band-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

/* ── 3-column layout: sidebar | articles | sidebar ───────── */
.tdr-section-3col {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 0 28px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: start;
}
.tdr-3col-sidebar {
  padding-top: 40px;
}
.tdr-3col-main {
  min-width: 0;
}

/* Slim widgets inside sidebars */
.tdr-3col-sidebar .tdr-nw-widget {
  max-width: none;
  margin: 0 0 16px;
  border-radius: 6px;
}
.tdr-3col-sidebar .tdr-nw-widget:last-child {
  margin-bottom: 0;
}
.tdr-3col-sidebar .tdr-nw-head {
  padding: 10px 12px;
  gap: 8px;
}
.tdr-3col-sidebar .tdr-nw-icon {
  font-size: 14px;
}
.tdr-3col-sidebar .tdr-nw-title {
  font-size: 10px;
  letter-spacing: .03em;
}
.tdr-3col-sidebar .tdr-nw-body {
  padding: 0;
}
.tdr-3col-sidebar .tdr-nw-row {
  padding: 8px 12px;
  gap: 8px;
}
.tdr-3col-sidebar .tdr-nw-avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
  flex-shrink: 0;
}
.tdr-3col-sidebar .tdr-nw-name {
  font-size: 11px;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tdr-3col-sidebar .tdr-nw-sub {
  font-size: 10px;
}
.tdr-3col-sidebar .tdr-nw-dist {
  font-size: 10px;
  padding: 2px 6px;
  white-space: nowrap;
}
.tdr-3col-sidebar .tdr-nw-stars {
  font-size: 9px;
  gap: 1px;
}
.tdr-3col-sidebar .tdr-nw-footer,
.tdr-3col-sidebar .tdr-nw-btn {
  padding: 10px 12px;
  font-size: 10px;
}
.tdr-3col-sidebar .tdr-nw-empty,
.tdr-3col-sidebar .tdr-nw-msg {
  padding: 14px 12px;
  font-size: 11px;
}

/* Remove grid-wrap padding/max-width inside the center column */
.tdr-3col-main .tdr-section-grid-wrap {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}
.tdr-3col-main .tdr-section-nbhd-wrap {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Collapse right sidebar on mid-width screens */
@media (max-width: 1100px) {
  .tdr-3col-sidebar--right { display: none; }
  .tdr-section-3col { grid-template-columns: 200px 1fr; }
}

/* Mobile: stack left widgets on top, articles in middle, right widgets on bottom */
@media (max-width: 800px) {
  .tdr-section-3col {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .tdr-3col-sidebar--left  { order: 1; padding-top: 24px; display: block; }
  .tdr-3col-main           { order: 2; }
  .tdr-3col-sidebar--right { order: 3; padding-top: 0; padding-bottom: 24px; display: block; }

  /* Reset slim-widget overrides so they fill mobile width properly */
  .tdr-3col-sidebar .tdr-nw-widget {
    margin: 0 16px 14px;
  }
  .tdr-3col-main .tdr-section-grid-wrap { padding: 32px 16px; }
  .tdr-3col-main .tdr-section-nbhd-wrap { padding: 32px 16px; }
}

/* ── Post grid ───────────────────────────────────────────── */
.tdr-section-grid-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 24px 48px;
}

.tdr-section-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 32px;
}

/* ── Lead card: first article gets a two-column featured treatment ── */
.tdr-section-card--lead {
  grid-column: span 2;
  flex-direction: row;
  gap: 32px;
  align-items: flex-start;
  border-bottom: 1px solid #e8e3dc;
  padding-bottom: 48px;
  margin-bottom: 0;
}
.tdr-section-card--lead .tdr-section-card-img-wrap {
  flex: 0 0 54%;
  aspect-ratio: 4/3;
  margin-bottom: 0;
}
.tdr-section-card--lead .tdr-section-card-body {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
}
.tdr-section-card--lead .tdr-section-card-title {
  font-size: 28px;
  line-height: 1.25;
  margin-bottom: 14px;
}
.tdr-section-card--lead .tdr-section-card-exc {
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 18px;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

@media (max-width: 900px) {
  .tdr-section-grid { grid-template-columns: repeat(2, 1fr); }
  .tdr-section-card--lead { grid-column: span 2; flex-direction: column; }
  .tdr-section-card--lead .tdr-section-card-img-wrap { flex: none; aspect-ratio: 16/9; }
  .tdr-section-card--lead .tdr-section-card-title { font-size: 24px; }
}
@media (max-width: 580px) {
  .tdr-section-grid { grid-template-columns: 1fr; }
  .tdr-section-grid-wrap { padding: 32px 16px; }
  .tdr-section-card--lead { grid-column: span 1; flex-direction: column; }
}

/* ── Post card ───────────────────────────────────────────── */
.tdr-section-card {
  display: flex;
  flex-direction: column;
}

.tdr-section-card-img-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #f0ede8;
  margin-bottom: 16px;
}

.tdr-section-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}
.tdr-section-card:hover .tdr-section-card-img-wrap img {
  transform: scale(1.04);
}

.tdr-section-card-no-img {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e8e4de, #d4cfc8);
}

.tdr-section-card-cat {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c9a551;
  margin-bottom: 8px;
}

.tdr-section-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 10px;
}

.tdr-section-card-title a {
  color: #12151a;
  text-decoration: none;
  transition: color 0.2s;
}
.tdr-section-card-title a:hover { color: #c9a551; }

.tdr-section-card-exc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: #5a5a5a;
  margin: 0 0 12px;
}

.tdr-section-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #e8e3dc;
}

.tdr-section-card-author {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #8a8a8a;
  letter-spacing: 0.04em;
}

.tdr-section-card-read {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c9a551;
  text-decoration: none;
}
.tdr-section-card-read:hover { color: #12151a; }

/* ── Places strip ────────────────────────────────────────── */
.tdr-section-places {
  background: #f7f5f2;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 48px 0 56px;
}

.tdr-section-places-header {
  max-width: 1200px;
  margin: 0 auto 28px;
  padding: 0 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.tdr-section-places-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: #12151a;
  margin: 0;
}

.tdr-section-places-all {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c9a551;
  text-decoration: none;
}
.tdr-section-places-all:hover { color: #12151a; }

.tdr-section-places-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .tdr-section-places-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .tdr-section-places-grid { grid-template-columns: 1fr; }
}

.tdr-section-place-card {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  transition: box-shadow 0.2s, transform 0.2s;
}
.tdr-section-place-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

.tdr-section-place-img {
  width: 100%;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
}
.tdr-section-place-img--empty {
  background: linear-gradient(135deg, #e8e4de, #ccc8c0);
}

.tdr-section-place-body {
  padding: 14px 16px 16px;
}

.tdr-section-place-cat {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c9a551;
  margin-bottom: 4px;
}

.tdr-section-place-name {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 700;
  color: #12151a;
  line-height: 1.3;
  margin-bottom: 4px;
}

.tdr-section-place-addr {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #888;
  margin-bottom: 8px;
}

.tdr-section-place-status {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
}
.tdr-section-place-status--open  { background: #e8f5e9; color: #2e7d32; }
.tdr-section-place-status--closed { background: #f5e8e8; color: #c62828; }

/* ── Neighborhoods grid ──────────────────────────────────── */
.tdr-section-nbhd-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 24px 48px;
}

.tdr-section-nbhd-heading {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  color: #12151a;
  margin: 0 0 28px;
}

.tdr-section-nbhd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .tdr-section-nbhd-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 580px) {
  .tdr-section-nbhd-grid { grid-template-columns: repeat(2, 1fr); }
}

.tdr-section-nbhd-card {
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(160deg, #0d1520 0%, #1a2d40 55%, #12151a 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 3px;
  overflow: hidden;
  text-decoration: none;
  display: block;
}

.tdr-section-nbhd-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.30) 50%,
    rgba(0,0,0,0.88) 100%
  );
  transition: background 0.3s;
}
.tdr-section-nbhd-card:hover .tdr-section-nbhd-card-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.42) 45%,
    rgba(0,0,0,0.92) 100%
  );
}

/* No-photo fallback: the CSS gradient base is already dark navy, so pull
   the overlay back at the bottom so the blue-tinted gradient colour shows
   through instead of compositing to a flat, dead black rectangle.
   Text stays legible — white + text-shadow on dark navy clears WCAG AA. */
.tdr-section-nbhd-card--no-photo .tdr-section-nbhd-card-overlay {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.18) 50%,
    rgba(0,0,0,0.55) 100%
  );
}
.tdr-section-nbhd-card--no-photo:hover .tdr-section-nbhd-card-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.25) 45%,
    rgba(0,0,0,0.62) 100%
  );
}

.tdr-section-nbhd-card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px;
  z-index: 2;
}

.tdr-section-nbhd-card-name {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 3px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.80), 0 2px 12px rgba(0,0,0,0.50);
  overflow-wrap: break-word;
}

.tdr-section-nbhd-card-count {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: #fff;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.70);
}

/* ── Neighbourhood card — small-mobile (2-col, ≈155-180 px wide) ── */
/* At 375 px the 2-column grid gives each card roughly 155 px of width.
   Reduce body padding so the name has room to wrap, scale the font down
   one step, and deepen the bottom of the gradient so white text stays
   readable against brighter photos in the smaller dark zone. */
@media (max-width: 580px) {
  .tdr-section-nbhd-card-body {
    padding: 10px;
  }
  .tdr-section-nbhd-card-name {
    font-size: 13px;
    line-height: 1.25;
  }
  /* Strengthen the gradient — the dark band is shorter on a small card,
     so push the opacity higher to maintain WCAG AA contrast for white text */
  .tdr-section-nbhd-card-overlay {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,0.35) 45%,
      rgba(0,0,0,0.92) 100%
    );
  }
  .tdr-section-nbhd-card:hover .tdr-section-nbhd-card-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.05) 0%,
      rgba(0,0,0,0.45) 40%,
      rgba(0,0,0,0.95) 100%
    );
  }

  /* No-photo variant: the default uses lower opacity (0.18/0.55) because
     the navy gradient base is already dark. At ≈155 px wide the text zone
     shrinks so we strengthen the bottom stop to keep white text legible.
     Must be declared here (inside the media query, 2-class specificity) to
     override the base no-photo rule which wins on specificity alone. */
  .tdr-section-nbhd-card--no-photo .tdr-section-nbhd-card-overlay {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,0.25) 50%,
      rgba(0,0,0,0.72) 100%
    );
  }
  .tdr-section-nbhd-card--no-photo:hover .tdr-section-nbhd-card-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.05) 0%,
      rgba(0,0,0,0.32) 45%,
      rgba(0,0,0,0.78) 100%
    );
  }
}

/* ── Responsive: hero ────────────────────────────────────── */
@media (max-width: 768px) {
  .tdr-section-hero { height: 380px; }
  .tdr-section-hero-content { padding: 0 20px 32px; }
  .tdr-section-band { padding: 14px 20px; flex-direction: column; align-items: flex-start; gap: 4px; }
}