/*
 * Do Webs sub-page templates ([#dowebs#] expansions) — public styles.
 * The responsive grid is driven by CSS custom properties set inline from the
 * token's `column` param, so any items-per-row (1–6) works without generating
 * per-count utility classes. Breakpoints mirror the site's Tailwind scale.
 */
/* The page-builder wraps dropped content in a Bootstrap-style column
   (.col-md-12) that is a flex item sized to its content. Templates whose cards
   have no intrinsic width (e.g. the full-bleed image cards, whose image is
   absolutely positioned) make that column — and our grid — collapse. Force any
   column containing a Do Webs block to grow and fill its row. Scoped via :has()
   so it never touches other page-builder columns, and it also fixes content
   that was already saved. */
.row > [class*="col-"]:has(.dw-block) { flex-grow: 1; min-width: 0; }
.dw-block { margin: 0; width: 100%; }

.dw-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(var(--dw-c-m, 1), minmax(0, 1fr));
}
@media (min-width: 640px)  { .dw-grid { grid-template-columns: repeat(var(--dw-c-pad, 2), minmax(0, 1fr)); } }
@media (min-width: 768px)  { .dw-grid { grid-template-columns: repeat(var(--dw-c-sm, 2),  minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dw-grid { grid-template-columns: repeat(var(--dw-c-lg, 3),  minmax(0, 1fr)); } }
@media (min-width: 1280px) { .dw-grid { grid-template-columns: repeat(var(--dw-c-xl, 4),  minmax(0, 1fr)); } }

/* sublevel_image_left — image-left / text-right card. Stacks on mobile;
   side-by-side from 640px with the image taking --dw-img-w (image_width/12). */
.dw-card-left {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.75rem;
    background: #fafafa;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.dw-card-left:hover { background: #fff; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); }
.dw-card-left__media { overflow: hidden; aspect-ratio: 16 / 10; }
.dw-card-left__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.dw-card-left:hover .dw-card-left__media img { transform: scale(1.04); }
.dw-card-left__body { padding: 1.25rem 1.5rem; }
@media (min-width: 640px) {
    .dw-card-left { flex-direction: row; align-items: stretch; }
    .dw-card-left__media { flex: 0 0 var(--dw-img-w, 33%); aspect-ratio: auto; }
}

/* sublevel_image_full — full-bleed image card; text overlays the bottom over a
   dark gradient scrim. Fixed 3:4 portrait tiles for a uniform gallery grid. */
.dw-card-full {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 0.75rem;
    aspect-ratio: 3 / 4;
    background: #27272a;
    text-decoration: none;
}
.dw-card-full img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.dw-card-full:hover img { transform: scale(1.05); }
.dw-card-full__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0) 70%);
}
.dw-card-full__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.25rem 1.5rem;
}

/* sublevel_image_interlace — full-width zig-zag rows (image one side, text the
   other, alternating). Stacks image-over-text on mobile; side-by-side 50/50
   from 768px, with .is-reverse flipping every other row. */
.dw-interlace { display: flex; flex-direction: column; gap: 2.5rem; }
.dw-interlace-row {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
    text-decoration: none;
}
.dw-interlace__media { width: 100%; overflow: hidden; border-radius: 0.75rem; aspect-ratio: 16 / 10; }
.dw-interlace__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.dw-interlace-row:hover .dw-interlace__media img { transform: scale(1.03); }
.dw-interlace__body { width: 100%; }
@media (min-width: 768px) {
    .dw-interlace { gap: 4rem; }
    .dw-interlace-row { flex-direction: row; gap: 3rem; }
    .dw-interlace-row.is-reverse { flex-direction: row-reverse; }
    .dw-interlace__media,
    .dw-interlace__body { flex: 1 1 50%; min-width: 0; }
    .dw-interlace__media { aspect-ratio: 4 / 3; }
}

/* sublevel_faq — accordion. Smooth height via the grid-template-rows 0fr↔1fr
   trick (Alpine toggles .is-open); no collapse plugin needed. */
