/* ===============================
   Global tokens
   =============================== */
:root{
  --container-w: 1800px;
  --gap: 28px;
  --hero-h: clamp(560px, 82vh, 740px);
}

/* ===============================
   Base reset
   =============================== */
*{ box-sizing: border-box }
html,body{ overflow-x: hidden }
body{
  margin: 0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color: #0f172a;
  background: #fff;
}
a{ text-decoration: none; color: inherit }

/* ===============================
   News / hero wrapper
   =============================== */
.news{
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 0;
  background: #fff;
  margin-bottom: 28px;
  height: 100vh;
}
.news-grid{
  display: grid;
  grid-template-columns: minmax(0,2fr) minmax(0,1.1fr);
  gap: clamp(16px,3vw,var(--gap));
  align-items: start;
  width: min(var(--container-w),92vw);
  margin: 0 auto;
  padding-inline: clamp(12px,3vw,32px);
}

/* ===============================
   Feature slider (left)
   =============================== */
.feature{ position: relative }
.feature-slider{ position: relative; height: var(--hero-h) !important; overflow: hidden }
.f-slide{
  position: absolute; inset: 0; opacity: 0; transform: scale(1.02);
  transition: opacity .5s ease, transform .5s ease; z-index: 1; overflow: hidden;
}
.f-slide.active{ opacity: 1; transform: scale(1) }
.f-slide .feature-img{
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center; display: block;
}

/* Soft vignette */
.feature-slider::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background: radial-gradient(120% 120% at 50% 60%, rgba(0,0,0,0) 58%, rgba(0,0,0,.34) 100%);
}

/* Arrows & dots */
.feature-slider .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:none; cursor:pointer; z-index:8;
  color:#fff; background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(8px) saturate(120%); -webkit-backdrop-filter:blur(8px) saturate(120%);
  box-shadow:0 12px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.28);
}
.feature-slider .nav.prev{ left:12px }
.feature-slider .nav.next{ right:12px }
.feature-slider .nav:hover{ background:rgba(255,255,255,.28) }

