/* ==========================================================================
   Cloud India Hub — homepage section normaliser
   File: public/frontend/css/cih-sections.css
   Load AFTER cih-theme.css and hero-search.css.

   WHAT THIS DOES
   --------------
   The existing sections are kept exactly as they are. This file only imposes
   a consistent rhythm on top of them: one spacing scale, two alternating
   backgrounds, one heading treatment, one button, one card.

   Measured on the real page before this file existed, the twelve top-level
   blocks below the hero had padding-top values of
   0, 40, 20, 0, 64, 0, 40, 0, 40, 60, 60, 40px
   and seven different backgrounds including four separate gradients and a
   flat #dee2e6. That inconsistency is what reads as untidy — not any one
   section.

   Everything is scoped under .cih-page.cih-page, which apply_hero.php wraps around
   the homepage content below the hero. Remove that wrapper and the page
   reverts exactly.

   SPECIFICITY
   -----------
   Selectors are written .cih-page.cih-page rather than .cih-page. That is not
   a typo. The original <style> blocks live inside @section('content'), which
   Blade renders into the <body> — after this file's <link> in <head>. On equal
   specificity the later rule wins, so a plain .cih-page prefix loses to their
   .plans-grid .plan-card. Doubling the class raises specificity without
   needing !important on every declaration.

   !important is still used where the original carries the value as an inline
   style attribute, which nothing else can override.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Horizontal overflow
   -------------------------------------------------------------------------- */

/* The mobile menu drawer (.menu-box) is position:absolute at left:1540px with
   visibility:hidden — parked off-canvas. Absolutely positioned elements still
   count toward scrollWidth even when invisible, so it forces a horizontal
   scrollbar on every page. Measured 67px of overflow at a 1440px viewport.

   `overflow-x: clip` rather than `hidden`: clip does not create a scroll
   container, so position:sticky descendants keep working. `hidden` here would
   break the sticky header. Chrome 90+, Firefox 81+, Safari 16+.

   This is the correct fix for a deliberately off-canvas drawer. It is NOT a
   fix for .nav-outer, which computes to 1309px wide at left:198px — 1507px
   total inside a 1440px viewport. That is a real bug in
   menu-css/web-menu.css and should be fixed there; clipping only hides it. */
html {
    overflow-x: clip;
}

@supports not (overflow-x: clip) {
    html { overflow-x: hidden; }
}

/* The real overflow cause, not just the drawer.

   .nav-outer is a flex item with `flex: 1 1 auto` and the default
   `min-width: auto`, so it cannot shrink below its content. Its children —
   main menu 597px, language select 156px, user profile 396px — total more
   than the 1024px container, so it computes to 1309px at EVERY viewport and
   overflows anything narrower than about 1500px.

   `min-width: 0` lets a flex item shrink; `flex-wrap: wrap` lets the row
   break instead of overflowing. Between roughly 1024px and 1300px the header
   now wraps to two rows rather than running off the page.

   The proper fix is to raise the breakpoint at which the header collapses to
   the mobile toggler — the desktop nav does not fit until ~1300px, but the
   toggler only appears far below that. Do that in menu-css/web-menu.css and
   these three lines can be deleted. */
.nav-outer {
    min-width: 0;
    flex-wrap: wrap;
}

.nav-outer > * {
    min-width: 0;
}

/* The hosting plan section forces its own width:

       .hosting-section .pricing-controls { min-width: 1350px; }

   A hard 1350px floor regardless of viewport. On any screen with an effective
   CSS width under that — which includes a 1920px monitor at 125% Windows
   scaling, giving 1536px, and 150%, giving 1280px — the plan cards are pushed
   off both edges. It is the reason the plans look cut off "even on web". */
.hosting-section .pricing-controls,
.cih-page.cih-page .pricing-controls {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Plan grid: 300px minimum forced two columns to overflow on a phone. */
.cih-page.cih-page .plans-grid,
.hosting-section .plans-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important;
    gap: clamp(1rem, 2vw, 1.75rem) !important;
}

/* The "Save 20%!" ribbon is absolutely positioned past the card's right edge;
   with the card now flush to the gutter it clipped at the viewport. */
