/*
 * 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%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.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;
}

/* Nested (inner) rows sit inside a column's flex wrapper, which uses
   align-items:flex-start and would otherwise shrink the row to its content
   width (collapsing it to a sliver). Make nested rows fill the column. */
.jawn_col-inner > .jawn_row { width: 100%; }

/* Slick sliders lose their intrinsic width once Slick floats the slides out of
   normal flow; inside the column flex wrapper (align-items:flex-start) that
   collapses the slider to ~0 and sizes every slide to nothing, so no slide is
   visible even though the track/arrows render. Force the sliders to full width. */
.jawn_col-inner .jawn_testimonials,
.jawn_col-inner .jawn_carousel,
.jawn_col-inner .projects-slider { width: 100%; min-width: 0; }

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

/* Tablet (768–991px): stack all multi-column rows to a single column.
   repeat(2,1fr) produces an odd orphan layout for 3-column rows like
   1/4+1/2+1/4, so we go straight to 1fr for everything ≥3 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: 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;
    }
}

/* =========================================================
   Hero
   ========================================================= */

/* Hero is a flex child inside .jawn_col-inner (align-items:flex-start),
   so it must declare its own width or it shrinks to content width. */
.jawn_hero { width: 100%; }

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

.jawn_text_block { width: 100%; }

/* Gravity Form wrapper — like the other block elements it must fill the column
   (the .jawn_col-inner flex wrapper uses align-items:flex-start, which would
   otherwise shrink it to the form's intrinsic width). */
.jawn_gravity_form { width: 100%; }

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

.jawn_separator {
    display: block;
    border: none;
    border-top: 1px solid transparent;
    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; }

/* Full width — stretch the image (and any link/animation wrappers) to the parent */
.jawn_image.img_full_width { display: block; width: 100%; height: auto; }
.jawn_image_fw { display: block; width: 100%; }

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

/* =========================================================
   Universal element wrapper
   ========================================================= */

/* The do_shortcode_tag filter wraps elements in this div when any universal
   Style/Responsive param is set. It lives inside .jawn_col-inner (a flex
   column with align-items:flex-start) so it must declare width:100% or it
   shrinks to its content width and breaks percentage-based children. */
.jawn-pb-el-wrap { width: 100%; }

/* =========================================================
   Gallery
   ========================================================= */

/* .jawn-gallery is also a flex child of .jawn_col-inner. Without width:100%
   it collapses to the width of the gutter-sizer (20px), making Isotope
   calculate calc(50% - 10px) = 0px item widths and leaving everything at
   left:0; top:0; height:0. */
.jawn-gallery { width: 100%; }

/* =========================================================
   Carousel
   ========================================================= */

/* Without width:100%, Slick measures the wrong container width (same
   flex-shrink issue as the gallery) and sizes slides incorrectly. */
.jawn_carousel { width: 100%; }

/* =========================================================
   Hero Slider
   ========================================================= */

/* Same flex-shrink issue. Also, .jawn_hero_slider_content is position:absolute
   with left:0;right:0 — it sizes relative to .jawn_hero_slider, so that outer
   div must fill the column or the content overlay collapses too. */
.jawn_hero_slider { width: 100%; }

/* Make carousel images fill their slide so there's no empty space beside
   a small image. height:auto keeps the aspect ratio. display:block removes
   the inline gap below the image. */
.jawn_carousel .slick-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================================
   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; }
}

/* =========================================================
   Accordion — default styling
   ========================================================= */

.jawn_accordion { width: 100%; }

/* Trigger button */
.jawn_accordion .jawn_accordion-trigger {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 44px 14px 16px;
    position: relative;
    cursor: pointer;
    background: #f5f5f5;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    margin-bottom: 4px;
    -webkit-appearance: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    transition: background 0.2s;
}

.jawn_accordion .jawn_accordion-trigger:hover,
.jawn_accordion .jawn_accordion-trigger:focus-visible {
    background: #e8e8e8;
}

.jawn_accordion .jawn_accordion-trigger[aria-expanded="true"] {
    background: #e0e0e0;
    border-bottom-color: transparent;
    border-radius: 3px 3px 0 0;
    margin-bottom: 0;
}

