/* =========================================================
   N2UGA.ORG Joomla Theme
   Cassiopeia child template: cassiopeia_n2uga
   Full-width masthead + consolidated styling
   ========================================================= */

:root {
  --n2uga-black: #020812;
  --n2uga-navy: #061426;
  --n2uga-navy-2: #081a33;
  --n2uga-navy-3: #0a1d38;
  --n2uga-blue: #0d2b57;
  --n2uga-blue-2: #123f7a;
  --n2uga-electric: #087cff;
  --n2uga-cyan: #16c8ff;
  --n2uga-cyan-soft: #7ee6ff;
  --n2uga-silver: #d9e3ec;
  --n2uga-white: #f6fbff;
  --n2uga-muted: #8ea6bf;
}
/* =========================================================
   PAGE / GLOBAL
   ========================================================= */

html,
body,
body.site {
  min-height: 100%;
  color: var(--n2uga-silver);
}

html {
  background: #031327 !important;
  scroll-behavior: smooth;
}

body.site {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(17, 70, 145, 0.34) 0%,
      rgba(7, 30, 63, 0.14) 34%,
      rgba(3, 19, 39, 0) 62%
    ),
    linear-gradient(
      180deg,
      #071a34 0%,
      #061426 42%,
      #04152b 72%,
      #031327 100%
    ) !important;
  background-attachment: fixed;
}

a {
  color: var(--n2uga-cyan);
}

a:hover,
a:focus {
  color: var(--n2uga-cyan-soft);
}

/* =========================================================
   HEADER / FULL-WIDTH MASTHEAD
   ========================================================= */

.container-header {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;

  background:
    radial-gradient(
      circle at 50% 12%,
      rgba(20, 94, 200, 0.22),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      #06162c 0%,
      #081d3b 58%,
      #061426 100%
    ) !important;

  border-bottom: 1px solid rgba(22, 200, 255, 0.48);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 10px 40px rgba(0, 0, 0, 0.35);
}

/* Remove Cassiopeia's normal header width constraint */
.container-header > .grid-child,
.container-header .grid-child {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Branding wrapper fills the viewport */
.container-header .navbar-brand {
  width: 100% !important;
  max-width: none !important;
  display: block;
  padding: 0 !important;
  margin: 0 !important;
}

/*
   Header image automatically follows page width.
   No fixed max-height, so the whole artwork remains visible.
*/
.container-header .navbar-brand img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
  margin: 0 !important;
  padding: 0 !important;
  filter: none;
}

.container-header .site-description {
  display: none !important;
}

/* =========================================================
   MAIN NAVIGATION
   Automatically centered
   ========================================================= */

.container-header .container-nav {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  justify-content: center !important;

  background:
    linear-gradient(
      180deg,
      rgba(5, 17, 34, 0.97),
      rgba(3, 11, 24, 0.99)
    ) !important;

  border-top: 1px solid rgba(22, 200, 255, 0.28);
  border-bottom: 1px solid rgba(22, 200, 255, 0.42);

  box-shadow:
    inset 0 1px 0 rgba(8, 124, 255, 0.08),
    inset 0 -1px 0 rgba(8, 124, 255, 0.10),
    0 4px 10px rgba(0, 0, 0, 0.16);
}

.container-header .container-nav .grid-child,
.container-header .container-nav .navbar {
  width: 100%;
  max-width: none;
  margin: 0;
}

.container-header .metismenu.mod-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}

.container-header .metismenu.mod-menu > .metismenu-item {
  position: relative;
  margin: 0;
}

.container-header .metismenu.mod-menu > .metismenu-item > a {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 0 28px;
  color: #edf7ff !important;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-weight: 700;
  font-size: 0.95rem;
  border-bottom: 3px solid transparent;
  transition:
    color 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    text-shadow 160ms ease;
}

.container-header .metismenu.mod-menu > .metismenu-item > a:hover {
  color: var(--n2uga-cyan) !important;
  background: rgba(12, 57, 112, 0.20);
  border-bottom-color: var(--n2uga-cyan);
  text-shadow: 0 0 12px rgba(22, 200, 255, 0.45);
}

/* Current top-level page should look exactly like the other idle menu items.
   Joomla/Cassiopeia can draw its active indicator with pseudo-elements, so
   those are explicitly disabled below. */
