/* Step 4: story page, from the approved article mockup. Scoped to our templates. */
.ai-site .read-progress { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; height: 3px; width: 100%; z-index: 40; background: var(--sky); transform-origin: left; transform: scaleX(0); }
.ai-site .article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; padding-block: 28px 56px; }
.ai-site .story { min-width: 0; max-width: 760px; display: grid; gap: 18px; align-content: start; }
.ai-site .crumbs { display: flex; gap: 8px; font-size: 13px; color: var(--muted); }
.ai-site .crumbs a:hover { color: var(--link); }
.ai-site .story-title { font-size: clamp(30px, 4vw, 46px); line-height: 1.12; margin: 0; letter-spacing: -0.015em; }
.ai-site .story-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-block: 14px; border-block: 1px solid var(--rule); }
.ai-site .writer { display: flex; align-items: center; gap: 12px; }
.ai-site .writer .meta { font-size: 14px; }
.ai-site .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #ffffff; font-weight: 700; font-size: 14px; flex: none; }
.ai-site .avatar.lg { width: 64px; height: 64px; font-size: 20px; }
.ai-site .share { display: flex; gap: 8px; }
.ai-site .share-btn { height: 38px; min-width: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; border: 0; background: var(--paper-2); color: var(--text); font: 600 13px var(--body); cursor: pointer; transition: background-color .2s; }
.ai-site .share-btn:hover { background: color-mix(in srgb, var(--sky) 25%, var(--paper-2)); }
.ai-site .share-btn.wa { background: #1f9d55; color: #ffffff; padding: 0 14px; }
.ai-site .share-btn.wa:hover { background: #18864a; }
.ai-site .story-hero { margin: 4px 0 6px; }
.ai-site .story-hero img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 25%; border-radius: 4px; }
.ai-site .story-body { font-family: var(--display); font-size: 20px; line-height: 1.7; max-width: 68ch; }
.ai-site .story-body p { margin: 0 0 1.1em; }
.ai-site .story-body > p:first-of-type { margin-top: .3em; }
.ai-site .story-body > p:first-of-type::first-letter { font-weight: 700; font-size: 2.6em; line-height: 1; margin-right: .04em; color: var(--link); }
@supports (initial-letter: 2 1) or (-webkit-initial-letter: 2 1) {
  .ai-site .story-body > p:first-of-type::first-letter { font-size: inherit; line-height: inherit; margin-right: .06em; -webkit-initial-letter: 2 1; initial-letter: 2 1; }
}
.ai-site .story-body .caps { font-size: .84em; letter-spacing: .03em; font-weight: 600; }
.ai-site .story-body .editor-note { font-family: var(--body); font-size: 15px; line-height: 1.6; background: var(--paper-2); border-left: 4px solid var(--sky); padding: 16px 18px; border-radius: 0 4px 4px 0; color: var(--muted); }
.ai-site .story-body .editor-note b { color: var(--text); }
.ai-site .story-body .ad { margin: 8px auto 28px; }
.ai-site .small-h { display: block; font-family: var(--body); font-size: 14px; font-weight: 700; margin: 0 0 10px; color: var(--muted); }
.ai-site .story-tags ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ai-site .story-tags a { display: block; padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); font-size: 13px; font-weight: 600; }
.ai-site .story-tags a:hover { box-shadow: inset 0 0 0 1px var(--sky); color: var(--link); }
.ai-site .author-box { display: flex; gap: 16px; align-items: center; padding: 20px; background: var(--paper-2); border-radius: 6px; }
.ai-site .author-box .small-h { margin: 0; }
.ai-site .author-box strong { display: block; font-family: var(--display); font-size: 20px; margin: 2px 0 4px; }
.ai-site .author-box a { color: var(--link); font-weight: 600; font-size: 14px; }
.ai-site .comments h2 { font-family: var(--display); font-size: 24px; margin: 0; }
.ai-site .com-empty { margin: 6px 0 16px; color: var(--muted); font-size: 15px; }
.ai-site .composer { border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); transition: border-color .2s, box-shadow .2s; overflow: hidden; }
.ai-site .composer:focus-within { border-color: var(--sky); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sky) 22%, transparent); }
.ai-site .composer-top { display: flex; gap: 12px; align-items: flex-start; padding: 16px 16px 8px; }
.ai-site .avatar.sm { width: 36px; height: 36px; background: var(--paper-2); color: var(--muted); }
.ai-site .composer textarea { flex: 1; min-width: 0; border: 0; outline: none; resize: none; background: transparent; color: var(--text); font: 17px/1.55 var(--display); padding: 6px 0; min-height: 56px; field-sizing: content; max-height: 260px; }
.ai-site .composer textarea::placeholder, .ai-site .composer input::placeholder { color: var(--muted); }
.ai-site .composer-bottom { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 16px; background: var(--paper-2); border-top: 1px solid var(--rule); }
.ai-site .composer input { flex: 1 1 160px; min-width: 0; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px; background: var(--paper); color: var(--text); font: 14px var(--body); outline: none; transition: border-color .2s; }
.ai-site .composer input:focus { border-color: var(--sky); }
.ai-site .composer .btn { flex: none; background: var(--ink); color: #ffffff; padding: 10px 18px; font-size: 14px; border-radius: 8px; transition: opacity .2s, background-color .2s; }
.ai-site .composer .btn:disabled { opacity: .45; cursor: not-allowed; }
.ai-site .composer .btn:not(:disabled):hover { background: #1d43a8; }
.ai-site .com-help { margin: 10px 2px 0; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .ai-site .composer-bottom input { flex-basis: 100%; }
  .ai-site .composer .btn { width: 100%; }
}
.ai-site .story-side { min-width: 0; }
.ai-site .side-sticky { position: sticky; top: 90px; display: grid; gap: 28px; }
.ai-site .side-latest ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: n; }
.ai-site .side-latest li { padding-block: 12px; border-top: 1px solid var(--rule); }
.ai-site .side-latest .hl { font-size: 17px; line-height: 1.3; }
.ai-site .related { padding-block: 8px 24px; }
@media (max-width: 960px) {
  .ai-site .article-grid { grid-template-columns: minmax(0, 1fr); }
  .ai-site .story { max-width: none; }
  .ai-site .side-sticky { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ai-site .story-body { font-size: 18px; }
  .ai-site .story-meta { flex-direction: column; align-items: flex-start; }
  .ai-site .side-sticky { grid-template-columns: 1fr; }
  .ai-site .share-btn.wa span { display: inline; }
}

/* ---------- Additions for real WordPress content ---------- */
.ai-site .story-hero figcaption, .ai-site .story-body figcaption { margin-top: 8px; font-family: var(--body); font-size: 13px; line-height: 1.5; color: var(--muted); }
.ai-site .story-body > * { max-width: 100%; }
.ai-site .story-body :is(h2, h3, h4) { font-family: var(--display); line-height: 1.25; margin: 1.4em 0 .5em; }
.ai-site .story-body h2 { font-size: 1.3em; } .ai-site .story-body h3 { font-size: 1.15em; }
.ai-site .story-body a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ai-site .story-body :is(ul, ol) { margin: 0 0 1.1em; padding-left: 1.3em; }
.ai-site .story-body blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--sky); font-style: italic; }
.ai-site .story-body figure { margin: 1.4em 0; }
.ai-site .story-body img { border-radius: 4px; }
.ai-site .story-body .aligncenter { margin-inline: auto; text-align: center; }
.ai-site .story-body .aligncenter img { margin-inline: auto; }
.ai-site .story-body iframe, .ai-site .story-body video { max-width: 100%; }
.ai-site .story-body .has-background { padding: 14px 18px; border-radius: 4px; }
.ai-site .story-body .wp-block-embed__wrapper { position: relative; }
.ai-site .author-bio { margin: 0 0 6px; font-size: 15px; color: var(--muted); }
.ai-site .page-links { display: flex; gap: 8px; font-weight: 700; }

