/**
 * Zigzag layout (Pro) — vertical stack of rows with the image on an
 * alternating side. Consumes the .mod-jrprism { --jrp-* } theme tokens defined
 * in jrprism.css, which must load first.
 *
 * @copyright (C) 2026 Joomreem.
 * @license   GNU General Public License version 2 or later; see LICENSE.txt
 */

.mod-jrprism.layout-zigzag .jrp-zigzag {
    display: flex;
    flex-direction: column;
    gap: var(--jrp-zigzag-row-gap, 2.5rem);
}

.mod-jrprism.layout-zigzag .jrp-zigzag-row {
    display: flex;
    gap: var(--jrp-zigzag-col-gap, 2rem);
    align-items: center;
}

/* Image on the right: reverse the row's flex direction. */
.mod-jrprism.layout-zigzag .jrp-zigzag-row--reverse {
    flex-direction: row-reverse;
}

/* Vertical alignment of the text block against a taller image. */
.mod-jrprism.layout-zigzag.jrp-zigzag--valign-top .jrp-zigzag-row,
.mod-jrprism.layout-zigzag .jrp-zigzag--valign-top .jrp-zigzag-row {
    align-items: flex-start;
}

/* Image column — width driven by the --jrp-zigzag-img custom property the
   template sets inline (33% / 50% / 66%). */
.mod-jrprism.layout-zigzag .jrp-zigzag-media {
    flex: 0 0 var(--jrp-zigzag-img, 50%);
    max-width: var(--jrp-zigzag-img, 50%);
}

.mod-jrprism.layout-zigzag .jrp-zigzag-content {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--jrp-text, inherit);
}

.mod-jrprism.layout-zigzag .jrp-zigzag-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--jrp-zigzag-radius, 0.5rem);
}

/* Fixed aspect ratios keep rows visually even (cover-crops overflow). */
.mod-jrprism.layout-zigzag .jrp-zigzag-media--16x9 { aspect-ratio: 16 / 9; }
.mod-jrprism.layout-zigzag .jrp-zigzag-media--4x3  { aspect-ratio: 4 / 3; }
.mod-jrprism.layout-zigzag .jrp-zigzag-media--1x1  { aspect-ratio: 1 / 1; }

/* Native: let the image keep its intrinsic ratio (no crop). */
.mod-jrprism.layout-zigzag .jrp-zigzag-media--native .jrp-zigzag-img {
    height: auto;
    object-fit: initial;
}

/* Image fit (shared image_fit option). Cover is the default; contain shows the
   whole image and may letterbox within the ratio box. */
.mod-jrprism.layout-zigzag .jrp-zigzag-media--fit-contain .jrp-zigzag-img {
    object-fit: contain;
}

.mod-jrprism.layout-zigzag .jrp-zigzag-placeholder {
    width: 100%;
    height: 100%;
    min-height: 12rem;
    background: var(--jrp-surface-muted, rgba(0, 0, 0, 0.05));
    border: 1px solid var(--jrp-border, transparent);
    border-radius: var(--jrp-zigzag-radius, 0.5rem);
}

.mod-jrprism.layout-zigzag .jrp-zigzag-title {
    margin: 0 0 0.5rem;
}

.mod-jrprism.layout-zigzag .jrp-zigzag-desc {
    color: var(--jrp-text-muted, inherit);
}

.mod-jrprism.layout-zigzag .jrp-zigzag-readon {
    display: inline-block;
    margin-top: 1rem;
    color: var(--jrp-accent, inherit);
}

/* Hover + keyboard-focus affordances, matching the convention in the other
   layouts (e.g. tabs). Links shift to the emphasis accent on hover and show a
   visible focus ring on keyboard navigation. */
.mod-jrprism.layout-zigzag .jrp-zigzag-title a:hover,
.mod-jrprism.layout-zigzag .jrp-zigzag-readon:hover {
    color: var(--jrp-accent-emphasis, var(--jrp-accent, inherit));
}

.mod-jrprism.layout-zigzag .jrp-zigzag-media a:focus-visible,
.mod-jrprism.layout-zigzag .jrp-zigzag-title a:focus-visible,
.mod-jrprism.layout-zigzag .jrp-zigzag-readon:focus-visible {
    outline: 2px solid var(--jrp-accent);
    outline-offset: 2px;
}

/* Stack to a single column on small screens. Default = image first; the
   text-first modifier flips the stacking order. */
@media (max-width: 767.98px) {
    .mod-jrprism.layout-zigzag .jrp-zigzag-row,
    .mod-jrprism.layout-zigzag .jrp-zigzag-row--reverse {
        flex-direction: column;
    }

    .mod-jrprism.layout-zigzag.jrp-zigzag--mobile-text-first .jrp-zigzag-row,
    .mod-jrprism.layout-zigzag.jrp-zigzag--mobile-text-first .jrp-zigzag-row--reverse,
    .mod-jrprism.layout-zigzag .jrp-zigzag--mobile-text-first .jrp-zigzag-row,
    .mod-jrprism.layout-zigzag .jrp-zigzag--mobile-text-first .jrp-zigzag-row--reverse {
        flex-direction: column-reverse;
    }

    .mod-jrprism.layout-zigzag .jrp-zigzag-media {
        flex-basis: auto;
        max-width: 100%;
        width: 100%;
    }
}