/* pt-reviews.css — Program review sticker carousel */

.pt-reviews {
    --pt-orange: #FB5B32;
    --pt-navy:   #272066;
    --pt-cream:  #FBF7F2;
    --pt-line:   rgba(39,32,102,.1);

    margin: 48px 0;
    padding: 0 16px;
    font-family: "Manrope", system-ui, -apple-system, sans-serif;
}

.pt-reviews__heading {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--pt-navy);
    margin: 0 0 28px;
}

/* Swiper container needs overflow visible so card shadows + tilt aren't clipped. */
.pt-reviews__carousel {
    position: relative;
    overflow: hidden;
    padding: 36px 0 36px !important;
}
.pt-reviews__carousel .swiper-wrapper {
    align-items: stretch;
}
.pt-reviews__carousel .swiper-slide {
    height: auto;
    display: flex;
    padding: 24px 10px;
}

/* Nav arrows */
.pt-reviews__prev,
.pt-reviews__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    min-height: 40px;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #fff;
    border: 1.5px solid var(--pt-navy);
    color: var(--pt-navy);
    cursor: pointer;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    line-height: 1;
    transition: background .2s ease, color .2s ease;
}
.pt-reviews__prev:hover,
.pt-reviews__next:hover { background: var(--pt-navy); color: #fff; }
.pt-reviews__prev { left: -4px; }
.pt-reviews__next { right: -4px; }
.pt-reviews__prev::before { content: "‹"; font-size: 22px; line-height: 1; }
.pt-reviews__next::before { content: "›"; font-size: 22px; line-height: 1; }
.pt-reviews__prev.swiper-button-disabled,
.pt-reviews__next.swiper-button-disabled { opacity: .35; cursor: not-allowed; }

/* ─── Card base ───────────────────────────────────────────────────── */
.pt-rev-card {
    position: relative;
    width: 100%;
    border: 1.5px solid var(--pt-navy);
    border-radius: 18px;
    padding: 24px;
    color: var(--pt-navy);
    transition: transform .35s cubic-bezier(.22,1,.36,1);
    will-change: transform;
}
.pt-rev-card:hover { transform: rotate(0) translateY(-4px) !important; }

.pt-rev-row {
    display: flex; align-items: center; justify-content: space-between;
    margin: 10px 0 14px;
}
.pt-rev-title {
    font-size: 20px; font-weight: 800; line-height: 1.22; letter-spacing: -.015em;
    margin: 0 0 8px;
    color: inherit;
}
.pt-rev-body {
    font-size: 14px; line-height: 1.55;
    margin: 0 0 16px;
}
.pt-rev-footer {
    display: flex; align-items: center; gap: 11px;
    padding-top: 14px;
    border-top: 1.5px dashed rgba(39,32,102,.18);
}
.pt-rev-who { line-height: 1.25; }
.pt-rev-name { font-weight: 700; font-size: 13px; }
.pt-rev-meta { font-size: 11.5px; color: rgba(39,32,102,.55); }

.pt-rev-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--pt-orange);
    color: #fff;
    display: grid; place-items: center;
    font-weight: 800; font-size: 14px; letter-spacing: .02em;
    border: 1.5px solid var(--pt-navy);
    flex-shrink: 0;
}

