/* featured_panel block.
   CSS ported from design-export/base.css; no literal colour, every value a token.
   dark featured panel, media + features. */

.featured-panel { background: var(--surface-dark); border-radius: var(--radius-lg); overflow: hidden; }
.featured-panel__inner { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; grid-template-areas: "content media"; }
.featured-panel--media-right .featured-panel__inner { grid-template-columns: 1.15fr 1fr; grid-template-areas: "content media"; }
.featured-panel--media-left .featured-panel__inner { grid-template-columns: 1fr 1.15fr; grid-template-areas: "media content"; }
.featured-panel--no-media .featured-panel__inner { grid-template-columns: 1fr; grid-template-areas: "content"; }
.featured-panel__content { padding: 2.2rem 2.3rem; grid-area: content; }
.featured-panel__media { grid-area: media; position: relative; background: repeating-linear-gradient(135deg, rgba(var(--on-dark-rgb), .14) 0 9px, rgba(var(--on-dark-rgb), .06) 9px 18px); display: flex; align-items: center; justify-content: center; min-height: 340px; font-family: var(--font-mono); color: rgba(var(--on-dark-rgb), .6); overflow: hidden; }

/* Real media must fill the media column, not sit as an unsized 300x150 iframe
   default that overlaps the content column. Image covers; video keeps 16:9. */
.featured-panel__image-wrapper,
.featured-panel__custom-content { width: 100%; height: 100%; align-self: stretch; }
.featured-panel__image-wrapper img,
.featured-panel__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-panel__video-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; align-self: center; }
.featured-panel__video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.featured-panel__title { color: var(--white); font-size: 2.5rem; line-height: 1.02; margin-bottom: .5rem; }
.featured-panel__subtitle { font-family: var(--font-display); font-weight: 400; font-size: 1.4375rem; color: rgba(var(--on-dark-rgb), .8); margin-bottom: .8rem; }
.featured-panel__description { font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .84); margin-bottom: 1.4rem; }
.featured-panel__features { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1.6rem; }
.featured-panel__feature { display: flex; gap: .7rem; font-size: var(--fs-min); line-height: 1.5; color: var(--white); }
.featured-panel__feature-icon { flex: 0 0 auto; color: var(--accent-on-dark); display: flex; margin-top: .1rem; }

/* Title emphasis on the dark panel. --display-em (orange on DC) fails contrast
   on navy, so use the brand's bright accent: --yellow where defined (DC),
   otherwise the on-dark accent. */
.featured-panel__title em,
.featured-panel__title strong { color: var(--yellow, var(--accent-on-dark)); }

/* CTA: a solid, high-contrast pill, not a low-contrast text link. Brand accent
   button tokens (DC: teal disc, navy label on the navy panel). */
.featured-panel__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--btn-accent-bg); color: var(--btn-accent-text);
  font-weight: 700; font-size: var(--fs-min);
  padding: .8rem 1.5rem; border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
.featured-panel__cta:hover { color: var(--btn-accent-text); transform: translateY(-2px); }
.featured-panel__cta svg { width: 1.1em; height: 1.1em; }

@media (max-width: 64em) {
  .featured-panel__inner,
  .featured-panel--media-left .featured-panel__inner,
  .featured-panel--media-right .featured-panel__inner { grid-template-columns: 1fr; grid-template-areas: "content" "media"; }
  .featured-panel__features { grid-template-columns: 1fr; }
}