/* =====================================================
   CNS HOME PAGE — extracted inline CSS
   Auto-generated from home.blade.php @push('styles') blocks
   ===================================================== */

/* HERO 80:20 split with cloud bands */
.cns-hero-section {
    width: 100%;
    background: transparent;
    overflow: hidden;
    position: relative;
}
.cns-hero-cloud {
    position: absolute; left: 0; right: 0; width: 100%;
    background-repeat: repeat-x;
    background-position: center top;
    background-size: auto 100%;
    z-index: 6;
    pointer-events: none;
}
.cns-hero-cloud-top    { top: 0; height: 10px; background-image: url('/front/img/bg-header-top.webp'); }
.cns-hero-cloud-bottom { bottom: 0; height: 16px; background-image: url('/front/img/bg-header-bottom.webp'); background-position: center bottom; }
@media (max-width: 575.98px) {
    .cns-hero-cloud-top { height: 12px; }
    .cns-hero-cloud-bottom { height: 18px; }
}

.cns-hero-flex {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100%;
    height: 480px;
    margin: 0; padding: 0;
}
.cns-hero-left {
    flex: 0 0 80% !important;
    max-width: 80% !important;
    width: 80% !important;
    height: 100%;
    overflow: hidden;
    background: #000;
}
.cns-hero-right {
    flex: 0 0 20% !important;
    max-width: 20% !important;
    width: 20% !important;
    height: 100%;
    overflow: hidden;
}
.cns-hero-left .owl-carousel,
.cns-hero-left .owl-stage-outer,
.cns-hero-left .owl-stage,
.cns-hero-left .owl-item,
.cns-hero-left .cns-carousel-slide,
.cns-hero-left .owl-carousel-item { height: 100% !important; }
.cns-hero-left img {
    width: 100% !important; 
    /* height: 100% !important; */
    object-fit: cover !important; object-position: center !important;
    display: block !important;
}

