/* ===================================================
   MECD - Middle East for Commercial Diving
   Professional theme inspired by diversinstitute.edu
   =================================================== */

:root{
  --navy: #0a1f33;
  --navy-2: #0f2b47;
  --deep-blue: #06121f;
  --teal: #00a8a8;
  --teal-dark: #00807f;
  --amber: #f5a623;
  --white: #ffffff;
  --off-white: #f6f8fa;
  --gray: #5b6b7b;
  --light-gray: #e7ecf1;
  --font-head: 'Montserrat', 'Archivo Black', sans-serif;
  --font-body: 'Open Sans', Arial, sans-serif;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(6, 18, 31, 0.12);
  --shadow-lg: 0 20px 50px rgba(6, 18, 31, 0.25);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: #24333f;
  background: var(--white);
  line-height: 1.65;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ margin:0; padding:0; }
.container{
  width:100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
section{ padding: 68px 0; }
.section-tight{ padding: 40px 0; }
h1,h2,h3,h4{ font-family: var(--font-head); font-weight: 800; color: var(--navy); margin:0 0 16px; line-height:1.2; }
h1{ font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2{ font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3{ font-size: 1.3rem; }
p{ margin:0 0 14px; color: var(--gray); }

.eyebrow{
  display:inline-block;
  color: var(--teal);
  font-weight:700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: 10px;
}
.section-head{ text-align:center; max-width: 760px; margin: 0 auto 48px; }
.section-head p{ font-size:1.05rem; }
.section-head .bar{
  width: 64px; height: 4px; background: var(--teal); margin: 14px auto 0; border-radius: 4px;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 30px;
  border-radius: 50px;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing:.3px;
  cursor:pointer;
  border: 2px solid transparent;
  transition: all .25s ease;
  text-transform: uppercase;
}
.btn-primary{ background: var(--teal); color: #fff; box-shadow: 0 8px 20px rgba(0,168,168,.35); }
.btn-primary:hover{ background: var(--teal-dark); transform: translateY(-2px); }
.btn-outline{ background: transparent; border-color: #fff; color: #fff; }
.btn-outline:hover{ background: #fff; color: var(--navy); }
.btn-navy{ background: var(--navy); color:#fff; }
.btn-navy:hover{ background: var(--deep-blue); transform: translateY(-2px); }
.btn-amber{ background: var(--amber); color: var(--navy); }
.btn-amber:hover{ transform: translateY(-2px); }
.btn-verify{ background: transparent; border-color: rgba(255,255,255,.5); color:#fff; text-transform:none; letter-spacing:0; }
.btn-verify:hover{ background: rgba(255,255,255,.12); border-color:#fff; transform: translateY(-2px); }
.btn-block{ width:100%; }
.btn-sm{ padding: 8px 18px; font-size:.75rem; }

/* ============ HEADER ============ */
#site-header{
  position: sticky; top:0; z-index: 999;
  background: rgba(10,31,51,0.97);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 20px rgba(0,0,0,.2);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 0;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:52px; width:52px; border-radius:50%; object-fit:cover; background:#fff; }
.brand-text{ color:#fff; font-family: var(--font-head); font-weight:800; font-size:1.05rem; line-height:1.2; }
.brand-text span{ display:block; font-size:.68rem; font-weight:500; color: var(--teal); letter-spacing:1px; text-transform:uppercase; }

nav.main-nav{ display:flex; align-items:center; gap: 6px; }
nav.main-nav ul{ display:flex; list-style:none; gap: 4px; align-items:center; }
nav.main-nav > ul > li{ position:relative; }
nav.main-nav a.nav-link{
  color:#fff; padding: 10px 14px; display:block; font-weight:600; font-size:.86rem;
  text-transform: uppercase; letter-spacing:.4px; border-radius:6px; transition: background .2s, color .2s;
  white-space:nowrap;
}
nav.main-nav a.nav-link:hover, nav.main-nav a.nav-link.active{ background: rgba(255,255,255,.08); color: var(--teal); }
.has-dropdown{ display:flex; align-items:center; gap:4px; }
.dropdown{
  position:absolute; top: 100%; left:0; background:#fff; min-width: 230px;
  border-radius: 8px; box-shadow: var(--shadow-lg); padding: 8px; opacity:0; visibility:hidden;
  transform: translateY(8px); transition: all .2s ease; z-index: 50;
}
nav.main-nav li:hover > .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{
  display:block; padding: 10px 14px; color: var(--navy); font-size:.86rem; border-radius:6px; font-weight:600;
}
.dropdown a:hover{ background: var(--off-white); color: var(--teal-dark); }
.header-cta{ display:flex; align-items:center; gap: 14px; }
.lang-link{ color:#fff; font-weight:700; font-size:.85rem; opacity:.85; }
.lang-link:hover{ color: var(--teal); }

/* Circular header CTA buttons */
.btn-circle{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:74px; height:74px; min-width:74px; border-radius:50%;
  text-align:center; text-transform:uppercase; letter-spacing:.2px;
  font-family: var(--font-head); font-weight:800; font-size:.6rem; line-height:1.15;
  padding:4px; border:2px solid transparent; cursor:pointer; transition: all .25s ease;
  flex-shrink:0;
}
.btn-circle svg{ margin-bottom:2px; }
.btn-circle-primary{ background: var(--teal); color:#fff; box-shadow: 0 8px 20px rgba(0,168,168,.35); }
.btn-circle-primary:hover{ background: var(--teal-dark); transform: translateY(-2px) scale(1.05); }
.btn-circle-outline{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.55); color:#fff; }
.btn-circle-outline:hover{ background: rgba(255,255,255,.14); border-color:#fff; transform: translateY(-2px) scale(1.05); }

@media (max-width: 1024px){
  .btn-circle{ width:58px; height:58px; min-width:58px; font-size:.52rem; }
}
@media (max-width: 480px){
  .header-cta{ gap:8px; }
  .btn-circle{ width:48px; height:48px; min-width:48px; font-size:.42rem; letter-spacing:0; }
  .btn-circle svg{ width:14px; height:14px; margin-bottom:1px; }
}

.hamburger{ display:none; background:none; border:none; cursor:pointer; padding:6px; }
.hamburger span{ display:block; width:26px; height:3px; background:#fff; margin:5px 0; border-radius:2px; }

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height: 88vh;
  display:flex; align-items:center;
  background-size: cover; background-position: center;
  background-color: var(--navy);
  color:#fff;
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(120deg, rgba(6,18,31,.92) 10%, rgba(6,18,31,.55) 60%, rgba(0,168,168,.35) 100%);
}
.hero-media-stage{ position:absolute; inset:0; z-index:0; overflow:hidden; background:transparent; }
.hero-media-stage img, .hero-media-stage video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity 1.1s ease;
}
.hero-media-stage img.active, .hero-media-stage video.active{ opacity:1; }
.hero-content{ position:relative; z-index:2; max-width: 720px; }
.hero-content .eyebrow{ color: var(--amber); }
.hero-content h1{ color:#fff; margin-bottom: 18px; }
.hero-content p.lead{ font-size: 1.15rem; font-weight:500; color: #ffffff; max-width: 560px; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
.hero-btns{ display:flex; gap:16px; margin-top: 28px; flex-wrap:wrap; }
.hero-scroll{
  position:absolute; bottom: 24px; left:50%; transform:translateX(-50%);
  color:#fff; opacity:.75; font-size:.8rem; text-align:center; z-index:2;
}

.page-hero{
  position:relative; min-height: 42vh; display:flex; align-items:center; color:#fff;
  background-size:cover; background-position:center;
}
.page-hero::before{ content:''; position:absolute; inset:0; background: linear-gradient(120deg, rgba(6,18,31,.9), rgba(0,128,127,.55)); }
.page-hero .container{ position:relative; z-index:2; }
/* Page-hero body/subtitle text (the paragraph under the H1, e.g. "Wherever
   you call home, MECD welcomes international students...") is admin-authored
   rich text (from page_sections.body) wrapped in a light-colored <div>, but
   the site-wide `p{ color: var(--gray) }` rule (further down this file)
   directly targets the inner <p> tag itself and wins over the inherited
   color from that wrapper div — so on every .page-hero across the site this
   text was rendering in dark gray on a dark photo background instead of the
   intended light color, making it hard to read regardless of which photo is
   behind it. Force it back to a light color (with a shadow for extra
   contrast on brighter/busier photos) so it's always clearly legible, on
   every page that uses .page-hero (course pages, Contact, Gallery,
   Overseas Students, etc.) without needing to touch each page individually. */
.page-hero p, .page-hero .lead{ color:#eef6f7; text-shadow: 0 2px 10px rgba(0,0,0,.65); }
.breadcrumb{ font-size:.85rem; color:#cfe4ea; }
.breadcrumb a{ color: var(--amber); font-weight:700; }

/* ============ STATS ============ */
.stats-strip{ background: var(--navy); color:#fff; padding: 42px 0; }
.stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align:center; }
/* Grid items default to a minimum width equal to their content's un-broken
   min-content size — for a long single word like "Establishment" that is
   WIDER than an equal 1fr share on narrow screens, which forces that one
   column to grow past its share and pushes/cuts off its neighboring
   column(s) instead of wrapping. min-width:0 lets every stat item shrink
   down to its actual 1fr share so all columns stay equal width and nothing
   gets squeezed off-screen. */
.stats-grid > div{ min-width:0; }
/* Each stat item is now a small self-contained "card" (icon badge + value +
   label) with its own hover lift, instead of plain stacked text — this is
   the fully dynamic version driven by the `stats` table (icon/value/label/
   order, all editable in Admin Panel > Homepage Stats). */
.stat-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 6px 10px; border-radius: 14px; transition: transform .25s ease, background .25s ease;
}
.stats-strip.qf-wrap .stat-card:hover{ transform: translateY(-4px); background: rgba(0,168,168,.06); }
.stat-icon{
  width:52px; height:52px; border-radius:50%; margin-bottom:10px;
  background: rgba(0,168,168,.14); color: var(--teal);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; line-height:1;
}
.stats-strip:not(.qf-wrap) .stat-icon{ background: rgba(255,255,255,.12); }
/* Each stat item reserves enough height for a 2-line value (e.g. "Training
   Establishment") and vertically centers it, so a longer value that wraps
   onto a second line never pushes its own label further down than the
   labels of shorter, single-line neighbors in the same row — this was
   causing the 4 labels to look misaligned/staggered against each other,
   most noticeably on narrower screens where columns are tight. Word-break
   is intentionally left at its normal default (whole-word wrapping only —
   e.g. "Training" / "Establishment" on 2 separate lines) instead of
   break-word/hyphens, which used to chop long words mid-letter (e.g.
   "Establishme" / "nt") even on desktop-width columns. The font-size uses
   clamp() so it shrinks just enough on narrower 4-column layouts for the
   longest single word to fit its column on one line without needing to
   break at all. */
.stats-grid .stat-value{
  font-family: var(--font-head); font-weight:800; color: var(--teal);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  display:flex; align-items:center; justify-content:center; min-height:2.4em; line-height:1.15;
  overflow-wrap: normal; word-break: normal; width:100%;
}
.stats-grid .stat-label{ font-size:.85rem; letter-spacing:.5px; text-transform:uppercase; color: #cfd9e2; margin-top:6px; }

/* ============ FEATURE / CONTENT CARDS ============ */
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 40px; align-items:center; }

.card{
  background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column;
  border-top: 4px solid transparent;
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card .card-img{ height: 200px; overflow:hidden; }
.card .card-img img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.card:hover .card-img img{ transform: scale(1.08); }
.card .card-body{ padding: 22px 24px 26px; flex:1; display:flex; flex-direction:column; }
.card h3{ font-size: 1.15rem; margin-bottom: 10px; }
.card p{ font-size:.92rem; flex:1; }
.card .card-link{ margin-top: 12px; color: var(--teal-dark); font-weight:700; font-size:.85rem; text-transform:uppercase; }
.card .card-link:hover{ text-decoration:underline; }
/* Icon-style cards (no photo) — used for skill/curriculum highlight grids */
.card:not(:has(.card-img)){ border-top-color: var(--teal); }
.card:not(:has(.card-img)) .card-body{ padding-top: 28px; }
.card:not(:has(.card-img)) h3{ font-size: 1.05rem; line-height:1.4; }

.bg-alt{ background: var(--off-white); }
.bg-navy{ background: var(--navy); color:#fff; }
.bg-navy h2, .bg-navy h3{ color:#fff; }
.bg-navy p{ color:#cfd9e2; }

/* Split content section */
.split-media{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.split-media img{ width:100%; height: 420px; object-fit:cover; }
/* Some text-image sections use a square, self-contained illustration/badge
   (e.g. the "No Experience Required" split-face icon) instead of a wide
   real photo. object-fit:cover above is right for photos, but it CROPS a
   square graphic's edges/text to fill the wide box. .split-media-contain
   (added by JS only for known illustration images) shows the whole graphic
   uncropped, centered on a light backdrop, instead of forcing a crop. */
/* height:420px (not auto) matters here: .grid-2's CSS Grid stretches both
   columns to equal height by default (align-items:stretch), so if this
   wrapper were left at height:auto it would get force-stretched down to
   match its (usually shorter) text sibling — and since .split-media above
   sets overflow:hidden, the centered image was then clipped flush at that
   shorter height instead of the full circle showing. A fixed height avoids
   depending on the row's stretched size at all. */
.split-media-contain{ height:420px; background: var(--off-white); display:flex; align-items:center; justify-content:center; }
.split-media-contain img{ height:auto; max-height:100%; width:auto; max-width:100%; object-fit:contain; }
/* Wide logo/badge images (e.g. the IMCA Member logo) that should fill their
   frame with NO empty letterboxing gap above/below — unlike the fixed
   420px height above (needed so a SQUARE badge image doesn't get squeezed
   by the grid row's height), these auto-size the frame's height to exactly
   match the image's own aspect ratio at the column's rendered width, so
   the logo fills it edge-to-edge with no leftover blank space. Added after
   .split-media-contain so it overrides its fixed height/img sizing. */
.split-media-logo{ height:auto; }
.split-media-logo img{ width:100%; height:auto; max-height:none; }

/* Why choose list */
.check-list{ list-style:none; padding:0; margin: 20px 0; }
.check-list li{ display:flex; gap:12px; margin-bottom: 12px; align-items:flex-start; color:#33444f; }
.check-list li::before{
  content:'✓'; flex:0 0 26px; height:26px; width:26px; border-radius:50%;
  background: var(--teal); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:900;
}
/* The checkmark icon (above) always stays anchored at the start of the row —
   only the text itself (wrapped in .check-list-text by js/site.js's
   listItemsHtml()) is aligned, and it needs `flex:1; min-width:0;` so it
   actually spans the row's remaining width (a plain inline/text node inside
   a flex item won't stretch, so text-align:justify/center/right would have
   no visible room to work with otherwise). */
.check-list-text{ display:block; flex:1 1 auto; min-width:0; padding-top:3px; }
.check-list.align-center li{ justify-content:center; }
.check-list.align-center .check-list-text{ text-align:center; }
.check-list.align-right li{ justify-content:flex-end; }
.check-list.align-right .check-list-text{ text-align:right; }
.check-list.align-justify .check-list-text{ text-align:justify; text-justify:inter-word; }
/* Some checklist items are links to a dedicated course page (e.g. built via
   "Label::url" in the Admin Panel's Checklist Items field, or hand-written
   <a> tags in a section's rich-text body). By default `a{ color:inherit;
   text-decoration:none; }` (see top of this file) makes a link look
   IDENTICAL to plain non-clickable text — visitors had no way to tell which
   checklist items could be clicked. These rules give linked items a clearly
   different, clickable look (teal color + underline) while non-linked items
   stay as plain text, with no other markup changes needed anywhere. */
.check-list a{
  color: var(--teal-dark);
  text-decoration: underline;
  text-decoration-color: rgba(0,128,127,.35);
  text-underline-offset: 3px;
  font-weight: 700;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.check-list a:hover{ color: var(--teal); text-decoration-color: currentColor; }

/* Accreditation strip */
.accred-strip{ padding: 46px 0; background:#fff; border-top:1px solid var(--light-gray); border-bottom:1px solid var(--light-gray); }
.accred-row{ display:flex; align-items:center; justify-content:center; gap: 44px; flex-wrap:wrap; }
.accred-row img{ height: 62px; width:auto; filter: grayscale(15%); opacity:.9; transition:opacity .2s; }
.accred-row img:hover{ opacity:1; }

/* Testimonials */
.testi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.testi-card{ background:#fff; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); position:relative; }
.testi-card .stars{ color: var(--amber); margin-bottom: 12px; letter-spacing:2px; }
.testi-card .name{ font-weight:800; color:var(--navy); margin-top: 12px; }
.testi-card .role{ font-size:.8rem; color: var(--teal-dark); font-weight:700; text-transform:uppercase; }

/* CTA band */
.cta-band{
  background: linear-gradient(120deg, var(--navy), var(--teal-dark));
  color:#fff; text-align:center; padding: 64px 0;
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:#e6f2f2; max-width:640px; margin:0 auto 26px; }

/* Gallery */
/* Small pill "chips" shown under the Gallery hero title (e.g. "200 Photos",
   "3 Videos") — purely decorative context, filled in by JS once
   gallery_images has loaded, sits on top of the hero's dark overlay. */
.gallery-hero-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.gallery-hero-tags span{
  background: rgba(255,255,255,.14); backdrop-filter: blur(4px);
  border:1px solid rgba(255,255,255,.28); color:#fff; font-size:.76rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.4px; padding:7px 16px; border-radius:50px;
}
.gallery-filters{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom: 34px; }
.gallery-filters button{
  padding: 9px 22px; border-radius: 50px; border: 2px solid var(--light-gray); background:#fff;
  cursor:pointer; font-weight:700; font-size:.8rem; text-transform:uppercase; color: var(--gray);
  transition: all .2s;
}
.gallery-filters button.active, .gallery-filters button:hover{
  background: var(--teal); color:#fff; border-color: var(--teal);
  box-shadow: 0 8px 18px rgba(0,168,168,.3); transform: translateY(-1px);
}
.gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* Each tile fades/scales in on its own the instant it's added to the DOM
   (a plain CSS keyframe, not the site's shared scroll-IntersectionObserver
   ".reveal" system — a grid this size, often 100+ tiles tall, is far
   taller than any viewport, so it could never satisfy that system's 12%-
   visible threshold and would stay invisible forever). --stagger-i (set
   inline per tile by gallery.html) staggers each tile's start slightly for
   a pleasant cascading effect without needing scroll-tracking. */
@keyframes g-item-in{ from{ opacity:0; transform: translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }
.gallery-grid .g-item{
  position:relative; border-radius: 14px; overflow:hidden; box-shadow: var(--shadow);
  cursor:pointer; aspect-ratio: 4/3; transition: box-shadow .3s ease, transform .3s ease;
  animation: g-item-in .5s ease both;
  animation-delay: calc(var(--stagger-i, 0) * 60ms);
}
.gallery-grid .g-item:hover{ box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.gallery-grid .g-item img, .gallery-grid .g-item video{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.gallery-grid .g-item:hover img, .gallery-grid .g-item:hover video{ transform: scale(1.1); }
/* Subtle gradient wash on hover only (no visible caption text is ever
   rendered on a tile — most gallery_images rows only have the raw uploaded
   filename/UUID as their "caption", which is meaningless to visitors, so
   that value is used purely as invisible alt/accessibility text now). Kept
   just as a soft darkening backdrop behind the video play icon on hover. */
.gallery-grid .g-item::after{
  content:''; position:absolute; inset:0; z-index:1; opacity:0; transition: opacity .3s ease;
  background: linear-gradient(to top, rgba(6,18,31,.45) 0%, rgba(6,18,31,.05) 55%, rgba(6,18,31,0) 78%);
}
.gallery-grid .g-item:hover::after{ opacity:1; }
.gallery-grid .g-item .g-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%; background: rgba(6,18,31,.65); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.15rem; pointer-events:none;
  z-index:2; transition: background .3s ease, transform .3s ease;
}
.gallery-grid .g-item:hover .g-play{ background: rgba(0,168,168,.85); transform: translate(-50%,-50%) scale(1.08); }
.gallery-empty{ text-align:center; color: var(--gray); padding: 40px 0; grid-column: 1 / -1; }
.lightbox{ position:fixed; inset:0; background:rgba(6,18,31,.92); display:none; align-items:center; justify-content:center; z-index:2000; padding:30px; }
.lightbox.open{ display:flex; }
.lightbox img{
  max-width:90vw; max-height:85vh; border-radius:8px;
  /* Deter easy right-click-save / drag-out downloading of the maximized
     Gallery photo (see js/site.js's initLightbox() for the matching
     oncontextmenu/draggable guards). */
  -webkit-user-select:none; user-select:none; -webkit-user-drag:none; pointer-events:auto;
}
.lightbox-close{ position:absolute; top:24px; right:34px; color:#fff; font-size:2rem; cursor:pointer; background:none; border:none; }

/* ============ YOUTUBE PLAYLIST CARDS (Gallery page) ============ */
/* Live, no-API-key thumbnail previews of specific playlists (Admin Panel >
   Site Settings > "Gallery — Playlist N URL or ID"), each rendered as a
   16:9 iframe embed of youtube.com/embed/videoseries?list={ID} inside a
   card that matches the site's existing card/shadow language. Falls back
   to nothing shown for a card whose playlist isn't configured, and the
   whole section only calls attention to the channel link if NO playlist
   is configured at all (handled in gallery.html's script). */
.yt-playlists{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin: 8px auto 34px; max-width: 980px; }
.yt-playlist-card{
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius: var(--radius);
  overflow:hidden; text-align:left; box-shadow: var(--shadow);
}
.yt-playlist-card .yt-frame-wrap{ position:relative; width:100%; aspect-ratio:16/9; background:#06121f; }
.yt-playlist-card .yt-frame-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-playlist-card .yt-playlist-label{
  display:flex; align-items:center; gap:10px; padding: 16px 18px; font-family: var(--font-head);
  font-weight:700; color:#fff; font-size:.98rem;
}
.yt-playlist-card .yt-playlist-label svg{ flex:0 0 auto; }
.yt-channel-link-row{ text-align:center; }
@media (max-width: 720px){
  .yt-playlists{ grid-template-columns: 1fr; }
}

/* ============ QUICK-FACTS OVERLAP PANEL (e.g. Overseas Students) ============ */
.qf-wrap{ margin-top: -64px; position: relative; z-index: 6; }
.qf-panel{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 34px 20px; display:grid; grid-template-columns: repeat(4,minmax(0,1fr));
}
/* min-width:0 lets each grid item shrink below its text's natural (min-content)
   width — without it, a grid track's implicit min-width:auto is set by its
   content, so a long bold value like "Internationally recognized" forced its
   column (and the whole panel) wider than the phone screen, cutting the next
   card off at the edge instead of wrapping onto 2 lines. */
.qf-item{ text-align:center; padding: 0 14px; border-right: 1px solid var(--light-gray); min-width:0; }
.qf-item:last-child{ border-right:none; }
.qf-icon{ font-size: 1.9rem; margin-bottom: 8px; line-height:1; display:flex; align-items:center; justify-content:center; }
.qf-icon-img{ height: 40px; width:auto; max-width: 100%; object-fit: contain; }
.qf-value{ font-family: var(--font-head); font-weight:800; font-size: 1.7rem; color: var(--navy); overflow-wrap: break-word; word-break: normal; }
.qf-label{ font-size:.76rem; color: var(--gray); text-transform:uppercase; letter-spacing:.5px; margin-top:4px; font-weight:700; overflow-wrap: break-word; }

/* Homepage: stats strip re-styled as a hero-overlapping white card (dynamic `stats` table content) */
.stats-strip.qf-wrap{ margin-top: -64px; background:none; padding:0 0 0; position:relative; z-index:6; }
.stats-strip.qf-wrap .stats-grid{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 34px 20px; color:inherit; position:relative; overflow:hidden;
}
/* A thin teal accent bar along the top of the card ties it visually back to
   the brand color used in the values/icons below it. */
.stats-strip.qf-wrap .stats-grid::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--teal), var(--teal-dark));
}
.stats-strip.qf-wrap .stat-value{ color: var(--teal-dark); }
.stats-strip.qf-wrap .stat-label{ color: var(--gray); }
.stats-strip.qf-wrap .stats-grid > .stat-card{ border-right: 1px solid var(--light-gray); }
.stats-strip.qf-wrap .stats-grid > .stat-card:last-child{ border-right:none; }

/* ============ PHOTO MOSAIC (interactive photo grid w/ hover captions) ============ */
.photo-mosaic{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.photo-mosaic.cols-2{ grid-template-columns: repeat(2, 1fr); }
.photo-mosaic.cols-2 .mosaic-item{ aspect-ratio: 16/11; }
.photo-mosaic .mosaic-item{
  position:relative; border-radius: 14px; overflow:hidden; box-shadow: var(--shadow);
  cursor: default; aspect-ratio: 4/3; transition: box-shadow .25s ease;
}
.photo-mosaic .mosaic-item:hover{ box-shadow: var(--shadow-lg); }
.photo-mosaic .mosaic-item img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.photo-mosaic .mosaic-item:hover img{ transform: scale(1.1); }
.photo-mosaic .mosaic-item::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(6,18,31,.82) 0%, rgba(6,18,31,.08) 55%, rgba(6,18,31,0) 75%);
}
.photo-mosaic .mosaic-caption{ position:absolute; left:0; right:0; bottom:0; padding: 18px 18px 16px; color:#fff; z-index:2; }
.photo-mosaic .mosaic-caption strong{ display:block; font-family: var(--font-head); font-size: 1rem; margin-bottom: 3px; }
.photo-mosaic .mosaic-caption span{ font-size:.78rem; color:#cfe4ea; }

/* ============ FAQ ACCORDION ============ */
.faq-list{ max-width: 840px; margin: 0 auto; }
.faq-item{ border-bottom: 1px solid var(--light-gray); }
.faq-question{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 20px 4px; cursor:pointer; font-family: var(--font-head); font-weight:700;
  color: var(--navy); font-size: 1.02rem; background:none; border:none; width:100%; text-align:left;
}
.faq-question .faq-icon{
  flex: 0 0 30px; height:30px; width:30px; border-radius:50%; background: var(--off-white);
  color: var(--teal-dark); display:flex; align-items:center; justify-content:center;
  font-size: 1.2rem; font-weight:800; transition: transform .3s ease, background .3s ease, color .3s ease;
}
.faq-item.open .faq-question .faq-icon{ transform: rotate(45deg); background: var(--teal); color:#fff; }
.faq-answer{ max-height:0; overflow:hidden; transition: max-height .35s ease; }
.faq-answer p{ padding: 0 40px 20px 4px; margin:0; color: var(--gray); }
.faq-item.open .faq-answer{ max-height: 420px; }

/* ============ SCROLL-REVEAL ANIMATION ============ */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }
.reveal-stagger.visible > *{ transition-delay: calc(var(--stagger-i, 0) * 90ms); }

/* ============ CMS CONTENT-READY (prevents "flash of stale content") ============ */
/* Several sections/hero fields ship with static placeholder text baked
   straight into the HTML (so the page still looks right if JS fails), which
   is then overwritten once the real Admin Panel copy is fetched from
   page_sections/site_settings. On a slow connection that static copy was
   visible for a moment first, then visibly snapped to the current text —
   a "flash of old content". Any element/wrapper marked .cms-loading is kept
   invisible (via visibility, so it doesn't shift layout) until the page's
   own JS confirms the final text is in place, then swaps in .cms-ready with
   a quick fade. The JS side ALWAYS adds .cms-ready once its fetch settles —
   whether it succeeded, found no matching row, or the request failed — so
   content is never left permanently hidden. */
.cms-loading{ visibility:hidden; }
.cms-ready{ visibility:visible; animation: cmsFadeIn .35s ease; }
@keyframes cmsFadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* Contact / Forms */
.contact-grid{ display:grid; grid-template-columns: 380px 1fr; gap: 44px; }
.contact-info-card{ background: var(--navy); color:#fff; border-radius: var(--radius); padding: 36px; }
.contact-info-card h3{ color:#fff; }
.contact-info-item{ display:flex; gap: 14px; margin-bottom: 22px; align-items:flex-start; }
.contact-info-item .icon{
  flex:0 0 42px; height:42px; width:42px; border-radius:50%; background: rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; color: var(--teal); font-size:1.1rem;
}
.contact-info-item a, .contact-info-item span{ color:#dbe6ee; font-size:.92rem; }
.form-embed{ background:#fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; min-height: 500px; }
.social-row{ display:flex; gap:12px; margin-top: 24px; }
.social-row a{
  width:40px; height:40px; border-radius:50%; background: rgba(255,255,255,.12); color:#fff;
  display:flex; align-items:center; justify-content:center; transition: background .2s;
}
.social-row a:hover{ background: var(--teal); }

/* Contact page: quick action pills under the "Get In Touch" intro */
.contact-quick-actions{ display:flex; flex-wrap:wrap; gap:10px; margin: 22px 0 28px; }
.contact-quick-actions a{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:50px;
  font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px;
  background: rgba(255,255,255,.1); color:#fff; transition: background .2s, transform .2s;
}
.contact-quick-actions a:hover{ background: var(--teal); transform: translateY(-2px); }
.contact-quick-actions a.qa-whatsapp:hover{ background:#20b038; }
.contact-quick-actions a.qa-amber{ background: var(--amber); color: var(--navy); }
.contact-quick-actions a.qa-amber:hover{ background:#ffb84d; }

/* Copy-to-clipboard button next to email/phone */
.copy-btn{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background: rgba(255,255,255,.12); color:#cfe4ea; border:none; cursor:pointer;
  font-size:.75rem; margin-left:8px; vertical-align:middle; transition: background .2s, color .2s;
}
.copy-btn:hover{ background: var(--teal); color:#fff; }
.copy-btn.copied{ background: var(--teal); color:#fff; }

/* Two-location cards with embedded map */
.location-card{
  background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease; display:flex; flex-direction:column;
  border-top: 4px solid var(--teal);
}
.location-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.location-card .loc-body{ padding: 26px 26px 22px; }
.location-card .loc-flag{ font-size:1.6rem; margin-bottom:8px; display:block; }
.location-card .loc-addr{ color: var(--gray); font-size:.94rem; margin-bottom:16px; }
.location-card .loc-links{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:4px; }
.location-card .loc-links a{
  font-size:.8rem; font-weight:700; color: var(--teal-dark); text-transform:uppercase;
  letter-spacing:.3px; display:inline-flex; align-items:center; gap:6px;
}
.location-card .loc-links a:hover{ text-decoration:underline; }
.location-card .loc-map{ width:100%; height:230px; border:0; display:block; filter:grayscale(8%); }

/* Working hours mini-table on Contact page */
.hours-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.hours-table td{ padding:6px 0; color:#dbe6ee; }
.hours-table td:last-child{ text-align:right; font-weight:700; color:#fff; }
.hours-table tr.closed td:last-child{ color: var(--amber); }

/* Footer */
footer#site-footer{ background: var(--deep-blue); color:#b9c6d1; padding-top: 60px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-grid h4{ color:#fff; font-size:1rem; margin-bottom:18px; text-transform:uppercase; letter-spacing:1px; }
.footer-grid ul{ list-style:none; }
.footer-grid li{ margin-bottom:10px; }
.footer-grid a{ color:#a9bac6; font-size:.9rem; }
.footer-grid a:hover{ color: var(--teal); }
.footer-about img{ height:56px; width:56px; border-radius:50%; object-fit:cover; background:#fff; margin-bottom:16px; }
.footer-about p{ color:#93a5b3; font-size:.88rem; text-align: justify; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding: 22px 0; flex-wrap:wrap; gap:10px; }
.footer-bottom p{ margin:0; font-size:.82rem; color:#7e8fa0; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px;height:36px;border-radius:50%; background: rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:#fff;}
.footer-social a:hover{ background: var(--teal); }

.whatsapp-fab{
  position:fixed; bottom: 26px; right: 26px; z-index: 500;
  width:58px; height:58px; border-radius:50%; background:#20b038;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  color:#fff; font-size:1.6rem;
}
.whatsapp-fab:hover{ transform: scale(1.08); }

/* Utilities */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.tag{
  display:inline-block; background: rgba(0,168,168,.12); color: var(--teal-dark);
  padding: 5px 14px; border-radius: 50px; font-size:.75rem; font-weight:700; text-transform:uppercase; margin-bottom:12px;
}

/* Responsive */
@media (max-width: 1024px){
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .testi-grid{ grid-template-columns: repeat(2,1fr); }
  .gallery-grid{ grid-template-columns: repeat(3,1fr); }
  .contact-grid{ grid-template-columns: 1fr; }
  .photo-mosaic{ grid-template-columns: repeat(2,1fr); }
  .qf-panel{ grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 0; }
  .qf-item{ border-right:none; border-bottom: 1px solid var(--light-gray); padding-bottom:16px; }
  .qf-item:nth-child(2n){ border-right:none; }
  /* Stats strip: switch to 2 columns here already (not just at 720px) so the
     4 narrow columns never squeeze a value like "Training Establishment"
     into an awkward wrap at tablet widths. */
  .stats-grid{ grid-template-columns: repeat(2,1fr); gap: 22px 0; }
  .stats-strip.qf-wrap .stats-grid > .stat-card{ border-right:none; border-bottom: 1px solid var(--light-gray); padding-bottom:16px; }
  .stats-strip.qf-wrap .stats-grid > .stat-card:nth-child(2n){ border-right:none; }
  nav.main-nav{ display:none; }
  .hamburger{ display:block; }
}
@media (max-width: 720px){
  .grid-2{ grid-template-columns: 1fr; }
  .grid-4, .grid-3, .testi-grid{ grid-template-columns: 1fr; }
  .stats-grid{ grid-template-columns: repeat(2,1fr); gap: 22px 14px; }
  /* Keep every value's words whole on mobile — no mid-word breaking (the
     base rule's word-break/hyphens are for other content and were splitting
     "Establishment" into "Establish"/"ment" on 2 lines here). The value's
     font-size is reduced enough that even the longest single word fits its
     column without needing to break, so wrapping only ever happens between
     whole words (e.g. "Training" / "Establishment" on 2 separate lines). */
  .stats-grid .stat-value{
    font-size: 1.05rem; min-height:2.6em;
    word-break: normal; overflow-wrap: normal; hyphens: none;
  }
  .stat-icon{ width:42px; height:42px; font-size:1.2rem; margin-bottom:6px; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  section{ padding: 44px 0; }
  .hero{ min-height: 78vh; }
  .photo-mosaic{ grid-template-columns: 1fr 1fr; }
  .qf-wrap{ margin-top: -40px; }
  /* The Stats strip's white overlap card uses ".stats-strip.qf-wrap" (two
     classes), which is MORE specific than the ".qf-wrap" rule right above —
     so that rule's -40px never actually overrode the base -64px overlap
     here, even on mobile. On phones the hero is shorter (78vh here vs the
     desktop hero), so a -64px pull-up was dragging the white card up over
     the "Apply Now" button. Reduced to a much smaller overlap on mobile so
     the card sits just below the hero content instead of covering it. */
  .stats-strip.qf-wrap{ margin-top: -16px; }
  .qf-panel{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding: 26px 16px; }
  /* Smaller font + normal word-wrap so a 2-word value like "Internationally
     recognized" wraps cleanly BETWEEN its two whole words (never mid-word) —
     automatic hyphenation was unreliable across browsers and produced an
     arbitrary-looking mid-word cut, so it's turned off here in favor of
     plain word wrapping, matching the fix already used for .stats-grid. */
  .qf-value{
    font-size: 1.05rem; word-break: normal; overflow-wrap: normal; hyphens: none;
  }
  .qf-item{ padding: 0 8px; }
  .faq-answer p{ padding-right: 4px; }

  /* Photo Mosaic on mobile: captions move BELOW their photo instead of
     overlaying on top of it. Overlaid white text directly on a busy photo
     (with no background behind it) was hard to read at phone width and
     wrapped into short, jagged, uneven lines. Now each caption sits in its
     own solid navy panel under the photo, and its description text is
     justified so both edges line up cleanly instead of a ragged wrap. */
  .photo-mosaic .mosaic-item, .photo-mosaic.cols-2 .mosaic-item{
    aspect-ratio:auto; display:flex; flex-direction:column;
  }
  .photo-mosaic .mosaic-item img{ position:static; width:100%; height:auto; aspect-ratio:4/3; }
  .photo-mosaic.cols-2 .mosaic-item img{ aspect-ratio:16/11; }
  .photo-mosaic .mosaic-item:hover img{ transform:none; }
  .photo-mosaic .mosaic-item::after{ content:none; }
  .photo-mosaic .mosaic-caption{
    position:static; background:#fff; padding: 14px 16px 16px;
  }
  .photo-mosaic .mosaic-caption strong{ text-align:left; color: var(--navy); font-size:.92rem; }
  .photo-mosaic .mosaic-caption span{
    display:block; text-align:justify; text-justify:inter-word; line-height:1.5;
    color:#1a1a1a; font-size:.78rem;
  }
}

/* Mobile nav drawer */
#mobile-nav{
  position:fixed; top:0; right:-320px; width:300px; height:100%; background: var(--navy);
  z-index: 1100; transition: right .3s ease; padding: 24px; overflow-y:auto;
}
#mobile-nav.open{ right:0; }
#mobile-nav a{ color:#fff; display:block; padding: 12px 6px; font-weight:700; border-bottom:1px solid rgba(255,255,255,.08); }
#mobile-nav .sub a{ padding-left: 18px; font-weight:500; font-size:.9rem; color:#cfd9e2; }
#mobile-nav-close{ background:none; border:none; color:#fff; font-size:1.8rem; float:right; cursor:pointer; }
#mobile-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1050; display:none; }
#mobile-overlay.open{ display:block; }