/*
 * WYSIWYG Utility Stylesheet
 * --------------------------
 * HOW IT WORKS:
 * This stylesheet defines utility classes that consume CSS variables (Design Tokens) 
 * defined in the global 'DesignTokenSettings'. 
 * * NAMING CONVENTION:
 * Use the format: .wysiwyg-{property}-{scale}
 * - {property}: mt (margin-top), mb (margin-bottom), p (padding), w (width), etc.
 * - {scale}: sm (small), md (medium), lg (large), full, half, etc.
 * * EXAMPLE:
 * .wysiwyg-mt-md { margin-top: var(--spacing-md); }
 * * IMPORTANT:
 * Do not hardcode pixel values here. Always map to a variable (var(--variable-name)).
 * This allows the Admin UI to control site-wide design without touching this file.
 */

/* --- Spacing Utilities --- */
.wysiwyg-mt-sm {
    margin-top: var(--spacing-sm);
}

.wysiwyg-mt-md {
    margin-top: var(--spacing-md);
}

.wysiwyg-mt-lg {
    margin-top: var(--spacing-lg);
}

.wysiwyg-mb-sm {
    margin-bottom: var(--spacing-sm);
}

.wysiwyg-mb-md {
    margin-bottom: var(--spacing-md);
}

.wysiwyg-mb-lg {
    margin-bottom: var(--spacing-lg);
}

.wysiwyg-p-sm {
    padding: var(--spacing-sm);
}

.wysiwyg-p-md {
    padding: var(--spacing-md);
}

.wysiwyg-p-lg {
    padding: var(--spacing-lg);
}

/* --- Sizing Utilities --- */
.wysiwyg-w-full {
    width: 100%;
}

.wysiwyg-w-half {
    width: 50%;
}

/* Structural Layout Wrappers (Driven by LayoutHintsLiquidTag) */
.oc-grid {
    display: grid;
    gap: 1.5rem;
}

.oc-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.oc-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.oc-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.oc-layout-sidebar-right {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
}

.oc-layout-sidebar-left {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
}

.oc-layout-full {
    width: 100%;
}

@media (max-width: 768px) {
    .oc-grid-2, .oc-grid-3, .oc-grid-4,
    .oc-layout-sidebar-right, .oc-layout-sidebar-left {
        grid-template-columns: 1fr;
    }
}

/* --- Media Field Base ---
 * The wrapper is display:block by default (full-width).
 * shadow/rounded/border/align classes switch it to display:table so it
 * shrinks to the image's natural/constrained width.  box-shadow then
 * renders as a tight frame around just the image, never bleeding onto
 * adjacent elements.
 */
.oc-media-field,
.oc-section-media {
    display: block;
    line-height: 0; /* collapse whitespace gap between div and img */
}

    .oc-media-field img,
    .oc-section-media img {
        display: block; /* remove inline baseline gap */
        max-width: 100%;
        height: auto;
    }

/* --- Image Size Utilities ---
 * Applied to the <img> element to control its display size.
 * The Liquid template maps these class names to pixel widths for resize_url.
 * The JS reads data-oc-img-width on the wrapper to construct the live preview src.
 *
 * Token classes:  img-sm (200px)  img-md (400px)  img-lg (600px)  img-full (100%)
 */
.img-sm {
    max-width: 200px;
    width: 100%;
    height: auto;
}

.img-md {
    max-width: 400px;
    width: 100%;
    height: auto;
}

.img-lg {
    max-width: 600px;
    width: 100%;
    height: auto;
}

