/* =========================================================
   Science Oasis Schools — inner pages (everything under /Pages)
   Re-skins the EduAdmin/Bootstrap markup those pages still use,
   so the pages themselves don't need to change. Loaded by MasterEn.Master.
   Selectors are prefixed with .os (the body class) to win over the vendor theme.
   ========================================================= */

/* ---------- Page title banner: <section class="bg-img ..." data-overlay> ---------- */
.os section.bg-img[data-overlay] {
    position: relative; overflow: hidden; text-align: center; z-index: 0 !important;
    background: var(--os-green-900) !important; padding: 150px 6vw 90px !important; margin-bottom: 56px;
    border-radius: 0 0 50% 50% / 0 0 70px 70px;
}
.os section.bg-img[data-overlay]::before {
    /* the emblem's sun rays, rising from the bottom edge */
    content: ""; position: absolute; left: 50%; bottom: -40px; width: 760px; height: 494px; transform: translateX(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'%3E%3Cg stroke='%23d8b26a' stroke-width='14' fill='none'%3E%3Cline x1='200' y1='200' x2='200' y2='0'/%3E%3Cline x1='200' y1='200' x2='120' y2='0'/%3E%3Cline x1='200' y1='200' x2='280' y2='0'/%3E%3Cline x1='200' y1='200' x2='20' y2='40'/%3E%3Cline x1='200' y1='200' x2='380' y2='40'/%3E%3Cline x1='200' y1='200' x2='0' y2='140'/%3E%3Cline x1='200' y1='200' x2='400' y2='140'/%3E%3C/g%3E%3C/svg%3E") center bottom / contain no-repeat;
    opacity: .1 !important; pointer-events: none; z-index: -1;
}
.os section.bg-img[data-overlay]::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(700px 300px at 50% 0%, rgba(216,178,106,.16), transparent 70%);
}
.os section.bg-img[data-overlay] .row { margin: 0; }
.os .page-title {
    color: var(--os-cream) !important; font-size: clamp(2rem, 4.2vw, 3.4rem) !important; font-weight: 800 !important;
    line-height: 1.25; margin: 0;
}
.os section.bg-img .breadcrumb { margin: 14px 0 0; padding: 0; background: none; }
.os section.bg-img .breadcrumb-item, .os section.bg-img .breadcrumb-item a { color: var(--os-sand) !important; font-size: .95rem; }
.os section.bg-img .breadcrumb-item + .breadcrumb-item::before { color: rgba(247,243,234,.4); }

