/* ==========================================================================
   Atlanta Music Pros — shared module styles
   Reusable blocks layered on top of each page's existing design tokens
   (--black/--deep/--card/--border/--magenta/--cyan/--purple/--gold/--white/
   --muted and the three font families). Nothing here restyles existing
   components; it only adds the newer modules so they stay consistent
   everywhere instead of being re-declared per page.
   ========================================================================== */

/* --- Brand positioning line ------------------------------------------------ */
.brand-line {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold, #f0b429);
  margin: 14px 0 20px;
}

/* --- Hero / section action rows -------------------------------------------- */
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.btn-ghost-hero {
  display: inline-block;
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 1px solid var(--border, rgba(255, 255, 255, .12));
  border-radius: 2px;
  color: var(--white, #f5f3ff);
  text-decoration: none;
  transition: border-color .2s, color .2s, transform .2s;
}
.btn-ghost-hero:hover { border-color: var(--magenta, #00c8ff); color: var(--magenta, #00c8ff); transform: translateY(-2px); }

/* --- Primary-page pointer (sends wedding-DJ intent to the money page) ------ */
.amp-pointer {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(0, 200, 255, .09), rgba(139, 47, 201, .09));
  border: 1px solid var(--border, rgba(255, 255, 255, .12));
  border-left: 3px solid var(--magenta, #00c8ff);
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.amp-pointer-text { max-width: 720px; }
.amp-pointer-text strong {
  display: block;
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 26px;
  letter-spacing: 1px;
  color: var(--white, #f5f3ff);
  margin-bottom: 6px;
}
.amp-pointer-text p { font-size: 15px; line-height: 1.7; color: var(--muted, #8a87a0); font-weight: 300; }
.amp-pointer-wrap { padding: 0 48px 40px; }
@media (max-width: 900px) { .amp-pointer-wrap { padding: 0 24px 32px; } .amp-pointer { padding: 24px; } }

/* --- DJ + live combination grid -------------------------------------------- */
.amp-combo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.amp-combo {
  background: var(--card, #111118);
  border: 1px solid var(--border, rgba(255, 255, 255, .07));
  border-radius: 4px;
  padding: 26px 24px;
  transition: border-color .2s, transform .2s;
}
.amp-combo:hover { border-color: var(--magenta, #00c8ff); transform: translateY(-3px); }
.amp-combo-eq {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--gold, #f0b429);
  margin-bottom: 12px;
}
.amp-combo-name {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 24px;
  letter-spacing: 1px;
  line-height: 1.1;
  color: var(--white, #f5f3ff);
  margin-bottom: 10px;
}
.amp-combo p { font-size: 14px; line-height: 1.75; color: var(--muted, #8a87a0); font-weight: 300; }

/* --- Pricing clarity band -------------------------------------------------- */
.amp-price-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.amp-price-card {
  background: var(--card, #111118);
  border: 1px solid var(--border, rgba(255, 255, 255, .07));
  border-radius: 4px;
  padding: 28px 26px;
}
.amp-price-card.is-wedding { border-color: rgba(0, 200, 255, .35); }
.amp-price-kicker {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted, #8a87a0);
  margin-bottom: 10px;
}
.amp-price-amount {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 44px;
  line-height: 1;
  letter-spacing: 1px;
  background: linear-gradient(90deg, var(--magenta, #00c8ff), var(--cyan, #e040fb));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.amp-price-amount small { font-size: 14px; -webkit-text-fill-color: var(--muted, #8a87a0); letter-spacing: 1px; }
.amp-price-card p { font-size: 14px; line-height: 1.75; color: var(--muted, #8a87a0); font-weight: 300; margin-top: 12px; }

/* --- Local expertise module (city pages) ----------------------------------- */
.amp-local-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.amp-local-item {
  background: var(--card, #111118);
  border: 1px solid var(--border, rgba(255, 255, 255, .07));
  border-radius: 4px;
  padding: 26px 24px;
}
.amp-local-item h3 {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--white, #f5f3ff);
  margin-bottom: 12px;
}
.amp-local-item p { font-size: 14px; line-height: 1.75; color: var(--muted, #8a87a0); font-weight: 300; }
.amp-local-item ul { margin: 12px 0 0 18px; }
.amp-local-item li { font-size: 14px; line-height: 1.8; color: var(--muted, #8a87a0); font-weight: 300; }

/* --- Empty / "coming soon" states ----------------------------------------- */
.amp-empty {
  border: 1px dashed var(--border, rgba(255, 255, 255, .14));
  border-radius: 4px;
  padding: 34px 28px;
  text-align: center;
  background: rgba(255, 255, 255, .015);
}
.amp-empty h3 {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--white, #f5f3ff);
  margin-bottom: 10px;
}
.amp-empty p { font-size: 14px; line-height: 1.75; color: var(--muted, #8a87a0); font-weight: 300; max-width: 620px; margin: 0 auto; }
.amp-empty a { color: var(--magenta, #00c8ff); }

/* --- Directory (recommended vendors) -------------------------------------- */
.amp-dir-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 44px; }
.amp-dir-nav a {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 16px;
  border: 1px solid var(--border, rgba(255, 255, 255, .1));
  border-radius: 2px;
  color: var(--muted, #8a87a0);
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.amp-dir-nav a:hover { border-color: var(--magenta, #00c8ff); color: var(--white, #f5f3ff); }
.amp-dir-cat { margin-bottom: 56px; scroll-margin-top: 110px; }
.amp-dir-cat-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--border, rgba(255, 255, 255, .08)); padding-bottom: 14px; margin-bottom: 22px; }
.amp-dir-cat-head h2 {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 30px;
  letter-spacing: 1.5px;
  color: var(--white, #f5f3ff);
}
.amp-dir-cat-head span { font-family: var(--font-mono, 'Space Mono', monospace); font-size: 11px; letter-spacing: 1px; color: var(--muted, #8a87a0); }
.amp-dir-blurb { font-size: 15px; line-height: 1.8; color: var(--muted, #8a87a0); font-weight: 300; max-width: 780px; }
.amp-dir-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; }
.amp-card {
  background: var(--card, #111118);
  border: 1px solid var(--border, rgba(255, 255, 255, .07));
  border-radius: 4px;
  padding: 24px;
  transition: border-color .2s, transform .2s;
}
.amp-card:hover { border-color: var(--magenta, #00c8ff); transform: translateY(-3px); }
.amp-card h3 { font-family: var(--font-display, 'Bebas Neue', sans-serif); font-size: 22px; letter-spacing: 1px; color: var(--white, #f5f3ff); margin-bottom: 8px; }
.amp-card .amp-card-meta { font-family: var(--font-mono, 'Space Mono', monospace); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold, #f0b429); margin-bottom: 10px; }
.amp-card p { font-size: 14px; line-height: 1.75; color: var(--muted, #8a87a0); font-weight: 300; }
.amp-card a.amp-card-link { display: inline-block; margin-top: 14px; font-family: var(--font-mono, 'Space Mono', monospace); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--magenta, #00c8ff); text-decoration: none; }
.amp-card a.amp-card-link:hover { text-decoration: underline; }

/* --- Spec list (venue technical detail) ----------------------------------- */
.amp-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 32px; margin-top: 24px; }
.amp-spec-row { display: grid; grid-template-columns: 190px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border, rgba(255, 255, 255, .06)); }
.amp-spec-row dt { font-family: var(--font-mono, 'Space Mono', monospace); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted, #8a87a0); padding-top: 3px; }
.amp-spec-row dd { font-size: 14px; line-height: 1.7; color: var(--white, #f5f3ff); font-weight: 300; }
@media (max-width: 640px) { .amp-spec-row { grid-template-columns: 1fr; gap: 4px; } }

/* --- Gallery strip --------------------------------------------------------- */
.amp-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 24px; }
.amp-gallery img { width: 100%; height: 220px; object-fit: cover; display: block; border: 1px solid var(--border, rgba(255, 255, 255, .07)); border-radius: 4px; }

/* --- Review block --------------------------------------------------------- */
.amp-review {
  background: var(--card, #111118);
  border: 1px solid var(--border, rgba(255, 255, 255, .07));
  border-left: 3px solid var(--gold, #f0b429);
  border-radius: 4px;
  padding: 26px 28px;
  margin-top: 24px;
}
.amp-review-stars { color: var(--gold, #f0b429); letter-spacing: 3px; margin-bottom: 12px; }
.amp-review p { font-size: 15px; line-height: 1.85; color: var(--white, #f5f3ff); font-weight: 300; font-style: italic; }
.amp-review cite { display: block; margin-top: 14px; font-family: var(--font-mono, 'Space Mono', monospace); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted, #8a87a0); font-style: normal; }

/* --- Blog category sections ---------------------------------------------- */
.amp-blog-cat-head { max-width: 1240px; margin: 0 auto; padding: 0 48px; }
.amp-blog-cat-head h2 {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: clamp(30px, 4vw, 42px);
  letter-spacing: 1.5px;
  color: var(--white, #f5f3ff);
  margin-bottom: 10px;
}
.amp-blog-cat-head p { font-size: 15px; line-height: 1.8; color: var(--muted, #8a87a0); font-weight: 300; max-width: 720px; }
.amp-blog-cat-head .section-label { margin-bottom: 10px; }
@media (max-width: 900px) { .amp-blog-cat-head { padding: 0 24px; } }

/* --- Inline text links -----------------------------------------------------
   Several pages scope .inline-link to .content-card only; this gives the same
   treatment to inline links in body copy outside a card. Page-level rules are
   more specific and still win where they exist. */
a.inline-link { color: var(--magenta, #00c8ff); text-decoration: none; }
a.inline-link:hover { text-decoration: underline; }

/* --- Narrow-phone safety ---------------------------------------------------
   Every module grid above uses auto-fit + minmax(), which collapses cleanly
   down to about 360px. On the narrowest phones (320-400px) a 280-300px track
   plus section padding can still exceed the viewport, so force one column and
   let the cards breathe instead of producing a horizontal scrollbar. */
@media (max-width: 420px) {
  .amp-combo-grid,
  .amp-price-band,
  .amp-local-grid,
  .amp-dir-grid,
  .amp-spec,
  .amp-gallery {
    grid-template-columns: 1fr;
  }
  .amp-combo,
  .amp-price-card,
  .amp-local-item,
  .amp-card { padding: 20px; }
  .amp-review { padding: 22px 20px; }
  .amp-gallery img { height: 200px; }
}

/* --- Video embed ----------------------------------------------------------
   A responsive 16:9 frame for a standard YouTube embed. The iframe is marked
   loading="lazy" so the player is only fetched as it nears the viewport.
   Aspect ratio is held with padding rather than aspect-ratio for older Safari. */
/* Default cap matches the widest content elsewhere on the site (.page-image img). */
.amp-video { max-width: 1400px; margin: 36px auto 0; }
/* Full-bleed variant: for sections where the video is the focal point and
   should use the whole section width rather than the text column. The second
   declaration also keeps a 16:9 frame from growing taller than ~90vh, so the
   player never overflows the window on short, wide displays; browsers without
   min() support simply keep the flat 1760px cap. */
.amp-video-full {
  max-width: 1760px;
  max-width: min(1760px, 160vh);
}
.amp-video-frame {
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  border: 1px solid var(--border, rgba(255, 255, 255, .07));
  border-radius: 8px;
  background: #000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.amp-video-frame > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.amp-video-cap {
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted, #8a87a0);
  line-height: 1.7;
}
.amp-video-cap a { color: var(--magenta, #00c8ff); text-decoration: none; }
.amp-video-cap a:hover { text-decoration: underline; }