/* SPM FRONTGATE — CONSOLIDATION TEST v4.0 | 2026-10-25
   Homepage-only rules extracted from the v3.4 experimental stylesheet.
   Load after the SPM global master.
*/

/* =========================================================
   SCOTT PRICE MEDIA FRONT GATE
   Page-scoped presentation layer, Revision 2
   Load after glow-glass.css on the home page only.
   ========================================================= */

.spm-frontgate {
  --frontgate-purple: #6610f2;
  --frontgate-purple-dark: #2c096c;
  --frontgate-purple-soft: #a86dff;
  --frontgate-gold: #d4af37;
  --frontgate-cyan: #00d4ff;
  --frontgate-radius: 1.15rem;
  --frontgate-border: rgba(126, 45, 241, 0.3);
  --frontgate-panel: rgba(18, 7, 34, 0.72);
  --frontgate-panel-strong: rgba(14, 4, 28, 0.88);
  --frontgate-muted: rgba(233, 236, 239, 0.76);
  --frontgate-shadow: 0 18px 46px rgba(19, 2, 45, 0.24);
  overflow-x: hidden;
  font-family: "Inter", Arial, sans-serif;
}

.spm-frontgate button,
.spm-frontgate input,
.spm-frontgate select,
.spm-frontgate textarea,
.spm-frontgate .btn,
.spm-frontgate .nav-link,
.spm-frontgate .navbar,
.spm-frontgate .dropdown-menu {
  font-family: "Inter", Arial, sans-serif;
}

.spm-frontgate main {
  position: relative;
  isolation: isolate;
}

.spm-frontgate main::before,
.spm-frontgate main::after {
  position: fixed;
  z-index: -1;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  content: "";
  filter: blur(100px);
  opacity: 0.12;
  pointer-events: none;
}

.spm-frontgate main::before {
  top: 15rem;
  left: -18rem;
  background: var(--frontgate-purple);
}

.spm-frontgate main::after {
  right: -18rem;
  bottom: 6rem;
  background: #2457ff;
}

/* Primary feature carousel */
.spm-frontgate #spmHeroCarousel {
  margin: 0 0 1.25rem;
  overflow: hidden;
  border-top: 1px solid rgba(128, 45, 247, 0.38);
  border-right: 0;
  border-bottom: 1px solid rgba(128, 45, 247, 0.48);
  border-left: 0;
  border-radius: 0;
  background: #090111;
  box-shadow:
    0 18px 46px rgba(19, 2, 45, 0.28),
    0 10px 28px rgba(102, 16, 242, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.spm-frontgate #spmHeroCarousel .caption-content {
  max-width: 760px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.78);
}

.spm-frontgate #spmHeroCarousel .eyebrow {
  color: #d9bbff;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.spm-frontgate #spmHeroCarousel .main-headline {
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.spm-frontgate #spmHeroCarousel .supporting-text {
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.86);
}

.spm-frontgate #spmHeroCarousel .btn {
  border-width: 1px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

/* Main discovery tabs */
.spm-frontgate main > .container-fluid:first-child {
  padding-top: 0.35rem !important;
}

.spm-frontgate .nav-scroller {
  max-width: 780px;
  margin-inline: auto;
  overflow-x: auto;
  border: 1px solid var(--frontgate-border);
  border-radius: 999px;
  background: var(--frontgate-panel);
  box-shadow: 0 12px 32px rgba(20, 3, 48, 0.14);
  backdrop-filter: blur(18px);
  scrollbar-width: none;
}

.spm-frontgate .nav-scroller::-webkit-scrollbar { display: none; }

.spm-frontgate #blog-tab {
  flex-wrap: nowrap;
  min-width: max-content;
}

.spm-frontgate #blog-tab .nav-link {
  min-height: 2.6rem;
  padding-inline: 1.1rem;
  border: 1px solid var(--spm-nav-pill-border-color) !important;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spm-frontgate #blog-tab .nav-link:focus-visible {
  outline: 3px solid rgba(0, 212, 255, 0.48);
  outline-offset: 2px;
}

.spm-frontgate #blog-tabContent {
  max-width: 1520px;
  margin-inline: auto;
}

.spm-frontgate #blog-tabContent > .tab-pane {
  padding-bottom: 2rem;
}

