/**
 * Contextual SEO — Related Posts (CRP-inspired)
 *
 * Six display styles (no_style / text_only / rounded_thumbs / masonry / grid /
 * thumbs_grid) all sharing the unified `--cseo-d-*` design tokens defined in
 * unified-design.css — exactly the same tokens consumed by Top Bar (.cseo-tb),
 * SEO Footer (.cseo-sf), Inline Related (.cseo-irp) and Product Notices
 * (.cseo-pn).
 *
 * The 8 preset classes (cseo-preset-default/blue/yellow/red/green/soft/dark/
 * custom) are defined in unified-design.css and override the same `--cseo-d-*`
 * variables on every module — so switching the preset on one module produces
 * the exact same color shift on every other module. This is the visual
 * contract that satisfies the user's "design must be consistent across all
 * features" requirement.
 *
 * Unified tokens (set by Contextual_SEO_Display_Rules::design_to_css_vars()):
 *   --cseo-d-bg       Background colour
 *   --cseo-d-text     Body text colour
 *   --cseo-d-border   Border colour
 *   --cseo-d-accent   Accent colour (links, headings, dividers)
 *   --cseo-d-radius   Corner radius
 *   --cseo-d-fs       Base font size
 *   --cseo-d-py       Vertical padding
 *   --cseo-d-px       Horizontal padding
 *
 * RP-specific tokens (only meaningful inside .cseo-rp):
 *   --cseo-rp-thumb-width   Thumbnail width
 *   --cseo-rp-thumb-height  Thumbnail height
 *   --cseo-rp-grid-col-min  Grid column minimum width
 *   --cseo-rp-gap           Gap between items
 */

/* ===========================================
   Root container — consumes the unified tokens
   =========================================== */
.cseo-rp {
        /* RP-specific tokens (defaults — overridden inline per-instance). */
        --cseo-rp-thumb-width:   150px;
        --cseo-rp-thumb-height:  150px;
        --cseo-rp-grid-col-min:  180px;
        --cseo-rp-gap:           12px;

        background: var(--cseo-d-bg);
        color: var(--cseo-d-text);
        border: 1px solid var(--cseo-d-border);
        border-radius: var(--cseo-d-radius);
        padding: var(--cseo-d-py) var(--cseo-d-px);
        margin-top: 1.5em;
        margin-bottom: 1.5em;
        font-family: var(--cseo-font);
        font-size: var(--cseo-d-fs);
        line-height: 1.55;
        box-shadow: var(--cseo-shadow-sm);
}

.cseo-rp * {
        box-sizing: border-box;
}

/* Headings inside .cseo-rp use the same primitive as every other module. */
.cseo-rp .cseo-rp__heading {
        color: var(--cseo-d-text);
        font-size: var(--cseo-fs-xl);
        font-weight: 700;
        margin: 0 0 12px 0;
        padding-bottom: 8px;
        border-bottom: 2px solid var(--cseo-d-accent);
}

.cseo-rp__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: var(--cseo-rp-gap);
}

.cseo-rp__item {
        margin: 0;
        padding: 0;
        list-style: none;
}

/* Links inherit accent colour — same pattern as .cseo-tb a / .cseo-sf a / … */
.cseo-rp__link {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--cseo-d-accent);
        text-decoration: none;
        transition: opacity var(--cseo-dur-fast) var(--cseo-ease);
}

.cseo-rp__link:hover,
.cseo-rp__link:focus {
        opacity: 0.85;
}

.cseo-rp__title {
        color: var(--cseo-d-text);
        font-weight: 600;
        font-size: var(--cseo-fs-md);
        line-height: 1.4;
}

.cseo-rp__link:hover .cseo-rp__title {
        color: var(--cseo-d-accent);
}