.cih-page.cih-page .plan-card,
.hosting-section .plan-card {
    overflow: visible;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   1. Rhythm — one spacing scale, two backgrounds
   -------------------------------------------------------------------------- */

.cih-page.cih-page {
    --cih-band: clamp(3rem, 6vw, 5.5rem);
    --cih-gutter: clamp(0.875rem, 2.5vw, 1.25rem);
    font-family: var(--cih-font);
    color: var(--cih-ink);
}

.cih-page.cih-page > section,
.cih-page.cih-page > div {
    padding-top: var(--cih-band) !important;
    padding-bottom: var(--cih-band) !important;
    /* Sections without a .container child ran their cards edge to edge, so the
       rounded corners and borders sat flush against the viewport and read as
       cut off. Measured: .plan-card and .service-card were exactly 412px wide
       in a 412px viewport. */
    padding-left: var(--cih-gutter, 1rem) !important;
    padding-right: var(--cih-gutter, 1rem) !important;
    background-image: none !important;
    background-color: var(--cih-paper) !important;
}

/* Alternate. Two grounds only — white and the pale violet paper. */
.cih-page.cih-page > section:nth-of-type(even) {
    background-color: var(--cih-paper-2) !important;
}

/* Sections that were already dark keep a dark ground rather than being
   flattened to white, so the page still has a rhythm of light and dark. */
.cih-page.cih-page > section.feature-part1,
.cih-page.cih-page > section.cloud-hero {
    background-color: var(--cih-ink) !important;
    background-image:
        radial-gradient(60rem 30rem at 80% -10%, #3a2470 0%, rgba(58, 36, 112, 0) 60%),
        radial-gradient(46rem 26rem at 5% 105%, #2a1a58 0%, rgba(42, 26, 88, 0) 58%) !important;
    color: #efeaff;
}

.cih-page.cih-page > section.feature-part1 :is(h1, h2, h3, h4, .main-title),
.cih-page.cih-page > section.cloud-hero :is(h1, h2, h3, h4, .main-title) {
    color: #fff !important;
}

.cih-page.cih-page > section.feature-part1 p,
.cih-page.cih-page > section.cloud-hero p {
    color: #b8adde !important;
}

/* One content column across the whole page. Bootstrap's .container varies by
   breakpoint, which is why section widths did not line up. */
.cih-page.cih-page .container,
.cih-page.cih-page .container-fluid {
    width: min(1240px, 100%) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
}

/* --------------------------------------------------------------------------
   2. Headings — sentence case, one scale, one colour
   -------------------------------------------------------------------------- */

.cih-page.cih-page :is(h1, h2, .main-title) {
    font-family: var(--cih-font) !important;
    font-size: clamp(1.75rem, 3.8vw, 2.7rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.028em !important;
    font-weight: 700 !important;
    font-variation-settings: 'opsz' 48;
    /* Not text-transform: lowercase — that turns VPS into vps. The headings
       are typed in capitals in the Blade, so apply_hero.php rewrites the copy
       itself. This only guards against a stray uppercase rule. */
    text-transform: none !important;
    color: var(--cih-ink) !important;
    /* Kills the blue/violet gradient heading treatment. */
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    margin: 0 0 0.6rem !important;
    text-wrap: balance;
}

.cih-page.cih-page :is(h3, h4) {
    font-family: var(--cih-font) !important;
    font-size: clamp(1.05rem, 1.9vw, 1.2rem) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.014em !important;
    font-weight: 700 !important;
    text-transform: none !important;
    margin: 0 0 0.45rem !important;
}

.cih-page.cih-page p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--cih-muted);
}

/* Decorative underline bars under headings — an orange rule that appears in
   one section only. Removed for consistency. */
.cih-page.cih-page .main-title + hr,
.cih-page.cih-page .title-line,
.cih-page.cih-page .heading-line {
    display: none !important;
}

/* --------------------------------------------------------------------------
   3. Buttons — one shape, hue-driven
   -------------------------------------------------------------------------- */

.cih-page.cih-page :is(.btn, button, a).btn,
.cih-page.cih-page .book-now,
.cih-page.cih-page .know-more,
.cih-page.cih-page .read-more,
.cih-page.cih-page .billing-btn {
    font-family: var(--cih-font) !important;
    font-weight: 700 !important;
    letter-spacing: -0.012em !important;
    text-transform: none !important;
    border-radius: 0.6rem !important;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
}

/* Primary actions adopt the brand violet instead of the orange/purple mix. */
.cih-page.cih-page .book-now,
.cih-page.cih-page .btn-primary,
.cih-page.cih-page .billing-btn.active {
    background: var(--cih-brand) !important;
    border-color: var(--cih-brand) !important;
    color: #fff !important;
}

.cih-page.cih-page .know-more,
.cih-page.cih-page .read-more,
.cih-page.cih-page .btn-outline-primary {
    background: transparent !important;
    border: 2px solid var(--cih-brand) !important;
    color: var(--cih-brand) !important;
}

.cih-page.cih-page :is(.btn, button, a).btn:focus-visible {
    outline: 3px solid var(--cih-ring) !important;
    outline-offset: 3px;
}

/* Buttons the generic selectors miss. Found by auditing every button's
   computed background against the palette after the first pass:
   .continue-button was #1f2937, .button carried a radial gradient,
   Submit Now was #dc2626 with no class at all. */
.cih-page.cih-page .continue-button,
.cih-page.cih-page button[type="submit"],
.cih-page.cih-page input[type="submit"],
.cih-page.cih-page .btn-danger,
.cih-page.cih-page .submit-btn {
    background: var(--cih-brand) !important;
    background-image: none !important;
    border: 2px solid var(--cih-brand) !important;
    color: #fff !important;
    border-radius: 0.6rem !important;
    font-family: var(--cih-font) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    min-height: 44px;
    box-shadow: none !important;
}

.cih-page.cih-page .button {
    background: transparent !important;
    background-image: none !important;
    border: 2px solid var(--cih-brand) !important;
    color: var(--cih-brand) !important;
    border-radius: 0.6rem !important;
    box-shadow: none !important;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.cih-page.cih-page .button:hover {
    background: var(--cih-brand) !important;
    color: #fff !important;
}

.cih-page.cih-page .nav-button {
    background: var(--cih-paper) !important;
    border: 1px solid var(--cih-line) !important;
    color: var(--cih-ink) !important;
    border-radius: 999px !important;
    width: 44px;
    height: 44px;
}

/* A 50x3px accent rule sits inside .main-title as an inline-styled <span>.
   Recoloured rather than hidden — it is a deliberate divider. */
.cih-page.cih-page .main-title span[style] {
    background: var(--cih-brand) !important;
}

/* --------------------------------------------------------------------------
   4. Cards — equal height, one border, one radius, no drop shadow stack
   -------------------------------------------------------------------------- */

.cih-page.cih-page :is(.card, .service-card, .feature-wrap, .plan-card, .domain-price) {
    height: 100%;
    display: flex !important;
    flex-direction: column;
    background: var(--cih-paper) !important;
    border: 1px solid var(--cih-line) !important;
    border-radius: 0.9rem !important;
    box-shadow: none !important;
    padding: 1.5rem !important;
    /* Several cards carry a fixed pixel width plus a left margin, which
       pushed the document 5px wide at a 320px viewport: 320px card +
       5px margin inside a 320px column. The grid supplies the gaps now. */
    max-width: 100% !important;
    margin-inline: 0 !important;
    transition: border-color 0.16s ease, transform 0.16s ease;
}

.cih-page.cih-page :is(.card, .service-card, .feature-wrap, .plan-card):hover {
    border-color: var(--cih-line-strong, #cabfe8) !important;
    transform: translateY(-3px);
    background: var(--cih-paper) !important;
}

/* Push the action to the bottom so buttons line up across a row. */
.cih-page.cih-page :is(.card, .service-card, .plan-card) :is(.btn, a.btn, .book-now, .read-more):last-child {
    margin-top: auto !important;
}

/* Numbered 01 / 02 / 03 badges. The benefits list is not a sequence, so the
   numbers encode nothing. */
.cih-page.cih-page .card-number,
.cih-page.cih-page .number-badge,
.cih-page.cih-page .count-badge {
    display: none !important;
}

/* --------------------------------------------------------------------------
   5. Responsive — continuous reflow, no per-breakpoint stylesheet
   -------------------------------------------------------------------------- */

/* auto-fit + minmax means the column count adapts at every width rather than
   snapping at Bootstrap's four breakpoints. */
.cih-page.cih-page .row:has(> [class*="col-"]) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1.25rem !important;
    margin: 0 !important;
}

.cih-page.cih-page .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

/* Any fixed-width row that would otherwise force a horizontal scrollbar. */
.cih-page.cih-page :is(.d-flex, .flex-row) {
    flex-wrap: wrap;
}

.cih-page.cih-page img {
    max-width: 100%;
    height: auto;
}

/* Tables scroll instead of breaking the page. */
.cih-page.cih-page table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

@media (max-width: 768px) {
    .cih-page.cih-page {
        --cih-band: 2.5rem;
    }

    .cih-page.cih-page .container,
    .cih-page.cih-page .container-fluid {
        width: calc(100% - 1.75rem) !important;
    }

    .cih-page.cih-page :is(.btn, button, a).btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cih-page.cih-page :is(.card, .service-card, .feature-wrap, .plan-card) {
        transition: none;
    }

    .cih-page.cih-page :is(.card, .service-card, .feature-wrap, .plan-card):hover {
        transform: none;
    }
}

/* ==========================================================================
   Plan grids — carousel on phone and tablet, grid on desktop
   ==========================================================================

   Three separate plan layouts exist on this page and each broke differently:

     .hosting-section .plans-grid   auto-fit minmax(300px) — forced columns
                                    wider than the viewport once the parent
                                    was pinned to 1350px
     .idx-vps .plans-grid           grid-template-columns: repeat(4, 1fr)
                                    — four hard columns at EVERY width, so it
                                    overflows any screen under about 1300px
     .card-container                flex-wrap with a 75px gap and max-width
                                    900px

   Below 1024px all three become a horizontal scroll-snap carousel: one card
   per swipe, native momentum, no JavaScript and no library. Above 1024px they
   are a normal grid again.

   Scroll-snap rather than a JS slider on purpose — it needs no dependency, no
   initialisation, survives cards being added or removed, and keeps keyboard
   and screen-reader behaviour intact because the cards stay in document flow.
   ========================================================================== */

/* Four hard columns is wrong at every width, carousel or not. */
.cih-page.cih-page .idx-vps .plans-grid,
.idx-vps .plans-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
    max-width: 100% !important;
}

@media (max-width: 1024px) {
    .cih-page.cih-page .plans-grid,
    .cih-page.cih-page .card-container,
    .hosting-section .plans-grid,
    .idx-vps .plans-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        gap: 1rem !important;
        max-width: none !important;

        /* Cards align with the section gutter, and the last one can still
           reach the left edge when snapped. */
        padding-inline: var(--cih-gutter, 1rem) !important;
        margin-inline: calc(var(--cih-gutter, 1rem) * -1) !important;
        scroll-padding-inline: var(--cih-gutter, 1rem);

        /* Room for the hover lift and the "Save 20%" ribbon, which sits
           outside the card box. */
        padding-block: 0.75rem !important;
    }

    .cih-page.cih-page .plans-grid > *,
    .cih-page.cih-page .card-container > *,
    .hosting-section .plans-grid > *,
    .idx-vps .plans-grid > * {
        flex: 0 0 auto !important;
        width: min(86%, 340px) !important;
        max-width: min(86%, 340px) !important;
        scroll-snap-align: center;
        margin: 0 !important;
    }

    /* The highlighted plan is normally scaled up; inside a scroller that
       clips against the neighbours. */
    .cih-page.cih-page .plan-card.popular,
    .hosting-section .plan-card.popular {
        transform: none !important;
    }

    /* Thin scrollbar rather than none — a hidden one removes the only visual
       cue that there is more to the right. */
    .cih-page.cih-page .plans-grid,
    .cih-page.cih-page .card-container,
    .hosting-section .plans-grid,
    .idx-vps .plans-grid {
        scrollbar-width: thin;
        scrollbar-color: var(--cih-line-strong, #cabfe8) transparent;
    }

    .cih-page.cih-page .plans-grid::-webkit-scrollbar,
    .cih-page.cih-page .card-container::-webkit-scrollbar,
    .hosting-section .plans-grid::-webkit-scrollbar,
    .idx-vps .plans-grid::-webkit-scrollbar { height: 6px; }

    .cih-page.cih-page .plans-grid::-webkit-scrollbar-thumb,
    .cih-page.cih-page .card-container::-webkit-scrollbar-thumb,
    .hosting-section .plans-grid::-webkit-scrollbar-thumb,
    .idx-vps .plans-grid::-webkit-scrollbar-thumb {
        background: var(--cih-line-strong, #cabfe8);
        border-radius: 999px;
    }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
    .cih-page.cih-page .plans-grid,
    .hosting-section .plans-grid,
    .idx-vps .plans-grid { scroll-snap-type: none; }
}
