/**
 * Story page — mobile-first reading experience
 * Loaded only on single-story pages (story.php)
 */

/* Prevent horizontal overflow from CMS HTML */
.page-shell--story{
  overflow-x:clip;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.page-shell--story .page-main{
  min-width:0;
  max-width:100%;
}

.article--story{
  width:100%;
  max-width:72ch;
}
.article--story > h1{
  font-size:clamp(1.5rem, 5.5vw, 2.35rem);
  line-height:1.2;
  letter-spacing:-.02em;
  margin-bottom:12px;
  overflow-wrap:break-word;
  word-wrap:break-word;
  hyphens:auto;
}

/* Meta + tags */
.article--story .breadcrumb{
  font-size:clamp(0.72rem, 2.5vw, 0.82rem);
  line-height:1.5;
  gap:4px 6px;
}
.article--story .breadcrumb span{
  display:inline-block;
  max-width:min(100%, 42ch);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:bottom;
}
.article--story .tag-row{margin-bottom:10px}
.article--story .tag{font-size:0.7rem}

.article--story .article-meta{
  gap:8px 14px;
  font-size:clamp(0.78rem, 2.4vw, 0.86rem);
  line-height:1.45;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}

/* Featured image */
.article--story .article-hero{
  width:100%;
  max-width:100%;
  margin:20px 0 28px;
  aspect-ratio:16 / 9;
  border-radius:clamp(10px, 2.5vw, var(--radius-lg));
  overflow:hidden;
  box-shadow:var(--shadow-md);
  background:var(--cream-2);
}
.article--story .article-hero img{
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}

/* —— Story prose (CMS content) —— */
.article--story .story-prose{
  font-size:clamp(1.0625rem, 2.9vw, 1.125rem);
  line-height:1.78;
  letter-spacing:0.01em;
  max-width:68ch;
  color:var(--ink);
  overflow-wrap:break-word;
  word-wrap:break-word;
  -webkit-hyphens:auto;
  hyphens:auto;
}

.story-prose > *:first-child{margin-top:0!important}
.story-prose > *:last-child{margin-bottom:0!important}

.story-prose p{
  margin:1.15em 0;
  color:var(--ink-soft);
}
.story-prose p:empty{display:none}

.story-prose h2{
  font-size:clamp(1.35rem, 4.5vw, 1.65rem);
  line-height:1.25;
  margin:1.65em 0 0.55em;
  color:var(--red-deep);
}
.story-prose h3{
  font-size:clamp(1.15rem, 3.8vw, 1.35rem);
  line-height:1.3;
  margin:1.45em 0 0.45em;
  color:var(--red-deep);
}
.story-prose h4{
  font-size:clamp(1.05rem, 3.2vw, 1.15rem);
  line-height:1.35;
  margin:1.25em 0 0.4em;
  color:var(--red-deep);
}

.story-prose strong,
.story-prose b{font-weight:600;color:var(--ink)}
.story-prose em,
.story-prose i{font-style:italic}

.story-prose a{
  color:var(--red);
  text-decoration:underline;
  text-underline-offset:3px;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.story-prose a:hover{color:var(--gold)}

.story-prose ul,
.story-prose ol{
  margin:1.1em 0;
  padding-left:1.35em;
}
.story-prose li{
  margin:0.4em 0;
  padding-left:0.2em;
  color:var(--ink-soft);
}
.story-prose li::marker{color:var(--gold)}

.story-prose blockquote{
  margin:1.5em 0;
  padding:14px 18px 14px 20px;
  border-left:4px solid var(--gold);
  background:rgba(255,248,240,.85);
  border-radius:0 var(--radius) var(--radius) 0;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.05rem, 3.5vw, 1.2rem);
  line-height:1.65;
  color:var(--red-deep);
  overflow-wrap:break-word;
}

/* Images */
.story-prose img{
  display:block;
  max-width:100%!important;
  width:auto!important;
  height:auto!important;
  margin:1.35em auto;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.story-prose figure{
  margin:1.35em 0;
  max-width:100%;
}
.story-prose figure img{margin:0}

.story-prose div{
  max-width:100%;
}
.story-prose div:has(> iframe:only-child){
  margin:1.35em 0;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--cream-2);
}

/* YouTube / embeds */
.story-prose iframe{
  display:block;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  aspect-ratio:16 / 9;
  min-height:180px;
  margin:1.35em 0;
  border:0;
  border-radius:var(--radius);
  background:var(--cream-2);
}

/* Tables (scroll on narrow screens) */
.story-prose table{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:1.35em 0;
  border-collapse:collapse;
  font-size:0.92em;
}
.story-prose thead,
.story-prose tbody,
.story-prose tr{display:table;width:100%;table-layout:auto}
.story-prose th,
.story-prose td{
  padding:10px 12px;
  border:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  min-width:80px;
}

.story-prose pre,
.story-prose code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:0.88em;
}
.story-prose pre{
  display:block;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:1.25em 0;
  padding:14px 16px;
  background:var(--cream-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  white-space:pre-wrap;
  word-break:break-word;
}
.story-prose code{
  padding:2px 6px;
  background:var(--cream-2);
  border-radius:4px;
}

/* Quill alignment helpers */
.story-prose .ql-align-center{text-align:center}
.story-prose .ql-align-center img{margin-inline:auto}
.story-prose .ql-align-right{text-align:right}
.story-prose .ql-align-justify{text-align:justify}

/* In-story ads */
.article--story .ad-slot{
  margin:clamp(20px, 5vw, 32px) 0;
  padding:0;
  max-width:100%;
  width:100%;
  overflow:hidden;
}
.article--story .ad-slot__inner,
.article--story .ad-slot iframe,
.article--story .ad-slot ins{
  max-width:100%!important;
  margin-left:auto;
  margin-right:auto;
}

/* FAQ, related, CTA */
.article--story .sep{
  margin:clamp(32px, 8vw, 56px) 0;
}
.article--story .article-section-title{
  font-size:clamp(1.25rem, 4vw, 1.55rem);
  margin-bottom:16px;
}
.article--story .faq--article{
  max-width:100%;
  width:100%;
}
.article--story .faq-q{
  font-size:clamp(0.98rem, 3.2vw, 1.08rem);
  padding:16px 18px;
  gap:10px;
}
.article--story .faq-a{
  font-size:clamp(0.92rem, 2.8vw, 1rem);
  line-height:1.65;
}
.article--story .faq-item.open .faq-a{
  padding:0 18px 18px;
}

.article--story .grid--related{
  width:100%;
  max-width:100%;
  gap:clamp(16px, 4vw, 24px);
}
.article--story .contact-form--inline{
  padding:clamp(20px, 5vw, 28px);
  max-width:100%;
}
.article--story .contact-form--inline .whatsapp-cta{
  width:100%;
  justify-content:center;
  min-height:48px;
}

/* Mobile share row (desktop uses share-sticky) */
.story-share-mobile{
  display:none;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 20px;
  padding:0;
}
.story-share-mobile button{
  min-width:44px;
  min-height:44px;
  padding:0 14px;
  border-radius:999px;
  background:#fff;
  color:var(--red-deep);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
  font-size:0.85rem;
  font-weight:600;
  touch-action:manipulation;
}
.story-share-mobile button:hover{
  background:var(--red);
  color:#fff;
}

/* —— Breakpoints —— */
@media(max-width:767px){
  .page-shell--story{
    padding-top:88px;
    padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .article--story .article-hero{
    margin:16px 0 22px;
  }
  .article--story .article-meta{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  .article--story .article-meta > span:empty{display:none}
  .story-share-mobile{display:flex}
  .article--story .grid--related{
    grid-template-columns:1fr;
  }
}

@media(min-width:768px) and (max-width:1023px){
  .page-shell--story{
    padding-top:100px;
  }
  .article--story{
    max-width:none;
  }
  .article--story .story-prose{
    max-width:min(68ch, 100%);
  }
  .article--story .grid--related{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media(min-width:1024px){
  .article--story .story-prose{
    font-size:1.125rem;
    line-height:1.82;
  }
  .article--story .grid--related{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

/* Very small phones (320–360px) */
@media(max-width:360px){
  .page-shell--story{
    padding-left:12px;
    padding-right:12px;
  }
  .article--story > h1{
    font-size:1.42rem;
  }
  .story-prose{
    font-size:1.03rem;
    line-height:1.74;
  }
  .story-prose blockquote{
    padding:12px 14px 12px 16px;
  }
  .story-prose iframe{min-height:160px}
}

/* Sticky footer ad: extra prose padding when ad visible */
@media(max-width:760px){
  body.has-sticky-ad .page-shell--story{
    padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

@media(prefers-reduced-motion:reduce){
  .story-prose iframe{transition:none}
}