/* RSS and embedded feature surfaces */
.spm-frontgate #featured > .container-fluid:first-child,
.spm-frontgate rssapp-carousel,
.spm-frontgate rssapp-magazine {
  border-radius: var(--frontgate-radius);
}

.spm-frontgate #featured > .container-fluid:first-child {
  margin-bottom: 1rem;
  padding: clamp(0.75rem, 2vw, 1.25rem) !important;
  border: 1px solid var(--frontgate-border);
  background: var(--frontgate-panel);
  box-shadow: var(--frontgate-shadow);
  backdrop-filter: blur(18px);
}

/* Front Gate destination cards */
.spm-frontgate #featured .spm-card-grid {
  gap: clamp(1rem, 2vw, 1.35rem);
}

.spm-frontgate #featured .spm-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 205px;
  border: 1px solid var(--frontgate-border);
  border-radius: var(--frontgate-radius);
  background:
    radial-gradient(circle at 95% 0%, rgba(132, 48, 255, 0.18), transparent 38%),
    var(--frontgate-panel);
  box-shadow: var(--frontgate-shadow);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.spm-frontgate #featured .spm-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--frontgate-purple), var(--frontgate-purple-soft), transparent 82%);
  content: "";
}

.spm-frontgate #featured .spm-card:hover {
  transform: translateY(-4px);
  border-color: rgba(160, 93, 255, 0.64);
  box-shadow: 0 22px 52px rgba(45, 7, 93, 0.28), 0 0 28px rgba(102, 16, 242, 0.12);
}

.spm-frontgate #featured .spm-card-content {
  display: flex;
  height: 100%;
  padding: clamp(1.35rem, 3vw, 2rem);
  flex-direction: column;
  align-items: flex-start;
}

.spm-frontgate #featured .spm-card h2 {
  display: flex;
  margin-bottom: 0.75rem;
  align-items: center;
  gap: 0.65rem;
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  font-weight: 850;
  letter-spacing: 0.015em;
}

.spm-frontgate #featured .spm-card h2 i {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 2.65rem;
  place-items: center;
  border-radius: 0.72rem;
  background: linear-gradient(135deg, var(--frontgate-purple-dark), var(--frontgate-purple));
  color: #fff;
  box-shadow: 0 0 24px rgba(102, 16, 242, 0.28);
  font-size: 1.15rem;
}

.spm-frontgate #featured .spm-card p {
  margin-bottom: 1.25rem;
  color: var(--frontgate-muted);
  line-height: 1.7;
}

.spm-frontgate #featured .spm-card .btn { margin-top: auto; }

/* Useful Front Gate sidebar */
.spm-frontgate #featured > .row.g-5 > .col-md-4 {
  padding-top: 0 !important;
}

.spm-frontgate #featured > .row.g-5 > .col-md-4 .position-sticky {
  top: 5.75rem !important;
}

.spm-frontgate .frontgate-explore {
  margin-bottom: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--frontgate-border);
  border-radius: var(--frontgate-radius);
  background:
    radial-gradient(circle at 100% 0%, rgba(138, 44, 255, 0.2), transparent 42%),
    var(--frontgate-panel-strong);
  box-shadow: var(--frontgate-shadow);
  backdrop-filter: blur(18px);
}