/* Icon centering */
.jawn_accordion .jawn_accordion-trigger i {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Panel — relies on [hidden] attribute for hide/show.
   The old style.css had display:none here (now removed) which
   prevented JS from ever making panels visible. */
.jawn_accordion .jawn_accordion-panel {
    padding: 20px 16px;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-top: none;
    border-radius: 0 0 3px 3px;
    margin-bottom: 4px;
}

/* Safety net: ensure panels are visible when [hidden] is absent */
.jawn_accordion .jawn_accordion-panel:not([hidden]) {
    display: block !important;
}

/* =========================================================
   Tabs — default styling
   ========================================================= */

.jawn_tabs { width: 100%; }

/* Tab nav bar */
.jawn_tabs-titles {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    border-bottom: 2px solid #d0d0d0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Tab button */
.jawn_tabs .jawn_tab {
    padding: 10px 22px;
    cursor: pointer;
    border: 1px solid #d0d0d0;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    background: #f5f5f5;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    margin-bottom: -2px;
    transition: background 0.2s;
    white-space: nowrap;
}

.jawn_tabs .jawn_tab:hover {
    background: #e8e8e8;
}

.jawn_tabs .jawn_tab[aria-selected="true"] {
    background: #fff;
    border-color: #d0d0d0;
    border-bottom-color: #fff;
    font-weight: 600;
}

/* Content area */
.jawn_tabs-content {
    border: 1px solid #d0d0d0;
    border-top: none;
    background: #fff;
}

.jawn_tabs-item {
    padding: 24px;
}

/* Vertical orientation */
.jawn_tabs-titles[aria-orientation="vertical"] {
    flex-direction: column;
    border-bottom: none;
    border-right: 2px solid #d0d0d0;
    gap: 3px;
    align-self: flex-start;
}

.jawn_tabs:has(.jawn_tabs-titles[aria-orientation="vertical"]) {
    display: flex;
    align-items: flex-start;
}

.jawn_tabs-titles[aria-orientation="vertical"] .jawn_tab {
    border-right: none;
    border-radius: 3px 0 0 3px;
    margin-bottom: 0;
    margin-right: -2px;
    text-align: left;
}

.jawn_tabs-titles[aria-orientation="vertical"] .jawn_tab[aria-selected="true"] {
    border-right-color: transparent;
}

.jawn_tabs-titles[aria-orientation="vertical"] + .jawn_tabs-content {
    border-top: 1px solid #d0d0d0;
    flex: 1;
}

/* =========================================================
   Row width modes — in-grid vs full-width
   ========================================================= */

/*
 * Builder pages use .jawn-pb-content as a full-width wrapper (no max-width).
 * Each row is responsible for its own width behaviour:
 *
 *   row_in_grid — .jawn_row-inner acts as the centered container,
 *                 constrained to the site's configured container width.
 *
 *   row_full    — no constraint; .jawn_row-inner fills the full page width.
 *                 Row background / colour already spans edge-to-edge
 *                 because .jawn_row is always 100% of .jawn-pb-content.
 */

.jawn-pb-content {
    width: 100%;
}

.jawn_row.row_in_grid > .jawn_row-inner {
    max-width: 1200px; /* fallback — overridden by body container class below */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.container-1100 .jawn_row.row_in_grid > .jawn_row-inner { max-width: 1100px; }
.container-1200 .jawn_row.row_in_grid > .jawn_row-inner { max-width: 1200px; }
.container-1300 .jawn_row.row_in_grid > .jawn_row-inner { max-width: 1300px; }
.container-1400 .jawn_row.row_in_grid > .jawn_row-inner { max-width: 1400px; }

/* =========================================================
   Post Grid (jawn_pb_post_grid)
   ========================================================= */

.jawn-post-grid { width: 100%; }

.jawn-post-grid .jpg-card { box-sizing: border-box; min-width: 0; }

.jawn-post-grid .jpg-image { display: block; }

.jawn-post-grid .jpg-thumb {
    display: block;
    width: 100%;
    height: auto;
}

.jawn-post-grid .jpg-title { margin: 0 0 0.4em; }
.jawn-post-grid .jpg-title a { text-decoration: none; color: inherit; }

.jawn-post-grid .jpg-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1em;
    font-size: 0.85em;
    opacity: 0.75;
    margin-bottom: 0.5em;
}

.jawn-post-grid .jpg-terms {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4em;
}
.jawn-post-grid .jpg-terms a { text-decoration: none; }

.jawn-post-grid .jpg-excerpt { margin-bottom: 0.75em; }

.jawn-post-grid .jpg-readmore {
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
}

/* ---- Card Grid ---- */
.jawn-post-grid.jpg-layout-grid {
    display: grid;
    gap: var(--jpg-gap, 30px);
    grid-template-columns: repeat(var(--jpg-cols, 3), minmax(0, 1fr));
}
.jawn-post-grid.jpg-layout-grid .jpg-image { margin-bottom: 1em; }

/* ---- Masonry (CSS columns, no JS dependency) ---- */
.jawn-post-grid.jpg-layout-masonry {
    column-gap: var(--jpg-gap, 30px);
    column-count: var(--jpg-cols, 3);
}
.jawn-post-grid.jpg-layout-masonry .jpg-card {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin-bottom: var(--jpg-gap, 30px);
}
.jawn-post-grid.jpg-layout-masonry .jpg-image { margin-bottom: 1em; }

/* ---- Image Overlay ---- */
.jawn-post-grid.jpg-layout-overlay {
    display: grid;
    gap: var(--jpg-gap, 30px);
    grid-template-columns: repeat(var(--jpg-cols, 3), minmax(0, 1fr));
}
.jawn-post-grid.jpg-layout-overlay .jpg-card {
    position: relative;
    overflow: hidden;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    border-radius: 4px;
}
.jawn-post-grid.jpg-layout-overlay .jpg-image {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.jawn-post-grid.jpg-layout-overlay .jpg-image .jpg-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.jawn-post-grid.jpg-layout-overlay .jpg-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}
.jawn-post-grid.jpg-layout-overlay .jpg-overlay-body {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 1.25em;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}
.jawn-post-grid.jpg-layout-overlay .jpg-overlay-body a,
.jawn-post-grid.jpg-layout-overlay .jpg-title,
.jawn-post-grid.jpg-layout-overlay .jpg-terms a { color: #fff; }
.jawn-post-grid.jpg-layout-overlay .jpg-meta { opacity: 0.9; }

/* ---- Horizontal List ---- */
.jawn-post-grid.jpg-layout-list {
    display: flex;
    flex-direction: column;
    gap: var(--jpg-gap, 30px);
}
.jawn-post-grid.jpg-layout-list .jpg-card {
    display: flex;
    gap: var(--jpg-gap, 30px);
    align-items: flex-start;
}
.jawn-post-grid.jpg-layout-list .jpg-image { flex: 0 0 38%; max-width: 38%; }
.jawn-post-grid.jpg-layout-list .jpg-body { flex: 1 1 auto; min-width: 0; }

/* ---- Post Grid responsive (column counts set per element via --jpg-cols-t / --jpg-cols-m) ---- */
@media (max-width: 1023px) {
    .jawn-post-grid.jpg-layout-grid,
    .jawn-post-grid.jpg-layout-overlay { grid-template-columns: repeat(var(--jpg-cols-t, 2), minmax(0, 1fr)); }
    .jawn-post-grid.jpg-layout-masonry { column-count: var(--jpg-cols-t, 2); }
}

@media (max-width: 767px) {
    .jawn-post-grid.jpg-layout-grid,
    .jawn-post-grid.jpg-layout-overlay { grid-template-columns: repeat(var(--jpg-cols-m, 1), minmax(0, 1fr)); }
    .jawn-post-grid.jpg-layout-masonry { column-count: var(--jpg-cols-m, 1); }
    .jawn-post-grid.jpg-layout-list .jpg-card { flex-direction: column; }
    .jawn-post-grid.jpg-layout-list .jpg-image { flex-basis: auto; max-width: 100%; width: 100%; }
}

/* =========================================================
   Image Text Box (jawn_pb_image_box)
   ========================================================= */

.jawn-image-box {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    color: var(--jib-text, #fff);
    text-decoration: none;
}

.jawn-image-box .jib-image { position: absolute; inset: 0; z-index: 0; }

.jawn-image-box .jib-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.jawn-image-box.jib-zoom:hover .jib-img,
.jawn-image-box.jib-zoom:focus-visible .jib-img { transform: scale(1.06); }

.jawn-image-box .jib-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--jib-overlay, rgba(0, 0, 0, 0.4));
    transition: opacity 0.35s ease;
}

.jawn-image-box .jib-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    padding: 1.5em;
    box-sizing: border-box;
}
.jawn-image-box .jib-content-inner { width: 100%; }

.jawn-image-box .jib-title { margin: 0 0 0.4em; color: inherit; }
.jawn-image-box .jib-text { display: block; }
.jawn-image-box .jib-text :last-child { margin-bottom: 0; }

.jawn-image-box .jib-button {
    display: inline-block;
    margin-top: 1em;
    padding: 0.6em 1.4em;
    border: 2px solid currentColor;
    font-weight: 600;
    line-height: 1;
}

/* Vertical position of the text block */
.jawn-image-box.jib-valign-top .jib-content    { align-items: flex-start; }
.jawn-image-box.jib-valign-center .jib-content { align-items: center; }
.jawn-image-box.jib-valign-bottom .jib-content { align-items: flex-end; }

/* Text alignment */
.jawn-image-box.jib-talign-left .jib-content-inner   { text-align: left; }
.jawn-image-box.jib-talign-center .jib-content-inner { text-align: center; }
.jawn-image-box.jib-talign-right .jib-content-inner  { text-align: right; }

/* Reveal on hover: hide scrim + text until hover/focus */
.jawn-image-box.jib-reveal-hover .jib-overlay { opacity: 0; }
.jawn-image-box.jib-reveal-hover .jib-content {
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.jawn-image-box.jib-reveal-hover:hover .jib-overlay,
.jawn-image-box.jib-reveal-hover:focus-within .jib-overlay,
.jawn-image-box.jib-reveal-hover:focus-visible .jib-overlay { opacity: 1; }
.jawn-image-box.jib-reveal-hover:hover .jib-content,
.jawn-image-box.jib-reveal-hover:focus-within .jib-content,
.jawn-image-box.jib-reveal-hover:focus-visible .jib-content {
    opacity: 1;
    transform: none;
}

/* Hover animation starting states */
.jawn-image-box.jib-reveal-hover.jib-anim-slide-up .jib-content { transform: translateY(20px); }
.jawn-image-box.jib-reveal-hover.jib-anim-zoom .jib-content     { transform: scale(0.94); }