.img-full {
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* --- Block Alignment Utilities ---
 * align-* on media wrappers:
 *   display:table shrinks the wrapper to the image's natural/constrained width.
 *   margin-left/right auto (or 0) then positions it within the parent.
 *   This keeps box-shadow / border-radius as a tight frame around the image
 *   regardless of whether the parent is a flex/grid/block container.
 *
 * NOTE: display:table is intentional — it is the most reliable cross-browser
 * way to shrink-wrap a block element to its content width while remaining a
 * block-level element (so margin:auto centering still works).
 * width:fit-content is an alternative but has older-browser caveats.
 */
.oc-media-field.align-center,
.oc-section-media.align-center {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.oc-media-field.align-left,
.oc-section-media.align-left {
    display: table;
    margin-left: 0;
    margin-right: auto;
}

.oc-media-field.align-right,
.oc-section-media.align-right {
    display: table;
    margin-left: auto;
    margin-right: 0;
}

/* Generic align-* for non-media elements */
.align-center:not(.oc-media-field):not(.oc-section-media) {
    display: flex;
    justify-content: center;
}

.align-left:not(.oc-media-field):not(.oc-section-media) {
    display: flex;
    justify-content: flex-start;
}

.align-right:not(.oc-media-field):not(.oc-section-media) {
    display: flex;
    justify-content: flex-end;
}

/* --- Shadow / Rounded / Border on media wrappers ---
 *
 * APPROACH: box-shadow on the wrapper div (NOT filter:drop-shadow on the img).
 *
 * WHY NOT filter:drop-shadow on <img>?
 *   CSS filter paints OUTSIDE the element's layout box.  The shadow extends
 *   downward past the image bottom edge and bleeds as a full-width stripe
 *   across the next sibling element (the heading).  box-shadow on the wrapper
 *   is contained within the wrapper's own painted area and never bleeds.
 *
 * WHY display:table on the wrapper?
 *   display:table (like width:fit-content) makes the wrapper shrink-wrap the
 *   image so box-shadow draws a tight frame rather than a full-row shadow.
 *   The align-* rules above already set display:table; these rules also set it
 *   so decoration works even without an explicit align class.
 *
 * WHY overflow:hidden on rounded wrappers?
 *   border-radius on the wrapper clips the img corners only when
 *   overflow:hidden is set; otherwise the img square corners poke out.
 *   overflow:hidden + border-radius on the wrapper replaces the old approach
 *   of forwarding border-radius to the <img> element.
 */

/* Shadow classes — box-shadow on wrapper, wrapper shrinks to image width */
.oc-media-field.shadow-sm,
.oc-section-media.shadow-sm {
    display: table;
    box-shadow: 0 1px 3px rgba(0,0,0,0.20);
}

.oc-media-field.shadow-md,
.oc-section-media.shadow-md {
    display: table;
    box-shadow: 0 4px 8px rgba(0,0,0,0.20);
}

.oc-media-field.shadow-lg,
.oc-section-media.shadow-lg {
    display: table;
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

/* Rounded classes — border-radius on wrapper + overflow:hidden to clip img */
.oc-media-field.rounded,
.oc-section-media.rounded {
    display: table;
    border-radius: var(--border-radius, 8px);
    overflow: hidden;
}

.oc-media-field.rounded-sm,
.oc-section-media.rounded-sm {
    display: table;
    border-radius: 4px;
    overflow: hidden;
}

.oc-media-field.rounded-lg,
.oc-section-media.rounded-lg {
    display: table;
    border-radius: 16px;
    overflow: hidden;
}

.oc-media-field.rounded-full,
.oc-section-media.rounded-full {
    display: table;
    border-radius: 9999px;
    overflow: hidden;
}

/* Border class */
.oc-media-field.border,
.oc-section-media.border {
    display: table;
    border: var(--border-width,1px) solid var(--border-color,#e2e8f0);
}

/* When align-* AND shadow/rounded/border are combined, display:table is
 * already set by the align rule; the margin centering still applies.
 * No extra rules needed — CSS cascade handles it correctly. */

/* --- Layout Utilities --- */
.wysiwyg-flex-row {
    display: flex;
    flex-direction: row;
}

.wysiwyg-flex-col {
    display: flex;
    flex-direction: column;
}

.wysiwyg-text-primary {
    color: var(--primary-color);
}

.wysiwyg-bg-primary {
    background-color: var(--primary-color);
}

.wysiwyg-border-primary {
    border-color: var(--primary-color);
}

/* ── Model B collection cards ────────────────────────────────────────────── */

.oc-collection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--spacing-md, 1rem);
}

.oc-collection-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
    min-width: 0;
}

.oc-collection-card__media {
    display: block;
}

.oc-collection-card__media img {
    display: block;
    width: 100%;
    height: auto;
}