/*
 * Jawn Page Builder — Frontend Styles
 * Provides column widths and row layout for the built-in shortcodes.
 */

/* =========================================================
   Row
   ========================================================= */

.jawn_row {
    position: relative;
    box-sizing: border-box;
}

.jawn_row-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.jawn_row.flush .jawn_row-inner {
    gap: 0;
}

/* Vertical alignment */
.jawn_row.valign-center  .jawn_row-inner { align-items: center; }
.jawn_row.valign-bottom  .jawn_row-inner { align-items: end; }
.jawn_row.valign-stretch .jawn_row-inner { align-items: stretch; }

/* Background image / video */
.jawn_row.bg-vid { overflow: hidden; }

.jawn_row .video_preview {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.jawn_row .bg-video-wrapper {
    position: absolute; inset: 0;
    overflow: hidden;
    z-index: 0;
}

.jawn_row .bg-video-wrapper video,
.jawn_row .bg-video-wrapper iframe {
    position: absolute;
    top: 50%; left: 50%;
    min-width: 100%; min-height: 100%;
    transform: translate(-50%, -50%);
}

/* Background pattern */
.jawn_row.bg-pattern { background-repeat: repeat; background-size: auto; }

/* =========================================================
   Shape dividers
   ========================================================= */

.jawn-row-divider-wrap {
    position: absolute;
    left: 0; right: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 1;
}

.jawn-row-divider-wrap.top    { top: 0; }
.jawn-row-divider-wrap.bottom { bottom: 0; }

.jawn-row-divider-wrap svg {
    display: block;
    width: 100%;
    height: 100%;
}

.jawn-row-divider-wrap.jawn-divider-flip svg {
    transform: scaleX(-1);
}

/* =========================================================
   Column
   ========================================================= */

.jawn_col {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
}

.jawn_col-inner { width: 100%; }

.jawn_col.col-fill { background-size: cover; background-position: center; }
.jawn_col.bg-pattern { background-repeat: repeat; background-size: auto; }

/* Column width classes — used outside of a grid row context */
.jawn-col-full          { width: 100%; }
.jawn-col-half          { width: 50%; }
.jawn-col-third         { width: 33.3333%; }
.jawn-col-two-thirds    { width: 66.6667%; }
.jawn-col-quarter       { width: 25%; }
.jawn-col-three-quarters{ width: 75%; }
.jawn-col-fifth         { width: 20%; }
.jawn-col-two-fifths    { width: 40%; }
.jawn-col-three-fifths  { width: 60%; }
.jawn-col-four-fifths   { width: 80%; }
.jawn-col-sixth         { width: 16.6667%; }
.jawn-col-five-sixths   { width: 83.3333%; }

/* Inside a grid row, grid-template-columns controls sizing — width classes don't apply */
.jawn_row-inner > .jawn_col {
    width: 100%;
    min-width: 0;
}

/* =========================================================
   Responsive
   ========================================================= */

/* Tablet (768–991px): collapse 3+ column rows to 2 columns */
@media (max-width: 991px) {
    .jawn_row-inner[data-cols="3"],
    .jawn_row-inner[data-cols="4"],
    .jawn_row-inner[data-cols="5"],
    .jawn_row-inner[data-cols="6"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile (≤767px): all rows stack to a single column */
@media (max-width: 767px) {
    .jawn_row-inner {
        grid-template-columns: 1fr !important;
    }

    /* Column swap: push first child below second when stacked */
    .jawn_row.swap .jawn_row-inner > .jawn_col:first-child {
        order: 2;
    }
}

/* =========================================================
   Text Block
   ========================================================= */

.jawn_text_block { width: 100%; }

/* =========================================================
   Separator
   ========================================================= */

.jawn_separator {
    display: block;
    border: none;
    border-top: 1px solid currentColor;
    margin: 1em 0;
}

.jawn_separator.sep_small {
    display: block;
    width: 60px;
}

.jawn_separator.sep_align_center { margin-left: auto; margin-right: auto; }
.jawn_separator.sep_align_left   { margin-left: 0; }
.jawn_separator.sep_align_right  { margin-right: 0; }

/* =========================================================
   Image
   ========================================================= */

.jawn_image          { max-width: 100%; height: auto; }
.jawn_image.img_shape_rounded  { border-radius: 8px; }
.jawn_image.img_shape_circular { border-radius: 50%; }

.jawn_image.img_align_center { display: block; margin: 0 auto; }
.jawn_image.img_align_left   { display: block; margin-right: auto; margin-left: 0; }
.jawn_image.img_align_right  { display: block; margin-left: auto; margin-right: 0; }

@media (max-width: 767px) {
    .jawn_image.img_mobile_scrollable { overflow-x: auto; max-width: none; }
}

/* =========================================================
   Universal responsive visibility
   ========================================================= */

@media (max-width: 767px) {
    .jawn-hide-mobile  { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .jawn-hide-tablet  { display: none !important; }
}

@media (min-width: 992px) {
    .jawn-hide-desktop { display: none !important; }
}