/* ============================================================
   VLE PC — blog posts and the poster gallery.
   Loaded only on those pages.
   ============================================================ */

/* ── Post listing ────────────────────────────────────────── */

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
}

.post-card {
    background: var(--bg-secondary);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.post-card__link { color: inherit; display: block; }
.post-card__link:hover { color: inherit; }

.post-card__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--gray-100); }
.post-card__body { padding: var(--space-4); }

.post-card__cat {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--primary-700);
    background: var(--primary-50);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-2);
}

.post-card__title { font-size: var(--text-base); font-weight: 600; line-height: 1.35; margin: 0 0 var(--space-2); }
.post-card__excerpt {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card__meta { font-size: var(--text-xs); color: var(--text-tertiary); display: flex; gap: var(--space-2); }

.pagination { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-8); }

/* ── A single post ───────────────────────────────────────── */

.post-meta {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-bottom: var(--space-6);
}

.post-hero {
    width: 100%;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
    background: var(--gray-100);
}

.toc {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-8);
}

.toc__title { font-weight: 600; font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.toc ol { margin: 0; padding-left: var(--space-5); }
.toc li { font-size: var(--text-sm); margin-bottom: var(--space-2); }

/* ── The article body ────────────────────────────────────── */

.prose { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--gray-700); }

.prose > * + * { margin-top: var(--space-5); }

.prose h2 {
    font-size: var(--text-2xl);
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.prose h3 {
    font-size: var(--text-xl);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.prose h4 { font-size: var(--text-lg); margin-top: var(--space-6); }

/* The anchor is there for linking, not for reading — it appears on hover. */
.heading-anchor {
    float: left;
    margin-left: -1em;
    width: 1em;
    color: var(--gray-300);
    opacity: 0;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.prose h2:hover .heading-anchor,
.prose h3:hover .heading-anchor,
.prose h4:hover .heading-anchor { opacity: 1; }

.prose p { margin-bottom: 0; color: inherit; }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li { margin-bottom: var(--space-2); }
.prose li > ul, .prose li > ol { margin-top: var(--space-2); }

.prose a { text-decoration: underline; text-underline-offset: 3px; }

.prose img {
    border-radius: var(--radius-md);
    margin-inline: auto;
    background: var(--gray-100);
}

.prose blockquote {
    border-left: 4px solid var(--primary-300);
    background: var(--primary-50);
    padding: var(--space-4) var(--space-5);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: normal;
    color: var(--gray-700);
}

.prose blockquote > * + * { margin-top: var(--space-3); }

.prose code {
    background: var(--gray-100);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: .875em;
}

.prose pre {
    background: var(--gray-900);
    color: var(--gray-100);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

.prose pre code { background: none; padding: 0; color: inherit; }

.prose hr { border: none; border-top: 1px solid var(--gray-200); margin-block: var(--space-8); }

/* A wide table scrolls inside itself rather than widening the page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.prose th, .prose td { border: 1px solid var(--gray-200); padding: var(--space-3); text-align: left; }
.prose th { background: var(--gray-50); font-weight: 600; }

.post-share {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    border-top: 1px solid var(--gray-200);
}

/* ── Posters ─────────────────────────────────────────────── */

.poster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-4);
}

.poster-card {
    display: block;
    background: var(--bg-secondary);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    color: inherit;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.poster-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: inherit; }

/* Square, not the original poster shape. A grid of mixed 3:4, 4:5 and A4
   crops never lines up, and one uniform square reads as a neat catalogue
   instead of a pile of different-sized images. object-position stays pinned
   to the top because a Marathi poster puts its headline there — cropping a
   tall image to a square from the centre is exactly where that headline
   would be cut off. */
.poster-card img {
    width: 100%;
    /* The markup also carries the real width/height attributes, for the
       browser to reserve space before the image loads. Those set a definite
       height, and aspect-ratio only computes one dimension when the other is
       auto — so without this, every card came out as tall as the original
       poster instead of square. */
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top;
    background: var(--gray-100);
}

.poster-card__title {
    /*
     * The title is shortened once, in PHP (short_title(), app/helpers.php),
     * not clamped here. -webkit-line-clamp was tried first and dropped: on
     * this box it disagreed with a fixed height about where two lines end,
     * and rather than a clean "…" it left a sliced-off fragment of a third
     * line hanging beneath the second — worse than not truncating at all,
     * and a browser-rendering quirk is not something worth chasing when
     * PHP can just decide the length once and have every browser agree.
     *
     * The height here is only to keep a one-line title ("MAHAID") from
     * making its card shorter than its two-line neighbours in the same row.
     * box-sizing is border-box (the site-wide reset), so the padding sits
     * inside this height — leaving it out of the sum understated the box by
     * a full 24px and clipped into the first line, not just the third.
     */
    display: block;
    overflow: hidden;
    padding: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.4;
    height: calc(1.4em * 2 + var(--space-3) * 2);
}

.poster-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: var(--space-8);
    align-items: start;
}

.poster-detail__image img {
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    background: var(--gray-100);
}

/* The branding panel on a poster page. Tinted so it reads as the offer it is,
   not as one more form. */
.brand-box {
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-top: var(--space-5);
}

.brand-box__head { display: flex; flex-direction: column; margin-bottom: var(--space-4); }
.brand-box__head strong { font-size: var(--text-base); }
.brand-box .chip { background: var(--bg-secondary); }
.brand-box .chip:disabled { opacity: .45; cursor: not-allowed; }

.poster-facts { list-style: none; padding: 0; margin: var(--space-6) 0; }
.poster-facts li {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-top: 1px solid var(--gray-100);
    font-size: var(--text-sm);
}
.poster-facts span { color: var(--text-tertiary); }

@media (max-width: 860px) {
    .poster-detail { grid-template-columns: minmax(0, 1fr); }
    .prose { font-size: var(--text-base); }
    .prose h2 { font-size: var(--text-xl); }
    .heading-anchor { display: none; }
}

/* ── Store product landing page ─────────────────────────────
   A conversion-focused pass over the plain product template: a trust row
   under the title, the description's own bullet list turned into a checked
   feature list (no markup changes needed on the admin side, just styling
   the list content authors already write), and a sticky mobile buy bar so
   the CTA is always in reach while reading. */

.store-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-5);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-tertiary);
}
.store-trust-row span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

.store-features .prose ul { list-style: none; padding: 0; margin: var(--space-4) 0; }
.store-features .prose ul li {
    position: relative;
    padding: var(--space-2) 0 var(--space-2) var(--space-8);
    border-bottom: 1px solid var(--gray-100);
}
.store-features .prose ul li:last-child { border-bottom: none; }
.store-features .prose ul li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--success-light);
    color: #065f46;
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
}

.store-sticky-buy { display: none; }

@media (max-width: 860px) {
    .store-page { padding-bottom: 92px; }

    .store-sticky-buy {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 40;
        background: var(--bg-secondary);
        border-top: 1px solid var(--gray-200);
        box-shadow: 0 -6px 20px rgba(0,0,0,.1);
        padding: var(--space-3) var(--space-4);
        padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
        align-items: center;
        gap: var(--space-3);
    }
    .store-sticky-buy strong { font-size: var(--text-lg); color: var(--primary-600); white-space: nowrap; }
    .store-sticky-buy .btn { flex: 1; }
}