/* WordPress comment list */
.ai-site .comment-list { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; gap: 14px; }
.ai-site .comment-list .children { list-style: none; margin: 12px 0 0 22px; padding: 0 0 0 16px; border-left: 2px solid var(--rule); }
.ai-site .comment-body { padding: 14px 16px; border-radius: 10px; background: var(--paper-2); }
.ai-site .comment-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.ai-site .comment-author .fn { font-weight: 700; color: var(--text); font-style: normal; }
.ai-site .comment-author .says { display: none; }
.ai-site .comment-content p { margin: 0 0 .6em; font-family: var(--display); font-size: 16.5px; line-height: 1.6; }
.ai-site .comment-awaiting-moderation { font-size: 13px; color: var(--muted); }
.ai-site .reply a { font-size: 13px; font-weight: 700; color: var(--link); }
.ai-site .comment-respond .comment-reply-title small a { font-size: 13px; color: var(--link); }
.ai-site .composer .form-submit { margin: 0; }
.ai-site .share-btn.is-copied { background: var(--sky); color: #0b2260; }

/* WordPress colour presets force their background with !important. Keep such boxes readable in dark mode
   (they stay light, so their text stays dark), and give editor's notes our own note style in both modes. */
.ai-site .story-body .has-background:not(.editor-note) { color: #0e1428; }
.ai-site .story-body .editor-note.has-background { background: var(--paper-2) !important; color: var(--muted); }
.ai-site .story-body .editor-note :is(strong, b) { color: var(--text); }

/* The ad space inside the story keeps the interface font and button style (not the story's serif or link underline). */
.ai-site .story-body .ad { font-family: var(--body); line-height: 1.4; }
.ai-site .story-body .ad .ad-copy strong { font-family: var(--display); }
.ai-site .story-body .ad a { text-decoration: none; color: var(--tag-fg); }

/* All In One Security's anti-spam question in the comment form: its own clean row, then the button on the right. */
.ai-site .composer .aiowps-captcha { flex: 1 1 100%; margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.ai-site .composer .aiowps-captcha-equation { flex: 1 1 auto; display: flex; align-items: center; }
.ai-site .composer .aiowps-captcha-equation strong { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--text); }
.ai-site .composer input.aiowps-captcha-answer { flex: 0 0 72px; width: 72px; text-align: center; font-weight: 700; }
.ai-site .composer [type="submit"] { margin-left: auto; }
@media (max-width: 640px) {
  .ai-site .composer .aiowps-captcha-equation { flex-basis: 100%; }
  .ai-site .composer input.aiowps-captcha-answer { flex: 0 0 72px; }
}
.ai-site .composer-bottom > p:empty { display: none; }

/* Justified story text at every screen size, like the printed paper (requested by the client side).
   Automatic hyphenation keeps the gaps between words small, which matters most in narrow phone columns.
   Also covers paragraphs inside quotes and media blocks. */
.ai-site .story-body p:not(.editor-note), .ai-site .story-body li { text-align: justify; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; }

/* "More from <section>": compact cards (small square photo beside the headline) with a hover effect.
   The whole card is clickable: the headline link stretches over it. */
.ai-site .rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ai-site .rel-grid article { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 16px; row-gap: 6px; align-content: start;
  padding: 12px; margin: -12px; border-radius: 10px; transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.ai-site .rel-grid article > * { grid-column: 2; }
.ai-site .rel-thumb { grid-column: 1 !important; grid-row: 1 / span 3; width: 120px; height: 120px; border-radius: 6px; overflow: hidden; background: var(--paper-2); }
.ai-site .rel-thumb .thumb { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .45s cubic-bezier(.3,.8,.2,1); }
.ai-site .rel-grid .tag { margin-top: 2px; }
.ai-site .rel-grid h3 { font-size: 17px; line-height: 1.3; margin: 0; }
.ai-site .rel-grid .meta { font-size: 12.5px; align-self: end; }
.ai-site .rel-link::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
.ai-site .rel-grid article:hover, .ai-site .rel-grid article:focus-within { background: var(--paper-2); box-shadow: 0 10px 24px rgba(11, 34, 96, .10); transform: translateY(-2px); }
.ai-site .rel-grid article:hover .thumb, .ai-site .rel-grid article:focus-within .thumb { transform: scale(1.06); }
.ai-site .rel-grid article:hover .hl, .ai-site .rel-grid article:focus-within .hl { color: var(--link); }
.ai-site .rel-link:focus-visible { outline: none; }
.ai-site .rel-grid article:focus-within { outline: 3px solid var(--sky); outline-offset: 2px; }
@media (max-width: 960px) {
  .ai-site .rel-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 640px) {
  .ai-site .rel-grid article { grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; }
  .ai-site .rel-thumb { width: 96px; height: 96px; }
  .ai-site .rel-grid h3 { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-site .rel-grid article, .ai-site .rel-thumb .thumb { transition: none; }
  .ai-site .rel-grid article:hover { transform: none; }
}

/* Main photo size.
   1. When a story has no featured image, its first photo (inside the text) becomes the main photo:
      same 16:10 landscape frame as a featured image, cropped from the upper part so faces stay in view.
   2. Every other photo in a story is limited to 75% of the screen height and centred. */
.ai-site .story:not(.has-post-thumbnail) .story-body > :first-child:is(.wp-block-image, figure) { margin: 4px 0 1.4em; }
.ai-site .story:not(.has-post-thumbnail) .story-body > :first-child:is(.wp-block-image, figure) figure { margin: 0; }
.ai-site .story:not(.has-post-thumbnail) .story-body > :first-child:is(.wp-block-image, figure) img { width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 25%; }
.ai-site .story-body img { max-height: 75vh; width: auto; margin-inline: auto; }

/* PDFs shown on the page (WordPress File block with inline embed), e.g. Legal documents */
.ai-site .story-body .wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 24px 0; padding: 0; text-align: left; }
.ai-site .story-body .wp-block-file__embed { display: block; width: 100%; height: min(80vh, 900px) !important; min-height: 480px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper-2); margin-bottom: 4px; }
.ai-site .story-body .wp-block-file > a:not(.wp-block-file__button) { font-weight: 600; color: var(--link); text-align: left; hyphens: manual; }
.ai-site .story-body .wp-block-file__button { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: #ffffff; font: 700 14px var(--body); text-decoration: none; }
.ai-site .story-body .wp-block-file__button:hover { background: #1d43a8; color: #ffffff; }

/* Captions the editor placed over photos, now shown under the photo (see astute_ink_story_html) */
.ai-site .story-body p.photo-caption { margin: -8px 0 1.4em; text-align: center; font: italic 14.5px/1.5 var(--body); color: var(--muted); hyphens: manual; }
/* Any other highlighted text from the old editor (tagDiv's marker): light text on its own dark background */
.ai-site .story-body .td_text_highlight_marker { color: #ffffff; padding: 0 .25em; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Comments on phones */
.ai-site .comment-author img.avatar { width: 32px; height: 32px; border-radius: 50%; vertical-align: middle; margin-right: 8px; }
.ai-site .comment-list .reply { margin-top: 6px; }
.ai-site .comment-list .reply a { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); color: var(--link); font: 600 13px var(--body); text-decoration: none; }
.ai-site .comment-content { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .ai-site .comment-list .children { margin-left: 6px; padding-left: 10px; }
  .ai-site .comment-body { padding: 12px 13px; }
  .ai-site .comment-content p { font-size: 16px; }
  .ai-site .composer-top { padding: 12px 12px 6px; }
  .ai-site .composer-top > :not(textarea) { display: none; } /* the person icon: more room for typing */
  .ai-site .composer textarea { min-height: 110px; font-size: 16px; }
  .ai-site .composer-bottom { padding: 12px; }
  /* 16px or more stops phones from zooming the page when a field is tapped */
  .ai-site .composer input, .ai-site .composer select { font-size: 16px; padding: 12px; }
  .ai-site .composer .aiowps-captcha-equation strong { font-size: 16px; }
  .ai-site .composer .btn { padding: 13px 18px; font-size: 15px; }
}