/* ================================================================
   STORY Magazine G2 — Legacy Article Compatibility
   Phase 7 — Legacy Article Compatibility
   Safe presentation layer for pre-existing article content.
   Never overrides Phase 2–6 locked styles.
   Never weakens security.
   ================================================================= */

/* ----------------------------------------------------------------
   SCOPE
   All legacy styles are scoped under .story-article-body to avoid
   leaking into Phase 6 composer blocks or other theme components.
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   1. CONTENT MODE OVERRIDES
   ---------------------------------------------------------------- */
/* Exception content: ensure visibility even if parsing fails */
.story-content-mode--exception .story-article-body {
  max-width: var(--story-reading);
  margin-inline: auto;
}

/* ----------------------------------------------------------------
   2. CLASSIC HTML — Safe Presentation
   ---------------------------------------------------------------- */

/* Ensure all block-level elements within legacy content
   respect reading measure and paragraph rhythm */
.story-article-body > h2,
.story-article-body > h3,
.story-article-body > h4,
.story-article-body > h5,
.story-article-body > h6 {
  max-width: var(--story-reading);
  margin-left: auto;
  margin-right: auto;
}

.story-article-body > h4 {
  margin-top: 2em;
  margin-bottom: 0.6em;
  font: var(--font-weight-medium) 18px/24px var(--story-font);
}

.story-article-body > h5 {
  margin-top: 1.8em;
  margin-bottom: 0.5em;
  font: var(--font-weight-medium) 16px/22px var(--story-font);
}

.story-article-body > h6 {
  margin-top: 1.6em;
  margin-bottom: 0.5em;
  font: var(--font-weight-medium) 14px/20px var(--story-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

/* Ensure <p> elements not already styled get reading typography */
.story-article-body > p {
  margin: 0 0 40px;
  font: var(--font-weight-light) 20px/30px var(--story-font);
}

/* Strong / emphasis within legacy paragraphs */
.story-article-body strong,
.story-article-body b {
  font-weight: 500;
}

.story-article-body em,
.story-article-body i {
  font-style: italic;
}

/* Links within legacy content */
.story-article-body > p > a,
.story-article-body > li > a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ----------------------------------------------------------------
   3. ALIGNMENTS — Legacy WordPress Align Classes
   Source: WordPress core alignleft/alignright/aligncenter/alignnone
   ---------------------------------------------------------------- */

.story-article-body .alignleft {
  float: left;
  margin: 0 24px 16px 0;
  max-width: 50%;
}

.story-article-body .alignright {
  float: right;
  margin: 0 0 16px 24px;
  max-width: 50%;
}

.story-article-body .aligncenter {
  display: block;
  margin: 40px auto;
  max-width: 100%;
}

.story-article-body .alignnone {
  display: block;
  margin: 40px auto;
  max-width: 100%;
}

.story-article-body .alignwide {
  width: min(100%, var(--story-wide));
  margin: 40px auto;
}

.story-article-body .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Contain aligned images */
.story-article-body .alignleft img,
.story-article-body .alignright img {
  width: 100%;
  height: auto;
}

.story-article-body .aligncenter img,
.story-article-body .alignnone img,
.story-article-body .alignwide img {
  width: 100%;
  height: auto;
}

/* ----------------------------------------------------------------
   4. FLOAT COLLAPSE — Mobile Safety
   At narrow widths, floats must collapse so content is usable.
   ---------------------------------------------------------------- */

@media (max-width: 639px) {
  .story-article-body .alignleft,
  .story-article-body .alignright {
    float: none;
    display: block;
    max-width: 100%;
    margin: 24px auto;
  }
}

/* ----------------------------------------------------------------
   5. FIGURE / FIGCAPTION — Legacy Gallery & Image Containers
   ---------------------------------------------------------------- */

.story-article-body figure {
  margin: 40px auto;
}

.story-article-body figure.alignleft {
  margin: 0 24px 16px 0;
}

.story-article-body figure.alignright {
  margin: 0 0 16px 24px;
}

.story-article-body figcaption,
.story-article-body .wp-caption-text {
  margin-top: 8px;
  font: var(--font-weight-normal) 12px/16px var(--story-font);
  color: var(--color-muted);
}

/* WordPress caption class (classic editor) */
.story-article-body .wp-caption {
  max-width: 100%;
  margin: 40px auto;
}

.story-article-body .wp-caption img {
  display: block;
  width: 100%;
  height: auto;
}

.story-article-body .wp-caption-text {
  padding: 8px 0 0;
}

/* ----------------------------------------------------------------
   6. LEGACY GALLERY — WordPress Core Gallery Block & [gallery]
   ---------------------------------------------------------------- */

.story-article-body .wp-block-gallery,
.story-article-body .gallery {
  display: grid;
  gap: 4px;
  margin: 40px auto;
  padding: 0;
  list-style: none;
}

.story-article-body .wp-block-gallery .wp-block-image,
.story-article-body .gallery .gallery-item {
  margin: 0;
}

.story-article-body .wp-block-gallery .wp-block-image img,
.story-article-body .gallery .gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 50%;
}

.story-article-body .wp-block-gallery .wp-block-image figcaption,
.story-article-body .gallery .gallery-item .gallery-caption {
  padding: 8px 0 0;
  font: var(--font-weight-normal) 12px/16px var(--story-font);
  color: var(--color-muted);
}

/* 2 columns default */
.story-article-body .wp-block-gallery {
  grid-template-columns: repeat(2, 1fr);
}

/* is-cropped variant */
.story-article-body .wp-block-gallery.is-cropped .wp-block-image img {
  aspect-ratio: 1 / 1;
}

/* 3 columns */
.story-article-body .wp-block-gallery.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 4 columns */
.story-article-body .wp-block-gallery.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ----------------------------------------------------------------
   7. LEGACY IMAGES — Uncontained Bare Images
   ---------------------------------------------------------------- */

.story-article-body > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 40px auto;
}

