/* ------------------------------------------------------------------
   Palermo Feature Section ([pcc_feature]) — two-column feature block.
   The component is transparent (sits on the page's own light/dark
   background); the "Color Scheme" option only flips the text color.
   ------------------------------------------------------------------ */
/* Own vertical rhythm so the section doesn't run into neighbouring rows
   (the WPBakery column it sits in supplies little/no vertical padding). */
.pcc-feature {
    padding: clamp(48px, 7vw, 96px) 0;
}
.pcc-feature__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 15px; /* gutter on narrow viewports / when the row has none */
}

/* Image on the left: media column first (desktop only). */
.pcc-feature--img-left .pcc-feature__media { order: -1; }

/* ---------- Text column ---------- */
.pcc-feature__subtitle {
    margin: 0 0 18px;
    font-family: var(--cc-sans, "Montserrat", sans-serif);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #C19C5C; /* antique gold — legible on light and dark */
}
.pcc-feature__title {
    margin: 0 0 24px;
    font-family: var(--cc-serif, "Cormorant Garamond", Georgia, serif);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.1;
    color: currentColor;
}
.pcc-feature__body {
    font-family: var(--cc-sans, "Montserrat", sans-serif);
    font-size: 16px;
    line-height: 1.7;
    max-width: 38em;
}
.pcc-feature__body > :first-child { margin-top: 0; }
.pcc-feature__body > :last-child { margin-bottom: 0; }

/* Color scheme: text only (component background stays transparent). */
.pcc-feature--dark { color: #ffffff; }
.pcc-feature--dark .pcc-feature__body { color: rgba(255, 255, 255, 0.72); }
.pcc-feature--light { color: #1A1A1A; }
.pcc-feature--light .pcc-feature__body { color: rgba(26, 26, 26, 0.72); }

/* ---------- Badges ---------- */
.pcc-feature__badges {
    list-style: none;
    margin: 44px 0 0;
    padding: 0;
    display: grid;
    gap: 28px;
}
.pcc-feature__badge {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.pcc-feature__badge-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #C19C5C;
    border-radius: 4px;
    color: #C19C5C;
    font-size: 18px;
}
.pcc-feature__badge-title {
    margin: 2px 0 6px;
    font-family: var(--cc-serif, "Cormorant Garamond", Georgia, serif);
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.2;
    color: currentColor;
}
.pcc-feature__badge-text {
    margin: 0;
    font-family: var(--cc-sans, "Montserrat", sans-serif);
    font-size: 15px;
    line-height: 1.6;
}
.pcc-feature--dark .pcc-feature__badge-text { color: rgba(255, 255, 255, 0.6); }
.pcc-feature--light .pcc-feature__badge-text { color: rgba(26, 26, 26, 0.6); }

/* ---------- Image (dual-layer desaturated inset border) ----------
   Two copies of the SAME image at the SAME size: the base sets the box and
   (when bordered) is desaturated; the crisp top copy is clipped 24px inward,
   so the visible 24px ring shows the muted base while the centre stays vivid.
   Because both layers are identical, the frame is pixel-aligned. */
.pcc-feature__image { position: relative; line-height: 0; }
.pcc-feature__image-layer { display: block; width: 100%; height: auto; }
.pcc-feature__image-base { position: relative; }
.pcc-feature__image-top {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
}

/* No border: hide the top layer; the base shows at full saturation. */
.pcc-feature:not(.pcc-feature--bordered) .pcc-feature__image-top { display: none; }

/* Bordered: desaturate the base, clip the crisp copy inward by ~24px. */
.pcc-feature--bordered .pcc-feature__image-base { filter: saturate(0.4) brightness(0.96); }
.pcc-feature--bordered .pcc-feature__image-top { clip-path: inset(24px); }

/* ---------- Responsive: stack; text always above the image ---------- */
@media (max-width: 768px) {
    .pcc-feature__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    /* Reset desktop ordering so the (DOM-first) text sits above the image. */
    .pcc-feature--img-left .pcc-feature__media,
    .pcc-feature__media { order: 0; }
    .pcc-feature__badges { margin-top: 32px; }
    /* Tighten the inset frame a touch on small screens. */
    .pcc-feature--bordered .pcc-feature__image-top { clip-path: inset(16px); }
}