/* ================================================================
   INJECTABLES PAGE — injectables.css
   Only new CSS specific to this page.
   Global styles (hamburger, nav, animations, buttons, inputs)
   all live in style.css and are NOT repeated here.
   ================================================================ */

/* ── Bullet dot helpers ──────────────────────────────────────── */
.inj-dot {
    display: inline-block;
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #1a1a1a;
}

.inj-dot-white {
    display: inline-block;
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
}

/* ================================================================
   HERO — text left / image flush RIGHT
   ================================================================ */
.inj-hero {
    min-height: 100svh;
}

.inj-hero-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: calc(100svh - 100px);
}

.inj-hero-text {
    padding: 48px 20px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.inj-hero-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    flex-shrink: 0;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .inj-hero-inner {
        flex-direction: row;
        align-items: stretch;
        min-height: calc(100vh - 160px);
    }

    /* Text occupies ~52% of viewport */
    .inj-hero-text {
        flex: 0 0 52%;
        padding: 80px 0 80px 134px;
    }

    /* Image fills remaining 48% and extends to RIGHT viewport edge — no right padding */
    .inj-hero-img {
        flex: 1;
        aspect-ratio: unset;
        min-height: 640px;
    }
}

/* ================================================================
   SHARED SPLIT-ROW LAYOUT (service sections)
   Image column flush to LEFT or RIGHT edge on desktop
   ================================================================ */
.inj-split-row {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .inj-split-row {
        flex-direction: row;
        min-height: 757px;
    }
}

/* Image column — flush to LEFT edge (no left margin/padding) */
.inj-img-col {
    position: relative;
    width: 100%;
    aspect-ratio: 313 / 374;
    flex-shrink: 0;
    overflow: visible;
}

@media (min-width: 1024px) {
    .inj-img-col {
        width: 40%;
        aspect-ratio: unset;
    }
}

/* For .img-right variant — image flush to RIGHT edge */
.inj-split-row--rev .inj-img-col {
    width: 100%;
}

@media (min-width: 1024px) {
    .inj-split-row--rev .inj-img-col {
        width: 40%;
    }
}

/* Text column */
.inj-text-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 20px;
    min-width: 0;
}

@media (min-width: 1024px) {
    .inj-text-col {
        padding: 80px 80px 80px 100px;
    }

    .inj-split-row--rev .inj-text-col {
        padding: 80px 100px 80px 134px;
    }
}

/* ================================================================
   FAQ GRID — dark section two-column layout
   ================================================================ */
.inj-faq-grid {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

@media (min-width: 1024px) {
    .inj-faq-grid {
        flex-direction: row;
        gap: 0;
    }

    .inj-faq-col {
        flex: 1;
        padding-right: 40px;
    }

    .inj-faq-col:last-child {
        padding-right: 0;
        padding-left: 40px;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* Thin gradient divider line above each FAQ column heading */
.inj-faq-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(58, 58, 60, 0.2) 0%, #D9D9D9 50%, rgba(58, 58, 60, 0.2) 100%);
    width: 100%;
    margin-bottom: 32px;
}

/* ================================================================
   PRICE SECTION LAYOUT
   ================================================================ */
.inj-price-layout {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

@media (min-width: 1024px) {
    .inj-price-layout {
        flex-direction: row;
        gap: 64px;
        align-items: flex-start;
    }

    .inj-price-left {
        flex: 0 0 46%;
    }

    .inj-price-right {
        flex: 1;
    }
}

/* Clinic photo in price section */
.inj-price-photo {
    width: 100%;
    aspect-ratio: 658 / 823;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .inj-price-photo {
        max-width: 100%;
    }
}

/* ================================================================
   PRICE TABLE — three-column: Treatment | RN/NP | MD
   ================================================================ */
.price-table {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.price-header-row,
.price-row {
    display: grid;
    grid-template-columns: 1fr 72px 72px;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(58, 58, 60, 0.2);
}

.bg-black.relative .price-header-row,
.bg-black.relative .price-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.price-header-row {
    padding-bottom: 8px;
    margin-bottom: 2px;
}

.price-header-row *:first-child,
.price-row *:first-child {
    text-align: left !important;
}

@media (min-width: 1024px) {
    .price-header-row,
    .price-row {
        grid-template-columns: 1fr 80px 80px;
        gap: 12px;
        padding: 10px 0;
    }
}

/* Column alignment */
.price-col-treatment {
    min-width: 0;
    line-height: 1.3;
}

.price-col-rnp,
.price-col-md {
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ================================================================
   LASER PRICE TABLE — four-column: Area | 1 session | pkg 6 | pkg 10
   ================================================================ */
.laser-price-table {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.laser-price-header,
.laser-price-row {
    display: grid;
    grid-template-columns: 1fr 70px 70px 70px;
    gap: 4px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(58, 58, 60, 0.18);
    font-family: 'Gilda Display', serif;
    font-size: 16px;
    color: #1a1a1a;
}

.laser-price-header {
    padding-bottom: 6px;
    margin-bottom: 2px;
}

.laser-price-row span:not(.laser-col-area) {
    text-align: right;
    white-space: nowrap;
}

.laser-col-area {
    min-width: 0;
    line-height: 1.3;
}

@media (min-width: 1024px) {
    .laser-price-header,
    .laser-price-row {
        grid-template-columns: 1fr 100px 100px 100px;
        gap: 8px;
        font-size: 22px;
        padding: 10px 0;
    }
}

/* ================================================================
   PRICE TABLE — two-column: Treatment | Price
   ================================================================ */
.price-table-2col .price-header-row,
.price-table-2col .price-row {
    grid-template-columns: 1fr 80px;
}

@media (min-width: 1024px) {
    .price-table-2col .price-header-row,
    .price-table-2col .price-row {
        grid-template-columns: 1fr 100px;
    }
}

/* ================================================================
   NAV CLOSE BUTTON (supplement to style.css if needed)
   ================================================================ */
.nav-close-btn::before,
.nav-close-btn::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

.nav-close-btn::before {
    transform: rotate(45deg);
}

.nav-close-btn::after {
    transform: rotate(-45deg);
}

/* ================================================================
   SERVICE BUTTON VARIANTS (supplement to style.css)
   ================================================================ */
.service-btn-black {
    color: #1a1a1a;
    border-color: rgba(58, 58, 60, 0.35) !important;
}

.service-btn-black:hover {
    border-color: #AF9952 !important;
    color: #AF9952;
}

/* Transition for gold on hover */
.service-btn {
    transition: border-color 0.3s ease, color 0.3s ease;
}