/* Images with explicit inline widths — constrain to container */
.story-article-body > img[width],
.story-article-body > img[style*="width"] {
  max-width: 100%;
  height: auto;
}

/* Fixed-width legacy images — contain and prevent overflow */
.story-article-body img[width="300"],
.story-article-body img[width="400"],
.story-article-body img[width="500"],
.story-article-body img[width="600"],
.story-article-body img[width="700"],
.story-article-body img[width="800"],
.story-article-body img[width="900"],
.story-article-body img[width="1000"] {
  max-width: 100%;
  height: auto;
}

/* ----------------------------------------------------------------
   8. VIDEO / OEMBED — Responsive Containment
   ---------------------------------------------------------------- */

.story-article-body iframe,
.story-article-body embed,
.story-article-body object {
  max-width: 100%;
}

.story-article-body .wp-block-embed,
.story-article-body .wp-video,
.story-article-body video {
  margin: 40px auto;
}

.story-article-body .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.story-article-body .wp-block-embed__wrapper iframe,
.story-article-body .wp-block-embed__wrapper embed,
.story-article-body .wp-block-embed__wrapper object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* WordPress video block */
.story-article-body .wp-block-video video {
  display: block;
  width: 100%;
  height: auto;
}

/* YouTube/Vimeo responsive wrapper (common in legacy themes) */
.story-article-body .video-container,
.story-article-body .responsive-video,
.story-article-body .video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 40px auto;
}

.story-article-body .video-container iframe,
.story-article-body .responsive-video iframe,
.story-article-body .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ----------------------------------------------------------------
   9. TABLES — Responsive Containment
   Legacy tables must not break the viewport.
   ---------------------------------------------------------------- */

.story-article-body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 40px auto;
  border-collapse: collapse;
  font: var(--font-weight-normal) 14px/20px var(--story-font);
}

.story-article-body th,
.story-article-body td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: left;
  white-space: nowrap;
}

.story-article-body th {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  border-bottom-width: 2px;
}

.story-article-body caption {
  margin-bottom: 12px;
  font: var(--font-weight-normal) 12px/16px var(--story-font);
  color: var(--color-muted);
  text-align: left;
}

/* WordPress core table alignment */
.story-article-body .wp-block-table {
  margin: 40px auto;
}

.story-article-body .wp-block-table table {
  width: 100%;
}

.story-article-body .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: rgba(0, 0, 0, 0.03);
}

/* ----------------------------------------------------------------
   10. SHORTCODE CONTAINERS
   Unknown shortcodes render their output; we contain the result.
   ---------------------------------------------------------------- */

.story-article-body .story-shortcode-container {
  margin: 40px auto;
  max-width: var(--story-reading);
  min-width: 0;
  overflow-wrap: anywhere;
  overflow-x: hidden;
}

/* ----------------------------------------------------------------
   11. BLOCKQUOTE — Legacy Treatment
   ---------------------------------------------------------------- */

