/* =========================================================
   RESPONSIVE.CSS — Silver Fox
   Load this AFTER style.css:
   <link rel="stylesheet" href="{{ asset('front/css/style.css') }}?v={{ filemtime(public_path('front/css/style.css')) }}">
   <link rel="stylesheet" href="{{ asset('front/css/responsive.css') }}?v={{ filemtime(public_path('front/css/responsive.css')) }}">

   Organized by Bootstrap 5.0.2's own breakpoints so it lines up with
   how the grid (.col-lg-*, .col-md-*, .col-sm-*) already reflows:
     xl  -> max-width: 1399.98px  (down from >=1400 container width)
     lg  -> max-width: 1199.98px  (down from >=1200, .col-lg-* stacks)
     md  -> max-width: 991.98px   (down from >=992,  .col-md-* stacks)
     sm  -> max-width: 767.98px   (down from >=768,  .col-sm-* stacks)
     xs  -> max-width: 575.98px   (phones)

   This file does NOT repeat the @media blocks style.css already has
   (.clinical-services, .quality-healthcare, .wl-bg-image, .faq-img,
   .tc-collage, .step-card, .timeline-row, .resources-filter-list,
   .resources-cta-img, .services-hero) — it only ADDS coverage for
   sections/elements that currently have none, plus a few global
   safety nets (horizontal-scroll prevention, container gutters).
   ========================================================= */

/* ---------------------------------------------------------
   GLOBAL SAFETY NET
   --------------------------------------------------------- */
html, body {
    overflow-x: hidden;
}
img {
    max-width: 100%;
}

/* Rounded black/white "floating" sections use side margins (0 15px,
   20px 15px, etc.) plus 50px corner radius - both look oversized and
   waste width on phones. Tone both down below md. */
@media (max-width: 991.98px) {
    section.pillar,
    section.services-pillar,
    section.clinical-services,
    section.weight-loss,
    section.member-login-section,
    section.membership-plans,
    section.three-steps,
    section.patient-timeline,
    section.member-voices,
    section.resources-cta,
    section.shop-products,
    section.stack-cta,
    section.peptide-fundamentals,
    section.member-login-section,
    section.journey,
    section.refill-sec,
    section.resources-hero,
    section.services-hero {
        margin-left: 8px;
        margin-right: 8px;
        border-radius: 28px;
    }
}
@media (max-width: 575.98px) {
    section.pillar,
    section.services-pillar,
    section.clinical-services,
    section.weight-loss,
    section.member-login-section,
    section.membership-plans,
    section.three-steps,
    section.patient-timeline,
    section.member-voices,
    section.resources-cta,
    section.shop-products,
    section.stack-cta,
    section.peptide-fundamentals,
    section.journey,
    section.refill-sec,
    section.resources-hero,
    section.services-hero {
        margin-left: 0;
        margin-right: 0;
        border-radius: 20px;
    }
    section.pillar {
    padding: 2rem 0;
}
}

/* ---------------------------------------------------------
   HEADER / NAVBAR
   --------------------------------------------------------- */
@media (max-width: 991.98px) {
    header {
        position: relative;
        top: 0;
        padding: 15px 0;
        background-color: #000000;
    }
    ul.navbar-nav {
        background: none;
        border-radius: 0;
        padding: 15px 0 0;
        gap: 0;
    }
    .navbar-light .navbar-nav .nav-link {
        color: #FFFFFF;
        padding: 12px 15px;
    }
    .navbar-light .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .nav-link.active {
        background-color: transparent;
        color: #B08D57;
    }
    .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.3);
    }
    .navbar-toggler-icon {
        filter: invert(1);
    }
    /* Any section that assumed an absolutely-positioned 30px-top header
       needs its own top padding restored now that header is in-flow. */
    section.home-banner,
    section.inner-banner,
    section.resources-hero {
        padding-top: 60px;
    }
}

/* ---------------------------------------------------------
   HERO HEADINGS (shared .section-heading h1/h2 scaling)
   --------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .section-heading h1 { font-size: 46px; }
    .section-heading h2 { font-size: 38px; line-height: 48px; }
}
@media (max-width: 767.98px) {
    .section-heading h1 { font-size: 36px; }
    .section-heading h2 { font-size: 30px; line-height: 40px; }
    .section-heading p { font-size: 16px; line-height: 26px; }
    .btn-wrapper { flex-wrap: wrap; }
    .btn-white, .btn-transparent, .btn-black { padding: 12px 26px; font-size: 15px; }
}

/* ---------------------------------------------------------
   HOME / INNER BANNER
   --------------------------------------------------------- */