/* ─── TripAdvisor mark ────────────────────────────────────────────── */
.pt-rev-tripadvisor {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    pointer-events: none;
    opacity: .9;
}
.pt-rev-tripadvisor svg { width: 100%; height: 100%; display: block; }
.pt-rev-card--classic     .pt-rev-tripadvisor { color: var(--pt-navy); }
.pt-rev-card--bold        .pt-rev-tripadvisor { color: #fff; }
.pt-rev-card--bold-accent .pt-rev-tripadvisor { color: #fff; }

/* ─── Rating dots ─────────────────────────────────────────────────── */
.pt-rating-dots { display: inline-flex; gap: 5px; align-items: center; }
.pt-rating-dot {
    width: 14px; height: 14px;
    display: inline-block;
}

/* ─── Variant 1 · CLASSIC ─────────────────────────────────────────── */
.pt-rev-card--classic {
    background: var(--pt-cream);
    box-shadow: 6px 6px 0 0 var(--pt-orange), 6px 6px 0 1.5px var(--pt-navy);
    transform: rotate(-1.2deg);
    padding-top: 32px;
}
.pt-rev-card--classic .pt-rev-body { color: rgba(39,32,102,.78) !important; }
.pt-rev-quote {
    position: absolute; top: -16px; left: 22px;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--pt-orange);
    border: 1.5px solid var(--pt-navy);
    display: grid; place-items: center;
    color: #fff; font-family: Georgia, "Times New Roman", serif;
    font-size: 44px; line-height: 1; padding-top: 14px;
}

/* ─── Variant 2 · BOLD NAVY ───────────────────────────────────────── */
.pt-rev-card--bold {
    background: var(--pt-navy);
    color: #fff;
    border-color: var(--pt-navy);
    box-shadow: 6px 6px 0 0 var(--pt-orange);
    transform: rotate(.4deg);
    padding: 28px;
}
.pt-rev-card--bold .pt-rev-title { color: #fff !important; }
.pt-rev-card--bold .pt-rev-body  { color: rgba(255,255,255,.78) !important; }
.pt-rev-card--bold .pt-rev-name  { color: #fff !important; }
.pt-rev-card--bold .pt-rev-meta  { color: rgba(255,255,255,.55) !important; }
.pt-rev-card--bold .pt-rev-footer { border-top-color: rgba(255,255,255,.18); }
.pt-rev-card--bold .pt-rev-quote {
    position: static; width: auto; height: auto; border: 0; border-radius: 0;
    background: transparent; color: var(--pt-orange);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 84px; line-height: .6; padding: 0;
    display: block; text-align: left;
    margin: -10px 0 -4px;
}
.pt-rev-card--bold .pt-rev-divider {
    width: 36px; height: 2px; margin: 0 0 14px;
    background: var(--pt-orange); border-radius: 2px;
}
.pt-rev-card--bold .pt-rev-rating-inline {
    margin-left: auto;
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.pt-rev-card--bold .pt-rev-rating-inline .pt-rev-num {
    font-weight: 700; font-size: 18px; color: #fff; line-height: 1;
}

/* ─── Variant 3 · BOLD ACCENT (orange bg) ─────────────────────────── */
.pt-rev-card--bold-accent {
    background: var(--pt-orange);
    color: #fff;
    border-color: var(--pt-navy);
    box-shadow: 6px 6px 0 0 var(--pt-navy);
    transform: rotate(-.4deg);
    padding: 28px;
}
.pt-rev-card--bold-accent .pt-rev-title { color: #fff !important; }
.pt-rev-card--bold-accent .pt-rev-body  { color: rgba(255,255,255,.88) !important; }
.pt-rev-card--bold-accent .pt-rev-name  { color: #fff !important; }
.pt-rev-card--bold-accent .pt-rev-meta  { color: rgba(255,255,255,.7) !important; }
.pt-rev-card--bold-accent .pt-rev-footer { border-top-color: rgba(255,255,255,.25); }
.pt-rev-card--bold-accent .pt-rev-avatar {
    background: #fff; color: var(--pt-orange);
}
.pt-rev-card--bold-accent .pt-rev-quote {
    position: static; width: auto; height: auto; border: 0; border-radius: 0;
    background: transparent; color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 84px; line-height: .6; padding: 0;
    display: block; text-align: left;
    margin: -10px 0 -4px;
}
.pt-rev-card--bold-accent .pt-rev-divider {
    width: 36px; height: 2px; margin: 0 0 14px;
    background: #fff; border-radius: 2px;
}
.pt-rev-card--bold-accent .pt-rev-rating-inline {
    margin-left: auto;
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.pt-rev-card--bold-accent .pt-rev-rating-inline .pt-rev-num {
    font-weight: 700; font-size: 18px; color: #fff; line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .pt-rev-card { transition: none !important; transform: none !important; }
}

/* ─── Program Reviews widget (Elementor) ───────────────────────────── */
.pt-rv-widget {
    --pt-orange: #FB5B32;
    --pt-navy:   #272066;
    --pt-cream:  #FBF7F2;
    font-family: "Manrope", system-ui, -apple-system, sans-serif;
}

.pt-rv-heading {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.18;
    color: var(--pt-navy);
}

/* Both layouts get top + bottom padding so the classic-variant orange quote
   bubble (.pt-rev-quote at position:absolute; top:-16; height:44 on the
   .pt-rev-card) and the cards 6px box-shadow have visible breathing room
   inside the layout container. Without this, ancestors like the Elementor
   section/column can clip the bubble (rendered as a rounded rectangle, with
   the cut-off top showing in unexpected places). */
.pt-rv-grid,
.pt-rv-masonry {
    padding: 22px 0 14px;
}

.pt-rv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch;
}
.pt-rv-grid > .pt-rv-cell {
    display: flex;
    height: 100%;
}
.pt-rv-grid > .pt-rv-cell > .pt-rev-card {
    width: 100%;
    height: 100%;
}

.pt-rv-masonry {
    column-count: 3;
    column-gap: 28px;
}
.pt-rv-masonry > .pt-rv-cell {
    display: block;
    width: 100%;
    margin-bottom: 28px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    /* NOTE: a previous version added `contain: layout` here to defend against
       a CSS-multi-column quirk where absolute descendants of cards near a
       column edge could resolve against the wrong containing block. That fix
       had a side-effect: contain:layout makes the cell itself the containing
       block for the cards .pt-rev-quote (absolute), bypassing the cards
       position:relative, which could cause the orange bubble to appear
       detached from a rotated card. Trust the cards own position:relative
       instead — combined with the layout-container padding above, this keeps
       the bubble in place across grid AND masonry. */
}

/* Cards inside the widget need positive padding so their drop-shadows + tilt
   aren't clipped by neighbouring grid/masonry cells. The card itself already
   has internal padding; this just gives the layout container some breathing
   room so 6px-offset shadows on the classic variant stay visible. */
.pt-rv-widget .pt-rev-card {
    width: 100%;
}

/* Sticker rotation — give each variant a subtle distinct tilt so the wall
   reads as a sticker board. .pt-rv-sticker--yes is set by the widget's
   sticker_rotation switcher (prefix_class). Hover already flattens via the
   existing .pt-rev-card:hover rule above. */
.pt-rv-sticker--yes .pt-rv-cell:nth-child(3n+1) .pt-rev-card--bold        { transform: rotate(-0.6deg); }
.pt-rv-sticker--yes .pt-rv-cell:nth-child(3n+2) .pt-rev-card--bold        { transform: rotate(0.9deg);  }
.pt-rv-sticker--yes .pt-rv-cell:nth-child(3n)   .pt-rev-card--bold        { transform: rotate(-0.3deg); }
.pt-rv-sticker--yes .pt-rv-cell:nth-child(3n+1) .pt-rev-card--bold-accent { transform: rotate(0.7deg);  }
.pt-rv-sticker--yes .pt-rv-cell:nth-child(3n+2) .pt-rev-card--bold-accent { transform: rotate(-0.9deg); }
.pt-rv-sticker--yes .pt-rv-cell:nth-child(3n)   .pt-rev-card--bold-accent { transform: rotate(0.4deg);  }
/* classic keeps its existing -1.2deg from .pt-rev-card--classic; in n+2 cells
   we flip the direction so adjacent classics don't all tilt the same way. */
.pt-rv-sticker--yes .pt-rv-cell:nth-child(3n+2) .pt-rev-card--classic     { transform: rotate(1.2deg); }

/* When sticker rotation is OFF (no .pt-rv-sticker--yes on the Elementor widget
   wrapper), override classic's intrinsic -1.2deg so the wall lies flat. */
.elementor-widget-pt-program-reviews:not(.pt-rv-sticker--yes) .pt-rev-card--classic {
    transform: none;
}

.pt-rv-empty {
    padding: 24px;
    background: rgba(39,32,102,.06);
    color: var(--pt-navy);
    border: 1.5px dashed rgba(39,32,102,.25);
    border-radius: 12px;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 14px;
    text-align: center;
}

@media (max-width: 900px) {
    .pt-rv-grid    { grid-template-columns: repeat(2, 1fr); }
    .pt-rv-masonry { column-count: 2; }
    .pt-rv-heading { font-size: 26px; }
}

/* On mobile we drop both grid and masonry in favour of a horizontal scroll-snap
   carousel — one card visible, next card peeking, swipe to advance. Pure CSS,
   no JS, native momentum scrolling. The `unset` rules nuke the grid /
   column-count so the inherited flex display takes over cleanly. */
@media (max-width: 600px) {
    .pt-rv-grid,
    .pt-rv-masonry {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 16px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        column-count: unset;
        grid-template-columns: unset;
        /* padding-top:32 gives the classic-variant orange quote bubble
           (.pt-rev-quote is position:absolute; top:-16; height:44) full
           headroom inside the track. With less, the bubbles top half lands
           outside the tracks box and the browsers silent overflow-y coercion
           (visible → auto when overflow-x:auto) clips it, making the bubble
           read as a rounded rectangle instead of a circle. */
        padding: 32px 16px 22px;
        margin: 0 -16px;
        /* Smoothly morph the track height to match the centered card —
           the inline `style="height: ..."` is set per scroll-snap stop by
           pt-reviews-widget.js using the centered cell's offsetHeight. */
        transition: height .28s cubic-bezier(.22, 1, .36, 1);
    }
    .pt-rv-grid::-webkit-scrollbar,
    .pt-rv-masonry::-webkit-scrollbar { display: none; width: 0; height: 0; }

    /* Reset desktop's `display:flex; height:100%` on cells — those rules
       combined with the new flex-row container were stretching each cell to
       the full intrinsic height of the row and stacking weirdly, leaving an
       empty band below the cards equal to a card-height. */
    .pt-rv-grid > .pt-rv-cell,
    .pt-rv-masonry > .pt-rv-cell {
        display: block;
        flex: 0 0 85%;
        max-width: 85%;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        margin-bottom: 0;
        height: auto;
    }
    .pt-rv-grid > .pt-rv-cell > .pt-rev-card,
    .pt-rv-masonry > .pt-rv-cell > .pt-rev-card {
        height: auto;
    }

    .pt-rv-heading { font-size: 22px; }
}