/* Elk Run Homes — widget style variants
   Each widget's "Style variant" control adds <root>--style-N to its own section
   element, where <root> is the widget name minus the elkrun- prefix (see
   Elkrun_Base_Widget::sec_classes). Blocks are self-contained and only override
   what the variant actually changes, so style-1 renders exactly as before.

   Enqueued after sections.css / pages.css, so an equally specific override here
   wins on source order. */

/* ============================================================
   Compact — shared vertical trim for the sections built on .section
   ============================================================ */

.area-grid--style-3,
.challenge--style-3,
.check-list--style-3,
.contact--style-3,
.deep-dive--style-3,
.detail-cards--style-3,
.form-embed--style-3,
.guide-grid--style-3,
.library--style-3,
.phase-grid--style-3,
.plan--style-3,
.resource-callout--style-3,
.resource-grid--style-3,
.split-feature--style-3,
.step-story--style-3,
.svc-rows--style-3,
.svc--style-3 {
  padding-block: clamp(3rem, 5vw, 5.5rem);
}

/* ============================================================
   Area grid
   ============================================================ */

/* Even cards: drop the featured mosaic so every market reads at one weight. */
.area-grid--style-2 .area-card:nth-child(1) h3 { font-size: 1.4rem; }

@media (min-width: 1020px) {
  .area-grid--style-2 .area-grid { grid-auto-rows: 17rem; }
  .area-grid--style-2 .area-card:nth-child(1),
  .area-grid--style-2 .area-card:nth-child(2),
  .area-grid--style-2 .area-card:nth-child(5),
  .area-grid--style-2 .area-card:nth-child(6) { grid-column: span 1; grid-row: span 1; }
}

/* The desktop grid sets min-height:0 so cards cannot bleed across row tracks;
   only the stacked widths below it need the shorter floor. */
@media (max-width: 1019px) {
  .area-grid--style-3 .area-card { min-height: 15rem; }
}

@media (min-width: 1020px) {
  .area-grid--style-3 .area-grid { grid-auto-rows: 12.5rem; }
}

/* ============================================================
   Challenge
   ============================================================ */

.challenge--style-2 .challenge-grid {
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

.challenge--style-3 .challenge-list li { padding: .6rem 0; }

/* ============================================================
   Check list
   ============================================================ */

.check-list--style-2 .check-list { gap: .5rem; }

.check-list--style-2 .check-list li {
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--c-white);
}

.section-dark.check-list--style-2 .check-list li {
  border-color: var(--line-on-dark);
  background: none;
}

.check-list--style-3 .check-list li { padding-block: .55rem; }

/* ============================================================
   Closing CTA
   ============================================================ */

.closing-cta--style-2 { text-align: left; }
.closing-cta--style-2 .closing-copy { margin-inline: 0; }
.closing-cta--style-2 .closing-copy .eyebrow { justify-content: flex-start; }
.closing-cta--style-2 .btn-row { justify-content: flex-start; }
.closing-cta--style-2 .closing-mark { justify-content: flex-start; }
.closing-cta--style-2 .closing-mark::before { display: none; }

.closing-cta--style-3 { padding-block: clamp(3.5rem, 7vw, 6.5rem); }

/* ============================================================
   Contact
   ============================================================ */

@media (min-width: 1020px) {
  .contact--style-2 .contact-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .contact--style-2 .contact-layout > .form-embed { order: -1; }
}

.contact--style-3 .contact-details { margin-top: var(--space-l); }

/* ============================================================
   Deep dive
   ============================================================ */

