/* Loaded only on single review pages — see wp_enqueue_style() call in single.php */

.review-header { padding: 40px 0 0; }
.review-crumb { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); margin-bottom: 18px; }
.review-crumb a { color: var(--ink-faint); }
.review-crumb a:hover { color: var(--accent-deep); }

.review-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; padding-bottom: 60px; }

.review-title { font-size: 36px; margin-bottom: 14px; }
.review-topline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.review-topline .chip a { color: inherit; }
.review-date { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }

.review-hero-media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    margin-bottom: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
}
.review-hero-media img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }

.review-score-strip {
    display: flex; align-items: center; gap: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    margin: 24px 0 32px;
    box-shadow: var(--shadow-sm);
}
.review-score-strip .score-copy .label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.review-score-strip .score-copy .verdict { font-family: var(--font-display); font-size: 18px; margin-top: 2px; }

.page-body {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 34px 36px;
    margin-top: 28px;
    box-shadow: var(--shadow-sm);
    font-size: 17.5px;
    line-height: 1.85;
    color: var(--ink);
}
.page-body > *:first-child { margin-top: 0; }
.page-body > *:last-child { margin-bottom: 0; }
.page-body p { margin-bottom: 1.35em; }
.page-body h2 { font-size: 24px; margin-top: 2em; margin-bottom: .6em; }
.page-body h3 { font-size: 19px; margin-top: 1.6em; margin-bottom: .5em; }
.page-body blockquote {
    margin: 1.8em 0;
    padding: 6px 24px;
    border-left: 3px solid var(--accent);
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--ink-soft);
    font-style: italic;
}
.page-body img {
    border-radius: var(--radius-md);
    margin: 1.2em auto;
    box-shadow: var(--shadow-md);
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 80vh;
    object-fit: contain;
}
/* Some post content wraps images in a <p>/<div>/<figure> that carries a
   fixed or reserved height (leftover from a lazy-load placeholder sized
   for the old stretched-image height). Now that the image itself scales
   to its correct proportions, that reserved space is left behind as an
   empty gap — collapse it back to auto on any such wrapper. */
.page-body p:has(> img),
.page-body div:has(> img),
.page-body figure:has(> img),
.page-body span:has(> img) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 0;
}
.page-body a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
    .page-body { padding: 24px 20px; border-radius: var(--radius-md); }
}

/* Trailer / video embeds inside the review body */
.page-body iframe { width: 100%; aspect-ratio: 16/9; height: auto; border-radius: var(--radius-md); border: none; box-shadow: var(--shadow-md); }
.yt-facade {
    position: relative;
    width: 100%; aspect-ratio: 16/9;
    background-size: cover; background-position: center;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.yt-facade::after { content: ""; position: absolute; inset: 0; background: rgba(20,22,28,.15); border-radius: inherit; transition: background .15s ease; }
.yt-facade:hover::after { background: rgba(20,22,28,.3); }
.yt-facade-play { position: relative; z-index: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); }

/* "Where to Watch" / download-now button injected into the review
   body by the AI rewriter plugin (class comes from the plugin, not
   the theme, so it needs its own rule set here). The plugin wraps it
   in a plain <p>, so we center via that parent paragraph. */
.page-body p.cmdb-download-wrap,
.page-body p:has(> a.cmdb-download-btn) {
    text-align: center;
    margin: 1.75em 0;
}
.page-body a.cmdb-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 34px;
    border-radius: 999px;
    background: var(--teal);
    color: #14151A;
    font-family: var(--font-mono, inherit);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .02em;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.page-body a.cmdb-download-btn:hover {
    color: #14151A;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    filter: brightness(1.05);
}
.page-body a.cmdb-download-btn:active { transform: translateY(0); }

@media (max-width: 640px) {
    .page-body a.cmdb-download-btn { width: 100%; padding: 15px 20px; }
}