.spm-frontgate .frontgate-explore__eyebrow {
  margin-bottom: 0.35rem;
  color: var(--frontgate-purple-soft);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.spm-frontgate .frontgate-explore h2 {
  margin-bottom: 0.35rem;
  font-size: 1.25rem;
  font-weight: 850;
}

.spm-frontgate .frontgate-explore > p {
  margin-bottom: 1rem;
  color: var(--frontgate-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.spm-frontgate .frontgate-explore__links {
  display: grid;
  gap: 0.35rem;
}

.spm-frontgate .frontgate-explore__links a {
  display: flex;
  min-height: 2.65rem;
  padding: 0.62rem 0.7rem;
  align-items: center;
  gap: 0.7rem;
  border-radius: 0.68rem;
  color: inherit;
  font-size: 0.87rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.spm-frontgate .frontgate-explore__links a i:first-child {
  width: 1.15rem;
  color: var(--frontgate-purple-soft);
  text-align: center;
}

.spm-frontgate .frontgate-explore__links a i:last-child {
  margin-left: auto;
  opacity: 0.66;
}

.spm-frontgate .frontgate-explore__links a:hover,
.spm-frontgate .frontgate-explore__links a:focus-visible {
  background: rgba(126, 45, 241, 0.14);
  color: var(--frontgate-purple-soft);
  transform: translateX(3px);
}

.spm-frontgate .frontgate-explore__links a:focus-visible {
  outline: 3px solid rgba(0, 212, 255, 0.42);
  outline-offset: 2px;
}


.spm-frontgate #featured > .row.g-5 > .col-md-4 img {
  border-radius: 0.9rem;
  box-shadow: 0 12px 28px rgba(17, 2, 39, 0.2);
}

/* Interior tab panes retain their content, but gain a coherent frame */
.spm-frontgate #video,
.spm-frontgate #music,
.spm-frontgate #gaming,
.spm-frontgate #pictures,
.spm-frontgate #radio {
  margin-top: 1rem;
  border-radius: var(--frontgate-radius);
}

.spm-frontgate #video > .position-relative,
.spm-frontgate #music > .position-relative,
.spm-frontgate #gaming > .position-relative,
.spm-frontgate #pictures > .position-relative,
.spm-frontgate #radio > .position-relative {
  overflow: hidden;
  border: 1px solid var(--frontgate-border);
  border-radius: var(--frontgate-radius);
  box-shadow: var(--frontgate-shadow);
}

.spm-frontgate #video .card,
.spm-frontgate #music .card,
.spm-frontgate #gaming .card,
.spm-frontgate #pictures .card,
.spm-frontgate #radio .card,
.spm-frontgate #video .list-group-item,
.spm-frontgate #music .list-group-item,
.spm-frontgate #gaming .list-group-item,
.spm-frontgate #pictures .list-group-item,
.spm-frontgate #radio .list-group-item {
  border-color: var(--frontgate-border);
  border-radius: 0.95rem;
}

/* Light theme */
[data-bs-theme="light"] .spm-frontgate {
  --frontgate-border: rgba(102, 16, 242, 0.22);
  --frontgate-panel: rgba(255, 255, 255, 0.72);
  --frontgate-panel-strong: rgba(255, 255, 255, 0.88);
  --frontgate-muted: rgba(26, 18, 42, 0.76);
  --frontgate-shadow: 0 16px 42px rgba(65, 34, 104, 0.12);
}

[data-bs-theme="light"] .spm-frontgate .frontgate-explore__eyebrow,
[data-bs-theme="light"] .spm-frontgate .frontgate-explore__links a i:first-child,
[data-bs-theme="light"] .spm-frontgate .frontgate-explore__links a:hover,
[data-bs-theme="light"] .spm-frontgate .frontgate-explore__links a:focus-visible {
  color: #5613ad;
}

[data-bs-theme="light"] .spm-frontgate #spmHeroCarousel,
[data-bs-theme="light"] .spm-frontgate #spmHeroCarousel * {
  color: #fff;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {

  .spm-frontgate #featured > .row.g-5 > .col-md-4 .position-sticky { position: static !important; }
  .spm-frontgate .frontgate-explore__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 767.98px) {

  .spm-frontgate #featured > .row.g-5 { --bs-gutter-y: 1.5rem; }
  .spm-frontgate #featured .spm-card { min-height: 180px; }

}

@media (max-width: 575.98px) {

  .spm-frontgate .nav-scroller { border-radius: 0.85rem; }
  .spm-frontgate .frontgate-explore__links { grid-template-columns: 1fr; }

}

@media (prefers-reduced-motion: reduce) {

  .spm-frontgate #featured .spm-card,
  .spm-frontgate .frontgate-explore__links a {
    transition: none;
  }

  .spm-frontgate #featured .spm-card:hover,
  .spm-frontgate .frontgate-explore__links a:hover,
  .spm-frontgate .frontgate-explore__links a:focus-visible {
    transform: none;
  }

}


/* ===== CONSOLIDATED FROM: spm-home-featured-v2.css ===== */
/*
 * Scott Price Media — Homepage Featured Cards v1.0
 * Appearance-only, scoped to #featured .spm-card-grid.
 * Load AFTER glow-glass.css AND spm-frontgate-rev2.css.
 * Does not change nav, tabs, sidebars, footer, carousel or other cards.
 */