.deep-dive--style-2 .deep-dive {
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

.deep-dive--style-3 .deep-dive { gap: var(--space-l); }

/* ============================================================
   Detail cards
   ============================================================ */

/* Flat cards: keep the grid, drop the raised card chrome for a ruled list. */
.detail-cards--style-2 .detail-card {
  padding: var(--space-l) 0 0;
  border: 0;
  border-top: 2px solid var(--c-brass);
  background: none;
}

.detail-cards--style-2 .detail-card:hover {
  transform: none;
  box-shadow: none;
}

.detail-cards--style-3 .detail-card { padding: clamp(1.15rem, 2vw, 1.6rem); }

/* ============================================================
   Footer
   ============================================================ */

.footer--style-2 .footer-top {
  gap: var(--space-l);
  padding-block: var(--space-xl) var(--space-l);
}

.footer--style-2 .footer-topo { display: none; }
.footer--style-2 .footer-contact { margin-top: var(--space-m); }

/* ============================================================
   Form embed
   ============================================================ */

.form-embed--style-2 .section-heading-split { display: none; }

/* ============================================================
   Guide grid
   ============================================================ */

/* Images right: mirror the stack and its two overhangs into the left gutter. */
@media (min-width: 980px) {
  .guide-grid--style-2 .guide-stack { order: 2; }
  .guide-grid--style-2 .guide-shot-sub { right: auto; left: -2.5rem; }
  .guide-grid--style-2 .guide-tag { left: auto; right: -1rem; }
}

.guide-grid--style-3 .guide-note { margin-top: var(--space-m); padding: var(--space-m); }

/* ============================================================
   Guide layout
   ============================================================ */

@media (min-width: 1060px) {
  .guide-layout--style-2 .guide-layout { grid-template-columns: 20rem minmax(0, 1fr); }
  .guide-layout--style-2 .guide-aside { order: -1; }
}

.guide-layout--style-3 .guide-layout { grid-template-columns: 1fr; }
.guide-layout--style-3 .guide-aside { position: static; }

/* ============================================================
   Header
   ============================================================ */

/* Solid: the blurred bar is painted from the top instead of fading in on scroll. */
.header--style-2 .header-bg { opacity: 1; }

/* ============================================================
   Hero
   ============================================================ */

.hero--style-2 {
  justify-content: center;
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
}

.hero--style-2 .hero-copy { max-width: 52rem; margin-inline: auto; }
.hero--style-2 .hero-copy .eyebrow { justify-content: center; }
.hero--style-2 .btn-row { justify-content: center; }

.hero--style-3 { min-height: min(70svh, 680px); }

/* ============================================================
   Interlude
   ============================================================ */

.interlude--style-2 { height: clamp(24rem, 58vw, 44rem); }
.interlude--style-3 { height: clamp(12rem, 26vw, 19rem); }

/* ============================================================
   Library
   ============================================================ */

.library--style-2 .library { gap: var(--space-m); }

.library--style-2 .library-row {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--c-white);
}

.section-dark.library--style-2 .library-row {
  border-color: var(--line-on-dark);
  background: none;
}

.library--style-3 .library-row { padding-block: clamp(1.35rem, 2.4vw, 2rem); }

/* ============================================================
   Note band
   ============================================================ */

.note-band--style-2 .note-band-inner {
  grid-template-columns: 1fr;
  justify-items: center;
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

@media (min-width: 880px) {
  /* The base pins the label to column one and everything else to column two. */
  .note-band--style-2 .note-band-inner > strong,
  .note-band--style-2 .note-band-inner > :not(strong) { grid-column: 1; grid-row: auto; }
}

.note-band--style-3 .note-band-inner {
  padding: var(--space-l);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius-m);
}

/* ============================================================
   Page hero
   ============================================================ */

.page-hero--style-2 { text-align: center; }
.page-hero--style-2 .page-hero-copy { max-width: 52rem; margin-inline: auto; }
.page-hero--style-2 .crumbs { justify-content: center; }
.page-hero--style-2 .page-hero-copy .eyebrow { justify-content: center; }
.page-hero--style-2 .btn-row { justify-content: center; }

.page-hero--style-3 {
  min-height: min(56svh, 520px);
  padding-top: calc(var(--header-h) + 2.5rem);
}

/* ============================================================
   Phase grid
   ============================================================ */

/* Separated cards: trade the 1px hairline mesh for real gaps and card borders. */
.phase-grid--style-2 .phase-grid {
  gap: var(--space-s);
  border: 0;
  background: none;
}

.phase-grid--style-2 .phase {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}

.section-dark.phase-grid--style-2 .phase { border-color: var(--line-on-dark); }

.phase-grid--style-3 .phase { padding: var(--space-m) var(--space-s) var(--space-l); }

/* ============================================================
   Plan
   ============================================================ */

@media (min-width: 980px) {
  .plan--style-2 .plan-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
  .plan--style-2 .plan-sticky { order: 2; }
}

.plan--style-3 .plan-grid { margin-top: var(--space-l); }
.plan--style-3 .plan-step { padding-block: var(--space-m); }

/* ============================================================
   Resource callout
   ============================================================ */

.resource-callout--style-2 .section-heading-split {
  grid-template-columns: 1fr;
  align-items: start;
}

.resource-callout--style-3 .resource-callout { gap: var(--space-m); }

/* ============================================================
   Resource grid
   ============================================================ */

