/* ==========================================================================
   ReviewInDetail — Review Styles
   Styles every rid- class generated by content_formatter.py.
   Mobile-first, scannable, conversion-aware.
   ========================================================================== */

/* ── Review Header ──────────────────────────────────────────────────────── */
.rid-review-header {
    padding: 2rem 0 1rem;
}

.rid-review-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: var(--rid-gray-500);
}

.rid-meta-sep {
    color: var(--rid-gray-400);
}

.rid-review-date,
.rid-review-reading-time {
    color: var(--rid-gray-500);
}

.rid-review-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.2;
    margin-bottom: 0;
    letter-spacing: -0.015em;
}

/* ── Featured Image ─────────────────────────────────────────────────────── */
.rid-hero-image {
    margin: 1.5rem 0 0;
}

.rid-featured-img {
    width: 100%;
    border-radius: var(--rid-radius-lg);
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ── Review Intro (Score + Verdict + Author + Award) ───────────────────── */
.rid-review-intro {
    padding: 1.5rem 0 0;
}

/* ── Score Badge ────────────────────────────────────────────────────────── */
.rid-score-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    padding: 1rem 1.5rem;
    border-radius: var(--rid-radius-lg);
    margin-bottom: 1.25rem;
    background: var(--rid-gray-100);
    border: 2px solid var(--rid-gray-200);
}

.rid-score-star {
    font-size: 1.5rem;
    line-height: 1;
}

.rid-score-value {
    font-family: var(--rid-font-heading);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.rid-score-max {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--rid-gray-500);
}

/* Score color tiers — 5 levels */
.rid-score-excellent {
    border-color: #059669;
}

.rid-score-excellent .rid-score-star,
.rid-score-excellent .rid-score-value {
    color: #059669;
}

.rid-score-great {
    border-color: #0d9488;
}

.rid-score-great .rid-score-star,
.rid-score-great .rid-score-value {
    color: #0d9488;
}

.rid-score-good {
    border-color: #2563eb;
}

.rid-score-good .rid-score-star,
.rid-score-good .rid-score-value {
    color: #2563eb;
}

.rid-score-decent {
    border-color: #d97706;
}

.rid-score-decent .rid-score-star,
.rid-score-decent .rid-score-value {
    color: #d97706;
}

.rid-score-low {
    border-color: #dc2626;
}

.rid-score-low .rid-score-star,
.rid-score-low .rid-score-value {
    color: #dc2626;
}

/* ── Award Badge ────────────────────────────────────────────────────────── */
.rid-award-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--rid-radius);
    margin-bottom: 1.25rem;
}

.rid-award-icon {
    font-size: 1rem;
    font-style: normal;
}

.rid-award-editors-choice {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #fcd34d;
}

.rid-award-best-in-class {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.rid-award-best-budget {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #6ee7b7;
}

/* ── Verdict ────────────────────────────────────────────────────────────── */
.rid-verdict {
    padding: 1.25rem 1.5rem;
    background: var(--rid-gray-100);
    border-left: 4px solid var(--rid-brand-primary);
    border-radius: 0 var(--rid-radius) var(--rid-radius) 0;
    margin-bottom: 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--rid-gray-800);
}

.rid-verdict strong {
    color: var(--rid-black);
    font-weight: 700;
}

/* ── Author Line (inline "Reviewed by") ────────────────────────────────── */
.rid-author-line {
    font-size: 0.9375rem;
    color: var(--rid-gray-600);
    margin-bottom: 0;
}

.rid-author-line strong {
    color: var(--rid-gray-900);
}

.rid-author-line-link {
    text-decoration: none;
}

.rid-author-line-link:hover strong {
    color: var(--rid-brand-primary);
}

/* ── Author Bio Card (bottom of review) ────────────────────────────────── */
.rid-author-card {
    margin-top: 2rem;
    padding: 1.5rem 0;
    border-top: 2px solid var(--rid-gray-200);
}

.rid-author-card .rid-container {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.rid-author-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.rid-author-card-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rid-gray-500);
    margin-bottom: 0.25rem;
}