/* Birthday sidebar — premium compact */
.cns-bday-side {
    height: 100%;
    background:
        radial-gradient(circle at 20% 25%, rgba(255,255,255,.18) 0%, transparent 18%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,.15) 0%, transparent 18%),
        linear-gradient(160deg, #FFB74D 0%, #FFA726 50%, #FB8C00 100%);
    display: flex; flex-direction: column;
    color: #fff;
    box-shadow: -2px 0 12px rgba(0,0,0,.12);
    position: relative; overflow: hidden;
}
.cns-bday-side-head {
    background: linear-gradient(135deg, #6A1B9A 0%, #4A148C 100%);
    color: #fff;
    padding: 14px 16px;
    text-align: center;
    font-weight: 800; font-size: 1.15rem;
    letter-spacing: .5px;
    border-bottom: 2px dashed rgba(255,255,255,.4);
    font-family: 'Poppins', sans-serif !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(74,20,140,.3);
}
.cns-bday-side-head i {
    margin-right: 6px;
    animation: cns-bday-bounce 1.6s ease-in-out infinite;
    display: inline-block;
}
@keyframes cns-bday-bounce {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-4px) rotate(8deg); }
}
.cns-bday-side-body {
    flex: 1;
    overflow: hidden;
    padding: 18px 12px 30px;
    display: flex; flex-direction: column;
    justify-content: center;
}
/* Slideshow */
.cns-bday-side-slide { display: none; text-align: center; }
.cns-bday-side-slide.active { display: block; animation: cns-bday-fade .6s ease; }
@keyframes cns-bday-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cns-bday-side-photo-wrap {
    position: relative;
    width: 130px; height: 130px;
    margin: 0 auto 14px;
}
.cns-bday-side-ring {
    position: absolute; inset: -5px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #fff, #FFE082, #fff, #FFCC80, #fff, #FFE082, #fff);
    animation: cns-bday-spin 7s linear infinite;
    opacity: .85;
}
.cns-bday-side-photo {
    position: absolute; inset: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    background: #f5f5f5;
    z-index: 1;
    box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.cns-bday-side-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes cns-bday-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.cns-bday-side-name {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 2px;
    letter-spacing: .4px;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    font-family: 'Poppins', sans-serif !important;
    word-wrap: break-word;
    padding: 0 4px;
}
.cns-bday-side-class {
    color: #fff8e1;
    font-size: 0.92rem;
    font-weight: 600;
    margin: 0 0 8px;
    text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.cns-bday-side-date {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    background: rgba(0,0,0,.22);
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    margin: 0 0 10px;
    letter-spacing: .3px;
}
.cns-bday-side-msg {
    color: #fff;
    font-size: 0.85rem;
    font-style: italic;
    line-height: 1.4;
    padding: 0 6px;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
    opacity: .92;
}

/* Slideshow nav dots */
.cns-bday-side-nav {
    text-align: center;
    margin-top: 12px;
}
.cns-bday-side-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    margin: 0 3px;
    cursor: pointer;
    transition: all .25s ease;
}
.cns-bday-side-dot.active {
    background: #fff;
    width: 18px; border-radius: 4px;
}

/* Empty state — balloons */
.cns-bday-side-empty {
    text-align: center;
    color: #fff;
}
.cns-bday-side-balloons {
    font-size: 2.2rem;
    line-height: 1;
    margin: 0 0 10px;
}
.cns-bday-side-balloons span {
    display: inline-block;
    margin: 0 2px;
    animation: cns-balloon-up 3s ease-in-out infinite;
}
.cns-bday-side-balloons span:nth-child(2) { animation-delay: .4s; }
.cns-bday-side-balloons span:nth-child(3) { animation-delay: .8s; }
@keyframes cns-balloon-up {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.cns-bday-side-empty-title {
    color: #fff;
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0 0 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    font-family: 'Poppins', sans-serif !important;
}
.cns-bday-side-empty-sub {
    color: rgba(255,255,255,.85);
    font-size: 1.0rem;
    font-style: italic;
    margin: 0;
}

/* Tablet 992-1199 — keep 80:20 with smaller text */
@media (max-width: 1199.98px) and (min-width: 992px) {
    .cns-hero-flex { height: 420px; }
    .cns-bday-side-photo-wrap { width: 90px; height: 90px; }
    .cns-bday-side-name { font-size: .82rem; }
    .cns-bday-side-class { font-size: .68rem; }
    .cns-bday-side-date { font-size: .72rem; }
    .cns-bday-side-msg { font-size: .66rem; }
}

/* Tablet portrait (768-991px) — STACK */
@media (max-width: 991.98px) {
    .cns-hero-flex { flex-direction: column !important; flex-wrap: wrap !important; height: auto !important; }
    .cns-hero-left, .cns-hero-right {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
    .cns-hero-left { height: 380px !important; }
    .cns-bday-side { padding-bottom: 35px; }
    .cns-bday-side-body { padding: 22px 16px 16px; min-height: 220px; }
    .cns-bday-side-photo-wrap { width: 130px; height: 130px; }
    .cns-bday-side-name { font-size: 1.05rem; }
    .cns-bday-side-class { font-size: .9rem; }
    .cns-bday-side-date { font-size: .92rem; padding: 4px 14px; }
    .cns-bday-side-msg { font-size: .85rem; }
    .cns-bday-side-balloons { font-size: 3rem; }
}
@media (max-width: 575.98px) {
    .cns-hero-left { height: 240px !important; }
    .cns-bday-side-photo-wrap { width: 110px; height: 110px; }
    .cns-bday-side-name { font-size: .95rem; }
}

/* Admission poster slide — show full image (no crop) */
/* Poster slide — absolute centered image with blurred bg fill */
.cns-poster-slide {
    background-color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.cns-poster-slide::before {
    content: '';
    position: absolute; inset: -20px;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(32px) brightness(.93);
    transform: scale(1.15);
    z-index: 0;
}
.cns-poster-slide::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(255,255,255,.10);
    z-index: 1;
}
.cns-poster-link {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: block !important;
}
.cns-poster-img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 92% !important;
    max-height: 92% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    z-index: 3 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    border-radius: 4px;
}


}
.cns-poster-slide::before {
    content: '';
    position: absolute; inset: -20px;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(32px) brightness(.93);
    transform: scale(1.15);
    z-index: 0;
}
.cns-poster-slide::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(255,255,255,.10);
    z-index: 1;
}
.cns-poster-link {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: block !important;
}
.cns-poster-img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 92% !important;
    max-height: 92% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    z-index: 3 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    border-radius: 4px;
}


}
.cns-poster-slide::before {
    content: '';
    position: absolute; inset: -10px;
    background: inherit;
    background-size: cover;
    background-position: center;
    filter: blur(28px) brightness(.96) saturate(1.05);
    transform: scale(1.12);
    z-index: 0;
}
.cns-poster-slide::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(255,255,255,.18);
    z-index: 1;
}
.cns-hero-left .cns-poster-slide,
.cns-hero-left .cns-poster-slide a {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    z-index: 2;
}
.cns-hero-left .cns-poster-slide a {
    background: transparent !important;
}
.cns-hero-left .cns-poster-slide img,
.cns-hero-left .cns-poster-slide a img {
    width: auto !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    position: relative;
    z-index: 3;
    box-shadow: 0 6px 30px rgba(0,0,0,.15);
}
.cns-poster-slide img,
.cns-poster-slide a {
    width: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block;
    margin: 0 auto;
}
.cns-poster-slide a { width: 100% !important; text-align: center; }