/* Borderless: the media keeps its rounding, the card shell goes away. */
.resource-grid--style-2 .resource-card {
  border-color: transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.resource-grid--style-2 .resource-card:hover {
  transform: none;
  box-shadow: none;
}

.resource-grid--style-2 .resource-media { border-radius: var(--radius-m); }
.resource-grid--style-2 .resource-body { padding-inline: 0; }

.resource-grid--style-3 .resource-body { padding: var(--space-m); }

/* ============================================================
   Split feature
   ============================================================ */

/* Wide copy: the copy column is the second track normally and the first when
   the widget's Flip switch is on, so both orders get their own tracks. */
@media (min-width: 960px) {
  .split-feature--style-2 .split-feature { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
  .split-feature--style-2 .split-feature-flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
}

.split-feature--style-3 .split-feature { gap: var(--space-l); }

/* ============================================================
   Stat band
   ============================================================ */

.stat-band--style-2 .stat-grid {
  gap: var(--space-s);
  background: none;
}

.stat-band--style-2 .stat { border: 1px solid var(--line-on-dark); }

.stat-band--style-3 .stat { padding: clamp(1.1rem, 2vw, 1.7rem) clamp(.9rem, 1.8vw, 1.4rem); }
.stat-band--style-3 .proof-row { padding-block: clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 2.2vw, 1.8rem); }

/* ============================================================
   Step story
   ============================================================ */

.step-story--style-2 .step-story {
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.step-story--style-2 .step-story-head { position: static; }

.step-story--style-3 .step-list li { padding-block: var(--space-m); }

/* ============================================================
   Story
   ============================================================ */

.story--style-2 .story-grid {
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

.story--style-2 .story-grid > :first-child { position: static; }

@media (min-width: 900px) {
  .story--style-3 .story-grid { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); }
}

/* ============================================================
   Service rows
   ============================================================ */

.svc-rows--style-2 .svc-row { border-top: 0; }
.svc-rows--style-2 .svc-row:last-child { border-bottom: 0; }

.svc-rows--style-3 .svc-row { padding-block: clamp(1.75rem, 3vw, 2.75rem); }

/* ============================================================
   Services accordion
   ============================================================ */

@media (min-width: 980px) {
  .svc--style-2 .svc { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
  .svc--style-2 .svc-media { order: 1; }
  .svc--style-2 .svc-list { order: 2; }
}

.svc--style-3 .svc { margin-top: var(--space-l); }
.svc--style-3 .svc-trigger { padding-block: .8rem; }

/* ============================================================
   Fact band
   ============================================================ */

/* Light bordered: same grid, flipped onto the cream page so two fact bands can
   sit near each other without reading as one long dark slab. */
.fact-band--style-2 { background: var(--c-cream); color: var(--text-body); }
.fact-band--style-2 .fact-grid { background: var(--line); border-block-color: var(--line); }
.fact-band--style-2 .fact { background: var(--c-cream); }
.fact-band--style-2 .fact:hover { background: var(--c-bone); }
.fact-band--style-2 .fact .val { color: var(--c-forest); }
.fact-band--style-2 .fact b { color: var(--c-ink); }
.fact-band--style-2 .fact span:not(.val),
.fact-band--style-2 .fact-note { color: var(--c-moss); }
.fact-band--style-2 .fact-head > :is(h2, h3, h4, div) { color: var(--c-ink); }
/* The widget always emits .eyebrow-light; brass only clears 3.2:1 on cream, so
   fall back to the bark every other light section uses. */
.fact-band--style-2 .eyebrow-light { color: var(--c-bark); }

.fact-band--style-3 { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.fact-band--style-3 .fact { gap: .15rem; padding: clamp(.9rem, 1.8vw, 1.35rem) clamp(.85rem, 1.8vw, 1.4rem); }
.fact-band--style-3 .fact .val { font-size: clamp(1.2rem, 2.2vw, 1.65rem); }
.fact-band--style-3 .fact span:not(.val) { display: none; }

/* ============================================================
   Show home gallery
   ============================================================ */

/* Even grid: ignore the per-photo mosaic sizes so every room reads at one weight. */
.showhome-gallery--style-2 .shot--wide,
.showhome-gallery--style-2 .shot--tall,
.showhome-gallery--style-2 .shot--full { grid-column: span 1; }
.showhome-gallery--style-2 .shot img { aspect-ratio: 3 / 2; }

.showhome-gallery--style-3 { padding-block: clamp(3rem, 5vw, 5.5rem); }

@media (min-width: 1020px) {
  .showhome-gallery--style-3 .showhome-gallery { grid-template-columns: repeat(2, 1fr); }
  .showhome-gallery--style-3 .shot img { aspect-ratio: 16 / 10; }
}

/* ============================================================
   Show home finishes
   ============================================================ */

.showhome-finishes--style-2 .finish-groups { grid-template-columns: 1fr; max-width: 60rem; }

.showhome-finishes--style-3 .finish-group {
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--c-white);
  box-shadow: var(--shadow-card);
}
.showhome-finishes--style-3 .finish-group > h3 { border-bottom-color: var(--line); }
.showhome-finishes--style-3 .finish:last-child { border-bottom: 0; }

/* ============================================================
   3D tour embed
   ============================================================ */

.tour-embed--style-2 .tour-frame { max-width: 65rem; margin-inline: auto; }