#featured .spm-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(.5rem, 1.5vw, 1rem) 0;
  align-items: stretch;
  justify-items: stretch;
}

#featured .spm-card-grid > .spm-card {
  position: relative;
  display: flex;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: 18px;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: var(--spm-body-color, var(--bs-body-color));
  box-shadow: 0 5px 16px rgba(0,0,0,.13);
  opacity: 1;
  cursor: auto;
  transform: none !important; /* defeats legacy JS inline tilt */
  transform-style: flat;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
[data-bs-theme="dark"] #featured .spm-card-grid > .spm-card {
  background: rgba(28, 13, 52, .92);
}
[data-bs-theme="light"] #featured .spm-card-grid > .spm-card {
  background: rgba(255, 255, 255, .93);
}

/* Disable both legacy rotating borders and mouse-tracking spotlight. */

#featured .spm-card-grid > .spm-card:hover,
#featured .spm-card-grid > .spm-card:focus-within {
  opacity: 1;
  background-color: var(--bs-body-bg);
  border-color: var(--spm-nav-focus-color, var(--bs-border-color));
  box-shadow: 0 7px 20px rgba(0,0,0,.16);
}
[data-bs-theme="dark"] #featured .spm-card-grid > .spm-card:hover,
[data-bs-theme="dark"] #featured .spm-card-grid > .spm-card:focus-within {
  background-color: #1c0d34;
}
[data-bs-theme="light"] #featured .spm-card-grid > .spm-card:hover,
[data-bs-theme="light"] #featured .spm-card-grid > .spm-card:focus-within {
  background-color: #fff;
}
#featured .spm-card-grid .spm-card-content {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: clamp(1.15rem, 2vw, 1.65rem);
}
#featured .spm-card-grid .spm-card h2 {
  margin: 0;
  color: var(--spm-body-color, var(--bs-body-color));
  font-size: clamp(1.1rem, 1.4vw, 1.5rem) !important;
  line-height: 1.25;
  transform: none !important;
  text-shadow: none;
}
#featured .spm-card-grid .spm-card h2 i,
#featured .spm-card-grid .spm-card:hover h2 i {
  color: var(--spm-nav-focus-color);
  font-size: 1.3em !important;
  transform: none !important;
  transition: none;
}
#featured .spm-card-grid .spm-card p,
#featured .spm-card-grid .spm-card:hover p {
  margin: 0;
  color: var(--spm-body-color, var(--bs-body-color));
  font-size: 1rem !important;
  line-height: 1.5;
  transform: none !important;
}
#featured .spm-card-grid .spm-card .btn {
  align-self: flex-start;
  margin-top: auto;
}
#featured .spm-card-grid .spm-card :focus-visible {
  outline: 3px solid var(--spm-nav-focus-color);
  outline-offset: 3px;
}
@media (max-width: 767.98px) {

  #featured .spm-card-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

}
@media (prefers-reduced-motion: reduce) {

  #featured .spm-card-grid > .spm-card { transition: none; }

}

/* SPM Featured editorial 1 + 2 + 3 layout — homepage only */
#featured .spm-featured-editorial { grid-template-columns: repeat(6,minmax(0,1fr)); }
#featured .spm-featured-editorial > .spm-featured-lead { grid-column: 1 / -1; display: block; }
#featured .spm-featured-editorial > .spm-featured-medium { grid-column: span 3; }
#featured .spm-featured-editorial > .spm-featured-small { grid-column: span 2; }
#featured .spm-featured-editorial .spm-featured-image-link { display:block; overflow:hidden; width:100%; }
#featured .spm-featured-editorial .spm-featured-image-link img { display:block; width:100%; height:auto; aspect-ratio: 16 / 9; object-fit:cover; }
#featured .spm-featured-editorial .spm-featured-lead .spm-card-content { height:auto; gap:.65rem; }
#featured .spm-featured-editorial .spm-featured-kicker { color:var(--spm-nav-focus-color,#d4af37); font-size:.78rem; font-weight:700; letter-spacing:.13em; }
#featured .spm-featured-editorial .spm-featured-lead h2 { font-size:clamp(1.35rem,2vw,1.9rem)!important; }
#featured .spm-featured-editorial .spm-featured-small .spm-card-content { padding:clamp(.85rem,1.4vw,1.2rem); }
#featured .spm-featured-editorial .spm-featured-small h2 { font-size:clamp(.94rem,1.1vw,1.15rem)!important; }
#featured .spm-featured-editorial .spm-featured-small p { font-size:.9rem!important; }
@media (max-width: 991.98px) {

  #featured .spm-featured-editorial > .spm-featured-small { grid-column:span 3; }
  #featured .spm-featured-editorial > .spm-featured-small:last-child { grid-column:1 / -1; }

}
@media (max-width: 575.98px) {

  #featured .spm-featured-editorial { grid-template-columns:minmax(0,1fr); }
  #featured .spm-featured-editorial > .spm-featured-lead,
  #featured .spm-featured-editorial > .spm-featured-medium,
  #featured .spm-featured-editorial > .spm-featured-small,
  #featured .spm-featured-editorial > .spm-featured-small:last-child { grid-column:1 / -1; }

}


