/* ============================================================
   ROAM COLORADO — EDITORIAL BLOCK SYSTEM
   A small, reusable set of panel variants shared by the Explore
   hub, Arts + Events, Neighborhoods and Moving Guides landings.

   The point of this file is that article cards and content modules
   share ONE visual system instead of each page inventing its own
   white rectangle. Compose a block from:

     .ed-panel            the surface (pick a colour variant)
     .ed-panel__art       regional line art, masked + tinted, crops off
     .ed-badge            scenic category badge on a rounded tile
     .ed-eyebrow          place / category label
     .ed-title            editorial headline
     .ed-excerpt          short standfirst
     .ed-meta             small metadata chips
     .ed-cta              link affordance

   Not every block uses every part. Line art is decorative only and
   is always behind the copy, always pointer-events:none.
   ============================================================ */

/* ---------- Surfaces ---------- */
.ed-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: inherit;
  background: var(--color-warm-white);
  border: 1px solid var(--color-border-dark);
  transition: transform var(--transition), box-shadow var(--transition);
}
a.ed-panel:hover { transform: translateY(-3px); box-shadow: var(--shadow-panel); }
a.ed-panel:focus-visible { outline: 3px solid var(--color-ochre); outline-offset: 3px; }

/* Colour variants — each sets its own art tint and text colours */
.ed-panel--forest {
  background: var(--color-dark);
  color: var(--color-text-light);
  border-color: transparent;
  --art-color: var(--color-cream);
  --art-opacity: 0.30;
  --badge-bg: rgba(241, 234, 223, 0.10);
  --rule: rgba(241, 234, 223, 0.28);
}
.ed-panel--deep {
  background: var(--color-dark-2);
  color: var(--color-text-light);
  border-color: transparent;
  --art-color: var(--color-cream);
  --art-opacity: 0.26;
  --badge-bg: rgba(241, 234, 223, 0.10);
  --rule: rgba(241, 234, 223, 0.24);
}
.ed-panel--terracotta {
  background: var(--color-accent);
  color: var(--color-cream);
  border-color: transparent;
  --art-color: #ffffff;
  --art-opacity: 0.34;
  --badge-bg: rgba(23, 37, 31, 0.22);
  --rule: rgba(255, 255, 255, 0.34);
}
.ed-panel--teal {
  background: var(--color-teal);
  color: var(--color-cream);
  border-color: transparent;
  --art-color: #ffffff;
  --art-opacity: 0.32;
  --badge-bg: rgba(23, 37, 31, 0.22);
  --rule: rgba(255, 255, 255, 0.32);
}
.ed-panel--sage {
  background: var(--color-sage);
  color: var(--color-dark-2);
  border-color: transparent;
  --art-color: var(--color-dark-2);
  --art-opacity: 0.22;
  --badge-bg: rgba(23, 37, 31, 0.18);
  --rule: rgba(23, 37, 31, 0.26);
}
.ed-panel--cream {
  background: var(--color-cream);
  color: var(--color-text);
  border-color: var(--color-border-dark);
  --art-color: var(--color-dark);
  --art-opacity: 0.18;
  --badge-bg: var(--color-dark);
  --rule: rgba(37, 54, 46, 0.20);
}
.ed-panel--paper {
  background: var(--color-warm-white);
  color: var(--color-text);
  --art-color: var(--color-dark);
  --art-opacity: 0.16;
  --badge-bg: var(--color-dark);
  --rule: rgba(37, 54, 46, 0.18);
}

/* ---------- Line-art layer ----------
   Painted via CSS mask so one SVG can be tinted to suit any panel.
   Set --art-src inline: style="--art-src:url(...)".
   Placement is deliberately off-centre so cards don't all match. */
.ed-panel__art {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  background-color: var(--art-color, currentColor);
  opacity: var(--art-opacity, 0.24);
  -webkit-mask-image: var(--art-src);
          mask-image: var(--art-src);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: cover;
          mask-size: cover;
}
/* Placements — pick one per card, vary them across a section */
.ed-panel__art--bottom { right: -6%;  bottom: -34%; width: 78%;  aspect-ratio: 16 / 5; }
.ed-panel__art--corner { right: -14%; bottom: -46%; width: 62%;  aspect-ratio: 16 / 5; }
.ed-panel__art--wide   { left: -8%;   bottom: -30%; width: 116%; aspect-ratio: 16 / 5; }
.ed-panel__art--top    { right: -10%; top: -30%;    width: 70%;  aspect-ratio: 16 / 5; }
.ed-panel__art--flip   { transform: scaleX(-1); }