.cseo-rp__excerpt {
        display: block;
        color: var(--cseo-text-muted, #64748b);
        font-size: var(--cseo-fs-sm);
        margin-top: 4px;
}

.cseo-rp__author,
.cseo-rp__date {
        display: inline-block;
        color: var(--cseo-text-muted, #64748b);
        font-size: var(--cseo-fs-xs);
        margin-top: 4px;
}

.cseo-rp__thumb-wrap {
        margin: 0;
        flex-shrink: 0;
}

.cseo-rp__thumb {
        display: block;
        max-width: 100%;
        height: auto;
        border-radius: var(--cseo-d-radius);
        object-fit: cover;
}

/* Note: `.cseo-rp__clear` was removed — modern CSS uses `display:flow-root`
   on the list container or the modern clearfix. The PHP render no longer
   emits the div either. */

/* ===========================================
   Style: no_style — bare output, no built-in CSS
   =========================================== */
.cseo-rp--no_style {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
}

/* ===========================================
   Style: text_only — simple text list
   =========================================== */
.cseo-rp--text_only .cseo-rp__list {
        display: block;
}

.cseo-rp--text_only .cseo-rp__item {
        padding: 6px 0;
        border-bottom: 1px dashed var(--cseo-d-border);
}

.cseo-rp--text_only .cseo-rp__item:last-child {
        border-bottom: 0;
}

.cseo-rp--text_only .cseo-rp__link {
        font-weight: 500;
}

.cseo-rp--text_only .cseo-rp__thumb-wrap {
        display: none;
}

/* ===========================================
   Style: rounded_thumbs — horizontal thumb+title rows
   =========================================== */
.cseo-rp--rounded_thumbs .cseo-rp__list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
}

.cseo-rp--rounded_thumbs .cseo-rp__link {
        display: flex;
        align-items: center;
        gap: 12px;
}

.cseo-rp--rounded_thumbs .cseo-rp__thumb {
        width: var(--cseo-rp-thumb-width);
        height: var(--cseo-rp-thumb-height);
        border-radius: 50%;
        object-fit: cover;
}

@media (min-width: 640px) {
        .cseo-rp--rounded_thumbs .cseo-rp__list {
                grid-template-columns: 1fr 1fr;
        }
}

/* ===========================================
   Style: thumbs_grid — square thumbs in a grid
   =========================================== */
.cseo-rp--thumbs_grid .cseo-rp__list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--cseo-rp-grid-col-min), 1fr));
        gap: var(--cseo-rp-gap);
}

.cseo-rp--thumbs_grid .cseo-rp__link {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
}

.cseo-rp--thumbs_grid .cseo-rp__thumb {
        width: 100%;
        aspect-ratio: 1;
        height: auto;
        border-radius: var(--cseo-d-radius);
}

.cseo-rp--thumbs_grid .cseo-rp__title {
        text-align: center;
        font-size: var(--cseo-fs-sm);
}

/* ===========================================
   Style: grid — card grid with image on top
   =========================================== */
.cseo-rp--grid .cseo-rp__list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--cseo-rp-grid-col-min), 1fr));
        gap: var(--cseo-rp-gap);
}