/* ===== CONSOLIDATED FROM: spm-hero-height-test-v2.css ===== */
/* Scott Price Media — Hero Height Test v2
   Load after spm-supernova-carousel.css and other page styles.
   Desktop height is 70% of original 16:9 hero height.
   No changes to slide timing, fade, navigation, or JS.
*/
@media (min-width: 768px) {

  #spmHeroCarousel {
    aspect-ratio: 160 / 63; /* height = 0.39375 x width, vs original 0.5625 */
  }

}

/* Keep the existing 16:9 treatment on smaller screens so text and
   controls do not become cramped. */
@media (max-width: 767.98px) {

  #spmHeroCarousel {
    aspect-ratio: 16 / 9;
  }

}

/* Paul Bielatowicz slide: keep the TOP of the original artwork visible.
   The shorter hero crops the lower portion rather than cutting off his name.
   Scoped to this exact image; other slides keep their current framing. */
@media (min-width: 768px) {

  #spmHeroCarousel .bg-media[src*="paul-bielatowicz-banner-1.webp"] {
    object-position: center top;
  }

}


/* ===== CONSOLIDATED FROM: spm-featured-tv-v1.css ===== */
/* SPM Featured Television v1 — scoped to Featured pane */
#featured .spm-featured-tv { margin: 1.75rem 0; border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: clamp(1rem,2vw,1.5rem); background: var(--bs-tertiary-bg); }
#featured .spm-featured-tv-heading { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:.5rem 1rem; margin-bottom:1rem; }
#featured .spm-featured-tv-heading h2 { font-size:clamp(1.3rem,2vw,1.8rem); margin:.2rem 0 0; }
#featured .spm-featured-tv-kicker { color:var(--spm-nav-focus-color,#d4af37); font-size:.78rem; font-weight:700; letter-spacing:.13em; }
#featured .spm-featured-tv-page-link { font-size:.95rem; }
#featured .spm-featured-tv-screen { width:100%; aspect-ratio:16/9; border-radius:.7rem; overflow:hidden; background:linear-gradient(140deg,#090b1b,#1d1439 60%,#090b1b); }
#featured .spm-featured-tv-preview { display:flex; width:100%; height:100%; flex-direction:column; justify-content:center; align-items:center; gap:clamp(.35rem,1vw,.9rem); padding:1rem; text-align:center; }
#featured .spm-featured-tv-preview img { width:clamp(55px,12vw,125px); height:auto; max-height:35%; object-fit:contain; }
#featured .spm-featured-tv-preview p { margin:0; color:#f4f0ff; font-size:clamp(.8rem,1.5vw,1rem); }
#featured .spm-featured-tv-note { color:#d6cfe5; font-size:clamp(.7rem,1.2vw,.85rem); }
#featured .spm-featured-tv-screen iframe { width:100%; height:100%; display:block; border:0; }
#featured .spm-featured-tv-status { margin:.5rem 0 0; font-size:.875rem; min-height:1.3em; }
@media (max-width:575.98px) {
 #featured .spm-featured-tv-preview { padding:.5rem; gap:.35rem; } #featured .spm-featured-tv-preview img { width:56px; } #featured .spm-featured-tv-preview p { font-size:.78rem; } #featured .spm-featured-tv-note { font-size:.68rem; } 
}


