/* ==========================================================================
   V7 COMPONENTS — Shared Reusable Styles for All V7 Page Templates

   These styles supplement the core design system in header-v7.php.
   header-v7.php (inline) contains: tokens, typography, layout, buttons,
   animations, nav, top bar, hero, and all component base styles.

   This file contains ADDITIONAL styles needed by inner page templates
   that are NOT part of the homepage but reuse homepage components.

   Loaded conditionally on V7 templates only via functions.php.
   ========================================================================== */

/* ==========================================================================
   1. PAGE HERO (inner pages — different from homepage hero)
   ========================================================================== */
.page-hero {
    background: var(--navy);
    padding: 8rem 0 3.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(27,117,188,0.08) 0%, transparent 70%);
    border-radius: 50%;
}
.page-hero .overline { color: var(--blue-bright); }
.page-hero .heading-xl { color: var(--white); margin-bottom: 1rem; }
.page-hero .body-lg { color: rgba(255,255,255,0.6); max-width: 600px; margin: 0 auto; }

/* Breadcrumb inside page hero */
.v7-breadcrumb {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    margin-bottom: 1.5rem;
}
.v7-breadcrumb a {
    color: rgba(255,255,255,0.5);
    transition: color 0.3s;
}
.v7-breadcrumb a:hover { color: var(--blue-bright); }
.v7-breadcrumb .separator {
    margin: 0 0.4rem;
    color: rgba(255,255,255,0.25);
}
.v7-breadcrumb .current { color: rgba(255,255,255,0.7); }

/* ==========================================================================
   2. CONTENT SECTIONS (inner page body content)
   ========================================================================== */
.v7-content-section {
    padding: 3.5rem 0;
}
.v7-content-section:nth-child(even) {
    background: var(--ice);
}
.v7-content-section h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.15;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}
.v7-content-section h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}
.v7-content-section p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}
.v7-content-section ul,
.v7-content-section ol {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}
.v7-content-section li {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}
.v7-content-section a {
    color: var(--blue);
    font-weight: 500;
    transition: color 0.3s;
}
.v7-content-section a:hover { color: var(--blue-dark); }

/* Two-column layout for content sections */
.v7-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

/* ==========================================================================
   3. BOOKING CTA BLOCK (reusable across all inner pages)
   ========================================================================== */
.v7-booking-cta {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    padding: 3.5rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.v7-booking-cta::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(27,117,188,0.08) 0%, transparent 70%);
    border-radius: 50%;
}
.v7-booking-cta .heading-lg { color: var(--white); margin-bottom: 0.75rem; }
.v7-booking-cta .body-lg { color: rgba(255,255,255,0.6); margin-bottom: 2rem; max-width: 500px; margin-left: auto; margin-right: auto; }
.v7-booking-cta .cta-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}
.v7-booking-cta .cta-phone {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
    justify-content: center;
    color: rgba(255,255,255,0.45);
    font-size: 0.82rem;
}
.v7-booking-cta .cta-phone a {
    color: var(--blue-bright);
    font-weight: 600;
    font-size: 1rem;
}

/* ==========================================================================
   4. SIDEBAR (for service/condition pages with side content)
   ========================================================================== */
.v7-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.v7-sidebar-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    border: 1px solid var(--border);
}
.v7-sidebar-card h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}
.v7-sidebar-card ul {
    list-style: none;
    padding: 0;
}
.v7-sidebar-card li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
}
.v7-sidebar-card li:last-child { border-bottom: none; }
.v7-sidebar-card a {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.3s;
}
.v7-sidebar-card a:hover { color: var(--blue); }

/* Quick CTA sidebar card */
.v7-sidebar-cta {
    background: var(--navy);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    color: var(--white);
}
.v7-sidebar-cta h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--white);
}
.v7-sidebar-cta p {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* ==========================================================================
   5. BENEFITS / FEATURES GRID
   ========================================================================== */
.v7-benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
.v7-benefit-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    border: 1px solid var(--border);
    transition: all 0.3s var(--ease);
}
.v7-benefit-card:hover {
    border-color: var(--blue);
    box-shadow: var(--shadow-sm);
}
.v7-benefit-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--ice), var(--ice-dark));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
}
.v7-benefit-card h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}
.v7-benefit-card p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ==========================================================================
   6. PROCEDURE / TREATMENT DETAILS
   ========================================================================== */
.v7-procedure-overview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}
.v7-procedure-stat {
    background: var(--ice);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    text-align: center;
}
.v7-procedure-stat .value {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--blue);
    margin-bottom: 0.15rem;
}
.v7-procedure-stat .label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ==========================================================================
   7. RELATED SERVICES GRID
   ========================================================================== */
.v7-related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.v7-related-card {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 1rem;
    border: 1px solid var(--border);
    transition: all 0.3s var(--ease);
}
.v7-related-card:hover {
    border-color: var(--blue);
    box-shadow: var(--shadow-sm);
}
.v7-related-card img {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}
.v7-related-card h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
}
.v7-related-card p {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ==========================================================================
   8. GOOGLE MAP EMBED
   ========================================================================== */
.v7-map-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    margin-bottom: 2rem;
}
.v7-map-container iframe {
    width: 100%;
    height: 350px;
    border: none;
    display: block;
}

/* ==========================================================================
   9. SCHEMA-AWARE REVIEW BLOCK (for location pages)
   ========================================================================== */
.v7-reviews-section {
    background: var(--ice);
    padding: 3.5rem 0;
}
.v7-review-highlight {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    border: 1px solid var(--border);
    margin-bottom: 1rem;
}
.v7-review-highlight .stars {
    color: #F5A623;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}
.v7-review-highlight blockquote {
    font-size: 0.92rem;
    font-style: italic;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}
.v7-review-highlight cite {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: normal;
}

/* ==========================================================================
   RESPONSIVE — TABLET (768px+)
   ========================================================================== */
@media (min-width: 768px) {
    .page-hero { padding: 10rem 0 4rem; }
    .v7-two-col { grid-template-columns: 2fr 1fr; }
    .v7-benefits-grid { grid-template-columns: 1fr 1fr; }
    .v7-procedure-overview { grid-template-columns: repeat(3, 1fr); }
    .v7-related-grid { grid-template-columns: 1fr 1fr; }
    .v7-booking-cta .cta-actions { flex-direction: row; justify-content: center; }
    .v7-map-container iframe { height: 450px; }
}

/* ==========================================================================
   RESPONSIVE — DESKTOP (1024px+)
   ========================================================================== */
@media (min-width: 1024px) {
    .page-hero { padding: 11rem 0 4.5rem; }
    .v7-two-col { grid-template-columns: 2fr 1fr; gap: 3rem; }
    .v7-benefits-grid { grid-template-columns: repeat(3, 1fr); }
    .v7-procedure-overview { grid-template-columns: repeat(4, 1fr); }
    .v7-related-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   RESPONSIVE — WIDE DESKTOP (1280px+)
   ========================================================================== */
@media (min-width: 1280px) {
    .v7-benefits-grid { grid-template-columns: repeat(4, 1fr); }
}