.story-photo-widget {
  --spw-gap: 10px;
  box-sizing: border-box;
  width: 100%;
  max-width: 850px;
  margin: 24px auto;
  padding: 0;
  clear: both;
}

.story-photo-widget *,
.story-photo-widget *::before,
.story-photo-widget *::after {
  box-sizing: border-box;
}

.story-photo-widget__items {
  display: grid;
  gap: var(--spw-gap);
  width: 100%;
  min-width: 0;
}

.story-photo-widget__item {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}

#story_body .story-photo-widget__full,
.story-photo-layout-preview__content .story-photo-widget__full {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.story-photo-widget__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 0;
  object-position: center;
}

.story-photo-widget__meta {
  display: block;
  margin: 0;
  padding: 7px 2px 0;
  color: var(--color-text-secondary, #555);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.4;
}

.story-photo-widget__caption,
.story-photo-widget__credit {
  display: block;
}

.story-photo-widget__credit {
  margin-top: 2px;
  color: var(--text-muted, #777);
  font-size: 11px;
  font-style: normal;
}

.story-photo-widget__group-caption {
  margin: 9px 2px 0;
  color: var(--color-text-secondary, #555);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-style: italic;
  line-height: 1.45;
}

.story-photo-widget--single .story-photo-widget__items {
  display: block;
}

#story_body .story-photo-widget--single,
.story-photo-layout-preview__content .story-photo-widget--single {
  width: 80%;
  max-width: 680px;
  margin-right: auto;
  margin-left: auto;
}

.story-photo-widget--single .story-photo-widget__item {
  margin: 0;
}

.story-photo-widget--single .story-photo-widget__meta.caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 72px 14px 12px;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .88) 100%);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
}

.story-photo-widget--single .story-photo-widget__meta.caption .story-photo-widget__credit {
  color: #fff;
}