.container-header .metismenu.mod-menu > .metismenu-item.active > a,
.container-header .metismenu.mod-menu > .metismenu-item.current > a,
.container-header .metismenu.mod-menu > .metismenu-item.default > a {
  color: #edf7ff !important;
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
}

.container-header .metismenu.mod-menu > .metismenu-item.active > a::before,
.container-header .metismenu.mod-menu > .metismenu-item.active > a::after,
.container-header .metismenu.mod-menu > .metismenu-item.current > a::before,
.container-header .metismenu.mod-menu > .metismenu-item.current > a::after,
.container-header .metismenu.mod-menu > .metismenu-item.default > a::before,
.container-header .metismenu.mod-menu > .metismenu-item.default > a::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Keep the normal cyan hover treatment, even on the current page. */
.container-header .metismenu.mod-menu > .metismenu-item.active > a:hover,
.container-header .metismenu.mod-menu > .metismenu-item.current > a:hover,
.container-header .metismenu.mod-menu > .metismenu-item.default > a:hover {
  color: var(--n2uga-cyan) !important;
  background: rgba(12, 57, 112, 0.20) !important;
  border-bottom-color: var(--n2uga-cyan) !important;
  text-shadow: 0 0 12px rgba(22, 200, 255, 0.45) !important;
}

/* Full-button hover for dropdown parents.
   This MUST come after the active/current neutral rules because Joomla marks
   AMATEUR RADIO active when one of its child pages is active.  The invisible
   dropdown toggle covers the anchor, so the parent LI hover is the reliable
   target for the entire clickable button area. */
.container-header .metismenu.mod-menu > .metismenu-item.parent:hover > a,
.container-header .metismenu.mod-menu > .metismenu-item.parent.active:hover > a,
.container-header .metismenu.mod-menu > .metismenu-item.parent.current:hover > a {
  color: var(--n2uga-cyan) !important;
  background: rgba(12, 57, 112, 0.20) !important;
  border-bottom-color: var(--n2uga-cyan) !important;
  box-shadow: none !important;
  text-shadow: 0 0 12px rgba(22, 200, 255, 0.45) !important;
}

/* =========================================================
   DROPDOWN MENU
   ========================================================= */

.container-header .metismenu.mod-menu .metismenu-item > ul {
  background:
    linear-gradient(
      180deg,
      #071426 0%,
      #0a1d38 100%
    ) !important;

  border: 1px solid rgba(22, 200, 255, 0.45) !important;
  border-top: 2px solid var(--n2uga-cyan) !important;
  border-radius: 0 0 8px 8px;

  min-width: 286px;
  padding: 0 !important;
  overflow: hidden;

  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(8, 124, 255, 0.18);
}

/* Nested submenu lists live inside the outer dropdown panel and should not
   render a second panel around their links. */
.container-header .metismenu.mod-menu .metismenu-item > ul .metismenu-item > ul {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
}

.container-header .metismenu.mod-menu .metismenu-item > ul > li {
  background: transparent !important;
  border-bottom: 1px solid rgba(22, 200, 255, 0.12);
}

.container-header .metismenu.mod-menu .metismenu-item > ul > li:last-child {
  border-bottom: none;
}

.container-header .metismenu.mod-menu .metismenu-item > ul > li > a {
  display: block;
  padding: 15px 18px !important;
  color: var(--n2uga-silver) !important;
  background: transparent !important;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition:
    color 160ms ease,
    background 160ms ease,
    padding-left 160ms ease,
    text-shadow 160ms ease;
}

.container-header .metismenu.mod-menu .metismenu-item > ul > li > a:hover,
.container-header .metismenu.mod-menu .metismenu-item > ul > li.current > a,
.container-header .metismenu.mod-menu .metismenu-item > ul > li.active > a {
  color: var(--n2uga-cyan) !important;
  background: rgba(8, 124, 255, 0.18) !important;
  padding-left: 23px !important;
  text-shadow: 0 0 10px rgba(22, 200, 255, 0.42);
}

/* =========================================================
   ARROWLESS DROPDOWN TOGGLE
   ========================================================= */

.container-header .metismenu.mod-menu > .metismenu-item.parent {
  position: relative;
}

