/* Prithu Post Cards */

.ppc-block {
    margin: 2em 0;
    clear: both;
    position: relative;
}

/* Break the block out to the full width of the viewport, regardless of the
   theme's content column width. Requires the block's own ancestors to not
   clip overflow (true for standard WordPress content columns). */
.ppc-block.ppc-fullwidth {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 1.5em;
    padding-right: 1.5em;
    box-sizing: border-box;
}

.ppc-heading {
    margin: 0 0 0.75em;
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.75;
}

.ppc-grid {
    display: grid;
    grid-template-columns: repeat(var(--ppc-columns, 3), minmax(0, 1fr));
    gap: var(--ppc-gap, 20px);
}

/* Wraps several independent row-grids (each with its own column count)
   for an occurrence whose rows aren't all the same width. */
.ppc-rows {
    display: flex;
    flex-direction: column;
    gap: var(--ppc-gap, 20px);
}

.ppc-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.ppc-card:hover,
.ppc-card:focus {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.ppc-thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eee;
}

.ppc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ppc-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e2e2e2, #f2f2f2);
}

.ppc-body {
    padding: 0.9em 1em 1.1em;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ppc-title {
    margin: 0 0 0.4em;
    font-size: 1em;
    line-height: 1.3;
}

.ppc-excerpt {
    margin: 0;
    font-size: 0.88em;
    line-height: 1.45;
    opacity: 0.8;
    flex: 1;
}

/* Responsive fallback: never exceed what the viewport can comfortably fit,
   regardless of the configured column count. */
@media (max-width: 1200px) {
    .ppc-grid { grid-template-columns: repeat(min(4, var(--ppc-columns, 3)), minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .ppc-grid { grid-template-columns: repeat(min(3, var(--ppc-columns, 3)), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .ppc-grid { grid-template-columns: repeat(min(2, var(--ppc-columns, 3)), minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .ppc-grid { grid-template-columns: 1fr; }
}

/* Dark-theme friendly override if the active theme sets a dark scheme */
@media (prefers-color-scheme: dark) {
    .ppc-card {
        background: #1c1c1c;
        border-color: rgba(255, 255, 255, 0.12);
    }
}

/* On-page quick-edit panel (visible only to logged-in admins) */
.ppc-quick-edit {
    text-align: right;
    margin-bottom: 0.5em;
    font-size: 0.85em;
}

.ppc-qe-toggle {
    background: #2271b1;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.3em 0.8em;
    cursor: pointer;
    font-size: 0.9em;
}

.ppc-qe-toggle:hover {
    background: #135e96;
}

.ppc-qe-panel {
    text-align: left;
    background: #fff;
    border: 1px solid #ccd0d4;
    border-radius: 6px;
    padding: 1em 1.25em;
    margin-top: 0.5em;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    max-width: 480px;
    margin-left: auto;
    color: #1d2327;
}

.ppc-qe-panel label {
    display: inline-block;
    margin-right: 1em;
    font-weight: 600;
    font-size: 0.85em;
}

.ppc-qe-panel select,
.ppc-qe-panel input[type="text"] {
    display: block;
    margin-top: 0.25em;
    font-weight: normal;
}

.ppc-qe-panel input[type="checkbox"] {
    margin-right: 0.35em;
}

.ppc-qe-note {
    font-size: 0.8em;
    opacity: 0.7;
    margin: 0.5em 0 0;
}

.ppc-qe-status {
    margin-left: 0.75em;
    font-style: italic;
}

/* ------------------------------------------------------------------
   Optional: style WordPress's own native "Query Loop" block as cards.
   Use this on the Home template (Appearance -> Editor -> Templates ->
   Home) for your blog-index / "Readers" page, instead of the plugin
   inserting anything there itself. Add the CSS class "ppc-native-grid"
   to the Query Loop block (Advanced panel -> Additional CSS class(es)),
   and optionally "ppc-cols-N" (N = 1-6) to set the column count.
   ------------------------------------------------------------------ */
.ppc-native-grid.wp-block-query {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.ppc-native-grid .wp-block-post-template {
    display: contents;
}

.ppc-native-grid .wp-block-post {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    padding: 0 0 1em;
}

.ppc-native-grid .wp-block-post-featured-image {
    margin: 0;
}

.ppc-native-grid .wp-block-post-featured-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.ppc-native-grid .wp-block-post-title,
.ppc-native-grid .wp-block-post-excerpt {
    padding: 0 1em;
    margin: 0.6em 0 0;
}

.ppc-cols-1.wp-block-query { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.ppc-cols-2.wp-block-query { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ppc-cols-3.wp-block-query { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ppc-cols-4.wp-block-query { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ppc-cols-5.wp-block-query { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ppc-cols-6.wp-block-query { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 640px) {
    .ppc-native-grid.wp-block-query { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 420px) {
    .ppc-native-grid.wp-block-query { grid-template-columns: 1fr !important; }
}

@media (prefers-color-scheme: dark) {
    .ppc-native-grid .wp-block-post {
        background: #1c1c1c;
        border-color: rgba(255, 255, 255, 0.12);
    }
}

/* ------------------------------------------------------------------
   Thumbnail entrance animations.
   Cards are ONLY hidden when <html> carries .ppc-js, which a tiny inline
   script in <head> adds. That same script reveals every card after a few
   seconds if ppc-animate.js never starts (blocked, cached, Rocket Loader,
   JS error...). Without JavaScript, cards are simply always visible.
   ------------------------------------------------------------------ */
.ppc-js .ppc-grid.ppc-anim .ppc-card {
    transition-property: opacity, transform, clip-path, box-shadow;
    transition-duration: var(--ppc-anim-duration, 0.6s), var(--ppc-anim-duration, 0.6s), var(--ppc-anim-duration, 0.6s), 0.15s;
    transition-timing-function: ease-out;
}

.ppc-js .ppc-grid.ppc-anim-fade-in .ppc-card:not(.ppc-visible) { opacity: 0; }

.ppc-js .ppc-grid.ppc-anim-fade-out .ppc-card:not(.ppc-visible) { opacity: 0; transform: scale(1.06); }

.ppc-js .ppc-grid.ppc-anim-slide-in .ppc-card:not(.ppc-visible) { opacity: 0; transform: translateY(30px); }

.ppc-js .ppc-grid.ppc-anim-slide-out .ppc-card:not(.ppc-visible) { opacity: 0; transform: translateY(-30px); }

.ppc-js .ppc-grid.ppc-anim-wipe-in .ppc-card:not(.ppc-visible) { opacity: 0; clip-path: inset(0 100% 0 0); }

.ppc-js .ppc-grid.ppc-anim-wipe-out .ppc-card:not(.ppc-visible) { opacity: 0; clip-path: inset(0 0 0 100%); }

.ppc-grid.ppc-anim .ppc-card.ppc-visible { opacity: 1; clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
    .ppc-grid.ppc-anim .ppc-card {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
}