.story-article-body > blockquote {
  max-width: 740px;
  margin: 96px auto;
  padding: 0 20px;
  border: 0;
  font: var(--font-weight-medium) 32px/36px var(--story-font);
  text-align: center;
}

.story-article-body > blockquote p {
  margin: 0 0 24px;
  font: inherit;
}

.story-article-body > blockquote cite {
  display: block;
  font: var(--font-weight-normal) 14px/16px var(--story-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  font-style: normal;
}

/* Nested blockquotes (unusual but possible) */
.story-article-body blockquote blockquote {
  margin: 24px 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--color-border-subtle);
  font-size: 24px;
  line-height: 28px;
  text-align: left;
}

/* ----------------------------------------------------------------
   12. LISTS — Legacy
   ---------------------------------------------------------------- */

.story-article-body > ul,
.story-article-body > ol {
  max-width: var(--story-reading);
  margin: 0 auto 40px;
  padding-left: 24px;
}

.story-article-body > ul li,
.story-article-body > ol li {
  margin-bottom: 12px;
}

/* Nested lists */
.story-article-body ul ul,
.story-article-body ol ol,
.story-article-body ul ol,
.story-article-body ol ul {
  margin-bottom: 0;
}

/* ----------------------------------------------------------------
   13. INLINE STYLE CONTAINMENT
   Legacy articles may use inline width/height/font-size/margin/float.
   Only normalize values that cause overflow or layout breakage.
   ---------------------------------------------------------------- */

/* Contain images with inline fixed widths */
.story-article-body img[style*="width"] {
  max-width: 100% !important;
  height: auto !important;
}

/* Contain iframes with inline widths */
.story-article-body iframe[style*="width"] {
  max-width: 100% !important;
}

/* DO NOT globally override:
   - font-size (preserve editorial intent)
   - color (preserve editorial intent)
   - text-align (preserve editorial intent)
   - margin (only contain overflow-causing values)
   Only overflow-causing properties are normalized. */

/* ----------------------------------------------------------------
   14. PARENT THEME / VISUAL COMPOSER LEGACY MARKUP
   Minimal compatibility treatment for parent-theme classes.
   ---------------------------------------------------------------- */

/* Common VC / page builder wrappers — contain but don't style */
.story-article-body .vc_row,
.story-article-body .vc_row-fluid,
.story-article-body .vc_column-inner,
.story-article-body .wpb_wrapper,
.story-article-body .elementor-section,
.story-article-body .elementor-widget-container {
  max-width: 100%;
}

.story-article-body .vc_row img,
.story-article-body .wpb_wrapper img {
  max-width: 100%;
  height: auto;
}

/* ----------------------------------------------------------------
   15. WORDPRESS CORE BLOCK OVERRIDES (for legacy blocks)
   Ensure core blocks render safely within reading measure.
   ---------------------------------------------------------------- */

.story-article-body .wp-block-quote {
  max-width: 740px;
  margin: 96px auto;
  padding: 0 20px;
  border: 0;
  font: var(--font-weight-medium) 32px/36px var(--story-font);
  text-align: center;
}

.story-article-body .wp-block-quote cite {
  display: block;
  font: var(--font-weight-normal) 14px/16px var(--story-font);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  font-style: normal;
}

.story-article-body .wp-block-separator {
  max-width: 80px;
  margin: 96px auto;
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
}

.story-article-body .wp-block-columns {
  display: grid;
  gap: 40px;
  max-width: var(--story-wide);
  margin: 40px auto;
}

.story-article-body .wp-block-column {
  min-width: 0;
}

/* ----------------------------------------------------------------
   16. SAFE FALLBACK — Unsupported Content
   Every unsupported article must still render. Fallback:
   - article shell intact
   - content visible
   - width contained
   - no overflow
   ---------------------------------------------------------------- */

.story-content-mode--exception .story-article-body {
  padding: 40px 20px;
}

.story-content-mode--exception .story-article-body * {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ----------------------------------------------------------------
   17. PRINT — Legacy Compatibility
   ---------------------------------------------------------------- */

@media print {
  .story-article-body .alignleft,
  .story-article-body .alignright {
    float: none;
    display: block;
    max-width: 100%;
    margin: 16px auto;
  }

  .story-article-body .alignfull {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .story-article-body table {
    overflow: visible;
    display: table;
  }
}

/* ----------------------------------------------------------------
   18. REDUCED MOTION — Respect user preference
   ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .story-article-body iframe,
  .story-article-body video {
    animation: none !important;
    transition: none !important;
  }
}