.rid-author-card-name {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.rid-author-card-name a {
    color: var(--rid-black);
    text-decoration: none;
}

.rid-author-card-name a:hover {
    color: var(--rid-brand-primary);
}

.rid-author-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rid-gray-500);
    margin-bottom: 0.5rem;
}

.rid-author-bio {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--rid-gray-600);
}

/* ── Author Box (in content — from dashboard HTML) ──────────────────────── */
.rid-author-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

.rid-author-name {
    font-weight: 500;
    color: var(--rid-gray-600);
}

/* ── Audience Box (Best For / Not Ideal For) ────────────────────────────── */
.rid-audience-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.rid-best-for,
.rid-not-ideal {
    padding: 1.25rem;
    border-radius: var(--rid-radius-lg);
}

.rid-best-for {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.rid-not-ideal {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.rid-best-for h4,
.rid-not-ideal h4 {
    font-family: var(--rid-font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
}

.rid-best-for h4 {
    color: var(--rid-pros);
}

.rid-not-ideal h4 {
    color: var(--rid-cons);
}

.rid-best-for ul,
.rid-not-ideal ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rid-best-for li,
.rid-not-ideal li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--rid-gray-800);
}

.rid-best-for li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--rid-pros);
}

.rid-not-ideal li::before {
    content: '✗';
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--rid-cons);
}

/* ── Specifications Table ───────────────────────────────────────────────── */
.rid-specifications {
    margin: 2rem 0;
    overflow: hidden;
}

.rid-specifications table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.rid-specifications thead {
    background: var(--rid-gray-900);
    color: var(--rid-white);
}

.rid-specifications thead th {
    padding: 0.75rem 1rem;
    font-family: var(--rid-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
}

.rid-specifications tbody tr {
    border-bottom: 1px solid var(--rid-gray-200);
    transition: background var(--rid-transition);
}

.rid-specifications tbody tr:hover {
    background: var(--rid-gray-100);
}

.rid-specifications tbody td {
    padding: 0.75rem 1rem;
    vertical-align: top;
}

.rid-specifications tbody td:first-child {
    width: 40%;
    color: var(--rid-gray-600);
}

.rid-specifications tbody td:first-child strong {
    font-weight: 600;
    color: var(--rid-gray-700);
}

.rid-specifications tbody td:last-child {
    color: var(--rid-gray-900);
    font-weight: 500;
}

/* Responsive table */
@media (max-width: 600px) {
    .rid-specifications thead {
        display: none;
    }

    .rid-specifications tbody tr {
        display: flex;
        flex-direction: column;
        padding: 0.75rem 0;
    }

    .rid-specifications tbody td {
        padding: 0.25rem 0;
        width: 100%;
    }

    .rid-specifications tbody td:first-child {
        font-size: 0.8125rem;
    }
}

/* ── Pros & Cons ────────────────────────────────────────────────────────── */
.rid-pros,
.rid-cons {
    padding: 1.5rem;
    border-radius: var(--rid-radius-lg);
    margin-bottom: 0.5rem;
}

.rid-pros {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.rid-cons {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.rid-pros h3,
.rid-cons h3 {
    font-family: var(--rid-font-body);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.rid-pros h3 {
    color: var(--rid-pros);
}

.rid-cons h3 {
    color: var(--rid-cons);
}

.rid-pros ul,
.rid-cons ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rid-pros li,
.rid-cons li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--rid-gray-800);
}

.rid-pros li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.375rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--rid-pros);
    /* Checkmark via CSS mask */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    -webkit-mask-size: 12px;
    mask-size: 12px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.rid-cons li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.375rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--rid-cons);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    -webkit-mask-size: 12px;
    mask-size: 12px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Pros/Cons columns layout (from wp:columns) */
.rid-review-content .wp-block-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 2rem 0;
}

.rid-review-content .wp-block-column {
    min-width: 0;
}

@media (max-width: 600px) {
    .rid-audience-box,
    .rid-review-content .wp-block-columns {
        grid-template-columns: 1fr;
    }
}

/* ── Alternatives ───────────────────────────────────────────────────────── */
.rid-alternatives {
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--rid-gray-100);
    border-radius: var(--rid-radius-lg);
    border: 1px solid var(--rid-gray-200);
}

