/* House of the Month — layered on top of csp-seasonal.css, which supplies
   the tokens, nav, buttons, form, and footer. Only page-specific pieces here. */

/* ─── HOW IT WORKS / CRITERIA ─── */
.criteria-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.criteria-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--gold-mid);border-radius:14px;padding:26px;box-shadow:var(--shadow-sm)}
.criteria-icon{font-size:28px;line-height:1;margin-bottom:12px;display:block}
.criteria-card h3{font-family:'Inter',sans-serif;font-weight:800;font-size:16.5px;letter-spacing:0;color:var(--g-dark);margin-bottom:9px;line-height:1.35}
.criteria-card p{font-size:14.5px;color:var(--muted);line-height:1.7}

/* ─── FEATURED MONTH ─── */
.feature-section{padding:78px 0;background:linear-gradient(135deg,var(--g-deep) 0%,var(--g-darkest) 100%)}
.feature-shell{background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 100%);border:2px solid rgba(245,200,66,.38);border-radius:22px;padding:34px;box-shadow:0 20px 60px rgba(0,0,0,.34)}
@media(max-width:640px){.feature-shell{padding:22px 16px;border-radius:16px}}
.feature-ribbon{display:inline-block;background:var(--gold-grad);color:var(--g-darkest);font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:7px 16px;border-radius:100px;margin-bottom:16px;box-shadow:var(--gold-glow)}
.feature-month{font-family:'Bebas Neue',sans-serif;font-size:clamp(34px,4.6vw,54px);color:#fff;line-height:1.02;margin-bottom:6px}
.feature-where{color:var(--gold-bright);font-size:17px;font-weight:700;margin-bottom:22px}
/* minmax(0,1fr) rather than 1fr: grid items default to min-width:auto and
   would otherwise refuse to shrink below their content's min-content width,
   pushing the page into horizontal overflow on narrow screens. */
.feature-body{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.feature-body>*{min-width:0}
.feature-story p{color:rgba(255,255,255,.85);font-size:16px;line-height:1.75;margin-bottom:14px}
.feature-story p:last-child{margin-bottom:0}
.feature-did{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;margin:20px 0 4px}
.feature-did li{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.92);font-size:14.5px;font-weight:600}
.feature-did .tick{color:var(--gold-bright);font-weight:800;flex-shrink:0}

/* ─── VIDEO EMBED (responsive, no JS) ─── */
.vid-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.4);border:1px solid rgba(245,200,66,.25)}
.vid-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vid-caption{font-size:13px;color:rgba(255,255,255,.6);margin-top:10px;text-align:center;line-height:1.5}

/* ─── BEFORE / AFTER ─── */
.ba-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.ba-grid>*{min-width:0}
@media(max-width:600px){.ba-grid{grid-template-columns:minmax(0,1fr)}}
.ba-item{position:relative;border-radius:14px;overflow:hidden;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.12)}
.ba-item img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.ba-label{position:absolute;top:12px;left:12px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:6px 13px;border-radius:100px;backdrop-filter:blur(6px)}
.ba-label.is-before{background:rgba(10,10,10,.72);color:#fff;border:1px solid rgba(255,255,255,.25)}
.ba-label.is-after{background:var(--gold-grad);color:var(--g-darkest);border:1px solid rgba(139,105,20,.4)}

/* ─── HONEST EMPTY STATE (before real media is added) ─── */
.media-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:16/9;border-radius:14px;padding:28px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 12px,transparent 12px 24px),rgba(0,0,0,.28);
  border:2px dashed rgba(245,200,66,.4)
}
.media-placeholder.is-photo{aspect-ratio:4/3}
.mp-icon{font-size:34px;line-height:1;margin-bottom:12px}
.mp-title{font-family:'Bebas Neue',sans-serif;font-size:23px;letter-spacing:.04em;color:var(--gold-bright);margin-bottom:6px}
.mp-text{font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.6;max-width:min(340px,100%)}
@media(max-width:600px){
  .media-placeholder{padding:20px 14px}
  .mp-icon{font-size:28px}
  .mp-title{font-size:20px}
}

/* ─── HOMEOWNER QUOTE ─── */
.hotm-quote{border-left:4px solid var(--gold-mid);background:rgba(245,200,66,.08);border-radius:0 12px 12px 0;padding:20px 24px;margin-top:22px}
.hotm-quote blockquote{color:#fff;font-size:17px;line-height:1.7;font-style:italic;margin-bottom:10px}
.hotm-quote cite{color:var(--gold-bright);font-size:14px;font-weight:700;font-style:normal}

/* ─── ARCHIVE GRID ─── */
.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.archive-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.archive-grid{grid-template-columns:1fr}}
.hotm-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-md);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.hotm-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.hotm-card-media{position:relative;background:var(--off);aspect-ratio:4/3;overflow:hidden}
.hotm-card-media img{display:block;width:100%;height:100%;object-fit:cover}
.hotm-card-badge{position:absolute;top:12px;left:12px;background:var(--g-dark);color:var(--gold-bright);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:100px}
.hotm-card-body{padding:22px;flex:1;display:flex;flex-direction:column}
.hotm-card-body h3{font-family:'Bebas Neue',sans-serif;font-size:25px;letter-spacing:.03em;color:var(--g-dark);margin-bottom:2px}
.hotm-card-where{font-size:13px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}
.hotm-card-body p{font-size:14.5px;color:var(--muted);line-height:1.7}

/* Archive empty state */
.archive-empty{
  grid-column:1/-1;text-align:center;padding:54px 28px;border-radius:16px;
  background:linear-gradient(180deg,#fff 0%,var(--cream) 100%);
  border:2px dashed var(--line)
}
.archive-empty .mp-icon{margin-bottom:14px}
.archive-empty h3{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:.03em;color:var(--g-dark);margin-bottom:8px}
.archive-empty p{color:var(--muted);font-size:15.5px;line-height:1.7;max-width:520px;margin:0 auto}

/* ─── NOMINATE STRIP ─── */
.nominate-note{background:var(--amber-bg);border-left:4px solid var(--gold-mid);border-radius:0 10px 10px 0;padding:15px 19px;margin-top:20px}
.nominate-note p{font-size:13.5px;color:#6b4d16;line-height:1.65;margin:0}