/* ---------- Scenic badge ---------- */
.ed-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(52px, 6vw, 68px);
  aspect-ratio: 1;
  border-radius: 30%;
  background: var(--badge-bg, var(--color-dark));
}
.ed-badge img { width: 66%; height: 66%; }
.ed-badge--lg { width: clamp(64px, 8vw, 88px); }

/* ---------- Type ---------- */
.ed-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.92;
  margin: 0;
}
.ed-title {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.ed-title--lead { font-size: clamp(1.75rem, 3.2vw, 2.7rem); }
.ed-excerpt {
  font-size: 1rem;
  line-height: 1.62;
  margin: 0;
  opacity: 0.92;
  max-width: 52ch;
}
.ed-excerpt--tight { font-size: 0.95rem; }

/* ---------- Meta chips ---------- */
.ed-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ed-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.34rem 0.72rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule, var(--color-border-dark));
}

/* ---------- CTA ---------- */
.ed-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ed-cta svg { transition: transform var(--transition); }
a.ed-panel:hover .ed-cta svg { transform: translateX(4px); }
.ed-cta--pill {
  align-self: flex-start;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule, currentColor);
}

/* Head row: badge beside the eyebrow/title stack */
.ed-head { display: flex; align-items: center; gap: 0.9rem; }
.ed-head__text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }

/* ---------- Panels that carry real photography ----------
   Used where genuine imagery exists (neighbourhood guides). Where it
   doesn't, use a colour panel + line art instead of inventing stock. */
.ed-panel--media { padding: 0; gap: 0; }
.ed-panel--media .ed-panel__body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  flex: 1;
  min-width: 0;
}
.ed-panel__media { position: relative; overflow: hidden; background: var(--color-dark-2); }
.ed-panel__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
a.ed-panel:hover .ed-panel__media img { transform: scale(1.035); }

/* Side-by-side: image beside the copy */
.ed-panel--split { flex-direction: row; align-items: stretch; }
.ed-panel--split .ed-panel__media { flex: 0 0 42%; }

/* Stacked: image above the copy */
.ed-panel--stack { flex-direction: column; }
.ed-panel--stack .ed-panel__media { aspect-ratio: 16 / 7; }

@media (max-width: 900px) {
  .ed-panel--split { flex-direction: column; }
  .ed-panel--split .ed-panel__media { flex: none; aspect-ratio: 16 / 7; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-panel__media img { transition: none; }
  a.ed-panel:hover .ed-panel__media img { transform: none; }
}

/* ---------- Section intro ---------- */
.ed-section { padding-block: clamp(2.8rem, 6vw, 5rem); }
.ed-intro { max-width: 58ch; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.ed-intro .ed-eyebrow { color: var(--color-accent); margin-bottom: 0.6rem; }
.ed-intro h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.1;
  margin: 0 0 0.7rem;
}
.ed-intro p { font-size: 1.05rem; line-height: 1.65; margin: 0; color: var(--color-text); }

/* ---------- Layouts ----------
   A lead panel plus two stacked supporting panels. Deliberately
   asymmetric on desktop; collapses to a single readable column. */
.ed-grid { display: grid; gap: clamp(0.9rem, 1.6vw, 1.25rem); list-style: none; margin: 0; padding: 0; }
.ed-grid--lead-pair { grid-template-columns: 1.12fr 0.88fr; }
.ed-grid--lead-pair > :first-child { grid-row: span 2; }
.ed-grid--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* A full-width lead feature, then a supporting pair beneath it */
.ed-grid--feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-grid--feature-row > :first-child { grid-column: 1 / -1; }
.ed-grid--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-grid > li { display: flex; }
.ed-grid > li > .ed-panel { flex: 1; }

@media (max-width: 900px) {
  .ed-grid--lead-pair { grid-template-columns: 1fr; }
  .ed-grid--lead-pair > :first-child { grid-row: auto; }
  .ed-grid--thirds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ed-grid--thirds,
  .ed-grid--feature-row,
  .ed-grid--split { grid-template-columns: 1fr; }
  .ed-panel--media .ed-panel__body { padding: 1.35rem; }
  .ed-panel { padding: 1.35rem; border-radius: var(--radius-lg); }
  /* Keep decorative art from crowding short mobile cards */
  .ed-panel__art { opacity: calc(var(--art-opacity, 0.24) * 0.7); }
  .ed-title--lead { font-size: clamp(1.55rem, 7vw, 2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .ed-panel, .ed-cta svg { transition: none; }
  a.ed-panel:hover { transform: none; }
  a.ed-panel:hover .ed-cta svg { transform: none; }
}