/* ===== CONSOLIDATED FROM: spm-featured-width-glass-v1.css ===== */
/* Scott Price Media — Featured width and NASASpaceflight glass test v1
   Scoped to homepage Featured content; no player or carousel changes. */

/* Set a 1920px maximum for the tab content, including its padding. */
.spm-frontgate #blog-tabContent {
  box-sizing: border-box;
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
}

/* Match the existing deep-purple Featured cards instead of Bootstrap gray. */
.spm-frontgate[data-bs-theme="dark"] #featured .spm-featured-tv,
[data-bs-theme="dark"] .spm-frontgate #featured .spm-featured-tv {
  background: rgba(28, 13, 52, .92);
  border: 1px solid rgba(126, 45, 241, .30);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .13);
}

.spm-frontgate[data-bs-theme="light"] #featured .spm-featured-tv,
[data-bs-theme="light"] .spm-frontgate #featured .spm-featured-tv {
  background: rgba(255, 255, 255, .93);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .13);
}


/* ===== FEATURED TV: TWO-COLUMN LAYOUT ===== */
.spm-frontgate #featured .spm-tv-section-title { margin: 1.5rem 0 .85rem; font-size: clamp(1.15rem, 2vw, 1.5rem); }
.spm-frontgate #featured .spm-tv-two-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:clamp(.75rem,1.5vw,1.25rem); }
.spm-frontgate #featured .spm-tv-two-grid .spm-featured-tv { min-width:0; margin:0; padding:clamp(.75rem,1.2vw,1.1rem); }
.spm-frontgate #featured .spm-tv-two-grid .spm-featured-tv-heading { align-items:start; }
.spm-frontgate #featured .spm-tv-two-grid .spm-featured-tv-heading h3 { margin:.2rem 0 0; font-size:clamp(1rem,1.4vw,1.3rem); }
.spm-frontgate #featured .spm-tv-two-grid .spm-featured-tv-preview img { width:clamp(58px,7vw,108px); max-height:35%; object-fit:contain; }
.spm-frontgate #featured .spm-tv-two-grid .spm-featured-tv-preview { gap:clamp(.25rem,.7vw,.65rem); padding:.55rem; }
.spm-frontgate #featured .spm-tv-two-grid .spm-featured-tv-preview p { font-size:clamp(.7rem,1vw,.88rem); }
.spm-frontgate #featured .spm-tv-two-grid .spm-featured-tv-note { font-size:clamp(.65rem,.8vw,.75rem); }
@media(max-width:767.98px) {
 .spm-frontgate #featured .spm-tv-two-grid { grid-template-columns:minmax(0,1fr); } 
}


/* ===== FEATURED TV: IMAGE-BACKED CLICK-TO-PLAY PREVIEWS (v2.3) =====
   Only the initial preview changes. The JS replaces it with an iframe on click. */
.spm-frontgate #featured .spm-tv-two-grid .spm-featured-tv-preview {
  position: relative;
  isolation: isolate;
  background-color: #100b23;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: clamp(.8rem, 2vw, 1.5rem);
}
.spm-frontgate #featured [data-spm-tv-key="nasaspaceflight"] .spm-featured-tv-preview {
  background-image: linear-gradient(180deg, rgba(8,5,22,.24), rgba(8,5,22,.78)), url("https://img.youtube.com/vi/Jm8wRjD3xVA/hqdefault.jpg");
}
.spm-frontgate #featured [data-spm-tv-key="aljazeeraenglish"] .spm-featured-tv-preview {
  background-image: linear-gradient(180deg, rgba(8,5,22,.28), rgba(8,5,22,.82)), url("https://img.youtube.com/vi/gCNeDWCI0vo/hqdefault.jpg");
}
.spm-frontgate #featured .spm-tv-two-grid .spm-featured-tv-preview img {
  width: clamp(76px, 9vw, 120px);
  max-height: 32%;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.55));
}
/* Al Jazeera's original image is the same thumbnail used as the backdrop. */
.spm-frontgate #featured [data-spm-tv-key="aljazeeraenglish"] .spm-featured-tv-preview img { display: none; }
.spm-frontgate #featured .spm-tv-two-grid .spm-featured-tv-preview p,
.spm-frontgate #featured .spm-tv-two-grid .spm-featured-tv-note {
  color: #fff;
  text-shadow: 0 2px 5px rgba(0,0,0,.95);
}
.spm-frontgate #featured .spm-tv-two-grid .spm-featured-tv-preview .spm-tv-play {
  box-shadow: 0 2px 12px rgba(0,0,0,.45);
}

