/* ============================================================
   TERRA SECUNDUS — SECTIONAL BAND STYLES (custom-rows.css)
   Safe + Scoped for T4 (no global 100vw, no layout side-effects)
   NOTE: This file only normalizes & numbers headers. No selectors
         or declarations were altered from the user's source.
   ============================================================ */

/* ============================================================
   1.0 BAND THEMES (SAFE, UTILITY)
   ============================================================ */
.band-dark    { background-color: #1e1e1e; color: #f9f9f9; }
.band-light   { background-color: #ffffff; color: #222; }
.band-primary { background-color: var(--primary-color); color: #fff; }

/* ============================================================
   2.0 BAND KERNEL — CENTERLINE + SPACING (SCOPED)
   Only applies inside .t4-section.ts_band wrappers
   ============================================================ */
.t4-section.ts_band{
  --ts-content-max: 1280px; /* set your site-wide centerline here */
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
@supports not (overflow-x: clip){ .t4-section.ts_band{ overflow-x: hidden; } }

/* 2.1 Unlock T4 gutters just for band sections */
.t4-section.ts_band .t4-section-inner.container,
.t4-section.ts_band .t4-section-inner.container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2.2 Flatten inner wrappers so painter/backgrounds show cleanly */
.t4-section.ts_band .t4-section-inner,
.t4-section.ts_band .t4-col,
.t4-section.ts_band .t4-mod-wrap,
.t4-section.ts_band .section-inner,
.t4-section.ts_band .section-ct{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.t4-section.ts_band .t4-mod-wrap[class*="top-"]{ padding-top: 0 !important; }
.t4-section.ts_band .t4-mod-wrap[class*="bottom-"]{ padding-bottom: 0 !important; }

/* 2.3 Inner content box (shared centerline) */
.t4-section.ts_band .container-responsive,
.t4-section.ts_band .responsive-section{
  max-width: var(--ts-content-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 44px) !important;
  box-sizing: border-box;
}

/* 2.4 DO NOT widen content boxes anymore */
.t4-section.ts_band .feature-band.fullwidth,
.t4-section.ts_band .epigraph-band.fullwidth{
  width: auto; max-width: none; margin: 0; padding: 0 !important;
  position: relative; display: block; background: transparent;
}

/* 2.5 Local element margin safety (SCOPED) */
.t4-section.ts_band .feature-band,
.t4-section.ts_band .epigraph-band{ margin: 0; }

/* ============================================================
   3.0 SECTION HEADERS (SCOPED)
   ============================================================ */
.t4-section.ts_band .feature-header{
  text-align: center;
  margin: 0;
  padding: 0;
}
.t4-section.ts_band .feature-header h2{
  font-size: 2.25rem;
  margin: 0;
  padding: 20px 0;
  color: var(--primary-color);
}

/* ============================================================
   4.0 FEATURE GRID (SCOPED)
   ============================================================ */
.t4-section.ts_band .feature-grid{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 40px);
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}
.t4-section.ts_band .feature-grid-mirror{ flex-direction: row-reverse; }

/* ============================================================
   5.0 GRID ITEMS (SCOPED)
   ============================================================ */
.t4-section.ts_band .feature-summary,
.t4-section.ts_band .feature-image{
  flex: 1 1 min(48%, 560px);
  margin: 0;
  padding: 0;
}
.t4-section.ts_band .feature-summary h4,
.t4-section.ts_band .feature-summary p,
.t4-section.ts_band .feature-summary h3{
  margin: 0;
  padding: 0;
  font-size: 1.2rem;
  color: #444;
}
.t4-section.ts_band .feature-image img,
.t4-section.ts_band .feature-image.small img{
  max-width: 100%;
  height: auto;
  display: block;
  border: 2px solid #ccc;
  border-radius: 6px;
  margin: 0 auto;
}

/* ============================================================
   6.0 PARCHMENT BACKGROUND (CONTENT-LEVEL; PAINTER-FRIENDLY)
   ============================================================ */
.t4-section.ts_band .band-parchment{
  background-image: url('/images/backgrounds/parchment-texture.jpg');
  background-position: center;
  background-repeat: repeat;
  background-size: auto;
  color: #2a2a2a;
}
/* ============================================================
   7.0 THEMED BANDS (CONTENT-LEVEL; NO LAYOUT WIDENING)
   ============================================================ */
.t4-section.ts_band .feature-band.band-bronze{
  background: linear-gradient(to bottom right, #d6a45d, #b06c00);
  color: #fff;
}
.t4-section.ts_band .band-bronze .feature-header h2,
.t4-section.ts_band .band-bronze .feature-summary h4{ color: #fff; }
.t4-section.ts_band .band-bronze .btn-accent{
  background-color: #fff;
  color: var(--primary-color);
  border: none;
}
.t4-section.ts_band .band-bronze .btn-accent:hover{
  background-color: #f1f1f1;
  color: var(--accent-color);
}

.t4-section.ts_band .feature-band.band-forest{
  background: linear-gradient(to bottom, #2d4d32, #0d2e1c);
  color: #e3e3e3;
}
.t4-section.ts_band .band-forest .feature-header h2,
.t4-section.ts_band .band-forest .feature-summary h3{ color: #fff; }

.t4-section.ts_band .feature-band.band-mist{
  background: linear-gradient(to bottom, #eef1f5, #d6dbe1);
  color: #1a1a1a;
}
.t4-section.ts_band .band-mist .feature-header h2,
.t4-section.ts_band .band-mist .feature-summary p{ color: #1a1a1a; }

.t4-section.ts_band .feature-band.band-nightfall{
  background: linear-gradient(to bottom, #0f1317, #1a1f26);
  color: #eaeaea;
}
.t4-section.ts_band .band-nightfall h2,
.t4-section.ts_band .band-nightfall h4{ color: #fff; }

/* ============================================================
   8.0 EPIGRAPH BAND (SCOPED, NO 100VW)
   ============================================================ */
.t4-section.ts_band .epigraph-band{
  background-color: #f7f1e4;
  color: #2a2a2a;
  font-family: 'Georgia', serif;
  text-align: center;
  padding: 60px 20px;
  font-size: 1.2rem;
  line-height: 1.8;
  border-top: 2px solid #d4c5a2;
  border-bottom: 2px solid #d4c5a2;
  font-style: italic;
}

/* ============================================================
   9.0 OPTIONAL PADDING MODIFIERS (SCOPED)
   ============================================================ */
.t4-section.ts_band .section-narrow { padding: 40px 0; }
.t4-section.ts_band .section-wide   { padding: 120px 0; }
.t4-section.ts_band .section-no-padding,
.t4-section.ts_band .no-padding     { padding: 0 !important; }

.epigraph-band em {
  font-style: italic;
  color: #6b4e21;
}

/* ============================================================
   10.0 BUTTONS
   ============================================================ */
.btn-secondary, .btn-primary, .btn-accent {
  padding: 10px 24px;
  text-decoration: none;
  border-radius: 4px;
  display: inline-block;
}
.btn-secondary {
  background-color: #444; color: #fff;
}
.btn-secondary:hover {
  background-color: #222;
}
.btn-primary {
  background-color: #336699; color: #fff;
}
.btn-primary:hover {
  background-color: #224466;
}

/* ============================================================
   11.0 ANIMATIONS
   ============================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease forwards;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   12.0 RESPONSIVE ADJUSTMENT
   ============================================================ */
@media (max-width: 768px) {
  .t4-section.ts_band .feature-grid { flex-direction: column; }
  .t4-section.ts_band .feature-summary,
  .t4-section.ts_band .feature-image {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* first band after header: zero top padding on centerline wrappers */
#t4-header + .t4-content .t4-content-inner > .t4-section:first-child
  :is(.container-responsive, .responsive-section) {
  padding-top: 0 !important;
}