/* Colorful balloons image in empty birthday state */
.cns-bday-balloons-img {
    width: 260px;
    max-width: 99%;
    height: auto;
    display: block;
    margin: 0 auto 12px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.15));
    animation: cns-balloons-sway 4s ease-in-out infinite;
}
@keyframes cns-balloons-sway {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-6px) rotate(2deg); }
}
@media (max-width: 1199.98px) and (min-width: 992px) {
    .cns-bday-balloons-img { width: 170px; }
}
@media (max-width: 991.98px) {
    .cns-bday-balloons-img { width: 220px; margin-bottom: 18px; }
}

/* Force carousel image fill (revert any conflicting rules) */
.header-carousel .owl-carousel-item img.img-fluid {
    width: 100% !important; 
    /* height: 100% !important; */
    object-fit: cover !important;
}

/* ============= */

@if(isset($galleryImages) && count($galleryImages) > 0)
<link rel="preload" as="image" href="{{ asset('AdminAsset/assets/img/gallery/'.$galleryImages[0]) }}">
@elseif(isset($banners) && $banners->count() > 0)
<link rel="preload" as="image" href="{{ asset('AdminAsset/assets/img/banners/'.$banners->first()->banner_image) }}">
@endif

/* ============= */

/* MOVED FROM app.blade.php inline */

/* ════════════════════════════════════════════════════════════
   SOCIAL MEDIA ICONS — Brand colors (Facebook/Instagram/YouTube etc.)
   ════════════════════════════════════════════════════════════ */
