/*!
 * Template 6 - Public Website redesign layer
 * Scope: loaded ONLY on public website pages (never Online Admission).
 * Every rule below is namespaced under .template6-website so it cannot
 * leak into Online Admission pages even if a class name is reused there.
 */

.template6-website {
    overflow-x: hidden;
    --t6w-green-dark: #0b4a36;
    --t6w-green: #0f6849;
    --t6w-green-light: #12805c;
    --t6w-green-soft: #eaf5f0;
    --t6w-orange: #f2810a;
    --t6w-orange-dark: #d96f04;
    --t6w-ink: #16241f;
    --t6w-muted: #5b6b66;
    --t6w-border: #e2ece7;
    --t6w-white: #ffffff;
    --t6w-bg: #f6f9f8;
    --t6w-radius: 12px;
    --t6w-shadow: 0 4px 18px rgba(15, 104, 73, 0.08);
    font-size: 15px;
    color: var(--t6w-ink);
    background: var(--t6w-bg);
}

.template6-website .container {
    max-width: 1500px;
    padding-left: 24px;
    padding-right: 24px;
}

.template6-website a { text-decoration: none; }
.template6-website img { max-width: 100%; }

/* ================= Section rhythm ================= */
.template6-website .t6w-section { padding: 36px 0; }
.template6-website .t6w-section--tight { padding: 26px 0; }
.template6-website .py-section { padding: 30px 0; }
.template6-website .bg-white { background: var(--t6w-white); }

.template6-website .t6w-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.template6-website .t6w-section-head h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--t6w-green-dark);
    margin: 0;
}

/* ================= Section background zones (visual grouping) ================= */
.template6-website .t6w-section--mint { background: var(--t6w-green-soft); }

.template6-website .t6w-section-head .t6w-sub {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--t6w-muted);
    margin-top: 5px;
}

.template6-website .t6w-view-all {
    font-size: 14px;
    font-weight: 600;
    color: var(--t6w-green);
    white-space: nowrap;
}
.template6-website .t6w-view-all:hover { color: var(--t6w-orange); }

/* Bordered pill "View All" button (Our Teachers / Media Gallery / Important
   Links headers) - reference shows a rounded-outline button, not plain
   text. Deliberately its own class (not a change to the shared .t6w-btn
   used by the header) so this stays scoped to these section headers. */
.template6-website .t6w-view-all-btn {
    display: inline-flex; align-items: center; gap: 7px; flex: none;
    padding: 8px 16px; border-radius: 20px; border: 1px solid var(--t6w-green);
    color: var(--t6w-green); background: var(--t6w-white); font-size: 13px; font-weight: 700; white-space: nowrap;
}
.template6-website .t6w-view-all-btn svg { width: 11px; height: 11px; flex: none; }
.template6-website .t6w-view-all-btn:hover { background: var(--t6w-green); color: #fff; }

/* ================= Utility top bar ================= */
.template6-website .t6w-topbar { background: var(--t6w-green-dark); color: #dff3ea; font-size: 13px; }
.template6-website .t6w-topbar .container {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; min-height: 36px;
}
.template6-website .t6w-topbar-left { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.template6-website .t6w-topbar-right { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.template6-website .t6w-topbar a { color: #dff3ea; }
.template6-website .t6w-topbar a:hover { color: var(--t6w-orange); }
.template6-website .t6w-topbar-item { display: inline-flex; align-items: center; gap: 6px; }
.template6-website .t6w-topbar-item svg { flex: none; width: 11px; height: 11px; }
.template6-website .t6w-topbar-right > a { padding: 0 12px; }
.template6-website .t6w-topbar-right > a:first-child { padding-left: 0; }
.template6-website .t6w-topbar-right > a:last-child { padding-right: 0; }
.template6-website .t6w-topbar-right > a:not(:last-child) { border-right: 1px solid rgba(223, 243, 234, 0.28); }

/* ================= Main header ================= */
.template6-website .t6w-header { background: var(--t6w-white); border-bottom: 1px solid var(--t6w-border); padding: 14px 0; }
.template6-website .t6w-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.template6-website .t6w-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.template6-website .t6w-brand img { height: 54px; width: 54px; object-fit: contain; flex: none; }
.template6-website .t6w-brand-text { min-width: 0; }
.template6-website .t6w-brand-text h1 { font-size: 21px; font-weight: 700; color: var(--t6w-green-dark); margin: 0; line-height: 1.25; }
.template6-website .t6w-brand-text span { display: block; font-size: 12.5px; color: var(--t6w-muted); margin-top: 2px; }
.template6-website .t6w-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.template6-website .t6w-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 600;
    border: 1px solid var(--t6w-green); color: var(--t6w-green); background: var(--t6w-white);
    white-space: nowrap;
}
.template6-website .t6w-btn svg { width: 13px; height: 13px; }
.template6-website .t6w-btn:hover { background: var(--t6w-green-soft); color: var(--t6w-green-dark); }
.template6-website .t6w-btn--solid { background: var(--t6w-green); color: var(--t6w-white); border-color: var(--t6w-green); }
.template6-website .t6w-btn--solid:hover { background: var(--t6w-green-dark); border-color: var(--t6w-green-dark); color: var(--t6w-white); }
.template6-website .t6w-btn--orange { background: var(--t6w-orange); border-color: var(--t6w-orange); color: var(--t6w-white); }
.template6-website .t6w-btn--orange:hover { background: var(--t6w-orange-dark); border-color: var(--t6w-orange-dark); color: var(--t6w-white); }

/* ================= Nav ================= */
.template6-website .t6w-nav { background: var(--t6w-white); border-bottom: 1px solid var(--t6w-border); box-shadow: 0 2px 6px rgba(15,104,73,.05); }
.template6-website .t6w-nav .navbar-nav > .nav-item > .nav-link {
    color: var(--t6w-ink) !important; font-size: 14px; font-weight: 600;
    padding: 12px 14px !important; border-bottom: 2px solid transparent;
}
.template6-website .t6w-nav .navbar-nav > .nav-item > .nav-link.active,
.template6-website .t6w-nav .navbar-nav > .nav-item > .nav-link:hover,
.template6-website .t6w-nav .navbar-nav > .nav-item.show > .nav-link { color: var(--t6w-green) !important; border-bottom-color: var(--t6w-green); }
/* The legacy sms-style.css also draws its own icon on this same element via
   ::before (a background-image chevron, unconditional, not scoped to this
   template). Left alone it renders alongside the ::after chevron below,
   producing the double/broken indicator - so it's suppressed here rather
   than duplicating a second icon source. */
.template6-website .t6w-nav .navbar-nav > .sms-dropdown > .dd-toggle::before,
.template6-website .t6w-nav .sms-dd-menu > .dd-submenu > .dd-toggle::before {
    content: none;
}
.template6-website .t6w-nav .sms-dropdown > .dd-toggle::after {
    content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
    transition: transform .2s ease-in-out;
}
.template6-website .t6w-nav .sms-dropdown > .dd-toggle.menuIconOpen::after {
    transform: rotate(225deg) translateY(2px);
}
.template6-website .t6w-nav .sms-dd-menu { background: var(--t6w-white); border: 1px solid var(--t6w-border); box-shadow: var(--t6w-shadow); border-radius: 8px; padding: 8px 0; }
.template6-website .t6w-nav .sms-dd-menu .dd-item { color: var(--t6w-ink) !important; font-size: 13.5px; padding: 8px 18px !important; }
.template6-website .t6w-nav .sms-dd-menu .dd-item:hover,
.template6-website .t6w-nav .sms-dd-menu .dd-item.active { background: var(--t6w-green-soft); color: var(--t6w-green-dark) !important; }

/* ================= Mobile nav bar (<992px) ================= */
.template6-website .t6w-mobile-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.template6-website .t6w-mobile-bar-label { font-size: 14px; font-weight: 700; color: var(--t6w-green-dark); }
.template6-website .t6w-mobile-bar .navbar-toggler {
    width: 40px; height: 40px; padding: 0; margin: 0; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.template6-website .t6w-mobile-bar .navbar-toggler:focus { outline: none; box-shadow: 0 0 0 3px rgba(15,104,73,.25); }
.template6-website .t6w-mobile-bar .navbar-toggler-icon { width: 18px; height: 18px; background-size: 18px; }

@media (max-width: 991.98px) {
    .template6-website .t6w-nav { padding: 0; }
    .template6-website .t6w-nav > .navbar { padding: 0; }
    .template6-website .t6w-nav .navbar-nav > .nav-item > .nav-link { color: var(--t6w-ink) !important; border-bottom: none; }
    .template6-website .t6w-nav .navbar-collapse { border-top: 1px solid var(--t6w-border); padding: 6px 0 14px; }
    .template6-website .t6w-nav .sms-dd-menu { display: none; margin: 4px 0 8px; }
}
@media (min-width: 992px) {
    .template6-website .t6w-mobile-bar { display: none; }
}

/* ================= Hero ================= */
.template6-website .t6w-hero {
    position: relative;
    padding: 20px 0 28px;
    background: linear-gradient(180deg, #0c3d2c 0%, #0f6849 100%);
    overflow: hidden;
}
.template6-website .t6w-hero-grid { display: grid; grid-template-columns: 1.85fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 991.98px) { .template6-website .t6w-hero-grid { grid-template-columns: 1fr; } }

.template6-website .t6w-hero-visual {
    position: relative; border-radius: 16px; overflow: hidden; min-width: 0;
    min-height: clamp(420px, 34vw, 520px);
    background-size: cover; background-position: center 25%;
}
@media (max-width: 991.98px) { .template6-website .t6w-hero-visual { min-height: clamp(360px, 78vw, 460px); } }

.template6-website .t6w-hero .carousel-control-prev,
.template6-website .t6w-hero .carousel-control-next {
    z-index: 2; width: 42px; height: 42px; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.35); border-radius: 50%; opacity: .85;
}
.template6-website .t6w-hero .carousel-control-prev { left: 14px; }
.template6-website .t6w-hero .carousel-control-next { right: 14px; }

/* ================= Conditional Online Admission strip (Hero -> here -> Latest Notice) ================= */
.template6-website .t6w-admission-strip { background: rgba(242, 129, 10, 0.06); border-bottom: 1px solid var(--t6w-border); }
.template6-website .t6w-admission-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; padding: 16px 0; }
.template6-website .t6w-admission-label {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 19px; font-weight: 700; color: var(--t6w-orange-dark); white-space: nowrap;
}
.template6-website .t6w-admission-label svg { flex: none; }
.template6-website .t6w-admission-link {
    display: inline-flex; align-items: center;
    padding: 10px 20px; border-radius: 999px;
    background: var(--t6w-orange); color: var(--t6w-white);
    font-size: 15.5px; font-weight: 600; line-height: 1.3;
    max-width: 100%;
}
.template6-website .t6w-admission-link:hover { background: var(--t6w-orange-dark); color: var(--t6w-white); }

@media (max-width: 767.98px) {
    .template6-website .t6w-admission-row { padding: 13px 0; gap: 10px 12px; }
    .template6-website .t6w-admission-label { font-size: 16px; gap: 8px; }
    .template6-website .t6w-admission-label svg { width: 18px; height: 18px; }
    .template6-website .t6w-admission-link { font-size: 14px; padding: 9px 16px; }
}

@media (max-width: 767.98px) {
    .template6-website .t6w-header { padding: 18px 0; }
    .template6-website .t6w-header-inner { display: block; }
    .template6-website .t6w-brand { display: flex; align-items: center; gap: 12px; }
    .template6-website .t6w-brand img { height: 60px; width: 60px; flex: none; }
    .template6-website .t6w-brand-text { display: block; min-width: 0; }
    .template6-website .t6w-brand-text h1 { font-size: 19px; line-height: 1.25; }
    .template6-website .t6w-brand-text span { font-size: 12px; }
    .template6-website .t6w-header-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    .template6-website .t6w-btn { padding: 9px 14px; font-size: 12.5px; gap: 5px; }
    .template6-website .t6w-btn svg { width: 12px; height: 12px; }
}

/* All 3 action buttons must stay on one row at phone width - the 767.98px
   sizing above is still too wide for that at 376px, so Pay Fees wraps to its
   own line. Tightened further and forced nowrap on the row itself. */
@media (max-width: 575.98px) {
    .template6-website .t6w-header-actions { flex-wrap: nowrap; gap: 6px; margin-top: 12px; }
    .template6-website .t6w-btn { padding: 8px 8px; font-size: 11px; gap: 4px; }
    .template6-website .t6w-btn svg { width: 12px; height: 12px; }
}

/* Important updates panel - padding/row size trimmed to match the shorter
   hero image height (was tuned for the taller pre-Pass-4 hero and relied on
   the panel's internal overflow:auto scroll to hide the excess). */
.template6-website .t6w-updates {
    background: var(--t6w-white); border: 1px solid rgba(15,104,73,.08); border-radius: 16px; box-shadow: 0 14px 40px rgba(0,0,0,.2);
    padding: 26px; height: 100%; display: flex; flex-direction: column;
}
.template6-website .t6w-updates-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--t6w-border);
}
.template6-website .t6w-updates-head h3 { font-size: 20px; font-weight: 700; color: var(--t6w-green-dark); margin: 0; display: flex; align-items: center; gap: 9px; }
.template6-website .t6w-updates-list { display: flex; flex-direction: column; gap: 2px; overflow: auto; }
.template6-website .t6w-update-row { display: flex; gap: 14px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--t6w-border); }
.template6-website .t6w-update-row:last-child { border-bottom: none; }
.template6-website .t6w-update-date {
    flex: none; width: 60px; text-align: center; background: var(--t6w-green-soft); color: var(--t6w-green-dark);
    border-radius: 10px; padding: 7px 2px; font-size: 12px; font-weight: 700; line-height: 1.2;
}
.template6-website .t6w-update-date b { display: block; font-size: 19px; }
.template6-website .t6w-update-body { min-width: 0; display: flex; align-items: flex-start; gap: 8px; }
.template6-website .t6w-update-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--t6w-green); }
/* Purely presentational repeating color pattern (no data/category meaning -
   the real update rows carry no category field) so the list reads with the
   same visual variety as the reference's colored indicators. */