@media (max-width: 991.98px) {
    section.home-banner,
    section.inner-banner {
        padding: 200px 0 120px;
    }
}
@media (max-width: 575.98px) {
    section.home-banner,
    section.inner-banner {
        padding: 60px 0 90px;
    }
}

/* ---------------------------------------------------------
   PILLAR CARDS
   --------------------------------------------------------- */
@media (max-width: 767.98px) {
    .pillar-card { padding: 25px; border-radius: 24px; }
    .pillar-card h4 { font-size: 24px; line-height: 32px; }
    .pillar-img { height: 200px; }
}

/* ---------------------------------------------------------
   RETA-PEPTIDE (absolutely positioned bg image + min-height 1050px)
   --------------------------------------------------------- */
@media (max-width: 991.98px) {
    section.reta-peptide {
        min-height: 0;
        padding: 60px 0;
        display: block;
    }
    .reta-peptide-img {
        position: relative;
        height: auto;
        top: 0;
        margin-bottom: 30px;
    }
    .reta-peptide .section-heading {
        padding-left: 0;
    }
}

/* ---------------------------------------------------------
   WEIGHT-LOSS HERO (100px heading) + WL SWIPER CARDS
   --------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .section-heading h1.wl-heading { font-size: 64px; margin-bottom: 30px; }
}
@media (max-width: 767.98px) {
    .section-heading h1.wl-heading { font-size: 42px; margin-bottom: 20px; }
    .section-heading p.wl-desc { font-size: 15px; line-height: 24px; }
    section.weight-loss { padding: 100px 0 60px; }
}
@media (max-width: 575.98px) {
    .section-heading h1.wl-heading { font-size: 34px; }
    .wl-card-img { height: 200px; }
    .wl-nav { margin-top: 40px; }
}

/* ---------------------------------------------------------
   TRUSTED CUSTOMERS COLLAGE
   --------------------------------------------------------- */
@media (max-width: 767.98px) {
    .section-heading h2.tc-heading { font-size: 30px; margin-top: 20px; }
    .tc-img-1, .tc-img-2 { height: 180px; }
    .trust-left { position: relative; left: 0; width: 100%; margin-bottom: 20px; }
}

/* ---------------------------------------------------------
   HEALTHCARE-WAY (fixed min-height 900px, absolutely positioned img)
   --------------------------------------------------------- */
@media (max-width: 991.98px) {
    section.healthcare-way {
        min-height: 0;
        background-size: cover;
        padding: 60px 0;
    }
    .hw-img {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-top: 30px;
    }
}

/* ---------------------------------------------------------
   MEMBERSHIP PLAN CARDS
   --------------------------------------------------------- */
@media (max-width: 767.98px) {
    .mp-card { padding: 40px 25px; }
    .mp-badge { font-size: 12px; padding: 10px 16px; }
}

/* ---------------------------------------------------------
   FAQ SECTION
   --------------------------------------------------------- */
@media (max-width: 991.98px) {
    .faq-accordion { margin-top: 40px; }
    .section-heading .faq-desc p { margin-left: 0; max-width: 100%; }
}
@media (max-width: 575.98px) {
    .faq-accordion .accordion-button { font-size: 16px; padding: 15px 0; }
}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
@media (max-width: 991.98px) {
    .site-footer { border-radius: 24px; padding: 45px 0 25px; }
    .footer-links-grid { flex-wrap: wrap; row-gap: 20px; }
}
@media (max-width: 767.98px) {
    .footer-social { justify-content: flex-start; margin-top: 15px; }
    .footer-copyright { text-align: center; }
}
@media (max-width: 575.98px) {
    .footer-logo img { height: 56px; }
    .footer-cols { margin-bottom: 25px; }
}

/* ---------------------------------------------------------
   MEMBER LOGIN CARD
   --------------------------------------------------------- */
@media (max-width: 575.98px) {
    .login-card { padding: 30px 25px 25px; border-radius: 18px; }
    .member-login-section .section-heading p { max-width: 100%; }
}

/* ---------------------------------------------------------
   THREE STEPS (black portal section, bordered columns)
   --------------------------------------------------------- */
@media (max-width: 991.98px) {
    .three-step-col {
        border-right: 0;
        border-bottom: 1px solid #ffffff5e;
    }
    .three-step-number { font-size: 46px; }
}
@media (max-width: 575.98px) {
    section.three-steps { padding: 60px 0; }
}