.cseo-rp--grid .cseo-rp__item {
        background: var(--cseo-surface, #fff);
        border: 1px solid var(--cseo-d-border);
        border-radius: var(--cseo-d-radius);
        overflow: hidden;
        transition: box-shadow var(--cseo-dur) var(--cseo-ease), transform var(--cseo-dur) var(--cseo-ease);
}

.cseo-rp--grid .cseo-rp__item:hover {
        box-shadow: var(--cseo-shadow-md);
        transform: translateY(-2px);
}

.cseo-rp--grid .cseo-rp__link {
        display: flex;
        flex-direction: column;
        height: 100%;
}

.cseo-rp--grid .cseo-rp__thumb {
        width: 100%;
        height: 160px;
        object-fit: cover;
        border-radius: 0;
}

.cseo-rp--grid .cseo-rp__title,
.cseo-rp--grid .cseo-rp__excerpt,
.cseo-rp--grid .cseo-rp__date,
.cseo-rp--grid .cseo-rp__author {
        padding: 0 12px;
}

.cseo-rp--grid .cseo-rp__title {
        margin-top: 10px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: var(--cseo-fs-md);
}

.cseo-rp--grid .cseo-rp__excerpt {
        margin-top: 6px;
        margin-bottom: 12px;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        display: -webkit-box;
}

/* ===========================================
   Style: masonry — column-based masonry layout
   =========================================== */
.cseo-rp--masonry .cseo-rp__list {
        display: block;
        column-count: 3;
        column-gap: var(--cseo-rp-gap);
}

@media (max-width: 960px) {
        .cseo-rp--masonry .cseo-rp__list { column-count: 2; }
}

@media (max-width: 600px) {
        .cseo-rp--masonry .cseo-rp__list { column-count: 1; }
}

.cseo-rp--masonry .cseo-rp__item {
        break-inside: avoid;
        display: inline-block;
        width: 100%;
        margin: 0 0 var(--cseo-rp-gap) 0;
        background: var(--cseo-surface, #fff);
        border: 1px solid var(--cseo-d-border);
        border-radius: var(--cseo-d-radius);
        overflow: hidden;
        transition: box-shadow var(--cseo-dur) var(--cseo-ease);
}

.cseo-rp--masonry .cseo-rp__item:hover {
        box-shadow: var(--cseo-shadow-md);
}

.cseo-rp--masonry .cseo-rp__link {
        display: flex;
        flex-direction: column;
}

.cseo-rp--masonry .cseo-rp__thumb {
        width: 100%;
        height: auto;
        border-radius: 0;
}

.cseo-rp--masonry .cseo-rp__title {
        padding: 10px 12px 4px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

.cseo-rp--masonry .cseo-rp__excerpt,
.cseo-rp--masonry .cseo-rp__date,
.cseo-rp--masonry .cseo-rp__author {
        padding: 0 12px 12px;
}

/* ===========================================
   Empty / feed variants
   =========================================== */
.cseo-rp--empty {
        text-align: center;
        color: var(--cseo-text-muted, #64748b);
        font-style: italic;
}

.cseo-rp--feed {
        font-family: inherit;
        font-size: 13px;
        background: transparent;
        border: 0;
        padding: 0;
        margin-top: 1em;
}

.cseo-rp--feed .cseo-rp__list {
        display: block;
}

.cseo-rp--feed .cseo-rp__item {
        padding: 4px 0;
        list-style: disc inside;
}

/* ===========================================
   Widget context — slightly tighter spacing
   =========================================== */
.cseo-rp--widget {
        font-size: var(--cseo-fs-sm);
        padding: var(--cseo-d-py) var(--cseo-d-px);
}

.cseo-rp--widget .cseo-rp__heading {
        font-size: var(--cseo-fs-lg);
}

/* ===========================================
   Responsive
   =========================================== */
@media (max-width: 600px) {
        .cseo-rp {
                padding: 12px;
        }
        .cseo-rp--grid .cseo-rp__list,
        .cseo-rp--thumbs_grid .cseo-rp__list {
                grid-template-columns: 1fr 1fr;
        }
        .cseo-rp--rounded_thumbs .cseo-rp__thumb {
                width: 60px;
                height: 60px;
        }
}

/* ===========================================
   RTL adjustments (Persian / Arabic)
   =========================================== */
[dir="rtl"] .cseo-rp__link {
        text-align: right;
}

[dir="rtl"] .cseo-rp--rounded_thumbs .cseo-rp__link,
[dir="rtl"] .cseo-rp--grid .cseo-rp__link,
[dir="rtl"] .cseo-rp--thumbs_grid .cseo-rp__link,
[dir="rtl"] .cseo-rp--masonry .cseo-rp__link {
        flex-direction: row-reverse;
}

[dir="rtl"] .cseo-rp--grid .cseo-rp__link,
[dir="rtl"] .cseo-rp--masonry .cseo-rp__link,
[dir="rtl"] .cseo-rp--thumbs_grid .cseo-rp__link {
        flex-direction: column;
}

/* ===========================================
   Print
   =========================================== */
@media print {
        .cseo-rp {
                display: none !important;
        }
}

/* Reduced motion — respect user preference. */
@media (prefers-reduced-motion: reduce) {
	.cseo-rp,
	.cseo-rp *,
	.cseo-rp *::before,
	.cseo-rp *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}