.dw-faq { border-top: 1px solid #e4e4e7; }
.dw-faq__item { border-bottom: 1px solid #e4e4e7; }
.dw-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    padding: 1.25rem 0.25rem;
    background: none;
    border: 0;
    text-align: left;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #18181b;
    cursor: pointer;
}
.dw-faq__q:hover { color: #52525b; }
.dw-faq__icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; color: #a1a1aa; transition: transform 0.2s ease; }
.dw-faq__icon.is-open { transform: rotate(180deg); }
.dw-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.dw-faq__a.is-open { grid-template-rows: 1fr; }
.dw-faq__a-inner { overflow: hidden; min-height: 0; }
.dw-faq__a-inner > p { margin: 0; padding: 0 0.25rem 1.25rem; color: #52525b; line-height: 1.7; max-width: 68ch; }

/* sublevel_image_top_slide — Swiper carousel of image-top cards. Swiper's own
   CSS handles track/slide layout; these rules style the neutral arrows + dots
   and give the cards full height. Before Swiper inits (or if JS is off) the
   track is a horizontally-scrollable flex row so content stays usable. */
.dw-carousel { position: relative; padding-bottom: 2.5rem; }
.dw-carousel:not(.swiper-initialized) .swiper-wrapper { display: flex; gap: 1.5rem; overflow-x: auto; }
.dw-carousel:not(.swiper-initialized) .swiper-slide { flex: 0 0 80%; }
.dw-carousel:not(.swiper-initialized) .dw-carousel__btn { display: none; }
.dw-carousel .swiper-slide { height: auto; }
.dw-carousel .swiper-slide > .dw-card { height: 100%; display: flex; flex-direction: column; }
/* Arrows overlay the card row, vertically centred (offset for the bottom
   pagination padding). This template has no header, so side arrows are the
   only placement that never overflows the content width. */
.dw-carousel__btn {
    position: absolute;
    top: calc(50% - 1.25rem);
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid #e4e4e7;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    color: #3f3f46;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dw-carousel__prev { left: 0.5rem; }
.dw-carousel__next { right: 0.5rem; }
.dw-carousel__btn:hover { background: #18181b; border-color: #18181b; color: #fff; }
.dw-carousel__btn svg { width: 1.125rem; height: 1.125rem; }
.dw-carousel__btn.swiper-button-disabled { opacity: 0.35; pointer-events: none; }
.dw-carousel .swiper-pagination { position: absolute; bottom: 0; }
.dw-carousel .swiper-pagination-bullet { background: #a1a1aa; opacity: 0.5; }
.dw-carousel .swiper-pagination-bullet-active { background: #18181b; opacity: 1; }

/* sublevel_testimonial — quote card riding in the shared .dw-carousel.
   Quote body on top, avatar + name + role in the footer. */
.dw-testimonial {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 2rem;
    border: 1px solid #e4e4e7;
    border-radius: 0.75rem;
    background: #fafafa;
}
.dw-testimonial__quote {
    flex: 1 1 auto;
    margin: 0 0 1.5rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #3f3f46;
    quotes: "\201C" "\201D";
}
.dw-testimonial__quote::before { content: open-quote; margin-right: 0.1em; color: #a1a1aa; }
.dw-testimonial__quote::after { content: close-quote; margin-left: 0.05em; color: #a1a1aa; }
.dw-testimonial__person { display: flex; align-items: center; gap: 0.875rem; }
.dw-testimonial__avatar { flex: 0 0 auto; width: 3rem; height: 3rem; overflow: hidden; border-radius: 0.5rem; }
.dw-testimonial__avatar.is-round { border-radius: 9999px; }
.dw-testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.dw-testimonial__meta { display: flex; flex-direction: column; min-width: 0; }
.dw-testimonial__name { font-weight: 600; color: #18181b; }
.dw-testimonial__role { font-size: 0.875rem; color: #71717a; }

/* Pagination — see resources/views/site/dowebs/_pagination.blade.php */
.dw-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 2rem;
}
.dw-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1;
    color: #3f3f46;
    background: #f4f4f5;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.dw-page:hover { background: #e4e4e7; }
.dw-page-active { background: #18181b; color: #fff; }
.dw-page-disabled { opacity: 0.4; pointer-events: none; }