.container-header .metismenu.mod-menu .mm-toggler {
  display: block !important;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 54px;
  z-index: 10;
  opacity: 0;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
}

.container-header .metismenu.mod-menu .mm-toggler::before,
.container-header .metismenu.mod-menu .mm-toggler::after,
.container-header .metismenu.mod-menu .mm-toggler svg,
.container-header .metismenu.mod-menu .mm-toggler .icon-chevron-down,
.container-header .metismenu.mod-menu .mm-toggler .icon-chevron-up {
  display: none !important;
}

/* =========================================================
   CINEMATIC LOWER MOUNTAIN BACKGROUND
   ========================================================= */

.site-grid {
  position: relative;
  isolation: isolate;

  min-height: 760px !important;
  margin: 0;
  padding: 0;

  background-image:
    linear-gradient(
      180deg,
      rgba(4, 22, 48, 0.03) 0%,
      rgba(3, 18, 39, 0.08) 38%,
      rgba(3, 19, 39, 0.24) 72%,
      rgba(3, 19, 39, 0.62) 100%
    ),
    url("/images/n2uga-mountain-bg-1920x2160-resized.png"),
    linear-gradient(
      180deg,
      #08234b 0%,
      #061a36 32%,
      #04172f 68%,
      #031327 100%
    ) !important;

  background-size:
    100% 760px,
    100% auto,
    100% 100% !important;

  background-position:
    center top,
    center -40px,
    center top !important;

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat !important;

  background-color: #031327 !important;
}

.site-grid::before,
.site-grid::after {
  display: none !important;
}

main,
.container-component,
main > .com-content-category-blog,
main > .com-content-article,
.com-content-category-blog,
.com-content-article {
  background: transparent !important;
}

.site-grid > *,
.container-component,
main {
  position: relative;
  z-index: 2;
}

/* Keep the mountain artwork fixed only on desktop, so foreground content
   provides a restrained depth cue without adding scroll-time JavaScript. */
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  .site-grid {
    background-attachment: scroll, fixed, scroll !important;
    background-size: 100% 760px, 100vw auto, 100% 100% !important;
    background-position: center top, center -40px, center top !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-grid {
    background-attachment: scroll, scroll, scroll !important;
  }
}