/* ---------------------------------------------------------
   CARE-STANDARD (01–05 numbered columns)
   --------------------------------------------------------- */
@media (max-width: 767.98px) {
    .care-standard-number,
    .care-standard-number-alt { font-size: 46px; }
    .care-standard-col hr { margin: 15px 0; }
}

/* ---------------------------------------------------------
   MEMBER VOICES QUOTE
   --------------------------------------------------------- */
@media (max-width: 767.98px) {
    section.member-voices { padding: 60px 25px; }
    .member-voices-quote { font-size: 24px; margin-bottom: 25px; }
    .member-voices-name { font-size: 20px; }
}

/* ---------------------------------------------------------
   RESOURCES HERO / CARDS
   --------------------------------------------------------- */
@media (max-width: 767.98px) {
    .resource-card-img { height: 200px; }
    .resource-card-img img { height: 200px !important; }
    .resource-card { padding: 25px 18px 0 18px; }
}

/* ---------------------------------------------------------
   PEPTIDE FUNDAMENTALS (bg image behind heading text)
   --------------------------------------------------------- */
@media (max-width: 991.98px) {
    section.peptide-fundamentals {
        background-image: none;
        padding: 60px 0;
    }
    .peptide-fundamentals-img { margin-top: 30px; }
    .peptide-stats-row { flex-wrap: wrap; gap: 25px; }
}

/* ---------------------------------------------------------
   SAFETY OVERSIGHT
   --------------------------------------------------------- */
@media (max-width: 991.98px) {
    .safety-oversight .section-heading h2 {
        margin-bottom: 40px;
        max-width: 100%;
    }
    a.navbar-brand img {
    width: 65%;
}
}
@media (max-width: 575.98px) {
    .safety-item .section-heading h6.eyebrow-link { font-size: 17px; }
}

/* ---------------------------------------------------------
   CARE COMPARISON TABLE — this is a flex row with fixed 130px
   columns, which will overflow/clip on phones without help.
   --------------------------------------------------------- */
@media (max-width: 575.98px) {
    .comparison-header,
    .comparison-row {
        padding: 12px 14px;
    }
    .comparison-header span:first-child,
    .comparison-row span.comparison-label {
        font-size: 13px;
        max-width: 110px;
    }
    .comparison-header .comparison-check,
    .comparison-header .comparison-cross,
    .comparison-row .comparison-check,
    .comparison-row .comparison-cross {
        width: 55px;
        font-size: 13px;
    }
}

/* ---------------------------------------------------------
   TIMELINE (circle-number variant used on the portal page)
   --------------------------------------------------------- */
@media (max-width: 767.98px) {
    .timeline-row-cricle .timeline-col {
        margin: 0 0 30px;
        padding: 0;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---------------------------------------------------------
   SHOP PRODUCTS GRID
   --------------------------------------------------------- */
@media (max-width: 767.98px) {
    .shop-products-row { row-gap: 40px; margin-top: 40px; }
    .shop-product-img { height: 200px; }
    .shop-product-lower { padding: 0 20px; }
    .shop-product-card h4 { font-size: 18px; line-height: 25px; }
}

/* ---------------------------------------------------------
   BLOG DETAIL HERO (fixed 550px height)
   --------------------------------------------------------- */
@media (max-width: 767.98px) {
    section.inner-banner.blog-detail-inner-banner {
        height: auto;
        padding: 160px 0 60px;
    }
    section.home-banner {
        position: relative;
        background-position: 80%;
    }

    section.home-banner:before {
        content: "";
        width: 100%;
        height: 100%;
        background-color: #000000a6;
        position: absolute;
        top: 0;
    }

    section.home-banner p {
        color: white;
    }

    section.inner-banner {
        position: relative;
        background-position: 100%;
    }

    section.inner-banner:before {
        content: "";
        width: 100%;
        height: 100%;
        background-color: #0000002b;
        position: absolute;
        top: 0;
    }

    .inner-banner .section-heading p {
        color: white;
    }
}

/* ---------------------------------------------------------
   PAGINATION — shrink tap targets so many page links don't
   overflow/wrap awkwardly on narrow screens.
   --------------------------------------------------------- */
@media (max-width: 575.98px) {
    ul.pagination a, ul.pagination span {
        padding: 8px 12px;
        font-size: 13px;
    }
}