.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.post-nav-item {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.post-nav-item:hover { border-color: var(--line-strong); }
.post-nav-next { justify-content: flex-end; text-align: right; grid-column: 2; }
.post-nav-label { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; color: var(--ink-faint); letter-spacing: .05em; margin-bottom: 3px; }
.post-nav-title { color: var(--ink); font-weight: 600; font-size: 14.5px; }
.post-nav-arrow { color: var(--ink-faint); font-size: 18px; }
.post-nav-empty { visibility: hidden; }
@media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } .post-nav-next { grid-column: 1; } }

/* ---- Sidebar ---- */
.primary-sidebar { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 92px; }
.widget { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); }
.widget-title { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: 14px; }
.widget-body .input-group { display: flex; gap: 6px; }
.widget-body input[type="search"] {
    flex: 1; border: 1px solid var(--line); border-radius: 20px; padding: 9px 14px; font-size: 14px;
    background: var(--bg); color: var(--ink); font-family: var(--font-body);
}
.widget-body input[type="search"]:focus { outline: none; border-color: var(--accent); }
.search-submit { border: none; background: var(--ink); color: var(--bg); border-radius: 20px; padding: 0 16px; font-size: 13px; font-weight: 600; cursor: pointer; }

.widget-category select {
    width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 14px;
}

.post-list { display: flex; flex-direction: column; gap: 14px; max-height: 560px; overflow: hidden; }
.post-list-item { display: flex; gap: 12px; align-items: flex-start; }
.post-list-thumb { width: 54px; height: 54px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; background: var(--bg); border: 1px solid var(--line); }
.post-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-list-title { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-list-item:hover .post-list-title { color: var(--accent-deep); }
.post-list-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.no-more-posts { color: var(--ink-faint); font-size: 13.5px; }

@media (max-width: 980px) {
    .review-layout { grid-template-columns: 1fr; }
    .primary-sidebar { position: static; }
}

/* ---- Comments ---- */
#comments { margin-top: 56px; }
.comments-title { font-size: 22px; margin-bottom: 20px; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-body {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
.comment-author { font-weight: 700; font-size: 14.5px; }
.comment-metadata { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); margin-bottom: 8px; }
.comment-content p { margin-bottom: .6em; font-size: 15px; color: var(--ink-soft); }
.comment-respond { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; margin-top: 24px; box-shadow: var(--shadow-sm); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea {
    width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 14px;
    font-family: var(--font-body); font-size: 14.5px; margin-bottom: 14px; background: var(--bg); color: var(--ink);
}
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--accent); }
.comment-form .form-submit input { width: auto; cursor: pointer; background: var(--ink); color: var(--bg); border: none; padding: 11px 26px; border-radius: 999px; font-weight: 600; }

/* ---- FAQ section (injected by the AI Article Rewriter plugin into
   post content) ----
   The plugin's own CSS hardcodes white text, left over from when this
   theme was dark. Overriding here — at the theme level, loaded after
   the plugin's stylesheet — so it always reads correctly regardless
   of the theme's palette or plugin updates, and matches the theme's
   existing card/typography style. */
.page-body .aar-faq-section {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 2px solid var(--line-strong);
}
.page-body .aar-faq-section h2 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--ink) !important;
}
.page-body .aar-faq-item {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-md);
    padding: 18px 20px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s ease;
}
.page-body .aar-faq-item:hover { box-shadow: var(--shadow-md); }
.page-body .aar-faq-item:last-child { margin-bottom: 0; }
.page-body .aar-faq-question {
    margin: 0 0 10px;
    font-size: 17px;
    line-height: 1.45;
    font-weight: 600;
    color: var(--ink) !important;
    border-left: 3px solid var(--teal);
    padding-left: 12px;
}
.page-body .aar-faq-answer p {
    margin: 0 !important;
    padding-left: 15px;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--ink-soft) !important;
}
@media (max-width: 640px) {
    .page-body .aar-faq-section { margin-top: 32px; padding-top: 22px; }
    .page-body .aar-faq-section h2 { font-size: 20px; }
    .page-body .aar-faq-item { padding: 14px 16px; }
    .page-body .aar-faq-question { font-size: 15.5px; }
    .page-body .aar-faq-answer p { font-size: 14.5px; padding-left: 12px; }
}