.container-component {
  max-width: 1280px;
  margin-inline: auto;
  padding: 56px 28px 100px;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.page-header,
.article-info-term {
  color: var(--n2uga-white);
}

h1,
h2,
h3 {
  letter-spacing: 0.02em;
}

h1 {
  text-shadow: 0 0 18px rgba(22, 200, 255, 0.13);
}

/* =========================================================
   CARDS / MODULES / CONTENT PANELS
   ========================================================= */

.card,
.moduletable,
.module,
.blog-item,
.com-content-article {
  background:
    linear-gradient(
      180deg,
      rgba(13, 43, 87, 0.62),
      rgba(5, 20, 42, 0.74)
    );

  border: 1px solid rgba(22, 200, 255, 0.20);
  border-radius: 12px;

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(255,255,255,0.015) inset;

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.card-header,
.module h3,
.moduletable h3 {
  color: var(--n2uga-white);
  background: rgba(7, 31, 65, 0.72);
  border-bottom: 1px solid rgba(22, 200, 255, 0.22);
}

/* =========================================================
   ALERTS
   ========================================================= */

.alert {
  color: #dcecff;
  background: rgba(8, 30, 61, 0.78);
  border: 1px solid rgba(22, 200, 255, 0.28);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
  color: #00101d;
  background: linear-gradient(180deg, #36d7ff, #0998f7);
  border-color: #31cfff;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(22, 200, 255, 0.22);
}

.btn-primary:hover,
.btn-primary:focus {
  color: #00101d;
  background: linear-gradient(180deg, #70e7ff, #20b7ff);
  border-color: #86ecff;
}

/* =========================================================
   FORMS
   ========================================================= */

.form-control,
.form-select {
  color: var(--n2uga-silver);
  background-color: #061426;
  border-color: rgba(22, 200, 255, 0.25);
}

.form-control:focus,
.form-select:focus {
  color: var(--n2uga-white);
  background-color: #071a34;
  border-color: var(--n2uga-cyan);
  box-shadow: 0 0 0 .2rem rgba(22, 200, 255, 0.14);
}

/* =========================================================
   FOOTER
   ========================================================= */

.n2uga-site-footer {
  position: relative;
  color: var(--n2uga-muted);
  background:
    linear-gradient(180deg, rgba(2, 8, 18, 0.98), rgba(3, 19, 39, 0.99)) !important;
  border-top: 1px solid rgba(22, 200, 255, 0.22);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.18);
}

.n2uga-site-footer__inner,
.n2uga-site-footer__modules {
  width: min(1280px, calc(100% - 40px));
  margin-inline: auto;
}

.n2uga-site-footer__inner {
  display: grid;
  grid-template-columns: minmax(11rem, 1fr) minmax(19rem, auto) auto;
  align-items: center;
  gap: 18px 28px;
  padding: 24px 0;
}

.n2uga-site-footer__brand {
  display: grid;
  gap: 3px;
}

.n2uga-site-footer__brand .mod-custom {
  display: grid;
  gap: 3px;
}

.n2uga-site-footer__brand p {
  margin: 0;
}

.n2uga-site-footer__brand a {
  color: var(--n2uga-white);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.n2uga-footer-brand__tagline {
  color: var(--n2uga-cyan-soft);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.n2uga-footer-brand__copyright {
  color: var(--n2uga-silver);
  font-size: 0.82rem;
}

.n2uga-site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 16px;
}

.n2uga-site-footer__links > ul.mod-menu.mod-list.nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: inherit;
  gap: inherit;
  margin: 0;
  padding: 0;
  list-style: none;
}

.n2uga-site-footer__links > ul.mod-menu.mod-list.nav > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.n2uga-site-footer__links > ul.mod-menu.mod-list.nav > li > a {
  font-size: 15px;
  font-weight: 600;
}

.n2uga-site-footer__links a {
  color: var(--n2uga-muted);
  font-size: 0.82rem;
  text-decoration: none;
}

.n2uga-site-footer__brand a:hover,
.n2uga-site-footer__brand a:focus,
.n2uga-site-footer__links a:hover,
.n2uga-site-footer__links a:focus {
  color: var(--n2uga-cyan-soft);
}

.n2uga-site-footer__top {
  display: inline-grid;
  justify-self: end;
  margin-right: 0;
  width: 42px;
  min-height: 42px;
  place-items: center;
  color: var(--n2uga-white);
  background: rgba(22, 200, 255, 0.10);
  border: 1px solid rgba(22, 200, 255, 0.42);
  border-radius: 6px;
  box-shadow: 0 0 14px rgba(22, 200, 255, 0.10);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
}

@media (min-width: 992px) {
  .n2uga-site-footer__inner::after {
    content: "";
    grid-column: 3;
    grid-row: 1;
    width: 42px;
    min-height: 42px;
  }

  .n2uga-site-footer__top {
    position: absolute;
    top: 50%;
    right: clamp(24px, 2vw, 32px);
    transform: translateY(-50%);
  }
}

.n2uga-site-footer__top:hover,
.n2uga-site-footer__top:focus {
  color: #00101d;
  background: var(--n2uga-cyan-soft);
  border-color: var(--n2uga-cyan-soft);
}

.n2uga-site-footer a:focus-visible {
  outline: 2px solid var(--n2uga-cyan-soft);
  outline-offset: 3px;
}

.n2uga-site-footer__modules {
  padding: 0 0 24px;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991px) {
  .n2uga-site-footer__inner {
    grid-template-columns: minmax(11rem, 1fr) auto;
  }

  .n2uga-site-footer__links {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .container-header .metismenu.mod-menu > .metismenu-item > a {
    min-height: 54px;
    padding: 0 16px;
    font-size: 0.88rem;
  }

  .container-header .metismenu.mod-menu .mm-toggler {
    height: 54px;
  }

  .container-component {
    padding: 38px 18px 80px;
  }

  .site-grid {
    background-size:
      100% 660px,
      auto 660px,
      100% 100% !important;

    background-position:
      center top,
      center top,
      center top !important;
  }
}

@media (max-width: 640px) {
  .n2uga-site-footer__inner {
    grid-template-columns: 1fr auto;
    gap: 18px;
    padding: 22px 0;
  }

  .n2uga-site-footer__links {
    gap: 10px 16px;
  }

  .n2uga-site-footer__top {
    width: 46px;
    min-height: 46px;
  }

  .container-header .metismenu.mod-menu > .metismenu-item > a {
    padding-inline: 12px;
    font-size: 0.82rem;
  }

  .container-header .metismenu.mod-menu .metismenu-item > ul {
    min-width: 250px;
  }
}
   LOCAL WEATHER ALERT POSITION
   Joomla module position: weather-alert
   Renders only when a published module is assigned.
   ========================================================= */

.container-weather-alert {
  position: relative;
  z-index: 19;
  width: 100%;
  margin: 0;
  padding: 0;
  background:
    linear-gradient(
      180deg,
      rgba(3, 11, 24, 0.99),
      rgba(5, 20, 42, 0.98)
    );
  border-bottom: 1px solid rgba(22, 200, 255, 0.30);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
}

.container-weather-alert-inner {
  width: min(1280px, calc(100% - 40px));
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 0;
}

.container-weather-alert-inner > .mod-custom {
  width: 100%;
}

/* Generic N2UGA alert panel for manual prototype modules. */
.n2uga-weather-alert {
  width: min(700px, 100%);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(255, 94, 94, 0.62);
  border-radius: 12px;
  background:
    linear-gradient(
      180deg,
      rgba(83, 13, 22, 0.92),
      rgba(37, 10, 19, 0.94)
    );
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.30),
    0 0 22px rgba(255, 70, 70, 0.12);
}

.n2uga-weather-alert summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 20px;
  color: #fff;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.n2uga-weather-alert summary::-webkit-details-marker {
  display: none;
}

.n2uga-weather-alert__icon {
  flex: 0 0 auto;
  color: #ffd3d3;
  font-size: 1.45rem;
  line-height: 1;
}

.n2uga-weather-alert__summary-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  min-width: 0;
}

.n2uga-weather-alert__area,
.n2uga-weather-alert__event,
.n2uga-weather-alert__expires {
  white-space: nowrap;
}

.n2uga-weather-alert__area {
  color: #ffd3d3;
  font-size: 0.76rem;
}

.n2uga-weather-alert__event {
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.40);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
}