.template6-website .t6w-update-row:nth-child(3n+2) .t6w-update-dot { background: var(--t6w-orange); }
.template6-website .t6w-update-row:nth-child(3n+3) .t6w-update-dot { background: var(--t6w-green-light); }
.template6-website .t6w-update-body a { color: var(--t6w-ink); font-size: 14.5px; font-weight: 600; display: block; line-height: 1.35; }
.template6-website .t6w-update-body a:hover { color: var(--t6w-green); }
.template6-website .t6w-update-body span { font-size: 12.5px; color: var(--t6w-muted); }
.template6-website .t6w-updates-empty { color: var(--t6w-muted); font-size: 13px; padding: 14px 4px; }

/* Latest notice strip styling now lives entirely in horizontal-notice.blade.php's
   own <style> block (self-contained redesign, white bar with a circular icon) -
   removed here to avoid the old dark-green rules (higher specificity, some
   !important) silently overriding it. */

/* ================= Quick access ================= */
.template6-website .t6w-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (min-width: 992px) {
    .template6-website .t6w-quick-grid { grid-template-columns: repeat(8, 1fr); gap: 18px; }
}
@media (max-width: 767.98px) { .template6-website .t6w-quick-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .template6-website .t6w-quick-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }

/* Pass 10 enlarged this (140px -> 160px min-height/52px->58px icon) without
   the reference image in hand. Pass 11: with the reference now available,
   its shortcut row reads clearly more compact than that guess - reverted
   close to the original compact size (140px/52px icon), keeping only the
   modest padding/gap/type upgrades. */
.template6-website .t6w-quick-card {
    background: var(--t6w-white); border: 1px solid var(--t6w-border); border-radius: var(--t6w-radius);
    padding: 20px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    min-width: 0; min-height: 142px; justify-content: center;
    box-shadow: 0 2px 10px rgba(15,104,73,.06);
}
.template6-website .t6w-quick-card h4,
.template6-website .t6w-quick-card span { overflow-wrap: break-word; max-width: 100%; }
.template6-website .t6w-quick-card:hover { transform: translateY(-4px); box-shadow: var(--t6w-shadow); border-color: var(--t6w-green-light); }
/* .t6w-quick-card span { color: var(--t6w-muted) } below (meant for the card's
   subtitle text) has higher specificity (class+tag) than a bare .t6w-quick-icon
   (single class) and was silently overriding this to grey on every icon glyph -
   scoped one level deeper here so the icon always wins regardless of rule order. */
.template6-website .t6w-quick-card .t6w-quick-icon {
    width: 52px; height: 52px; border-radius: 13px; background: var(--t6w-green); color: #fff;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(15,104,73,.22);
}
.template6-website .t6w-quick-icon svg { width: 28px; height: 28px; }
/* Only Pay Fees is orange (its own explicit modifier class, not a position-based
   rule) - every other Quick Access icon stays the default green. */
.template6-website .t6w-quick-card .t6w-quick-icon--orange { background: var(--t6w-orange); }
.template6-website .t6w-quick-card h4 { font-size: 15.5px; font-weight: 700; margin: 0; color: var(--t6w-ink); }
.template6-website .t6w-quick-card span { font-size: 12.5px; color: var(--t6w-muted); }

/* ================= Leader message cards ================= */
.template6-website .t6w-leaders-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }

.template6-website .t6w-leader-card {
    background: var(--t6w-white); border: 1px solid var(--t6w-border); border-radius: 16px; box-shadow: 0 8px 28px rgba(15,104,73,.12);
    padding: 22px; display: flex; gap: 18px; flex: 1 1 380px; max-width: 33%;
}
@media (max-width: 991.98px) { .template6-website .t6w-leader-card { max-width: 100%; } }

/* Only the row/card WIDTH is 2-up specific (2 real leaders share the row
   50/50) - padding, photo height and type scale stay at the same native
   scale as the base card instead of being inflated further just because
   there are only 2 leaders to place. */
.template6-website .t6w-leaders-row--pair { gap: 28px; flex-wrap: nowrap; }
.template6-website .t6w-leaders-row--pair .t6w-leader-card { flex: 1 1 calc(50% - 14px); max-width: calc(50% - 14px); }
@media (max-width: 767.98px) {
    .template6-website .t6w-leaders-row--pair { flex-wrap: wrap; }
    .template6-website .t6w-leaders-row--pair .t6w-leader-card { flex: 1 1 100%; max-width: 100%; }
}
/* The 2-leader (--pair) row already had this stacking rule; the 1- or 3-leader
   base card never got the same treatment, so it would run photo+text side by
   side into an unusably narrow column at phone width. */
@media (max-width: 575.98px) {
    .template6-website .t6w-leader-card { padding: 22px; flex-direction: column; }
    .template6-website .t6w-leader-photo { width: 100%; min-height: 170px; max-height: 170px; }
}

.template6-website .t6w-leader-photo {
    flex: 0 0 34%; width: 34%; align-self: stretch; min-height: 180px; max-height: 210px; border-radius: 12px;
    /* cover was cropping the uploaded photo to fill the box, cutting off the
       head/body on any aspect ratio that didn't match the box exactly.
       contain shows the whole image, letterboxed on the mint background. */
    background-size: contain; background-repeat: no-repeat; background-position: center center; background-color: var(--t6w-green-soft);
    box-shadow: inset 0 0 0 1px rgba(15,104,73,.12);
}
.template6-website .t6w-leader-body { min-width: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.template6-website .t6w-leader-body h3 { font-size: 18px; font-weight: 700; margin: 0 0 3px; color: var(--t6w-ink); }
.template6-website .t6w-leader-body .t6w-leader-role {
    font-size: 13px; color: var(--t6w-green); font-weight: 700; display: block; margin-bottom: 8px;
}
.template6-website .t6w-leader-body p {
    font-size: 13.5px; color: var(--t6w-muted); margin-bottom: 12px; line-height: 1.55; flex: 1 1 auto;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.template6-website .t6w-leader-body a {
    font-size: 13.5px; font-weight: 700; color: var(--t6w-green); background: transparent; border: 1.5px solid var(--t6w-green);
    padding: 9px 18px; border-radius: 7px; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
}
.template6-website .t6w-leader-body a svg { flex: none; transition: transform .15s ease; }
.template6-website .t6w-leader-body a:hover { background: var(--t6w-green); color: #fff; }
.template6-website .t6w-leader-body a:hover svg { transform: translateX(2px); }

/* ================= Notice board + at a glance =================
   Notice Board is a real ~col-lg-7 (its Bengali notice titles wrap to 2
   lines and need more width) and is NOT touched here. At a Glance is
   ~col-lg-5. Desktop layout is 2 columns x 3 rows (see .t6w-glance-grid's
   >=992px override below), with the grid growing (flex:1 1 auto) to fill
   the panel's real leftover body height so the 3 rows occupy the usable
   panel area as one block, instead of leaving mint dead space below a
   fixed-height cluster. */
.template6-website .t6w-notice-glance-row { align-items: stretch; }
.template6-website .t6w-panel { background: var(--t6w-green-soft); border: 1px solid rgba(15,104,73,.10); border-radius: 16px; padding: 28px; }
.template6-website .t6w-panel h3 { font-size: 20px; font-weight: 700; color: var(--t6w-green-dark); margin: 0 0 16px; }
.template6-website .t6w-panel--glance { height: 100%; display: flex; flex-direction: column; }
.template6-website .t6w-panel--glance h3 { flex: none; }
.template6-website .t6w-panel--glance .t6w-glance-grid { flex: 1 1 auto; }
@media (max-width: 991.98px) {
    /* Below lg, Notice Board and At a Glance stack (Bootstrap col-lg-7/5),
       so there's no sibling to match height with - let the panel size to
       its own content instead of an inherited 100%, and let the grid stop
       growing since there's no leftover panel height to fill. */
    .template6-website .t6w-panel--glance { height: auto; }
    .template6-website .t6w-panel--glance .t6w-glance-grid { flex: none; }
}

.template6-website .t6w-notice-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(15,104,73,.12); }
.template6-website .t6w-notice-row:last-child { border-bottom: none; }
.template6-website .t6w-notice-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--t6w-green); }
.template6-website .t6w-notice-row .t6w-notice-date {
    flex: none; width: 52px; text-align: center; background: var(--t6w-white); color: var(--t6w-green-dark);
    border-radius: 9px; padding: 6px 2px; font-size: 11px; font-weight: 700; line-height: 1.2;
    box-shadow: 0 2px 6px rgba(15,104,73,.08);
}
.template6-website .t6w-notice-row .t6w-notice-date b { display: block; font-size: 16px; }
.template6-website .t6w-notice-row a { flex: 1 1 auto; font-size: 14px; color: var(--t6w-ink); font-weight: 500; min-width: 0; line-height: 1.35; }
.template6-website .t6w-notice-row a:hover { color: var(--t6w-green); }
.template6-website .t6w-notice-badge { flex: none; font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 20px; }

