/**
 * BeautyHealthPage — Component Styles
 */

/* === Sticky Sidebar === */
.bhp-sidebar { position: sticky; top: 24px; align-self: flex-start; }

/* === Post Card === */
.bhp-post-card {
    border-radius: 10px;
    overflow: hidden; transition: transform 0.2s ease;
    
    padding: 0 0 16px 0;
}
.bhp-post-card:hover { transform: translateY(-2px); }
/* Add horizontal padding to text inside cards */
.bhp-post-card .wp-block-post-title,
.bhp-post-card .wp-block-post-excerpt,
.bhp-post-card .wp-block-post-date,
.bhp-post-card .bhp-category-badge {
    padding-left: 4px;
    padding-right: 4px;
}
.bhp-post-card .wp-block-post-title,
.bhp-post-card .wp-block-post-excerpt {
    overflow: hidden; transition: transform 0.2s ease;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.bhp-post-card .wp-block-post-title { -webkit-line-clamp: 3; }
.bhp-post-card .wp-block-post-excerpt { -webkit-line-clamp: 3; }

/* === Category Badge === */
.bhp-category-badge { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background-color: #E8F0E4; color: #5A7A4E; text-decoration: none; }
.bhp-category-badge:hover { background-color: #7C9A6E; color: #fff; }

/* === Category Section === */
.bhp-category-section { border-bottom: 1px solid #E5E7EB; padding-bottom: var(--wp--preset--spacing--50, 2.5rem); margin-bottom: var(--wp--preset--spacing--50, 2.5rem); }
.bhp-category-section:last-child { border-bottom: none; }

/* === Newsletter === */
.bhp-newsletter { background: #F8F7F4; border-radius: 12px; padding: 40px; text-align: center; }

/* ============================================
   Hero Slider — Fade
   ============================================ */
.bhp-hero-slider { overflow: hidden !important; border-radius: 12px; }
.bhp-hero-slider .wp-block-post-template {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
    gap: 0 !important;
}
.bhp-hero-slider .wp-block-post-template > * {
    grid-column: 1 !important;
    grid-row: 1 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 0;
}
.bhp-hero-slider .wp-block-post-template:not(.bhp-js-active) > :first-child {
    opacity: 1; visibility: visible; pointer-events: auto; z-index: 1;
}
.bhp-hero-slider .wp-block-post-template.bhp-js-active > .bhp-slide-active {
    opacity: 1; visibility: visible; pointer-events: auto; z-index: 1;
}
/* 16:9 desktop */
.bhp-hero-slider .wp-block-cover { min-height: 0 !important; aspect-ratio: 16 / 9; }

/* Slider arrows */
.bhp-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 21px));
    z-index: 10;
    background: rgba(255,255,255,0.85);
    color: #2D2D2D;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.bhp-slider-arrow:hover {
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.bhp-slider-prev { left: 16px; }
.bhp-slider-next { right: 16px; }

/* Slider dots */
.bhp-slider-nav { display: flex; justify-content: center; gap: 8px; padding: 16px 0; }
.bhp-slider-dot { width: 10px; height: 10px; border-radius: 50%; background: #D1D5DB; border: none; cursor: pointer; padding: 0; transition: background 0.2s; }
.bhp-slider-dot.active { background: #7C9A6E; }

/* ============================================
   Video Embeds
   ============================================ */
.wp-block-embed__wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.wp-block-embed__wrapper iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
.entry-content iframe[src*="youtube"],
.wp-block-post-content iframe[src*="youtube"] { width: 100% !important; aspect-ratio: 16/9; height: auto !important; }
.videoWrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

/* ============================================
   Headings
   ============================================ */
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.25rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); }
.wp-block-post-content h2 { font-size: clamp(1.7rem, 4vw, 2.25rem); }
.wp-block-post-content h3 { font-size: clamp(1.4rem, 3vw, 1.75rem); }

/* ============================================
   Mobile
   ============================================ */
@media (max-width: 781px) {
    .bhp-sidebar { position: static; }

    /* Hero mobile: full-width, taller, edge-to-edge */
    .bhp-hero-slider {
        border-radius: 0 !important;
        margin-left: calc(-1 * var(--wp--style--root--padding-left, 20px)) !important;
        margin-right: calc(-1 * var(--wp--style--root--padding-right, 20px)) !important;
        width: calc(100% + var(--wp--style--root--padding-left, 20px) + var(--wp--style--root--padding-right, 20px)) !important;
    }
    .bhp-hero-slider .wp-block-cover {
        aspect-ratio: 3 / 4 !important;
    }
    /* Smaller text on mobile hero */
    .bhp-hero-slider .wp-block-post-title {
        font-size: 1.5rem !important;
    }
    .bhp-hero-slider .wp-block-post-excerpt {
        font-size: 0.875rem !important;
    }
    /* Smaller arrows on mobile */
    .bhp-slider-arrow {
        width: 36px;
        height: 36px;
        font-size: 1.25rem;
    }
    .bhp-slider-prev { left: 8px; }
    .bhp-slider-next { right: 8px; }

    iframe { max-width: 100% !important; }
}