/* ===================================================================
   CRUNCHMEAL PRO - PINTEREST STYLES
   =================================================================== */

/* ===================================================================
   PIN IMAGE WRAPPER
   =================================================================== */
.pin-image-wrap {
    position: relative;
}

/* ===================================================================
   PINTEREST OVERLAY (appears on hover)
   =================================================================== */
.pinterest-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-md);
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--transition-base), transform var(--transition-base);
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
}

.pin-image-wrap:hover .pinterest-overlay,
.pin-image-wrap:focus-within .pinterest-overlay {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ===================================================================
   PINTEREST SAVE BUTTON
   =================================================================== */
.pinterest-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-pinterest);
    color: var(--color-white);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(230, 0, 35, 0.4);
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
    cursor: pointer;
}

.pinterest-save-btn:hover {
    background: #c0001d;
    color: var(--color-white);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(230, 0, 35, 0.5);
}

.pinterest-save-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.pinterest-save-text {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* ===================================================================
   HERO PINTEREST BUTTON
   =================================================================== */
.btn--pinterest {
    background: var(--color-pinterest);
    color: var(--color-white) !important;
    border-color: var(--color-pinterest);
}

.btn--pinterest:hover {
    background: #c0001d;
    border-color: #c0001d;
    color: var(--color-white) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 0, 35, 0.35);
}

/* ===================================================================
   SINGLE RECIPE HERO OVERLAY
   =================================================================== */
.single-hero-image.pin-image-wrap .pinterest-overlay {
    bottom: var(--space-lg);
    left: var(--space-lg);
    right: auto;
    background: none;
    padding: 0;
}

.single-hero-image.pin-image-wrap:hover .pinterest-save-btn {
    transform: scale(1.05);
}

/* ===================================================================
   FLOATING PINTEREST BUTTON (visible always on recipe page)
   =================================================================== */
.recipe-card-full .btn--pinterest {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ===================================================================
   RECIPE CARD MINI - HOVER OVERLAY POSITIONING
   =================================================================== */
.recipe-card-mini-image-wrap .pinterest-overlay {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ===================================================================
   PINTEREST PROFILE WIDGET
   =================================================================== */
.pinterest-profile-widget {
    margin-bottom: var(--space-md);
}

.pinterest-follow-btn {
    width: 100%;
    justify-content: center;
}

/* ===================================================================
   PINTEREST RICH PIN HIDDEN IMAGE
   =================================================================== */
.pinterest-hidden-image {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    pointer-events: none;
}

/* ===================================================================
   SAVE BUTTON ANIMATION
   =================================================================== */
@keyframes pinSaved {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.pinterest-save-btn.just-saved {
    animation: pinSaved 0.4s ease;
    background: #2A9D8F;
}

/* ===================================================================
   TOUCH DEVICE SUPPORT
   =================================================================== */
@media (hover: none) {
    .pinterest-overlay {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 50%);
    }

    .pinterest-save-btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.65rem;
    }
}

/* ===================================================================
   PRINT: HIDE PINTEREST ELEMENTS
   =================================================================== */
@media print {
    .pinterest-overlay,
    .pinterest-save-btn,
    .btn--pinterest,
    .pinterest-profile-widget,
    .pinterest-follow-btn {
        display: none !important;
    }
}