.template6-website .t6w-glance-grid { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 16px; column-gap: 12px; }
@media (max-width: 575.98px) { .template6-website .t6w-glance-grid { grid-template-columns: repeat(2, 1fr); } }
.template6-website .t6w-glance-item {
    background: var(--t6w-white); border-radius: 12px; padding: 12px 14px;
    display: flex; align-items: center; gap: 12px; min-height: 0; height: 88px;
    box-shadow: 0 2px 8px rgba(15,104,73,.06);
}
/* .t6w-glance-item span below (meant only for the label text) also matches
   the icon <span class="t6w-glance-icon"> - same tag - and its higher
   specificity (class+tag beats a single class) was silently winning and
   forcing the icon to the muted grey text color instead of green. Verified
   via computed style (was rgb(91,107,102), i.e. --t6w-muted, not --t6w-green).
   Scoped one level deeper here so the icon rule always wins, same fix
   already applied to Quick Access's .t6w-quick-icon. */
.template6-website .t6w-glance-item .t6w-glance-icon {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 13px; background: var(--t6w-green-soft); color: var(--t6w-green);
}
.template6-website .t6w-glance-icon svg { width: 28px; height: 28px; }
.template6-website .t6w-glance-text { min-width: 0; }
.template6-website .t6w-glance-item span { display: block; font-size: 11.5px; color: var(--t6w-muted); line-height: 1.2; }
.template6-website .t6w-glance-item b { display: block; font-size: 13.5px; font-weight: 700; color: var(--t6w-green-dark); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Desktop (>=992px): 2 columns x 3 rows (this pass's requirement,
   replacing the previous 3x2 layout below lg this rule doesn't touch).
   Cards are naturally wider now that there are only 2 per row, and the
   grid grows to fill the panel's flexed leftover height (flex:1 1 auto
   on .t6w-glance-grid further up) with 3 equal 1fr row tracks, so the
   3 rows occupy the usable panel body as one block instead of leaving
   space below a fixed-height cluster. minmax(96px, 1fr) floors each row
   at a sane card height so they can't be squashed on a short panel. */
@media (min-width: 992px) {
    .template6-website .t6w-glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(96px, 1fr); }
    .template6-website .t6w-glance-item { height: auto; }
}
/* At the very start of this range the panel is at its narrowest (before
   the container has grown much past the lg breakpoint), so even a
   2-column card is too tight at full size for "2026-2027" - measured
   (truncates up to ~1030px, clears by 1040px). Tighten only this sliver;
   1040px+ already fits the untouched default icon/font. */
@media (min-width: 992px) and (max-width: 1039.98px) {
    .template6-website .t6w-glance-item { padding: 10px 12px; gap: 10px; }
    .template6-website .t6w-glance-item .t6w-glance-icon { width: 44px; height: 44px; border-radius: 11px; }
    .template6-website .t6w-glance-icon svg { width: 24px; height: 24px; }
    .template6-website .t6w-glance-item b { font-size: 12px; }
    .template6-website .t6w-glance-item span { font-size: 10.5px; }
}

/* ================= Academic programs =================
   True CSS grid with an explicit column count per breakpoint (not
   flex-wrap auto-sizing) so desktop space is used more densely - at the
   1500px container cap, wide desktop (>=1600px viewport) fits 5 columns,
   scaling down through 4/3/2/1 as the viewport narrows. The row count is
   never hardcoded: whatever real tbl_class count this tenant has just
   wraps onto as many rows as the column count produces (currently 9
   classes -> 5 + 4, left-aligned, last row never stretched to fake a 5th
   card). Column-count only; never tied to a specific program count. */