.story-photo-widget--filmstrip .story-photo-widget__items {
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.story-photo-widget--filmstrip .story-photo-widget__image {
  aspect-ratio: 4 / 3;
  height: 100%;
  object-fit: cover;
}

.story-photo-widget--filmstrip .story-photo-widget__full {
  aspect-ratio: 4 / 3;
}

/* Compact grids: keep the strip clean. Per-photo caption/credit stay in DOM for lightbox. */
.story-photo-widget--filmstrip .story-photo-widget__meta,
.story-photo-widget--lead-pair .story-photo-widget__meta,
.story-photo-widget--split-pair .story-photo-widget__meta {
  display: none;
}

.story-photo-widget--lead-pair .story-photo-widget__items {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  aspect-ratio: 3 / 2;
}

.story-photo-widget--lead-pair .story-photo-widget__item[data-spw-lead="1"] {
  grid-row: 1 / 3;
}

.story-photo-widget--lead-pair .story-photo-widget__full,
.story-photo-widget--lead-pair .story-photo-widget__image {
  height: 100%;
}

.story-photo-widget--lead-pair .story-photo-widget__image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.story-photo-widget--lead-pair .story-photo-widget__item:not([data-spw-lead="1"]) .story-photo-widget__image {
  aspect-ratio: 2 / 1;
}

.story-photo-widget--split-pair .story-photo-widget__items {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.story-photo-widget--split-pair .story-photo-widget__image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

#story_body .story-photo-widget--wide-breakout,
.story-photo-layout-preview__content .story-photo-widget--wide-breakout {
  width: 100%;
  max-width: 850px;
}

.story-photo-widget--portrait-inset {
  width: 38%;
  max-width: 320px;
  margin-top: 8px;
  margin-bottom: 14px;
  clear: none;
}

.story-photo-widget--portrait-inset[data-spw-align="left"] {
  float: left;
  margin-right: 1rem;
  margin-left: 0;
}

.story-photo-widget--portrait-inset[data-spw-align="right"] {
  float: right;
  margin-right: 0;
  margin-left: 1rem;
}

.story-photo-widget--portrait-inset .story-photo-widget__image {
  max-height: 620px;
  object-fit: contain;
}

.story-photo-widget--photo-stack .story-photo-widget__items {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.story-photo-layout-preview__frame--mobile .story-photo-widget {
  width: 100%;
  max-width: 100%;
  margin: 20px 0;
}

.story-photo-layout-preview__frame--mobile .story-photo-widget--filmstrip .story-photo-widget__items {
  display: flex;
  gap: 10px;
  padding-bottom: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.story-photo-layout-preview__frame--mobile .story-photo-widget--filmstrip .story-photo-widget__item {
  flex: 0 0 85%;
  scroll-snap-align: start;
}

.story-photo-layout-preview__frame--mobile .story-photo-widget--lead-pair .story-photo-widget__items {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  aspect-ratio: auto;
}

.story-photo-layout-preview__frame--mobile .story-photo-widget--lead-pair .story-photo-widget__item[data-spw-lead="1"] {
  grid-column: auto;
  grid-row: auto;
}

.story-photo-layout-preview__frame--mobile .story-photo-widget--lead-pair .story-photo-widget__items,
.story-photo-layout-preview__frame--mobile .story-photo-widget--split-pair .story-photo-widget__items {
  grid-template-columns: minmax(0, 1fr);
}

.story-photo-layout-preview__frame--mobile .story-photo-widget--portrait-inset {
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 20px 0;
}

#story_body::after {
  content: "";
  display: table;
  clear: both;
}

#story_body > .story-photo-widget:not(.story-photo-widget--portrait-inset),
#story_body > .story-photo,
#story_body > section.gallery-story-preview,
#story_body > .story-pull-quote,
#story_body > h2,
#story_body > h3,
#story_body > h4,
#story_body > hr,
#story_body > blockquote,
#story_body > table,
#story_body > ul,
#story_body > ol {
  clear: both;
}

.ticker-body .story-photo-widget,
.ticker-body .story-photo-widget--single,
.ticker-body .story-photo-widget--wide-breakout,
.ticker-body .story-photo-widget--portrait-inset,
.ticker-body .story-photo-widget--portrait-inset[data-spw-align="left"],
.ticker-body .story-photo-widget--portrait-inset[data-spw-align="right"] {
  float: none;
  width: 100%;
  max-width: 100%;
  margin: 18px 0;
}

.ticker-body .story-photo-widget__full {
  display: block;
  width: 100%;
  height: auto;
  color: inherit;
  text-decoration: none;
}

.ticker-body .story-photo-widget--filmstrip .story-photo-widget__items,
.ticker-body .story-photo-widget--lead-pair .story-photo-widget__items,
.ticker-body .story-photo-widget--split-pair .story-photo-widget__items,
.ticker-body .story-photo-widget--photo-stack .story-photo-widget__items {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  aspect-ratio: auto;
  overflow: visible;
}

.ticker-body .story-photo-widget--lead-pair .story-photo-widget__item[data-spw-lead="1"] {
  grid-column: auto;
  grid-row: auto;
}

.ticker-body .story-photo-widget .story-photo-widget__image,
.ticker-body .story-photo-widget .story-photo-widget__full {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

html.dark-mode .story-photo-widget__meta,
html.dark-mode .story-photo-widget__group-caption {
  color: var(--dm-text-secondary, #e2e2e2);
}

html.dark-mode .story-photo-widget__credit {
  color: var(--dm-text-muted, #a0a0a0);
}

html.dark-mode .story-photo-widget--single .story-photo-widget__meta.caption .story-photo-widget__credit {
  color: #fff;
}

@media (max-width: 768px) {
  .story-photo-widget {
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
  }

  #story_body .story-photo-widget--single {
    width: 100%;
    max-width: 100% !important;
    margin-inline: 0;
  }

  .story-photo-widget--filmstrip .story-photo-widget__items {
    display: flex;
    gap: 10px;
    padding-bottom: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .story-photo-widget--filmstrip .story-photo-widget__item {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }

  .story-photo-widget--lead-pair .story-photo-widget__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    aspect-ratio: auto;
  }

  .story-photo-widget--lead-pair .story-photo-widget__item[data-spw-lead="1"] {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .story-photo-widget--lead-pair .story-photo-widget__item[data-spw-lead="1"] .story-photo-widget__image {
    aspect-ratio: auto;
    height: auto;
    object-fit: contain;
  }

  .story-photo-widget--lead-pair .story-photo-widget__item:not([data-spw-lead="1"]) .story-photo-widget__image {
    aspect-ratio: 4 / 3;
  }

  .story-photo-widget--portrait-inset,
  .story-photo-widget--portrait-inset[data-spw-align="left"],
  .story-photo-widget--portrait-inset[data-spw-align="right"] {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
  }
}

@media (max-width: 480px) {
  .story-photo-widget--lead-pair .story-photo-widget__items,
  .story-photo-widget--split-pair .story-photo-widget__items {
    grid-template-columns: minmax(0, 1fr);
  }

  .story-photo-widget--lead-pair .story-photo-widget__item[data-spw-lead="1"] {
    grid-column: auto;
  }
}

@media print {
  .story-photo-widget,
  .story-photo-widget--portrait-inset,
  .story-photo-widget--portrait-inset[data-spw-align="left"],
  .story-photo-widget--portrait-inset[data-spw-align="right"] {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 14pt 0;
    break-inside: avoid;
  }

  .story-photo-widget--filmstrip .story-photo-widget__items {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    scroll-snap-type: none;
  }

  .story-photo-widget--lead-pair .story-photo-widget__items,
  .story-photo-widget--split-pair .story-photo-widget__items,
  .story-photo-widget--photo-stack .story-photo-widget__items {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    aspect-ratio: auto;
  }

  .story-photo-widget--lead-pair .story-photo-widget__item[data-spw-lead="1"] {
    grid-column: auto;
    grid-row: auto;
  }

  .story-photo-widget .story-photo-widget__image,
  .story-photo-widget .story-photo-widget__full {
    aspect-ratio: auto;
    height: auto;
    object-fit: contain;
  }

  .story-photo-widget__meta {
    position: static;
    display: block;
    background: none;
    color: #222;
  }

  .story-photo-widget--filmstrip .story-photo-widget__meta,
  .story-photo-widget--lead-pair .story-photo-widget__meta,
  .story-photo-widget--split-pair .story-photo-widget__meta {
    display: block;
  }

  .story-photo-widget--single .story-photo-widget__meta.caption {
    position: static;
    padding: 6pt 0 0;
    background: none;
    color: #222;
    text-shadow: none;
  }

  .story-photo-widget--single .story-photo-widget__meta.caption .story-photo-widget__credit {
    color: #444;
  }

  html.dark-mode .story-photo-widget--single .story-photo-widget__meta.caption .story-photo-widget__credit {
    color: #444;
  }

  .story-photo-widget__credit {
    color: #444;
  }
}