/* SPM Featured Radio — six stations, shared purple-glass panel (v2.4) */
.spm-frontgate #featured .spm-featured-radio {
  margin-top: 1.25rem;
  padding: clamp(.85rem, 1.7vw, 1.35rem);
  border: 1px solid rgba(171, 111, 255, .23);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(51, 20, 82, .38), rgba(19, 9, 37, .7));
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
}
.spm-frontgate #featured .spm-featured-radio-heading {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: .9rem;
}
.spm-frontgate #featured .spm-featured-radio-heading h2 {
  margin: 0; font-size: clamp(1.15rem, 2vw, 1.5rem);
}
.spm-frontgate #featured .spm-featured-radio-page-link {
  color: #b6a2ff; text-decoration: none; font-size: .85rem;
}
.spm-frontgate #featured .spm-featured-radio-page-link:hover,
.spm-frontgate #featured .spm-featured-radio-page-link:focus-visible {
  color: #fff; text-decoration: underline;
}
.spm-frontgate #featured .spm-featured-radio-grid .station-item { min-width: 0; }
.spm-frontgate #featured .spm-featured-radio-grid .card { max-width: 100%; }
.spm-frontgate #featured .spm-featured-radio-grid .card-front img {
  display: block; max-width: 100%; height: auto;
}
.spm-frontgate #featured .spm-featured-radio-grid .service-title-name audio {
  display: block; width: 100%; max-width: 100%;
}


/* Featured homepage v2.5: preserve main spotlight; relocate five shortcuts to sidebar.
   Shared cards retain their glass styling and links. */
.spm-frontgate #featured .spm-sidebar-shortcuts {
  margin: 0 0 1.25rem;
}
.spm-frontgate #featured .spm-sidebar-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .65rem;
}
.spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-featured-medium { grid-column: span 3; }
.spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-featured-small { grid-column: span 2; }
.spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-card { min-width: 0; }
.spm-frontgate #featured .spm-sidebar-shortcuts-grid .spm-card-content {
  padding: clamp(.65rem, 1vw, .95rem);
  gap: .45rem;
}
.spm-frontgate #featured .spm-sidebar-shortcuts-grid .spm-card h2 {
  font-size: clamp(.8rem, .9vw, 1rem) !important;
  overflow-wrap: anywhere;
}
.spm-frontgate #featured .spm-sidebar-shortcuts-grid .spm-card p {
  font-size: .78rem !important;
}
.spm-frontgate #featured .spm-sidebar-shortcuts-grid .spm-card .btn {
  font-size: .76rem;
}
/* At narrow sidebar widths use two shortcuts per row, then one on mobile. */
@media (min-width:768px) and (max-width:1199.98px) {

  .spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-featured-small { grid-column: span 3; }
  .spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-featured-small:last-child { grid-column: 1 / -1; }

}
@media (max-width:767.98px) {

  .spm-frontgate #featured .spm-sidebar-shortcuts-grid { grid-template-columns: minmax(0, 1fr); }
  .spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-featured-medium,
  .spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-featured-small,
  .spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-featured-small:last-child { grid-column: 1 / -1; }

}

/* Featured sidebar v2.6 — one full-width shortcut per row at every viewport. */
.spm-frontgate #featured .spm-sidebar-shortcuts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
}
.spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-card,
.spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-featured-medium,
.spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-featured-small,
.spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-featured-small:last-child {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}
.spm-frontgate #featured .spm-sidebar-shortcuts-grid .spm-card h2 {
  font-size: clamp(.95rem, 1.15vw, 1.1rem) !important;
  overflow-wrap: normal;
}
.spm-frontgate #featured .spm-sidebar-shortcuts-grid .spm-card-content {
  padding: clamp(.85rem, 1.2vw, 1.15rem);
}

/* SPM sidebar photographic navigation — v2.7.
   Photo backgrounds are derived from the user-approved visual concept.
   HTML text and links remain real, accessible, and selectable. */















/* v2.8: prevent excessive image zoom in narrow sidebar cards.
   Wide crops match desktop card geometry; mobile uses contained imagery. */