.rid-alternatives h3 {
    font-size: 1.125rem;
    margin: 0 0 1rem;
    color: var(--rid-black);
}

.rid-alternative {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rid-gray-200);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--rid-gray-700);
}

.rid-alternative:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.rid-alternative strong {
    color: var(--rid-black);
    font-weight: 600;
}

.rid-alt-context {
    font-size: 0.8125rem;
    color: var(--rid-gray-500);
}

.rid-alternative a {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--rid-brand-primary);
    text-decoration: none;
    white-space: nowrap;
    margin-left: auto;
}

.rid-alternative a:hover {
    color: var(--rid-link-hover);
    text-decoration: underline;
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
/* FAQ questions are H3 headings, answers are paragraphs.
   The accordion behavior is handled by main.js. */
.rid-review-content h2.wp-block-heading:has(+ h3.wp-block-heading) {
    /* FAQ section heading — no extra styling needed beyond base h2 */
}

/* FAQ Q&A pairs — dashboard outputs H3 (question) + P (answer).
   We add visual structure with borders and spacing. */
.rid-review-content h3.wp-block-heading {
    cursor: default;
    margin: 0;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rid-gray-200);
    font-family: var(--rid-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--rid-gray-900);
}

/* ── FAQ Accordion (initialized by main.js) ─────────────────────────────── */
.rid-faq-item {
    border-bottom: 1px solid var(--rid-gray-200);
}

.rid-faq-item:last-child {
    border-bottom: none;
}

.rid-faq-question {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0 !important;
    border-bottom: none !important;
    margin: 0 !important;
    user-select: none;
    transition: color var(--rid-transition);
}

.rid-faq-question:hover {
    color: var(--rid-brand-primary);
}

.rid-faq-question::after {
    content: '+';
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--rid-gray-400);
    transition: transform var(--rid-transition-slow);
}

.rid-faq-question[aria-expanded="true"]::after {
    content: '−';
    color: var(--rid-brand-primary);
}

.rid-faq-answer {
    padding-bottom: 1rem;
}

.rid-faq-answer[hidden] {
    display: none;
}

.rid-faq-answer p {
    font-size: 0.9375rem !important;
    color: var(--rid-gray-700) !important;
    line-height: 1.7;
    margin-bottom: 0.75rem !important;
}

.rid-faq-answer p:last-child {
    margin-bottom: 0 !important;
}

/* ── Gutenberg Block Resets for Review Content ──────────────────────────── */
/* The dashboard generates wp:html blocks; reset any WP defaults. */
.rid-review-content .wp-block-html {
    margin: 0;
}

/* Image blocks within reviews */
.rid-review-content .wp-block-image {
    margin: 2rem 0;
}

.rid-review-content .wp-block-image img {
    border-radius: var(--rid-radius);
}

.rid-review-content .wp-block-image figcaption {
    font-size: 0.8125rem;
    color: var(--rid-gray-500);
    text-align: center;
    margin-top: 0.5rem;
}

/* Ensure wp:buttons container behaves */
.rid-review-content .wp-block-buttons {
    margin: 0;
}

/* Table figure wrapper */
.rid-review-content figure.wp-block-table {
    margin: 0;
}

/* ── Mobile refinements ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .rid-review-header {
        padding: 1.25rem 0 0.75rem;
    }

    .rid-review-title {
        font-size: 1.625rem;
    }

    .rid-score-badge {
        padding: 0.75rem 1.25rem;
    }

    .rid-score-value {
        font-size: 2.25rem;
    }

    .rid-verdict {
        padding: 1rem 1.25rem;
        font-size: 1rem;
    }

    .rid-author-card .rid-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .rid-alternative {
        flex-direction: column;
        gap: 0.25rem;
    }

    .rid-alternative a {
        margin-left: 0;
    }

    .rid-pros li,
    .rid-cons li {
        padding-left: 1.5rem;
    }

    .rid-best-for li,
    .rid-not-ideal li {
        padding-left: 1.25rem;
    }
}