/* The emergency band as an alert (13 Oct 2026, Southend Gas & Plumbing). Mike: "Emergency section doesn't really stand
   out, easy to miss the small emergency tag". The navy band looked like every other dark band on the page (the hero,
   the reviews); this one wears the look's warm accent (Trade blue's gold) with ink on it, a solid label with a
   pulsing dot, and an ink call button: the one section that reads as "act now". Ink on Trade blue's gold is about
   9:1. Opt-in (`optInCss`); partials/ph-emergency.njk carries the markup. */
#emergency.ph-alert {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(2.5rem, 7vw, 3.75rem);
  color: var(--color-ink);
  background: linear-gradient(115deg, var(--color-accent) 0%, color-mix(in srgb, var(--color-accent) 80%, #ff6a00) 100%);
}
/* faint warning stripes fading in from the right */
#emergency.ph-alert::after {
  content: ""; position: absolute; inset: 0 0 0 auto; width: min(46%, 560px); z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-ink) 9%, transparent) 0 16px, transparent 16px 32px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.ph-alert-grid { display: grid; gap: 1.4rem; align-items: center; }
.ph-alert-icon { display: none; }
.ph-alert-tag {
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.95rem 0.45rem 0.8rem; border-radius: 999px;
  background: var(--color-ink); color: #fff; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.ph-alert-dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: #ff3b30; box-shadow: 0 0 0 0 rgb(255 59 48 / 0.7); animation: ph-alert-pulse 1.8s ease-out infinite; }
@keyframes ph-alert-pulse { 0% { box-shadow: 0 0 0 0 rgb(255 59 48 / 0.65); } 75%, 100% { box-shadow: 0 0 0 11px rgb(255 59 48 / 0); } }
@media (prefers-reduced-motion: reduce) { .ph-alert-dot { animation: none; } }
.ph-alert-h { margin-top: 0.8rem; font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.04; color: var(--color-ink); }
.ph-alert-text { margin-top: 0.55rem; font-size: 1.125rem; line-height: 1.55; color: color-mix(in srgb, var(--color-ink) 84%, var(--color-accent)); }
#emergency .btn.ph-alert-btn {
  width: 100%; min-height: 60px; padding-inline: 2rem; font-size: 1.125rem;
  background: var(--color-ink); color: #fff; border-color: var(--color-ink);
  box-shadow: 0 18px 32px -16px rgb(0 0 0 / 0.55);
}
#emergency .btn.ph-alert-btn:hover { background: color-mix(in srgb, var(--color-ink) 86%, #fff); }
@media (min-width: 640px) {
  .ph-alert-grid { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.75rem; }
  .ph-alert-icon {
    display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 999px;
    background: var(--color-ink); color: var(--color-accent); box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-ink) 12%, transparent);
  }
  #emergency .btn.ph-alert-btn { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .ph-alert-grid { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 2.25rem; }
  #emergency .btn.ph-alert-btn { grid-column: auto; width: auto; }
}