.feature-slider .dots{
  position:absolute; right:14px; bottom:12px; display:flex; gap:8px; z-index:8;
}
.feature-slider .dots button{
  width:16px; height:4px; border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.35);
  transition: width .18s ease, background .18s ease;
}
.feature-slider .dots button.active{ width:28px; background:#fff; border-color:#fff }

/* Center glass caption (desktop) */
@media (min-width:992px){
  .feature{ --capW:880px; --capPad:24px }
  .feature::before{
    content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(var(--capW),78vw); min-height:260px; z-index:3; pointer-events:none;
    background:linear-gradient(180deg, rgba(12,18,26,.42), rgba(12,18,26,.22));
    border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(8px) saturate(120%); -webkit-backdrop-filter:blur(8px) saturate(120%);
    box-shadow:0 18px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .feature .meta,
  .feature .title-lg,
  .feature .excerpt{
    position:absolute; left:50%; transform:translateX(-50%);
    width:calc(min(var(--capW),78vw) - (var(--capPad)*2));
    max-width:calc(min(var(--capW),78vw) - (var(--capPad)*2));
    padding-inline:var(--capPad); margin:0; z-index:4; color:#fff !important;
  }
  .feature .meta{
    top:calc(50% - 120px);
    display:flex; gap:14px; align-items:center;
    font-weight:800; letter-spacing:.05em; text-transform:uppercase; opacity:.96;
  }
  .feature .title-lg{
    top:calc(50% - 10%); font-size:clamp(28px,3.2vw,46px);
    line-height:1.14; font-weight:900; text-shadow:0 8px 28px rgba(0,0,0,.45);
  }
  .feature .excerpt{
    top:calc(50% + 8%); font-size:clamp(14px,1.2vw,18px);
    line-height:1.6; color:#eef4ff !important; opacity:.96;
  }
  .feature .meta .kicker{ color:#67e8f9 !important }
  .feature .meta .date{ color:#f3f4f6 !important; opacity:.9 }
  .feature .meta .date::before{ content:"•"; margin:0 10px; opacity:.55 }
}

/* Pin caption edges on tight desktops */
@media (max-width:1500px) and (min-width:992px){
  .feature::before{ left:24px; right:24px; transform:none; width:auto; min-height:230px }
  .feature .meta,
  .feature .title-lg,
  .feature .excerpt{
    left:24px; right:24px; transform:none; width:auto; max-width:none;
  }
  .feature .meta{ top:calc(50% - 110px) }
  .feature .title-lg{ top:calc(50% - 6px); font-size:clamp(26px,2.4vw,34px); line-height:1.15 }
  .feature .excerpt{ top:calc(50% + 64px); font-size:16px; line-height:1.55 }
}
@media (max-width:1280px) and (min-width:992px){
  .feature::before{ min-height:210px }
  .feature .meta{ top:calc(50% - 100px) }
  .feature .title-lg{ top:calc(50% - 10px); font-size:clamp(24px,2.2vw,30px) }
  .feature .excerpt{ top:calc(50% + 56px); font-size:15px }
}

/* Mobile/tablet: text flows below image */
@media (max-width:991.98px){
  .feature::before{ content:none }
  .feature .meta,
  .feature .title-lg,
  .feature .excerpt{
    position:static; left:auto; right:auto; transform:none;
    width:auto; max-width:900px; color:#0f172a !important;
  }
  .feature .title-lg{ margin-top:6px }
  .feature .excerpt{ margin-top:6px }
  .feature .meta .kicker{ color:#0ea5e9 !important }
}

/* Optional preview thumbs */
.feature-slider .preview-tray{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; gap:12px; z-index:7;
}
.feature-slider .preview-card{
  position:relative; width:126px; height:76px; overflow:hidden; cursor:pointer;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.38);
  backdrop-filter:blur(10px) saturate(120%); -webkit-backdrop-filter:blur(10px) saturate(120%);
  box-shadow:0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .16s ease, background .16s ease, box-shadow .2s ease, border-color .16s;
}
.feature-slider .preview-card:hover{ transform:translateY(-2px) scale(1.02); background:rgba(255,255,255,.26); border-color:#fff }
.feature-slider .preview-card .thumb{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.04) }
@media (max-width:480px){ .feature-slider .preview-tray{ display:none } }

/* Allow hero overlays to spill on <=1366px */
@media (max-width:1366px){
  .feature-slider{ overflow: visible !important }
  .f-slide{ overflow: visible !important }
}

/* ===============================
   Right list
   =============================== */
.side-list{ display:flex; flex-direction:column; gap:clamp(16px,3vw,var(--gap)) }
.side-item{ display:grid; grid-template-columns:1fr 1.1fr; gap:18px; align-items:start }
.thumb-duo{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.thumb-duo img{ width:100%; height:160px; object-fit:cover; display:block }

.meta{ display:flex; gap:14px; align-items:center; margin-top:14px }
.kicker{ color:#0ea5e9; font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase }
.date{ color:#111; font-weight:700; font-size:12px; text-transform:uppercase }
.title-lg{ margin:10px 0 12px; font-weight:900; font-size:44px; line-height:1.1 }
.title-sm{ margin:6px 0 8px; font-weight:900; font-size:20px; line-height:1.2 }
.excerpt{ color:#374151; font-size:18px; line-height:1.6; max-width:900px }
.excerpt-sm{ color:#4b5563; font-size:16px; line-height:1.6 }

/* Height guards for smaller screens */
@media (max-width:1200px){
  .feature-slider{ height:min(78vh,640px) !important }
  .title-lg{ font-size:36px }
}
@media (max-width:992px){
  .news-grid{ grid-template-columns:1fr; gap:28px }
  .feature-slider{ height:min(66vh,520px) !important }
}
@media (max-width:640px){
  .feature-slider{ height:min(58vh,420px) !important }
  .title-lg{ font-size:28px }
  .excerpt{ font-size:16px }
}

/* ===============================
   Quick Searches – Parallax + Glass
   =============================== */
.md-quick-search.layout3.mg-bg{
  position:relative;
  background-size:cover !important;
  background-position:center center !important;
  background-attachment:fixed !important; /* desktop parallax */
  background-color:#fff !important;       /* keep white page feel */
}
.md-quick-search.layout3 .quick-search-title span{ color:#fff !important }
.md-quick-search.layout3 .quick-list{
  display:grid; gap:14px; grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:1024px){ .md-quick-search.layout3 .quick-list{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:640px){ .md-quick-search.layout3 .quick-list{ grid-template-columns:1fr } }
.md-quick-search.layout3 .quick-search-item{ background:transparent !important; border:none !important }
.md-quick-search.layout3 .quick-search-item > a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:12px 16px; color:#fff;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(10px) saturate(120%); -webkit-backdrop-filter:blur(10px) saturate(120%);
  box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
  border-radius:0 !important;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.md-quick-search.layout3 .quick-search-item > a:hover{
  background:rgba(255,255,255,.26); transform:translateY(-1px); box-shadow:0 14px 32px rgba(0,0,0,.4);
}
.md-quick-search.layout3 .search-title{ color:#fff; font-weight:800; letter-spacing:.01em }
.md-quick-search.layout3 .quick-search-item .num{
  color:#0a1428; background:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.9);
  padding:4px 8px; font-weight:800; font-size:12px; line-height:1; border-radius:0 !important;
}
/* Remove dark overlay on white pages */
.md-quick-search.layout3.mg-bg::after{ content:""; position:absolute; inset:0; pointer-events:none; background:none !important }

/* Touch devices: disable parallax */
@media (max-width:1024px), (pointer:coarse){
  .md-quick-search.layout3.mg-bg{ background-attachment:scroll !important }
}

/* ===============================
   Gallery (layout4) – Grid / Masonry
   =============================== */
.md-gallery.layout4.mg-bg{ background:#fff !important; padding:48px 0 }
.md-gallery.layout4 .gallery-container{ max-width:1800px; margin:0 auto; padding:0 0 }
.md-gallery.layout4 .gallery-title{ margin:0 0 18px }
.md-gallery.layout4 .gallery-title p span{
  color:#111 !important; font-size:1.18rem !important; font-weight:900; letter-spacing:.01em;
}

/* Turn Swiper track into grid */
.md-gallery.layout4 .gallery-swiper{ overflow:visible }
.md-gallery.layout4 .gallery-swiper .swiper-wrapper{ display:block !important; transform:none !important }
.md-gallery.layout4 .gallery-swiper .swiper-slide{ width:100% !important; margin-right:0 !important }
.md-gallery.layout4 .swiper-box{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px }

/* Card (square corners) */
.md-gallery.layout4 .gallery-img-wrap{
  position:relative; overflow:hidden; background:#0a0a0a; outline:none;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  transition:transform .22s ease, box-shadow .22s ease;
  border-radius:0 !important;
}
.md-gallery.layout4 .gallery-img-wrap:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.55) }
.md-gallery.layout4 .swiper-img,
.md-gallery.layout4 .img-content{ display:block; height:100% }
.md-gallery.layout4 .gallery-img-wrap img{
  width:100%; height:100%; object-fit:cover; background:#0a0a0a;
  transform:scale(1.0001); transition:transform .28s ease;
}
.md-gallery.layout4 .gallery-img-wrap:hover img{ transform:scale(1.04) }

/* Soft mask */
.md-gallery.layout4 .img-mask{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.30)) !important;
  pointer-events:none; transition:background .28s ease;
}
.md-gallery.layout4 .gallery-img-wrap:hover .img-mask{
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.45)) !important;
}

/* Small glass label */
.md-gallery.layout4 .cta-text{
  position:absolute; left:12px; bottom:12px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  color:#0a1428; background:rgba(255,255,255,.22);
  padding:6px 10px; font-weight:800; font-size:12px; line-height:1.05;
  border:1px solid rgba(255,255,255,.45);
  backdrop-filter:blur(12px) saturate(120%); -webkit-backdrop-filter:blur(12px) saturate(120%);
  box-shadow:0 6px 18px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.25);
  max-width:calc(100% - 24px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-radius:0 !important;
}
.md-gallery.layout4 .cta-text i{ display:none }

/* Hide empty items safely */
.md-gallery.layout4 .gallery-img-wrap:has(.img-content:empty),
.md-gallery.layout4 .gallery-img-wrap:has(.img-content img[src=""]),
.md-gallery.layout4 .gallery-img-wrap:has(.img-content img:not([src])){ display:none }

/* Gallery responsive */
@media (max-width:1200px){ .md-gallery.layout4 .gallery-container{ padding:0 24px } }
@media (max-width:1024px){ .md-gallery.layout4 .swiper-box{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:640px){
  .md-gallery.layout4 .gallery-container{ padding:0 18px }
  .md-gallery.layout4 .gallery-title{ padding:0 18px; margin-bottom:12px }
  .md-gallery.layout4 .swiper-box{ grid-template-columns:1fr; gap:16px }
  .md-gallery.layout4 .cta-text{ left:10px; bottom:10px; font-size:11.5px; padding:5px 8px }
}

/* ===============================
   Blog (layout1) – Trending section
   =============================== */

/* Background: soft off-white */
.md-blog.layout1.mg-bg{ background-color:#F7F7F5 !important }

/* Title in black (keeps hero images bright) */
.md-blog.layout1.mg-bg .site-title.blog-title,
.md-blog.layout1.mg-bg .site-title.blog-title *{ color:#111 !important }

/* Card texts under images = black for readability */
.md-blog.layout1.mg-bg .blog-bottom,
.md-blog.layout1.mg-bg .blog-bottom *{ color:#111 !important }

/* Slightly dim description copy */
.md-blog.layout1.mg-bg .blog-bottom .blog-description,
.md-blog.layout1.mg-bg .blog-bottom .site-p{ color:#2e2e2e !important; opacity:1 !important }

/* “More” button styled for light background */
.md-blog.layout1.mg-bg .button-more.more-blog{
  border:2px solid #111 !important;
  color:#111 !important;
  background: transparent;
}
.md-blog.layout1.mg-bg .button-more.more-blog:hover{
  background: rgba(0,0,0,.06);
  color:#111 !important;
  border-color:#111 !important;
}

/* ===============================
   Custom HR (left thick + thin line)
   =============================== */
.hr-bar{ position:relative; width:100%; height:8px }
.hr-bar::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#000; transform:translateY(-50%);
}
.hr-bar::after{
  content:""; position:absolute; left:0; top:0; width:130px; height:7px; background:#000;
}
/* Spacing helpers */
.hr-wrap{ padding-inline:16px }
@media (min-width:640px){ .hr-wrap{ padding-inline:48px } }

/* ===============================
   Page-level backgrounds
   =============================== */
body.template27.home .page-content,
body.template27.about .page-content,
body.template27.contact .page-content{ background-color:#fff }