.btn-social {
    color: #fff !important;
    border: none !important;
    background: #6c757d;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
    margin: 0 3px;
    font-size: 1.05rem;
}
.btn-social:hover {
    color: #fff !important;
    transform: translateY(-3px) scale(1.06);
    filter: brightness(1.12);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.btn-social i { line-height: 1; }

/* Facebook */
.btn-social:has(.fa-facebook-f),
.btn-social:has(.fa-facebook),
.btn-social:has(.fa-square-facebook),
.btn-social[title*="acebook" i] { background: #1877F2 !important; }

/* Instagram — official gradient */
.btn-social:has(.fa-instagram),
.btn-social:has(.fa-square-instagram),
.btn-social[title*="nstagram" i] {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}

/* YouTube */
.btn-social:has(.fa-youtube),
.btn-social:has(.fa-square-youtube),
.btn-social[title*="outube" i] { background: #FF0000 !important; }

/* Twitter / X */
.btn-social:has(.fa-twitter),
.btn-social:has(.fa-x-twitter),
.btn-social[title*="witter" i] { background: #1DA1F2 !important; }

/* LinkedIn */
.btn-social:has(.fa-linkedin),
.btn-social:has(.fa-linkedin-in),
.btn-social[title*="inkedin" i] { background: #0A66C2 !important; }

/* WhatsApp */
.btn-social:has(.fa-whatsapp),
.btn-social[title*="hatsapp" i] { background: #25D366 !important; }

/* Telegram */
.btn-social:has(.fa-telegram),
.btn-social:has(.fa-telegram-plane),
.btn-social[title*="elegram" i] { background: #0088CC !important; }

/* Pinterest */
.btn-social:has(.fa-pinterest),
.btn-social:has(.fa-pinterest-p),
.btn-social[title*="interest" i] { background: #BD081C !important; }

@keyframes cns-spin { to { transform: rotate(360deg); } }
/* Birthday widget — school + wishes lines (above photo) */
.cns-bday-side-school {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    margin: 0 0 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,.22);
    font-family: 'Poppins', sans-serif !important;
}
.cns-bday-side-wishes {
    color: #fff;
    font-size: 0.92rem;
    font-style: italic;
    text-align: center;
    margin: 0 0 14px;
    opacity: .95;
    text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
@media (max-width: 991.98px) {
    .cns-bday-side-school { font-size: 1.05rem; }
    .cns-bday-side-wishes { font-size: .9rem; }
}

/* === Mobile hero/carousel debug fixes — appended === */
/* 1. cns-hero-left had `background: #000` at L41 — on mobile, when slide content can't fully cover,
      that black bleeds through (the source of the all-black slide). Make it transparent on mobile. */
@media (max-width: 991.98px) {
    .cns-hero-left { background: transparent !important; }
}
/* 2. The earlier rule `.cns-hero-left .cns-poster-slide a img { width: auto !important; height: 100% !important; }`
      inside a display:flex link collapses the img to 0x0 in some browsers. Force explicit sizes,
      override absolute positioning + transform from .cns-poster-img to plain relative full-size box. */
.cns-hero-left .cns-poster-slide a img.cns-poster-img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: block !important;
    margin: 0 auto !important;
    background: #fff;
}
/* 3. Also white-fill the poster-slide so any uncovered area shows white (not black) */
.cns-hero-left .cns-poster-slide { background-color: #fff !important; }


/* === FINAL: kill flex on link + force hero-left height === */
/* Earlier appended fix wasn't fully working — the link's display:flex was still collapsing
   the img. Use `body` prefix for max specificity + explicit pixel heights on mobile so
   the height chain (hero-left -> carousel -> stage -> item -> slide -> link -> img) all
   resolve to definite values, and the img renders at full slide size. */
@media (max-width: 991.98px) {
    body .cns-hero-flex { height: auto !important; flex-direction: column !important; }
    body .cns-hero-left { height: 320px !important; flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; background: transparent !important; }
    body .cns-hero-left .owl-carousel,
    body .cns-hero-left .owl-stage-outer,
    body .cns-hero-left .owl-stage,
    body .cns-hero-left .owl-item,
    body .cns-hero-left .owl-carousel-item,
    body .cns-hero-left .cns-poster-slide { height: 320px !important; min-height: 320px !important; }
    body .cns-hero-left .cns-poster-slide a.cns-poster-link {
        display: block !important;
        width: 100% !important;
        height: 320px !important;
        min-height: 320px !important;
        position: relative !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
        inset: auto !important;
        transform: none !important;
        align-items: initial !important;
        justify-content: initial !important;
    }
    body .cns-hero-left .cns-poster-slide a img.cns-poster-img {
        width: 100% !important;
        height: 320px !important;
        min-height: 320px !important;
        max-width: 100% !important;
        max-height: 320px !important;
        object-fit: contain !important;
        object-position: center !important;
        position: relative !important;
        top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
        inset: auto !important;
        transform: none !important;
        display: block !important;
        margin: 0 auto !important;
        z-index: 10 !important;
    }
}
@media (max-width: 575.98px) {
    body .cns-hero-left { height: 220px !important; }
    body .cns-hero-left .owl-carousel,
    body .cns-hero-left .owl-stage-outer,
    body .cns-hero-left .owl-stage,
    body .cns-hero-left .owl-item,
    body .cns-hero-left .owl-carousel-item,
    body .cns-hero-left .cns-poster-slide,
    body .cns-hero-left .cns-poster-slide a.cns-poster-link { height: 220px !important; min-height: 220px !important; }
    body .cns-hero-left .cns-poster-slide a img.cns-poster-img { height: 220px !important; min-height: 220px !important; max-height: 220px !important; }
}