/* WW Department Crawler -- Public v1.2.1 */

/* Hook fires inside .container but before #main-grid.
   The carousel is therefore naturally full-container-width -- no breakout needed.
   The shortcode fallback (inside col-md-9) still needs the breakout. */
.insp-fullwidth-wrap { width: 100%; display: block; }

.col-md-9 .insp-fullwidth-wrap,
#primary   .insp-fullwidth-wrap {
    width:     100vw;
    position:  relative;
    left:      50%;
    transform: translateX(-50%);
}

/* Wrap: transparent, no padding/margin, relative so JS hover-scroll works */
.insp-wrap {
    position:   relative;
    background: transparent;
    padding:    0;
    margin:     0;
    /* overflow:hidden removed -- it was clipping the hover-zone mousemove area */
}

/* Carousel track: horizontal scroll, no side padding so cards reach the edges */
.insp-carousel {
    display:                    flex;
    gap:                        20px;
    overflow-x:                 auto;
    overflow-y:                 visible;
    scroll-snap-type:           x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:            none;
    /* top/bottom padding keeps shadow & hover-lift visible; NO left/right padding */
    padding:                    20px 0 24px;
    align-items:                flex-start;
    cursor:                     grab;
}
.insp-carousel::-webkit-scrollbar { display: none; }
.insp-carousel.is-dragging,
.insp-carousel.is-hovering,
.insp-carousel.is-easing {
    cursor:           grabbing;
    scroll-behavior:  auto;
    scroll-snap-type: none;
}

/* Base card */
.insp-card {
    flex:              0 0 400px;
    width:             400px;
    height:            400px;
    border-radius:     20px;
    scroll-snap-align: center;
    position:          relative;
    overflow:          hidden;
    background-color:  #1a5276;
    box-shadow:        0 3px 10px rgba(0,0,0,.18);
    transition:        transform .28s cubic-bezier(.22,1,.36,1),
                       box-shadow .28s cubic-bezier(.22,1,.36,1);
    cursor:            default;
    user-select:       none;
    -webkit-user-select: none;
    -webkit-font-smoothing: antialiased;
    flex-shrink: 0;
}
.insp-card--linked { cursor: pointer; }
/* Lift reduced to 4px so shadow stays within carousel's overflow-y clip area */
.insp-card:hover   { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.24); }
.insp-carousel.is-dragging .insp-card { cursor: grabbing; }

/* Media cards: 400px tall, width driven by image aspect ratio via JS */
.insp-card--media {
    flex:      0 0 auto;
    width:     400px;
    height:    400px;
    min-width: 200px;
    max-width: 800px;
}

.insp-card__media { position: absolute; inset: 0; overflow: hidden; }
.insp-card__img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
    transition: transform .45s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}
.insp-card--has-img:hover .insp-card__img { transform: scale(1.08); }

/* Scrim */
.insp-card__overlay {
    position:   absolute; inset: 0;
    background: linear-gradient(160deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.68) 100%);
    z-index:    1;
}
.insp-card--img-only .insp-card__overlay,
.insp-card--img-only .insp-card__content { display: none; }

/* PDF-only badge */
.insp-card--pdf-only { display: flex; align-items: center; justify-content: center; }
.insp-card__pdf-badge {
    position:  absolute; top: 50%; left: 50%;
    transform: translate(-50%,-65%); opacity: .85;
}

/* Content */
.insp-card__content {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 28px 28px 32px; color: #fff;
}
.insp-card__title {
    font-size: 1.35em; font-weight: 800; line-height: 1.2;
    margin-bottom: 8px; letter-spacing: -.015em;
}
.insp-card__body { font-size: 1em; line-height: 1.55; margin-bottom: 18px; opacity: .95; }

/* Shadows only when text overlays an image */
.insp-card--has-img:not(.insp-card--img-only) .insp-card__title {
    text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 12px rgba(0,0,0,.45);
}
.insp-card--has-img:not(.insp-card--img-only) .insp-card__body {
    text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
}
.insp-card__btn {
    display: inline-block; align-self: flex-start;
    padding: 10px 22px; background: #fff; color: #1a5276;
    border-radius: 50px; font-size: .82em; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
    transition: background .22s, color .22s, box-shadow .22s;
    box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: pointer;
}
/* On card hover: transparent fill + inset border (image cards get text shadow too) */
.insp-card:hover .insp-card__btn {
    background: transparent;
    color:      #fff;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.9);
}
.insp-card--has-img:not(.insp-card--img-only):hover .insp-card__btn {
    text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
}

.insp-no-cards { padding: 40px; color: #888; font-style: italic; }

/* Preview card in admin modal */
/* Preview: rendered at FULL card size, then scaled down via transform.
   Fonts, spacing, and border-radius all match the live card exactly.
   JS sets width to match image ratio (same as live); height stays 400px.
   transform-origin: top center keeps it aligned in the wrapper. */
.insp-card--preview {
    flex:            none !important;
    width:           400px;          /* overridden by JS for image cards */
    height:          400px !important;
    cursor:          default !important;
    border-radius:   20px !important; /* matches live card */
    pointer-events:  none;
    transform:       scale(0.75);
    transform-origin: top center;
    transition:      width .2s ease;
}

@media (max-width: 480px) {
    .insp-card { flex: 0 0 300px; width: 300px; height: 300px; }
    .insp-card--media { min-width: 180px; max-width: 340px; }
    .insp-card__content { padding: 18px 18px 22px; }
}

/* ── Page with Carousel template: spacing ────────────────────────────────── */
/* Remove top padding from sidebar and content columns -- the carousel sits
   directly above them and the theme's default padding assumes a sub-nav. */
.page-template-page-with-carousel #secondary { padding-top: 0 !important; }
.page-template-page-with-carousel #primary   { padding-top: 0 !important; }
.page-template-page-with-carousel #primary .entry-content { padding-top: 0; }
.page-template-page-with-carousel #primary .entry-content > .wpb-content-wrapper > .vc_row:first-child,
.page-template-page-with-carousel #primary .entry-content > .wpb-content-wrapper > .wpb_row:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}