.n2uga-weather-alert__expires {
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffd3d3;
  font-size: 0.84rem;
}

.n2uga-weather-alert__toggle {
  display: none;
}

.n2uga-weather-alert summary::after {
  margin-left: auto;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
}

.n2uga-weather-alert summary::after {
  content: "+";
}

.n2uga-weather-alert[open] summary::after {
  content: "−";
}

.n2uga-weather-alert__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.32fr);
  gap: 20px;
  padding: 18px 20px 20px;
  color: #f6fbff;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.n2uga-weather-alert__title {
  margin: 14px 0 4px;
  color: #fff;
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  font-weight: 800;
  text-transform: uppercase;
}

.n2uga-weather-alert__meta {
  margin: 0 0 10px;
  color: #ffd8d8;
  font-weight: 700;
}

.n2uga-weather-alert__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .container-weather-alert-inner {
    width: calc(100% - 24px);
    padding: 12px 0;
  }

  .n2uga-weather-alert summary {
    min-height: 52px;
    padding: 10px 14px;
    font-size: 0.88rem;
  }

  .n2uga-weather-alert__body {
    padding: 2px 14px 14px;
  }
}

.n2uga-weather-alert__instruction {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 3px solid #ff9a9a;
  border-radius: 0 8px 8px 0;
  background: rgba(0, 0, 0, 0.18);
}

.n2uga-weather-alert__image-placeholder {
  display: grid;
  min-height: 150px;
  place-items: center;
  padding: 16px;
  border: 1px dashed rgba(255, 216, 216, 0.46);
  border-radius: 8px;
  color: #ffd8d8;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .n2uga-weather-alert summary {
    gap: 10px;
    min-height: 58px;
    padding: 10px 14px;
  }
  .n2uga-weather-alert__summary-copy {
    gap: 2px 8px;
  }
  .n2uga-weather-alert__event,
  .n2uga-weather-alert__expires {
    padding-left: 8px;
  }
  .n2uga-weather-alert__body {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }
  .n2uga-weather-alert__image-placeholder {
    min-height: 110px;
  }
}