/* ---------- Surfaces ---------- */
.os section.bg-white, .os .bg-white:not(.box):not(.card):not(.os-n):not(input) { background-color: transparent !important; }
.os .box, .os .card {
    background: #fff; border: 1px solid var(--os-line) !important; border-radius: 24px !important;
    box-shadow: 0 20px 50px -36px rgba(11,41,18,.35) !important; overflow: hidden;
}
.os .box-header, .os .card-header { border-bottom: 1px solid var(--os-line) !important; background: transparent; }
.os .box-title, .os .box-header h4, .os .card-title { color: var(--os-green-900); font-weight: 700; }
.os hr { border-color: var(--os-line); opacity: 1; }
.os .text-primary, .os .text-info, .os .text-success { color: var(--os-green) !important; }
.os .bg-primary, .os .bg-info, .os .bg-success { background-color: var(--os-green) !important; color: #fff; }

/* ---------- Typography in content ---------- */
.os .container h1, .os .container h2, .os .container h3, .os .container h4 { color: var(--os-green-900); }
.os .container p, .os .container li { line-height: 1.85; }

/* ---------- Buttons ---------- */
.os .btn {
    border-radius: 999px !important; font-family: var(--os-f-head) !important; font-weight: 500; padding: .65em 1.6em;
    transition: background-color .3s, color .3s, border-color .3s, transform .3s;
}
.os .btn-sm { padding: .45em 1.1em; }
.os .btn-primary, .os .btn-info, .os .btn-success, .os .theme-primary .btn-primary {
    background-color: var(--os-green) !important; border-color: var(--os-green) !important; color: #fff !important;
}
.os .btn-primary:hover, .os .btn-info:hover, .os .btn-success:hover, .os .btn-primary:focus, .os .btn-info:focus, .os .btn-success:focus {
    background-color: var(--os-sand) !important; border-color: var(--os-sand) !important; color: var(--os-green-900) !important;
}
.os .btn-danger, .os .btn-secondary {
    background: transparent !important; border: 1.5px solid var(--os-line) !important; color: var(--os-muted) !important;
}
.os .btn-danger:hover, .os .btn-secondary:hover { border-color: var(--os-green) !important; color: var(--os-green) !important; }

/* ---------- Forms ---------- */
.os .form-control, .os .form-select, .os select, .os textarea.form-control {
    border: 1.5px solid var(--os-line) !important; border-radius: 14px !important; background-color: #fff !important;
    min-height: 46px; padding: .55rem .9rem; color: var(--os-ink); box-shadow: none !important;
    transition: border-color .25s, box-shadow .25s;
}
.os textarea.form-control { min-height: 120px; }
.os .form-control:focus, .os .form-select:focus, .os select:focus {
    border-color: var(--os-green) !important; box-shadow: 0 0 0 4px rgba(21,74,32,.12) !important; outline: 0;
}
.os .form-control::placeholder { color: #9aa59c; }
.os label, .os .form-label, .os .control-label { font-family: var(--os-f-head) !important; font-weight: 500; color: var(--os-ink); font-size: .9rem; }
.os input[type=file].form-control { padding: .45rem .6rem; }
.os input[type=file]::file-selector-button {
    border: 0; border-radius: 999px; background: var(--os-green-100); color: var(--os-green); padding: .35em 1em;
    margin-inline-end: 10px; font-family: var(--os-f-head); cursor: pointer;
}

/* ---------- Tabs & lists (About / Team / Courses side menus) ---------- */
.os .nav-tabs { border-bottom: 1px solid var(--os-line); gap: 6px; }
.os .nav-tabs .nav-link, .os .nav-pills .nav-link { border-radius: 999px !important; border: 1.5px solid var(--os-line) !important; color: var(--os-ink); font-family: var(--os-f-head); }
.os .nav-tabs .nav-link.active, .os .nav-pills .nav-link.active, .os .nav-pills .show > .nav-link {
    background: var(--os-green) !important; border-color: var(--os-green) !important; color: #fff !important;
}
.os .list-group-item { border-color: var(--os-line); }
.os .list-group-item.active, .os .list-group-item-action.active { background: var(--os-green); border-color: var(--os-green); }

/* ---------- Tables ---------- */
.os .table { border-radius: 18px; overflow: hidden; }
.os .table thead th { background: var(--os-green); color: var(--os-cream); border: 0; font-family: var(--os-f-head); font-weight: 500; }
.os .table td { border-color: var(--os-line); }

/* ---------- Gallery details (lightGallery list, GalleryDeatils.aspx) ---------- */
.os #lightgallery {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin: 0 auto; padding: 0;
    max-width: 1240px; list-style: none;
}
.os #lightgallery > li { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; flex: none !important; }
.os #lightgallery > li:nth-child(6n+1) { grid-row: span 2; }
.os #lightgallery .img_Style {
    display: block; float: none; width: 100%; height: 100%; min-height: 220px; margin: 0; border: 0; border-radius: 22px;
    overflow: hidden; position: relative; background: var(--os-green-100); cursor: zoom-in;
}
.os #lightgallery > li:nth-child(6n+1) .img_Style { border-radius: 200px 200px 22px 22px; }
.os #lightgallery .img_Style img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--os-ease); }
.os #lightgallery .img_Style::after {
    content: "\f00e"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; inset: 0; display: grid; place-items: center;
    color: var(--os-cream); font-size: 1.6rem; background: rgba(11,41,18,.45); opacity: 0; transition: opacity .35s;
}
.os #lightgallery .img_Style:hover img { transform: scale(1.08); }
.os #lightgallery .img_Style:hover::after { opacity: 1; }

/* ---------- Gallery albums (MGallery.ascx) ---------- */
.os-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; max-width: 1240px; margin: 0 auto; padding: 0 6vw 40px; }
.os a.os-album { display: block; color: var(--os-ink); text-decoration: none; }
.os-album-cover { position: relative; aspect-ratio: .85; border-radius: 200px 200px 26px 26px; overflow: hidden; background: var(--os-green-100); }
.os-album-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--os-ease); }
.os-album-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--os-sand); transition: box-shadow .45s; }
.os-album:hover .os-album-cover img { transform: scale(1.07); }
.os-album:hover .os-album-cover::after { box-shadow: inset 0 0 0 7px var(--os-sand); }
.os-album-count {
    position: absolute; bottom: 16px; inset-inline-start: 16px; z-index: 1; background: rgba(247,243,234,.92); color: var(--os-green);
    font-family: var(--os-f-head); font-size: .8rem; font-weight: 700; padding: .3em .9em; border-radius: 999px;
}
.os .os-album h3 { font-size: 1.15rem; margin: 16px 0 0; color: var(--os-green-900); }

/* ---------- Empty states ("No result") ---------- */
.os .container h2[style*="808080"] { color: var(--os-muted) !important; font-weight: 500; }

@media (max-width: 720px) {
    .os section.bg-img[data-overlay] { padding: 120px 16px 70px !important; border-radius: 0 0 50% 50% / 0 0 40px 40px; margin-bottom: 36px; }
    .os section.bg-img[data-overlay]::before { width: 460px; height: 300px; }
    .os #lightgallery { grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px; }
    .os-albums { padding: 0 16px 30px; grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ---------- Embedded registration system (ApplyNow / Appointment iframes) ---------- */
.os iframe[id$="iframeApply"] {
    display: block; border: 0; border-radius: 24px; background: #fff; max-width: 1240px; margin: 0 auto;
    box-shadow: 0 20px 50px -36px rgba(11,41,18,.35);
}