/* Sidebar v2.9 — faithful responsive photographic cards.
   Photos are composed with a dark left reading area, with no CSS zoom. */















/* ==============================================================
   SPM v3.2 — USER-SUPPLIED SIDEBAR PHOTOS (TEST ONLY)
   Override v2.9's background-size:100% 100% which distorted photos.
   Cover fills the cards at every viewport without distorting the photographs.
   ============================================================= */











/* ===== SIDEBAR PHOTO CARDS — SINGLE AUTHORITATIVE IMPLEMENTATION =====
   No ::before overlay. Each image and gradient share the same background-image
   property, preventing pseudo-element conflicts. Edit opacity here only.
   Original images remain in /assets/img/sidebar/.
*/
.spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-sidebar-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  min-height: clamp(215px, 19vw, 270px);
  border: 1px solid rgba(139, 54, 249, .78);
  border-radius: 14px;
  background-color: #130a27;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(184,124,255,.10), 0 10px 22px rgba(0,0,0,.18);
}
.spm-frontgate #featured .spm-sidebar-shortcuts-grid .spm-sidebar-photo .spm-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: .65rem;
  width: 100%;
  min-width: 0;
  padding: clamp(14px,1.4vw,22px);
}
.spm-frontgate #featured .spm-sidebar-shortcuts-grid .spm-sidebar-photo h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0;
  color: #fff;
  font-size: clamp(1rem,1.25vw,1.35rem) !important;
  font-weight: 800;
  line-height: 1.25;
  text-shadow: 0 2px 7px #05010b;
}
.spm-frontgate #featured .spm-sidebar-shortcuts-grid .spm-sidebar-photo h2 i {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  margin-right: 0;
  border: 1px solid #8c2eff;
  border-radius: .75rem;
  background: rgba(62,8,127,.85);
  color: #ffd35d;
  font-size: 1.35rem;
  vertical-align: middle;
}
.spm-frontgate #featured .spm-sidebar-shortcuts-grid .spm-sidebar-photo p {
  margin: 0;
  max-width: 24ch;
  color: #f8f5ff;
  font-size: clamp(.8rem,.9vw,1rem) !important;
  line-height: 1.5;
  text-shadow: 0 1px 5px rgba(0,0,0,.95);
}
.spm-frontgate #featured .spm-sidebar-shortcuts-grid .spm-sidebar-photo .btn {
  margin-top: auto;
  align-self: flex-start;
  min-height: 32px;
  border: 1px solid rgba(202,155,255,.65);
  border-radius: 999px;
  box-shadow: 0 3px 14px rgba(0,0,0,.45);
}
@media (max-width: 991.98px) {
  .spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-sidebar-photo { min-height: 230px; }
}
@media (max-width: 575.98px) {
  .spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-sidebar-photo { min-height: 245px; }
}
@media (prefers-reduced-motion: reduce) {
  .spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-sidebar-photo { transition: none !important; }
}

.spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-sidebar-photo--live-tv {
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.56) 50%, rgba(0,0,0,.18) 100%),
    url("../img/sidebar/live-tv.webp");
}

.spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-sidebar-photo--radio {
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.56) 50%, rgba(0,0,0,.18) 100%),
    url("../img/sidebar/radio.webp");
}

.spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-sidebar-photo--video {
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.56) 50%, rgba(0,0,0,.18) 100%),
    url("../img/sidebar/video.webp");
}

.spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-sidebar-photo--picture-lyrics {
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.56) 50%, rgba(0,0,0,.18) 100%),
    url("../img/sidebar/picture-lyrics.webp");
}

.spm-frontgate #featured .spm-sidebar-shortcuts-grid > .spm-sidebar-photo--price-press {
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.56) 50%, rgba(0,0,0,.18) 100%),
    url("../img/sidebar/price-press.webp");
}
/* Featured Radio — Light Theme Only */
[data-bs-theme="light"] .spm-frontgate #featured .spm-featured-radio {
    background: rgba(255, 255, 255, 0.93);
    border: 1px solid rgba(102, 16, 242, 0.25);
}
[data-bs-theme="light"] .spm-frontgate #featured
.spm-featured-radio-page-link {
    color: #4B0BB3;
}