.template6-website .t6w-program-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 22px; }
@media (min-width: 576px) { .template6-website .t6w-program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 800px) { .template6-website .t6w-program-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .template6-website .t6w-program-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .template6-website .t6w-program-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Pass 11: reference shows a compact horizontal chip card (small icon,
   tight title/subtitle stack, arrow hugging the right edge) - was a much
   bulkier 400-440px/84px-icon/32-34px-padding card. Rebuilt to the
   reference's compact proportions. Width now comes purely from the grid
   column (no flex-basis/max-width tug-of-war), and the card's own
   min-width:0 (set further below, in the overflow-safety block) lets the
   department-subtitle ellipsis do its job instead of forcing the column wider. */
.template6-website .t6w-program-card {
    background: var(--t6w-white); border: 1px solid var(--t6w-border); border-radius: 14px; padding: 16px 20px;
    display: flex; align-items: center; gap: 16px; min-height: 0;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.template6-website .t6w-program-card:hover { box-shadow: 0 10px 26px rgba(15,104,73,.14); border-color: var(--t6w-green-light); transform: translateY(-3px); }
/* Same specificity bug as .t6w-glance-icon above: .t6w-program-card span
   (class+tag) was beating the single-class .t6w-program-icon rule and
   forcing the icon to the muted grey color. Scoped one level deeper. */
.template6-website .t6w-program-card .t6w-program-icon { flex: none; width: 64px; height: 64px; border-radius: 14px; background: var(--t6w-green-soft); color: var(--t6w-green); display: flex; align-items: center; justify-content: center; }
.template6-website .t6w-program-icon svg { width: 32px; height: 32px; }
.template6-website .t6w-program-info { min-width: 0; }
.template6-website .t6w-program-card h4 { font-size: 16px; font-weight: 700; margin: 0 0 3px; line-height: 1.25; }
.template6-website .t6w-program-card span { font-size: 12.5px; color: var(--t6w-muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.template6-website .t6w-program-arrow { margin-left: auto; padding-left: 10px; color: var(--t6w-muted); flex: none; }
.template6-website .t6w-program-arrow svg { width: 18px; height: 18px; }

/* ================= Compact dashboard row: Result Search + Student List + Calendar =================
   Now 3 equal-width columns (was 2). align-items is the grid default
   (stretch), so every card is forced to the row's tallest natural content
   height - Result Search (6 fields) is normally the tallest; Student List
   (4 fields) and Calendar just get taller outer boxes with their own
   content still flowing from the top (no control is individually
   stretched to fill the extra space). */
.template6-website .t6w-dashboard-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 767.98px) { .template6-website .t6w-dashboard-row { grid-template-columns: 1fr; } }

/* height:100% (was height:auto) - now intentionally opposite of the old
   2-card rule: with 3 equal columns we DO want the grid's default stretch
   to make every card's white box the same visible height, so the card
   fills its stretched grid cell instead of only being as tall as its own
   content. display:flex + flex-direction:column keeps the header/form
   flowing from the top with any leftover height simply left blank below,
   rather than forcing individual inputs to grow. */
.template6-website .search-content-box {
    background: var(--t6w-white); border: 1px solid var(--t6w-border); border-radius: 16px; box-shadow: 0 10px 30px rgba(15,104,73,.12);
    padding: 26px 28px; height: 100%; display: flex; flex-direction: column;
}
/* Result Search's action button sat much higher than Student List's
   because both forms were only as tall as their own (different) field
   counts, even though the outer cards were already equal height - the
   leftover height just became dead space below Student List's button
   instead of being given to the form. Chain flex-column + flex:1 down
   from the card through the form to .src-form-content, so that inner
   wrapper actually receives the card's full leftover height; .row (the
   fields) stays its natural top-aligned height, and .src-form-actions
   (the button, moved out of .row - same button markup/attrs, just no
   longer nested inside the bootstrap grid row) gets margin-top:auto to
   pin itself to the bottom of that flexed space. No fixed/guessed
   spacer value anywhere - the button lands wherever the real leftover
   height happens to end. */
.template6-website .search-content-box form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.template6-website .search-content-box .src-form-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.template6-website .search-content-box .src-form-actions { margin-top: auto; padding-top: 15px; }
.template6-website .src-title {
    display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--t6w-border);
}
.template6-website .src-title-icon {
    flex: none; width: 40px; height: 40px; border-radius: 9px; background: var(--t6w-green); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.template6-website .src-title-icon svg { width: 18px; height: 18px; }
.template6-website .src-title h3 { font-size: 18px; font-weight: 700; color: var(--t6w-green-dark); margin: 0; }
.template6-website .search-content-box .form-control { font-size: 14.5px; padding: 9px 14px; height: 44px; border-radius: 7px; border: 1px solid var(--t6w-border); }
.template6-website .search-content-box label { font-size: 13px; font-weight: 700; color: var(--t6w-ink); margin-bottom: 6px; }
.template6-website .search-content-box .form-group { margin-bottom: 15px; }
.template6-website .search-content-box .btn-sms { width: 100%; justify-content: center; padding: 13px 20px; font-size: 15px; margin-top: 4px; }
/* Bootstrap's .col-md-6 reacts to VIEWPORT width, not the actual card
   width - now that each card is ~1/3 of the row instead of ~1/2, that
   made "Department/Section/Group" and other fields cramp into a ~190px
   sub-column anywhere from 768px up. Force the internal form fields to
   stay single-column through that whole danger zone, and only restore
   the original 2-up field layout once the row is wide enough (>=1400px)
   that each card has real room for it again - field names/ids/routes are
   untouched, this only changes which CSS width class takes effect. */
.template6-website .search-content-box .src-form-content .col-md-6 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 1400px) {
    .template6-website .search-content-box .src-form-content .col-md-6 { flex: 0 0 50%; max-width: 50%; }
}
/* At the narrowest 3-column desktop widths (just above the 767.98px
   mobile-stack breakpoint, e.g. 224px-wide cards at 768px) the card's
   normal padding left too little room for a select's closed-state text
   ("Select Department" etc.) and it visually clipped - measured, not
   assumed. Tighten card padding/control size only in this band. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .template6-website .search-content-box { padding: 18px 16px; }
    .template6-website .search-content-box .form-control { padding: 8px 10px; font-size: 13px; height: 40px; }
    .template6-website .search-content-box label { font-size: 12px; }
}

/* Calendar card: interactive month/year navigation (no events) - see the
   blade comment for why no data source was wired in. Toolbar: prev/next
   nav buttons flank a compact month+year select pair (JS-populated - see
   t6w-calendar.js). Kept intentionally small so the card's natural height
   stays close to Result Search's, since all three dashboard cards are
   stretched to the row's tallest card. */
.template6-website .t6w-mini-cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.template6-website .t6w-mini-cal-nav {
    flex: none; width: 26px; height: 26px; padding: 0; border-radius: 7px; border: 1px solid var(--t6w-border);
    background: var(--t6w-green-soft); color: var(--t6w-green); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s ease, color .15s ease;
}
.template6-website .t6w-mini-cal-nav:hover { background: var(--t6w-green); color: #fff; }
.template6-website .t6w-mini-cal-nav svg { width: 9px; height: 9px; }
.template6-website .t6w-mini-cal-selectors { display: flex; gap: 6px; flex: 1 1 auto; justify-content: center; min-width: 0; }
/* Month names (up to "September") need more room than the fixed 4-digit
   year, so the two selects don't share the toolbar's width equally. */
.template6-website .t6w-mini-cal-select {
    min-width: 0; border: 1px solid var(--t6w-border); border-radius: 7px; padding: 4px 6px;
    font-size: 12px; font-weight: 700; color: var(--t6w-green-dark); background: var(--t6w-white); cursor: pointer;
}
.template6-website #t6wCalMonth { flex: 1.5 1 0; }
.template6-website #t6wCalYear { flex: 1 1 0; }
/* Same narrow-card cause as the Result Search/Student List tightening
   above (768-991.98px, e.g. 224px-wide cards at 768px) - the month
   select's closed-state text ("September") clipped at this card width.
   Shrink the toolbar controls and drop the native dropdown-arrow reserve
   (still a select, just without the decorative arrow eating ~18px) so
   the longest month name fits without truncation - measured, not assumed.
   Placed after the base .t6w-mini-cal-* rules above so it wins the
   cascade (same selectors, same specificity). */
@media (min-width: 768px) and (max-width: 991.98px) {
    .template6-website .t6w-mini-cal-nav { width: 20px; height: 20px; }
    .template6-website .t6w-mini-cal-nav svg { width: 8px; height: 8px; }
    .template6-website .t6w-mini-cal-toolbar { gap: 4px; }
    .template6-website .t6w-mini-cal-selectors { gap: 4px; }
    .template6-website .t6w-mini-cal-select { padding: 3px 3px; font-size: 10px; appearance: none; -webkit-appearance: none; -moz-appearance: none; text-align: center; }
    .template6-website #t6wCalMonth { flex: 1.9 1 0; }
    .template6-website #t6wCalYear { flex: 1 1 0; }
}
/* The card (.search-content-box) is stretched to match Result Search's
   height (the tallest of the 3 dashboard cards); before this, .t6w-mini-cal
   was just a plain block, so it only ever took its own content's natural
   (small) height, leaving the rest of the stretched card as dead white
   space below it. Making it a flex column that grows to fill that
   stretched card (flex:1 1 auto) hands the real leftover height down to
   .t6w-mini-cal-days below, instead of leaving it unclaimed. */
.template6-website .search-content-box .t6w-mini-cal { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.template6-website .t6w-mini-cal-toolbar { flex: none; }
.template6-website .t6w-mini-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.template6-website .t6w-mini-cal-dow { flex: none; margin-bottom: 8px; }
.template6-website .t6w-mini-cal-dow span { font-size: 12px; font-weight: 700; color: var(--t6w-muted); padding: 5px 0; }
/* The day-cell grid is the part that actually grows: flex:1 1 auto gives
   it the card's real leftover height. grid-auto-rows:minmax(0,1fr) makes
   the ROW TRACKS split that height evenly across however many week rows
   the month needs (4/5/6). Critically, a flexible (fr) track with a 0
   floor contributes ~0 toward the grid's own intrinsic/natural height
   (unlike e.g. min-content rows, which DO pull the card's natural height
   up to match a bigger calendar) - this is what keeps the card locked to
   Result Search's height regardless of how the calendar is styled. Cells
   use the grid default align-self (stretch) to fill their row track, so
   a 5-row month like September gets taller cells than a 6-row month
   automatically, and neither can ever overflow the fixed-height card or
   leave a dead gap below the last row. */
.template6-website .t6w-mini-cal-days { flex: 1 1 auto; min-height: 0; grid-auto-rows: minmax(0, 1fr); row-gap: 6px; column-gap: 6px; }
/* Every real day is its own bordered cell (blanks are transparent
   placeholders so the grid keeps 7 columns without a visible box); each
   cell centers its number regardless of how tall the stretched row ends
   up being. */
.template6-website .t6w-mini-cal-day, .template6-website .t6w-mini-cal-blank {
    display: flex; align-items: center; justify-content: center; min-height: 0;
    font-size: 14.5px; color: var(--t6w-ink); border-radius: 8px;
    border: 1px solid var(--t6w-border); background: var(--t6w-white);
}
.template6-website .t6w-mini-cal-blank { border-color: transparent; background: transparent; }
/* At the narrowest 3-column desktop widths (224px-wide cards at 768px),
   the stretched row tracks are still as tall as Result Search's content
   needs (its natural height doesn't shrink with viewport), while the
   card itself is much narrower - stretching cells to fill that would
   turn them into tall narrow pills (e.g. 22x89px). Cap cell height only
   in this band; the capped cell just aligns to the top of its (still
   tall) row track, leaving a small blank strip below each row instead of
   one lump of dead space, and the card's locked height is unaffected. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .template6-website .t6w-mini-cal-day, .template6-website .t6w-mini-cal-blank { max-height: 46px; font-size: 13px; }
}
.template6-website .t6w-mini-cal-day { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.template6-website .t6w-mini-cal-day:hover { border-color: var(--t6w-green-light); }
.template6-website .t6w-mini-cal-day--today { background: var(--t6w-green); border-color: var(--t6w-green); color: #fff; font-weight: 700; }
/* Selected (optional, click-to-mark) must stay visually distinct from
   today - it never applies when the clicked cell is also today's. */
.template6-website .t6w-mini-cal-day--selected:not(.t6w-mini-cal-day--today) { background: var(--t6w-green-soft); border-color: var(--t6w-green); color: var(--t6w-green-dark); font-weight: 700; }

/* ================= Teacher/leader/gallery generic card sections ================= */
.template6-website .our-teacher-sec { padding: 32px 0; background: var(--t6w-white); }
.template6-website .sms-sec-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.template6-website .sms-sec-title h2 { font-size: 26px; font-weight: 700; color: var(--t6w-green-dark); margin: 0; }

/* Used by the our-leaders carousel (governing body) - vertical photo-on-top card */
.template6-website .sms-card-item {
    display: block; background: var(--t6w-white); border: 1px solid var(--t6w-border); border-radius: 12px;
    overflow: hidden; box-shadow: 0 2px 10px rgba(15,104,73,.06); outline: none; padding: 0;
    column-gap: 0; row-gap: 0; height: auto;
}
.template6-website .sms-card-item:hover { background: var(--t6w-white); box-shadow: var(--t6w-shadow); border-color: var(--t6w-green-light); color: inherit; }
.template6-website .sms-card-item:hover .card-item-photo { border-color: transparent; }
.template6-website .sms-card-item:hover .card-item-desc h3 { color: var(--t6w-ink); }
.template6-website .card-item-photo {
    height: 280px; width: 100%; max-width: 100%; flex: none; outline: none; margin: 0;
    background-size: cover; background-position: center top; background-color: var(--t6w-green-soft);
    border: none; border-radius: 0;
}
.template6-website .t6w-avatar-fallback { display: block; }
.template6-website .t6w-avatar-fallback svg { display: block; width: 100%; height: 100%; }
.template6-website .card-item-desc { padding: 20px; }
.template6-website .card-item-desc h3 { font-size: 17px; font-weight: 700; margin: 0 0 4px; color: var(--t6w-ink); }
.template6-website .card-desc-type { display: inline-block; font-size: 12.5px; color: var(--t6w-green); font-weight: 600; margin-bottom: 4px; }
.template6-website .card-item-desc p { font-size: 12.5px; color: var(--t6w-muted); margin: 0; }
/* Neutralize the legacy centered blue underline accent (sms-style.css
   .card-item-desc .card-desc-type:after) - no such accent exists in the
   reference design for any card style. */
.template6-website .card-item-desc .card-desc-type { padding-bottom: 0; }
.template6-website .card-item-desc .card-desc-type:after { display: none; }

.template6-website .btn-sms { display: inline-flex; align-items: center; gap: 7px; background: var(--t6w-green); color: #fff !important; padding: 13px 28px; border-radius: 7px; font-size: 14.5px; font-weight: 600; border: none; }
.template6-website .btn-sms:hover { background: var(--t6w-green-dark); }
.template6-website .flex-group-center { display: flex; justify-content: center; margin-top: 28px; }

.template6-website .owl-carousel .owl-stage-outer { padding-bottom: 4px; }
.template6-website .owl-nav .owl-prev,
.template6-website .owl-nav .owl-next { background: var(--t6w-green) !important; color: #fff !important; width: 38px; height: 38px; border-radius: 50%; display: flex !important; align-items: center; justify-content: center; }

/* Responsive grid replacing the owl-carousel wrapper for teacher/leader cards */
.template6-website .t6w-people-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
@media (min-width: 992px) {
    .template6-website .t6w-people-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .template6-website .t6w-people-grid:has(> :nth-child(1):nth-last-child(1)),
    .template6-website .t6w-people-grid:has(> :nth-child(2):nth-last-child(1)),
    .template6-website .t6w-people-grid:has(> :nth-child(3):nth-last-child(1)) {
        grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
        justify-content: center;
    }
}
@media (max-width: 575.98px) { .template6-website .t6w-people-grid { grid-template-columns: 1fr 1fr; gap: 14px; } }

/* ================= Our Teachers: compact horizontal carousel =================
   Replaces the old vertical photo-on-top preview grid - reference shows
   compact landscape cards (photo left, info right) sliding horizontally,
   not a static tall portrait grid. Card width is set in px by
   t6w-teacher-carousel.js (see that file's comment for why: a non-wrapping
   flex rail can't size children with CSS "%" against its own auto width). */
.template6-website .t6w-teacher-carousel { display: flex; align-items: center; gap: 12px; }
.template6-website .t6w-tcarousel-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.template6-website .t6w-tcarousel-rail { display: flex; gap: 24px; will-change: transform; }
.template6-website .t6w-tcarousel-nav {
    flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--t6w-border);
    background: var(--t6w-white); color: var(--t6w-green); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.template6-website .t6w-tcarousel-nav:hover { background: var(--t6w-green); color: #fff; border-color: var(--t6w-green); }
.template6-website .t6w-tcarousel-nav svg { width: 11px; height: 11px; }

/* Pass 2: cards sized up ~40% across the board (padding, photo, gap,
   typography) - a premium/substantial horizontal card instead of a
   compact list row. Width comes along for free too, since
   t6w-teacher-carousel.js's cardsPerView() now targets fewer cards per
   row at each breakpoint (was 4/3/2/1.15, now 3/2/1.3/1.05) to give each
   card real room instead of shrinking it back down to fit four. */
.template6-website .t6w-teacher-card {
    display: flex; align-items: center; gap: 20px; background: var(--t6w-white);
    border: 1px solid var(--t6w-border); border-radius: 16px; padding: 17px; min-width: 0;
}
.template6-website .t6w-teacher-photo {
    flex: none; width: 106px; height: 106px; border-radius: 12px; background-color: var(--t6w-green-soft);
    background-size: cover; background-position: center top;
}
.template6-website .t6w-teacher-photo.t6w-avatar-fallback svg { display: block; width: 100%; height: 100%; border-radius: 12px; }
.template6-website .t6w-teacher-info { min-width: 0; }
.template6-website .t6w-teacher-info h3 {
    font-size: 21px; font-weight: 700; color: var(--t6w-green-dark); margin: 0 0 5px; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.template6-website .t6w-teacher-info span {
    display: block; font-size: 17px; font-weight: 600; color: var(--t6w-green); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.template6-website .t6w-teacher-info p {
    font-size: 15px; color: var(--t6w-muted); margin: 3px 0 0; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 575.98px) {
    .template6-website .t6w-teacher-carousel { gap: 8px; }
    .template6-website .t6w-tcarousel-nav { width: 34px; height: 34px; }
    .template6-website .t6w-teacher-card { gap: 14px; padding: 14px; }
    .template6-website .t6w-teacher-photo { width: 80px; height: 80px; }
    .template6-website .t6w-teacher-info h3 { font-size: 17px; }
    .template6-website .t6w-teacher-info span { font-size: 14px; }
    .template6-website .t6w-teacher-info p { font-size: 12.5px; }
}

/* ================= Media Gallery + Important Links row (gallery has photos) =================
   Reference proportion: Media Gallery noticeably wider than Important
   Links (not 50/50). */
/* align-items:stretch (was start) - Media Gallery and Important Links now
   share equal outer panel height (top AND bottom edges aligned), same
   technique already used for Result Search/Student List/Calendar. */
.template6-website .t6w-gallery-links-row { display: grid; grid-template-columns: 1.7fr 1fr; gap: 28px; align-items: stretch; }
@media (max-width: 991.98px) { .template6-website .t6w-gallery-links-row { grid-template-columns: 1fr; } }
/* Scoped heading tightening for just this row - does not touch the shared
   .t6w-section-head rule used by every other (frozen) section. */
.template6-website .t6w-gallery-links-row .t6w-section-head { margin-bottom: 16px; }
/* Wrap each column in its own white card panel (matches every other panel
   pattern already used on this page - Notice Board, At a Glance, Result
   Search) so the two columns read as aligned twin panels. flex column +
   height:100% lets the now-stretched Media Gallery panel hand its real
   leftover height down to .t6w-gallery-grid (see below) instead of
   leaving it as blank space; Important Links' own content is unaffected
   since none of its children flex-grow. */
.template6-website .t6w-gallery-links-row > div {
    background: var(--t6w-white); border: 1px solid var(--t6w-border); border-radius: 16px; padding: 22px;
    display: flex; flex-direction: column; height: 100%;
}

/* Photos/Videos pill tabs next to the Media Gallery heading. Sits inside
   the shared .t6w-section-head (already display:flex; justify-content:
   space-between; flex-wrap:wrap), so it naturally takes its place between
   the h2 and the View All button without any extra positioning rule. */
.template6-website .t6w-gallery-tabs { display: flex; align-items: center; gap: 6px; }
.template6-website .t6w-gallery-tab {
    display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 20px;
    font-size: 12.5px; font-weight: 700; color: var(--t6w-muted); background: var(--t6w-bg); border: 1px solid transparent;
}
.template6-website .t6w-gallery-tab--active { background: var(--t6w-green-soft); color: var(--t6w-green-dark); }
.template6-website a.t6w-gallery-tab:hover { border-color: var(--t6w-green-light); color: var(--t6w-green-dark); }

/* ================= Location & Contact: map on top, contact rows stacked below -
   this block now sits in the narrower ~35% column of .t6w-clubs-location-row
   (or alone, full width, when there are no clubs), so it stacks rather than
   splitting into side-by-side sub-columns. ================= */
.template6-website .t6w-location-grid { display: block; }
/* No clubs configured: Location & Contact renders alone - cap its width
   instead of a full-width map with contact rows so it doesn't look like a
   giant blank stretched section. */
.template6-website .t6w-location-solo { max-width: 640px; }

/* Fixed 4-column row on desktop, sized purely from the available panel
   width (minmax(0,1fr), no fixed px) - matching the reference regardless
   of how many real photos exist beyond the 4 shown. flex:1 1 auto lets
   this grid receive the panel's real stretched leftover height (see
   .t6w-gallery-links-row > div above) instead of leaving it blank;
   grid-auto-rows:minmax(0,1fr) makes the single implicit row actually
   consume that height rather than just sitting at its own content size. */
.template6-website .t6w-gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 16px; flex: 1 1 auto; min-height: 0; }
@media (max-width: 767.98px) { .template6-website .t6w-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Photographic thumbnail card: image pane (object-fit:cover, never
   distorted) + a green caption strip below it, matching the reference.
   The image is flex:1 (not a fixed aspect-ratio) so it grows to actually
   fill the card's stretched height instead of leaving blank space under
   a fixed-ratio image; cover still crops cleanly at any resulting box
   size. White card border keeps a visible boundary regardless of image
   content. */
.template6-website .t6w-gallery-item { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: var(--t6w-white); border: 1px solid var(--t6w-border); min-height: 0; }
.template6-website .t6w-gallery-item img { display: block; width: 100%; flex: 1 1 auto; min-height: 0; object-fit: cover; object-position: center; }
.template6-website .t6w-gallery-caption {
    display: block; flex: none; background: var(--t6w-green); color: #fff; font-size: 12.5px; font-weight: 600;
    padding: 10px 10px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ================= Important links & services =================
   Reference: compact 3-column x 2-row icon+label tiles (no subtitle line). */
.template6-website .t6w-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 2px; }
@media (max-width: 620px) { .template6-website .t6w-service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .template6-website .t6w-service-grid { grid-template-columns: 1fr; } }

/* Used when Important Links & Services has the row to itself (gallery hidden) -
   3 columns x 2 rows of larger tiles instead of a narrow centered block. */
.template6-website .t6w-service-grid--wide { grid-template-columns: repeat(3, 1fr); column-gap: 24px; row-gap: 24px; }
@media (max-width: 900px) { .template6-website .t6w-service-grid--wide { grid-template-columns: repeat(2, 1fr); } }

.template6-website .t6w-service-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px;
    background: var(--t6w-white); border: 1px solid var(--t6w-border); border-radius: 12px; padding: 16px 8px; min-height: 88px;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.template6-website .t6w-service-card--lg { padding: 30px 20px; gap: 14px; min-height: 150px; border-radius: 16px; }
.template6-website .t6w-service-card:hover { box-shadow: var(--t6w-shadow); border-color: var(--t6w-green-light); transform: translateY(-2px); }
.template6-website .t6w-service-icon { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--t6w-green-soft); color: var(--t6w-green); display: flex; align-items: center; justify-content: center; }
.template6-website .t6w-service-icon svg { width: 18px; height: 18px; }
.template6-website .t6w-service-icon--lg { width: 64px; height: 64px; border-radius: 14px; }
.template6-website .t6w-service-icon--lg svg { width: 28px; height: 28px; }
.template6-website .t6w-service-card strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--t6w-ink); line-height: 1.3; }
.template6-website .t6w-service-card--lg strong { font-size: 15px; }

.template6-website .t6w-external-links { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--t6w-border); }
.template6-website .t6w-external-links h4 { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--t6w-muted); margin: 0 0 6px; }
.template6-website .t6w-chip-grid { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }
.template6-website .t6w-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; background: var(--t6w-white); color: var(--t6w-green-dark);
    border: 1px solid var(--t6w-border); border-radius: 12px; padding: 0 10px; font-size: 11px; line-height: 1; font-weight: 600; white-space: nowrap;
}
.template6-website .t6w-chip:hover { background: var(--t6w-green); color: #fff; border-color: var(--t6w-green); }

/* ================= Lower-page composition =================
   Co-Curricular Activities + Location & Contact (top row, ~60/40) and
   National Anthem + Emergency Hotlines + FAQ (bottom row, roughly even with
   FAQ slightly wider) - one coordinated grid instead of five stacked
   sections, matching the reference composition. Real CSS Grid throughout,
   no spacer divs. */
.template6-website .t6w-lower-row { display: grid; gap: 24px; }
.template6-website .t6w-lower-row--top { grid-template-columns: 1.5fr 1fr; margin-bottom: 24px; }
/* Anthem = smaller, Hotlines = noticeably larger (room for a real 3x3
   grid), FAQ = still large enough for its accordion content. */
.template6-website .t6w-lower-row--bottom { grid-template-columns: 0.75fr 1.45fr 1.05fr; align-items: stretch; }
@media (max-width: 991.98px) {
    .template6-website .t6w-lower-row--top,
    .template6-website .t6w-lower-row--bottom { grid-template-columns: 1fr; }
}
.template6-website .t6w-lower-panel {
    background: var(--t6w-white); border: 1px solid var(--t6w-border); border-radius: 16px; padding: 24px; min-width: 0;
}
.template6-website .t6w-lower-row .t6w-section-head { margin-bottom: 16px; }

/* ================= Co-Curricular Activities =================
   Fixed 5-item roster (Nature Club, Rover Scout, BNCC, Red Crescent, Debate
   Club - explicitly required, real emblem images from public/assets/common)
   so a real grid-template-columns count (not content-driven flex-wrap) is
   appropriate: exactly 5 across on wide desktop per the reference, 3 on
   tablet, 2 on mobile - always wrapping, never overflowing horizontally
   (the previously-reported mobile overflow source). */
.template6-website .t6w-clubs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 768px) { .template6-website .t6w-clubs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .template6-website .t6w-clubs-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
.template6-website .t6w-club-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px;
    background: var(--t6w-white); border: 1px solid var(--t6w-border); border-radius: 14px; padding: 18px 10px; min-width: 0;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.template6-website .t6w-club-card:hover { box-shadow: var(--t6w-shadow); border-color: var(--t6w-green-light); transform: translateY(-3px); }
/* Fixed square box so all 5 real emblem images (different native aspect
   ratios/canvas sizes) read as the same visual size; object-fit:contain -
   these are logos/emblems, never cropped/distorted like a photograph. */
.template6-website .t6w-club-image { flex: none; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.template6-website .t6w-club-image img { width: 100%; height: 100%; object-fit: contain; }
.template6-website .t6w-club-card strong { font-size: 13.5px; font-weight: 700; color: var(--t6w-ink); }

/* ================= Location & contact =================
   Map and contact rows sit side by side (reference), stacking (map above
   contact) only when the panel itself is narrow. */
.template6-website .t6w-location-grid { display: flex; gap: 16px; align-items: stretch; }
.template6-website .t6w-map-embed { flex: 1.1 1 0; min-width: 0; border-radius: 14px; overflow: hidden; min-height: 190px; border: 1px solid var(--t6w-border); background: var(--t6w-green-soft); }
.template6-website .t6w-map-embed iframe { width: 100%; height: 100%; min-height: 190px; border: 0; display: block; }
.template6-website .t6w-contact-list { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.template6-website .t6w-contact-row { display: flex; gap: 10px; align-items: center; background: var(--t6w-white); border: 1px solid var(--t6w-border); border-radius: 11px; padding: 10px 12px; min-width: 0; }
.template6-website .t6w-contact-row svg { flex: none; color: #fff; background: var(--t6w-green); border-radius: 8px; padding: 7px; box-sizing: content-box; width: 14px; height: 14px; }
/* flex:1 1 auto + min-width:0 - without these the address <span> (a flex
   item with no natural break points at this column width) took its
   min-content size instead of wrapping/shrinking to the row's actual
   width, which cascaded up through .t6w-contact-list/.t6w-location-grid
   and pushed the whole Co-Curricular section past the viewport at 1366px -
   the real source of the page-level overflow flagged in this pass. */
.template6-website .t6w-contact-row span { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; font-size: 12.5px; color: var(--t6w-ink); line-height: 1.35; }
@media (max-width: 575.98px) { .template6-website .t6w-location-grid { flex-direction: column; } }

/* ================= National Anthem =================
   Large flag + compact custom play/progress/time controls (backed by a real
   <audio> element, see t6w-anthem-player.js), side by side on desktop. */
.template6-website .t6w-anthem-body { display: flex; align-items: center; gap: 12px; }
.template6-website .t6w-anthem-flag { flex: none; width: 62px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid var(--t6w-border); }
@media (max-width: 575.98px) { .template6-website .t6w-anthem-body { flex-direction: column; align-items: stretch; } .template6-website .t6w-anthem-flag { width: 100%; height: 72px; } }
.template6-website .t6w-anthem-player { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
.template6-website .t6w-anthem-play {
    flex: none; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--t6w-green); color: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease;
}
.template6-website .t6w-anthem-play svg { width: 13px; height: 13px; }
.template6-website .t6w-anthem-play:hover { background: var(--t6w-green-dark); }
.template6-website .t6w-anthem-progress-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.template6-website .t6w-anthem-seek { width: 100%; accent-color: var(--t6w-green); height: 4px; cursor: pointer; }
.template6-website .t6w-anthem-time { font-size: 11px; color: var(--t6w-muted); }
.template6-website .t6w-anthem-unavailable {
    background: var(--t6w-bg); border: 1px dashed var(--t6w-border); border-radius: 10px; padding: 11px 14px;
    font-size: 12.5px; color: var(--t6w-muted); text-align: center; flex: 1 1 auto;
}

/* ================= Emergency Hotlines =================
   Fixed 9-item roster (real BD public-service numbers), always laid out as
   a real 3-column grid (3x3 on the now-wider desktop panel) - pale warm/red
   tiles (deliberately not the site's green) so they read as an
   emergency-specific accent, matching the reference. Mobile drops to 2
   columns per instruction #11. */
.template6-website .t6w-hotline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 576px) { .template6-website .t6w-hotline-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.template6-website .t6w-hotline-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px;
    background: #fdf1ee; border: 1px solid #f6d9d1; border-radius: 14px; padding: 20px 10px; min-width: 0;
}
/* Uniform icon box - every card's visual icon area is the same size
   regardless of the glyph inside, per the "uniform icon container" rule. */
.template6-website .t6w-hotline-icon { flex: none; width: 56px; height: 44px; display: flex; align-items: center; justify-content: center; color: #d1453b; }
.template6-website .t6w-hotline-icon .fa { font-size: 26px; }
.template6-website .t6w-hotline-card strong { font-size: 21px; font-weight: 700; color: #c8382e; line-height: 1.2; }
.template6-website .t6w-hotline-label { font-size: 12px; color: var(--t6w-ink); line-height: 1.3; font-weight: 500; min-width: 0; overflow-wrap: break-word; }

/* ================= FAQ (compact, nested in the lower-page grid) ================= */
.template6-website .t6w-faq-compact .card { background: var(--t6w-white) !important; border: 1px solid var(--t6w-border) !important; border-radius: 10px !important; }
.template6-website .t6w-faq-compact .card-header { padding: 12px 14px !important; }
.template6-website .t6w-faq-compact .card-body { padding: 0 14px 12px !important; }
.template6-website .t6w-faq-compact .card-body p { line-height: 1.55; color: var(--t6w-muted); }
.template6-website .t6w-faq-compact .btn-link {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    color: var(--t6w-ink); text-decoration: none; font-size: 13px; white-space: normal;
}
.template6-website .t6w-faq-compact .btn-link svg { flex: none; color: var(--t6w-green); transition: transform .15s ease; }
.template6-website .t6w-faq-compact .btn-link.collapsed svg { transform: rotate(-90deg); }
.template6-website .t6w-faq-compact .font-weight-semibold { font-weight: 600; }

/* ================= Footer ================= */
/* Compact 2-level reference footer: main 4-column area + a separate
   bottom copyright bar, both noticeably shorter than the previous
   implementation (large logo, loose spacing, centered single-line bottom
   text) it replaced. */
.template6-website .t6w-footer { background: var(--t6w-green-dark); color: #d9ece3; padding: 36px 0 0; margin-top: 10px; }
.template6-website .t6w-footer h3 { color: #fff; font-size: 15.5px; font-weight: 700; margin-bottom: 12px; }
.template6-website .t6w-footer p,
.template6-website .t6w-footer li,
.template6-website .t6w-footer a { color: #cfe6db; font-size: 13px; line-height: 1.5; }
.template6-website .t6w-footer a:hover { color: #fff; }
.template6-website .t6w-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

.template6-website .t6w-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 0.9fr; gap: 30px; padding: 0 0 22px; }
@media (max-width: 991.98px) { .template6-website .t6w-footer-grid { grid-template-columns: 1fr 1fr; row-gap: 26px; } }
@media (max-width: 575.98px) { .template6-website .t6w-footer-grid { grid-template-columns: 1fr; } }

/* Thin vertical dividers between the 4 desktop columns - inset from the
   top/bottom of the content (not full-bleed), removed once columns wrap
   to 2/1 per row on tablet/mobile (a divider after column 1/2 would land
   in the middle of a row, not between columns, once wrapped). */
.template6-website .t6w-footer-col { position: relative; }
.template6-website .t6w-footer-col:not(:last-child)::after {
    content: ''; position: absolute; top: 4px; bottom: 4px; right: -15px; width: 1px; background: rgba(255,255,255,.22);
}
@media (max-width: 991.98px) { .template6-website .t6w-footer-col:not(:last-child)::after { display: none; } }

.template6-website .t6w-footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.template6-website .t6w-footer-brand img { height: 42px; width: 42px; object-fit: contain; }
.template6-website .t6w-footer-brand span { color: #fff; font-weight: 700; font-size: 16px; line-height: 1.25; }
.template6-website .t6w-footer-info-list { display: flex; flex-direction: column; gap: 9px; }
.template6-website .t6w-footer-info-list li,
.template6-website .t6w-footer-info-list li a { display: flex; align-items: flex-start; gap: 9px; color: #cfe6db; }
.template6-website .t6w-footer-info-list li a:hover { color: #fff; }
.template6-website .t6w-footer-info-list svg { flex: none; color: #cfe6db; margin-top: 3px; }
.template6-website .t6w-footer-info-list span { font-size: 12.5px; line-height: 1.45; }

.template6-website .t6w-footer-social { display: flex; flex-direction: row; gap: 9px; margin-bottom: 16px; }
.template6-website .t6w-footer-social a { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; flex: none; }
.template6-website .t6w-footer-social a:hover { background: var(--t6w-orange); }
.template6-website .t6w-footer-social svg { width: 14px; height: 14px; }
.template6-website .t6w-footer-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 210px;
    background: var(--t6w-orange); color: #fff !important; padding: 12px 18px; border-radius: 10px;
    font-size: 13.5px; font-weight: 700;
}
.template6-website .t6w-footer-cta:hover { background: var(--t6w-orange-dark); }

.template6-website .t6w-footer-bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 14px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; color: #bfdccf;
}
.template6-website .t6w-footer-copy { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.template6-website .t6w-footer-brands { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.template6-website .t6w-footer-brands a { display: inline-flex; align-items: center; gap: 4px; color: #cfe6db; }
.template6-website .t6w-footer-brands a:hover { color: #fff; }
.template6-website .t6w-footer-brands img { height: 16px; vertical-align: middle; }
.template6-website .t6w-footer-brands-sep { opacity: .4; margin: 0 4px; }
.template6-website .t6w-footer-legal { display: flex; align-items: center; gap: 8px; flex: none; }
.template6-website .t6w-footer-legal-sep { opacity: .4; }
@media (max-width: 767.98px) { .template6-website .t6w-footer-bottom { justify-content: center; text-align: center; } }

/* Grid/flex items default to min-width:auto (their min-content size), which can
   silently widen a track/row past the viewport on narrow screens once real
   (possibly long, unbreakable) dynamic text is involved. Reset the common
   card/column containers so they honor their track width instead. */
.template6-website .t6w-program-card,
.template6-website .t6w-service-card,
.template6-website .t6w-leader-card,
.template6-website .t6w-leader-body,
.template6-website .t6w-panel,
.template6-website .search-content-box,
.template6-website .t6w-teacher-row-card,
.template6-website .t6w-teacher-row-body,
.template6-website .t6w-people-grid > a,
.template6-website .t6w-dashboard-row > *,
.template6-website .t6w-gallery-links-row > *,
.template6-website .t6w-links-location-row > *,
.template6-website .t6w-glance-item,
.template6-website .t6w-notice-row,
.template6-website .t6w-notice-row a,
.template6-website .t6w-update-row,
.template6-website .t6w-update-body,
.template6-website .t6w-footer-grid > *,
.template6-website .t6w-footer-bottom > *,
.template6-website .t6w-lower-row > *,
.template6-website .t6w-location-grid > *,
.template6-website .t6w-anthem-body > * {
    min-width: 0;
}

/* ================= Small helpers ================= */
.template6-website .t6w-empty { color: var(--t6w-muted); font-size: 13px; padding: 10px 0; }

@media (max-width: 575.98px) {
    .template6-website .t6w-section { padding: 28px 0; }
    .template6-website .container { padding-left: 16px; padding-right: 16px; }
}

/* ================================================================
   MOBILE REBUILD (<=767.98px) - intentional responsive sizing, not
   a shrunk desktop. Every rule below scales a component down to a
   size that reads comfortably on a phone; layout/column changes are
   handled by the breakpoints already set above (grid-template-columns
   etc.) - this block only tunes padding/icon/type scale so those
   columns don't feel like squeezed desktop cards.
   ================================================================ */
@media (max-width: 767.98px) {
    .template6-website { font-size: 14px; }
    .template6-website .t6w-section-head h2 { font-size: 22px; }
    .template6-website .t6w-section-head .t6w-sub { font-size: 12.5px; }

    /* Important Updates */
    .template6-website .t6w-updates { padding: 20px; }
    .template6-website .t6w-updates-head h3 { font-size: 17px; }
    .template6-website .t6w-update-row { padding: 12px 2px; gap: 10px; }
    .template6-website .t6w-update-date { width: 52px; padding: 6px 2px; font-size: 11px; }
    .template6-website .t6w-update-date b { font-size: 17px; }
    .template6-website .t6w-update-body a { font-size: 13.5px; }
    .template6-website .t6w-update-body span { font-size: 11.5px; }

    /* Quick Access */
    .template6-website .t6w-quick-card { padding: 18px 10px; gap: 8px; min-height: 130px; }
    .template6-website .t6w-quick-icon { width: 52px; height: 52px; border-radius: 12px; }
    .template6-website .t6w-quick-icon svg { width: 26px; height: 26px; }
    .template6-website .t6w-quick-card h4 { font-size: 13.5px; }
    .template6-website .t6w-quick-card span { font-size: 11px; }

    /* Leader messages */
    .template6-website .t6w-leader-card,
    .template6-website .t6w-leaders-row--pair .t6w-leader-card { padding: 22px; gap: 18px; }
    .template6-website .t6w-leader-photo,
    .template6-website .t6w-leaders-row--pair .t6w-leader-photo { min-height: 200px; }
    .template6-website .t6w-leader-body h3,
    .template6-website .t6w-leaders-row--pair .t6w-leader-body h3 { font-size: 18px; }
    .template6-website .t6w-leader-body .t6w-leader-role,
    .template6-website .t6w-leaders-row--pair .t6w-leader-body .t6w-leader-role { font-size: 12.5px; margin-bottom: 8px; }
    .template6-website .t6w-leader-body p,
    .template6-website .t6w-leaders-row--pair .t6w-leader-body p { font-size: 13px; line-height: 1.6; margin-bottom: 12px; }
    .template6-website .t6w-leader-body a { font-size: 13px; padding: 9px 18px; }

    /* Notice board + at a glance */
    .template6-website .t6w-panel { padding: 20px; }
    .template6-website .t6w-panel h3 { font-size: 17px; margin-bottom: 12px; }
    .template6-website .t6w-notice-row { padding: 9px 0; gap: 9px; }
    .template6-website .t6w-notice-row .t6w-notice-date { width: 44px; font-size: 10px; padding: 5px 2px; }
    .template6-website .t6w-notice-row .t6w-notice-date b { font-size: 14px; }
    .template6-website .t6w-notice-row a { font-size: 13px; }
    .template6-website .t6w-notice-badge { font-size: 10px; padding: 4px 9px; }
    .template6-website .t6w-glance-item { padding: 10px 8px; gap: 8px; }
    .template6-website .t6w-glance-icon { width: 38px; height: 38px; border-radius: 10px; }
    .template6-website .t6w-glance-icon svg { width: 19px; height: 19px; }
    .template6-website .t6w-glance-item b { font-size: 12px; }
    .template6-website .t6w-glance-item span { font-size: 10px; }

    /* Academic programs */
    .template6-website .t6w-program-card { padding: 20px 22px; gap: 16px; }
    .template6-website .t6w-program-icon { width: 56px; height: 56px; border-radius: 13px; }
    .template6-website .t6w-program-icon svg { width: 24px; height: 24px; }
    .template6-website .t6w-program-card h4 { font-size: 17px; }
    .template6-website .t6w-program-card span { font-size: 12.5px; }

    /* Result search / student list */
    .template6-website .search-content-box { padding: 20px; }
    .template6-website .src-title { margin-bottom: 14px; padding-bottom: 12px; gap: 10px; }
    .template6-website .src-title-icon { width: 34px; height: 34px; }
    .template6-website .src-title-icon svg { width: 15px; height: 15px; }
    .template6-website .src-title h3 { font-size: 16px; }
    .template6-website .search-content-box .form-control { height: 40px; font-size: 13.5px; }
    .template6-website .search-content-box label { font-size: 12px; }
    .template6-website .search-content-box .btn-sms { padding: 12px 20px; font-size: 13.5px; }

    /* Teachers */
    .template6-website .t6w-teacher-row-card { min-height: 0; }
    .template6-website .t6w-teacher-row-photo { width: 40%; min-height: 170px; }
    .template6-website .t6w-teacher-row-body { padding: 14px 12px; }
    .template6-website .t6w-teacher-row-body h3 { font-size: 14.5px; margin-bottom: 4px; }
    .template6-website .t6w-teacher-row-body .card-desc-type { font-size: 11.5px; margin-bottom: 4px; }
    .template6-website .t6w-teacher-row-body p { font-size: 11px; line-height: 1.4; }

    /* Important links & services */
    .template6-website .t6w-service-grid--wide { grid-template-columns: repeat(2, 1fr) !important; column-gap: 12px; row-gap: 12px; }
    .template6-website .t6w-service-card--lg { padding: 16px 12px; gap: 8px; min-height: 120px; border-radius: 12px; }
    .template6-website .t6w-service-icon--lg { width: 48px; height: 48px; border-radius: 11px; }
    .template6-website .t6w-service-icon--lg svg { width: 20px; height: 20px; }
    .template6-website .t6w-service-card--lg strong { font-size: 13px; }
    .template6-website .t6w-service-card--lg em { font-size: 10.5px; }
    .template6-website .t6w-external-links { margin-top: 16px; padding-top: 12px; }
    .template6-website .t6w-chip { height: 30px; font-size: 11.5px; padding: 0 12px; }

    /* Lower-page panels: tighter padding + stacked map/contact on small screens */
    .template6-website .t6w-lower-panel { padding: 18px; }
    .template6-website .t6w-map-embed,
    .template6-website .t6w-map-embed iframe { min-height: 200px; }
    .template6-website .t6w-contact-row { padding: 12px 14px; gap: 10px; }
    .template6-website .t6w-contact-row span { font-size: 13px; }
    .template6-website .t6w-contact-row svg { width: 15px; height: 15px; padding: 7px; }

    /* Co-curricular */
    .template6-website .t6w-club-card { padding: 14px 8px; gap: 8px; }
    .template6-website .t6w-club-image { width: 54px; height: 54px; }
    .template6-website .t6w-club-card strong { font-size: 12.5px; }

    /* FAQ */
    .template6-website .t6w-faq-compact .card-header { padding: 12px !important; }
    .template6-website .t6w-faq-compact .card-body { padding: 0 12px 12px !important; }
    .template6-website .t6w-faq-compact .btn-link { font-size: 12.5px; }
    .template6-website .t6w-faq-compact .card-body p { font-size: 12px !important; line-height: 1.55; }

    /* Footer */
    .template6-website .t6w-footer { padding: 32px 0 0; }
    .template6-website .t6w-footer-grid { gap: 24px; row-gap: 28px; padding-bottom: 20px; }
    .template6-website .t6w-footer-cta { max-width: none; }
}

@media (max-width: 575.98px) {
    .template6-website .t6w-brand-text h1 { font-size: 17px; }
    .template6-website .t6w-leaders-row--pair .t6w-leader-photo { min-height: 220px; }
    /* Below 575.98px the teacher grid becomes 1 column (full-width card),
       so proportions can relax back up from the cramped 2-column values
       above - still photo-left/text-right, never stacked. */
    .template6-website .t6w-teacher-row-photo { width: 34%; min-height: 190px; }
    .template6-website .t6w-teacher-row-body { padding: 18px 16px; }
    .template6-website .t6w-teacher-row-body h3 { font-size: 16px; }
    .template6-website .t6w-teacher-row-body .card-desc-type { font-size: 12.5px; }
    .template6-website .t6w-teacher-row-body p { font-size: 12px; }

    /* Emergency hotlines - 2-per-row at this width (instruction #11), so
       cards get less room; tighten padding/type to keep the 5-digit
       numbers and longer Bengali labels from clipping. */
    .template6-website .t6w-hotline-card { padding: 14px 8px; gap: 5px; }
    .template6-website .t6w-hotline-icon { width: 44px; height: 36px; }
    .template6-website .t6w-hotline-icon .fa { font-size: 21px; }
    .template6-website .t6w-hotline-card strong { font-size: 17px; }
    .template6-website .t6w-hotline-label { font-size: 11px; }
}

/* ================= Institutional Information pages =================
   Shared shell for About Institute / Governing Body / Permission / MPO /
   Land Information / Building & Room / Campus Map / Academic Performance /
   Annual Report - see t6w-inst-shell.blade.php, t6w-inst-hero.blade.php,
   t6w-inst-sidebar.blade.php. Scoped entirely under .template6-website and
   the t6w-inst-, t6w-side- and t6w-breadcrumb classes so it cannot affect
   the homepage or any other already-approved section. */

.template6-website .t6w-inner-hero {
    position: relative;
    min-height: 260px;
    display: flex;
    align-items: flex-end;
    background-color: var(--t6w-green-dark);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.template6-website .t6w-inner-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,74,54,.72) 0%, rgba(11,74,54,.88) 100%);
}
.template6-website .t6w-inner-hero-inner {
    position: relative;
    z-index: 1;
    padding: 34px 24px 30px;
    width: 100%;
}
.template6-website .t6w-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: rgba(255,255,255,.78);
    margin-bottom: 14px;
}
.template6-website .t6w-breadcrumb a { color: rgba(255,255,255,.78); }
.template6-website .t6w-breadcrumb a:hover { color: #fff; }
.template6-website .t6w-breadcrumb-sep { color: rgba(255,255,255,.5); }
.template6-website .t6w-breadcrumb-current { color: #fff; font-weight: 600; }
.template6-website .t6w-inner-hero-title {
    color: #fff;
    font-size: 38px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.template6-website .t6w-inst-page { padding: 34px 0; }
.template6-website .t6w-inst-layout { align-items: flex-start; }

.template6-website .t6w-inst-card {
    background: var(--t6w-white);
    border: 1px solid var(--t6w-border);
    border-radius: var(--t6w-radius);
    box-shadow: 0 2px 10px rgba(15,104,73,.05);
    padding: 28px 30px;
}
/* Below 992px the sidebar drops below the article (Bootstrap col-lg-9/col-lg-3
   stack), so there is no side-by-side gap to fill and the card is left at its
   natural (auto) height there. At >=992px, short pages (e.g. Permission and
   Recognition's one-line content) would otherwise leave the card visibly
   shorter than the sidebar beside it - min-height (never height) gives every
   card a consistent minimum canvas while long pages like About Institute keep
   growing past it with their real content, untouched. */
@media (min-width: 992px) {
    .template6-website .t6w-inst-card { min-height: 640px; }
}
.template6-website .t6w-inst-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 20px;
    font-weight: 700;
    color: var(--t6w-green-dark);
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--t6w-border);
}
.template6-website .t6w-inst-accent {
    flex: none;
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: var(--t6w-green);
}
.template6-website .t6w-inst-body { font-size: 14.5px; line-height: 1.85; color: var(--t6w-ink); }
.template6-website .t6w-inst-body p { margin-bottom: 14px; }
.template6-website .t6w-inst-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 6px 0 16px; }
.template6-website .t6w-inst-body iframe { max-width: 100%; }
.template6-website .t6w-inst-body table.t6w-inst-table,
.template6-website .t6w-inst-body table { width: 100%; }
.template6-website .t6w-inst-table th { color: var(--t6w-green-dark); font-size: 13px; }
.template6-website .t6w-inst-table td, .template6-website .t6w-inst-table th { padding: 10px 12px; vertical-align: middle; }
.template6-website .t6w-inst-table .data-image img { width: 46px; height: 46px; object-fit: cover; border-radius: 50%; }

/* Institutional Information empty state (t6w-inst-empty.blade.php) - scoped under
   t6w-empty-* rather than the site-wide .no-data-found class in custom.css, which
   many unrelated Template 6 pages still use unchanged. min-height values are sized
   to sit comfortably inside .t6w-inst-card's own min-height (640px at >=992px, auto
   below that - see the institutional page rules above), so the illustration centers
   within the real remaining white space instead of forcing extra height itself. */
.template6-website .t6w-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 200px;
    padding: 16px 10px;
}
.template6-website .t6w-empty-illustration { width: 108px; height: 108px; margin-bottom: 14px; }
.template6-website .t6w-empty-illustration svg { width: 100%; height: 100%; display: block; }
.template6-website .t6w-empty-title { color: var(--t6w-green-dark); font-size: 17px; font-weight: 700; margin: 0; }

@media (min-width: 768px) and (max-width: 991.98px) {
    .template6-website .t6w-empty-state { min-height: 320px; }
    .template6-website .t6w-empty-illustration { width: 130px; height: 130px; }
}

@media (min-width: 992px) {
    .template6-website .t6w-empty-state { min-height: 480px; }
    .template6-website .t6w-empty-illustration { width: 150px; height: 150px; margin-bottom: 18px; }
    .template6-website .t6w-empty-title { font-size: 20px; }
}

/* Sidebar */
.template6-website .t6w-inst-sidebar { display: flex; flex-direction: column; gap: 18px; }
.template6-website .t6w-side-card {
    background: var(--t6w-white);
    border: 1px solid var(--t6w-border);
    border-radius: var(--t6w-radius);
    padding: 18px;
}
.template6-website .t6w-side-card-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--t6w-border);
}
.template6-website .t6w-side-card-icon {
    flex: none;
    width: 26px; height: 26px;
    border-radius: 7px;
    background: var(--t6w-green-soft);
    color: var(--t6w-green);
    display: flex; align-items: center; justify-content: center;
}
.template6-website .t6w-side-card-head h3 { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--t6w-green-dark); margin: 0; }
.template6-website .t6w-side-view-all { flex: none; font-size: 11px; font-weight: 700; color: var(--t6w-green); white-space: nowrap; }
.template6-website .t6w-side-view-all:hover { color: var(--t6w-orange); }

.template6-website .t6w-inst-menu { list-style: none; margin: 0; padding: 0; }
.template6-website .t6w-inst-menu li a {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 11px 8px; margin: 0 -8px;
    border-bottom: 1px solid var(--t6w-border);
    color: var(--t6w-ink); font-size: 13.5px; font-weight: 600;
    border-radius: 6px;
    transition: background .15s ease, color .15s ease;
}
.template6-website .t6w-inst-menu li:last-child a { border-bottom: none; }
.template6-website .t6w-inst-menu li a svg { flex: none; color: var(--t6w-muted); transition: color .15s ease; }
.template6-website .t6w-inst-menu li a:hover { color: var(--t6w-green); background: var(--t6w-green-soft); }
.template6-website .t6w-inst-menu li a:hover svg { color: var(--t6w-green); }
.template6-website .t6w-inst-menu li a.active { color: var(--t6w-green-dark); background: var(--t6w-green-soft); }
.template6-website .t6w-inst-menu li a.active svg { color: var(--t6w-green-dark); }

.template6-website .t6w-side-notices { display: flex; flex-direction: column; }
.template6-website .t6w-side-notice-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 2px; border-bottom: 1px solid var(--t6w-border);
    color: var(--t6w-ink);
}
.template6-website .t6w-side-notice-row:last-child { border-bottom: none; }
.template6-website .t6w-side-notice-date {
    flex: none; width: 44px; text-align: center;
    background: var(--t6w-green-soft); color: var(--t6w-green-dark);
    border-radius: 8px; padding: 5px 2px; font-size: 10.5px; font-weight: 700; line-height: 1.15;
}
.template6-website .t6w-side-notice-date b { display: block; font-size: 15px; }
.template6-website .t6w-side-notice-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.template6-website .t6w-side-notice-title { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--t6w-ink); }
.template6-website .t6w-side-notice-row:hover .t6w-side-notice-title { color: var(--t6w-green); }

.template6-website .t6w-side-messages { display: flex; flex-direction: column; }
.template6-website .t6w-side-message-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 2px; border-bottom: 1px solid var(--t6w-border);
    color: var(--t6w-ink);
}
.template6-website .t6w-side-message-row:last-child { border-bottom: none; }
.template6-website .t6w-side-message-photo {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    background-size: cover; background-position: center;
    border: 2px solid var(--t6w-green-soft);
}
.template6-website .t6w-side-message-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.template6-website .t6w-side-message-body b { font-size: 13px; font-weight: 700; color: var(--t6w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.template6-website .t6w-side-message-body span { font-size: 11.5px; color: var(--t6w-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.template6-website .t6w-side-message-row svg { flex: none; color: var(--t6w-muted); }
.template6-website .t6w-side-message-row:hover .t6w-side-message-body b { color: var(--t6w-green); }

@media (max-width: 991.98px) {
    .template6-website .t6w-inner-hero-title { font-size: 30px; }
    .template6-website .t6w-inst-card { padding: 22px 20px; }
    .template6-website .t6w-inst-sidebar { margin-top: 4px; }
}

@media (max-width: 767.98px) {
    .template6-website .t6w-inner-hero { min-height: 200px; }
    .template6-website .t6w-inner-hero-title { font-size: 25px; }
    .template6-website .t6w-inst-page { padding: 24px 0; }
}

@media (max-width: 575.98px) {
    .template6-website .t6w-inner-hero-inner { padding: 24px 16px 22px; }
    .template6-website .t6w-breadcrumb { font-size: 11.5px; }
    .template6-website .t6w-inner-hero-title { font-size: 21px; }
    .template6-website .t6w-inst-card { padding: 18px 14px; }
    .template6-website .t6w-inst-heading { font-size: 17px; }
}

/* ================= Academic Information forms/search =================
   Shared by student-form.blade.php, student-attendance-form.blade.php and
   student-result-form.blade.php (Student List / Student Attendance / Internal
   Result search forms) - one shared set of classes rather than three copies, since
   all three forms are visually identical (Bootstrap row/col grid unchanged, only
   input/label/button skin is new here). */
.template6-website .t6w-form-intro { margin: 0 0 18px; color: var(--t6w-muted); font-size: 13.5px; }
.template6-website .t6w-form-group { margin-bottom: 16px; }
.template6-website .t6w-form-group label { display: block; font-size: 13px; font-weight: 700; color: var(--t6w-green-dark); margin-bottom: 7px; }
.template6-website .t6w-form-group .clr-red { color: var(--t6w-orange-dark); }
.template6-website .t6w-form-control {
    width: 100%; height: 44px; padding: 0 14px;
    border: 1px solid var(--t6w-border); border-radius: 8px;
    font-size: 13.5px; color: var(--t6w-ink); background: var(--t6w-white);
}
.template6-website select.t6w-form-control { padding-right: 30px; }
.template6-website .t6w-form-control:focus { outline: none; border-color: var(--t6w-green); box-shadow: 0 0 0 3px rgba(15,104,73,.12); }
.template6-website .t6w-form-group--submit { margin-top: 4px; margin-bottom: 0; }
.template6-website .t6w-form-submit {
    height: 44px; padding: 0 28px; border: none; border-radius: 8px;
    background: var(--t6w-green); color: #fff; font-weight: 700; font-size: 13.5px;
    cursor: pointer; transition: background .15s ease;
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.template6-website a.t6w-form-submit:hover { color: #fff; background: var(--t6w-green-dark); }
.template6-website .t6w-form-submit:hover { background: var(--t6w-green-dark); }
.template6-website .t6w-inst-form .input-has-icon { position: relative; }
.template6-website .t6w-inst-form .form-input-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--t6w-muted); }

.template6-website .t6w-inst-iframe-wrap { border: 1px solid var(--t6w-border); border-radius: var(--t6w-radius); overflow: hidden; }
.template6-website .t6w-inst-iframe-wrap iframe { display: block; border: none; }

/* Bootstrap's .pagination is display:flex with no wrap by default - on College/Board/
   University Notice and Class/Exam Routine (hundreds of pages, so Laravel's paginator
   renders 7+ page-links plus prev/next), that overflows the page horizontally on
   narrow viewports since .sms-pagination sits outside the .table-responsive wrapper.
   Scoped to .t6w-inst-body so it doesn't touch pagination anywhere else. */
.template6-website .t6w-inst-body .pagination { flex-wrap: wrap; row-gap: 6px; }

.template6-website .t6w-form-textarea { height: auto; padding: 12px 14px; resize: vertical; }

/* Contact page (contact.blade.php) - real institute address/phone/email/website on
   the right, the existing (backend-less, pre-existing) contact form on the left. */
.template6-website .t6w-contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
.template6-website .t6w-contact-form-col,
.template6-website .t6w-contact-info-col { min-width: 0; }
.template6-website .t6w-contact-subtitle { font-size: 17px; font-weight: 700; color: var(--t6w-green-dark); margin: 0 0 6px; }
.template6-website .t6w-contact-info-col { background: var(--t6w-green-soft); border-radius: var(--t6w-radius); padding: 22px; }
.template6-website .t6w-contact-info-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.template6-website .t6w-contact-info-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--t6w-ink); line-height: 1.6; }
.template6-website .t6w-contact-icon {
    flex: none; width: 26px; height: 26px; border-radius: 7px; margin-top: 1px;
    background: var(--t6w-white); color: var(--t6w-green);
    display: flex; align-items: center; justify-content: center;
}

@media (max-width: 991.98px) {
    .template6-website .t6w-contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .template6-website .t6w-form-control, .template6-website .t6w-form-submit { height: 42px; }
}

/* Inner Gallery pages (photoGallery.blade.php - Sports/Success/Other/Study Tour/
   National Day Photo Gallery). Reuses the exact .t6w-gallery-grid/-item/-caption
   classes the approved homepage Media Gallery teaser already defines (unchanged,
   untouched here) - those rely on a flex-grown parent with a definite height
   (.t6w-gallery-links-row > div) to make .t6w-gallery-item img fill a uniform card
   height via object-fit:cover. The standalone inner page has no such parent, so
   .t6w-inst-gallery-grid/.t6w-inst-body-scoped rules below give the grid items a
   fixed, consistent thumbnail height instead - scoped strictly under .t6w-inst-body
   so the homepage's own .t6w-gallery-item instances are completely unaffected. */
.template6-website .t6w-inst-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.template6-website .t6w-inst-body .t6w-gallery-item { min-height: 0; }
.template6-website .t6w-inst-body .t6w-gallery-item img { height: 210px; flex: none; }

@media (max-width: 1199.98px) {
    .template6-website .t6w-inst-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .template6-website .t6w-inst-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .template6-website .t6w-inst-body .t6w-gallery-item img { height: 180px; }
}
@media (max-width: 575.98px) {
    .template6-website .t6w-inst-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .template6-website .t6w-inst-body .t6w-gallery-item img { height: 130px; }
    .template6-website .t6w-inst-body .t6w-gallery-caption { font-size: 11.5px; padding: 8px; }
}

/* Fees Payment (fees_payment/index.blade.php + partial.studentInfo/studentPaymentInfo).
   Standalone transactional page - no sidebar, so the card is centered and capped
   narrower than the full 1500px container instead of stretching edge-to-edge.
   Reuses .t6w-inst-card/.t6w-form-group/.t6w-form-control/.t6w-form-submit/
   .t6w-inst-table unchanged; only these few new classes are genuinely page-specific. */
.template6-website .t6w-fees-card { max-width: 1100px; margin: 0 auto; }
.template6-website .t6w-fees-panel {
    background: var(--t6w-bg); border: 1px solid var(--t6w-border);
    border-radius: var(--t6w-radius); padding: 20px; height: 100%;
}
.template6-website .t6w-fees-subtitle { font-size: 15px; font-weight: 700; color: var(--t6w-green-dark); margin: 0 0 12px; }
.template6-website .t6w-fees-info-table th { width: 42%; }
.template6-website .t6w-fees-scroll {
    max-height: 500px; overflow-y: scroll; background: var(--t6w-white);
    border: 1px solid var(--t6w-border); border-radius: 10px;
}
.template6-website .t6w-fees-summary { margin-top: 14px; margin-bottom: 0; }
.template6-website .t6w-fees-panel .t6w-inst-table { font-size: 13px; }

@media (max-width: 767.98px) {
    .template6-website .t6w-fees-panel { padding: 16px; }
}

/* Online Admission pages (welcome.blade.php + admission/hsc-roll, honours-roll,
   degree-roll.blade.php - app/Modules/OnlineAdmission). Standalone transactional
   pages - no sidebar, centered card, same reasoning as Fees Payment. The 3/1-card
   admission-type grid on welcome.blade.php reuses the existing homepage
   .t6w-service-grid/.t6w-service-card classes unchanged (only child h3/p typography
   is added here, scoped under .t6w-admission-card so the homepage's own
   strong/em-based tiles are unaffected). */
.template6-website .t6w-admission-card { max-width: 1100px; margin: 0 auto; }
.template6-website .t6w-admission-card .t6w-service-card h3 { font-size: 16px; font-weight: 700; color: var(--t6w-green-dark); margin: 0; }
.template6-website .t6w-admission-card .t6w-service-card p { font-size: 13px; color: var(--t6w-muted); margin: 0; line-height: 1.5; }
.template6-website .t6w-admission-single { display: flex; justify-content: center; }
.template6-website .t6w-admission-single .t6w-service-card { max-width: 380px; width: 100%; }

.template6-website .t6w-admission-note {
    background: var(--t6w-green-soft); border: 1px solid var(--t6w-border); border-radius: 10px;
    padding: 14px 18px; color: var(--t6w-green-dark); font-size: 13.5px; font-weight: 600;
    text-align: center; margin-bottom: 20px; line-height: 1.6;
}
.template6-website .t6w-admission-subcard {
    background: var(--t6w-bg); border: 1px solid var(--t6w-border); border-radius: var(--t6w-radius);
    padding: 20px; margin-top: 20px;
}
.template6-website .t6w-admission-subcard-title { font-size: 15px; font-weight: 700; color: var(--t6w-green-dark); margin: 0 0 14px; }
.template6-website .t6w-admission-subcard .row > div { margin-bottom: 14px; }

@media (max-width: 767.98px) {
    .template6-website .t6w-admission-subcard { padding: 16px; }
}

/* Outer-shell spacing ONLY for the frozen HSC admission form page (hsc-form.blade.php).
   The form's own .sms-form-card/.container/.form-control/etc. are never targeted here -
   this only adds breathing room between the new hero and the untouched form below it,
   via an adjacency selector so no class was added to the form's markup. */
.template6-website .t6w-inner-hero + .container { margin-top: 28px; margin-bottom: 40px; }