/* =========================================================
   INNER-PAGE.CSS — Social Welfare Department, Government of Meghalaya
   Inner pages: banner (title + breadcrumb), one-column page content,
   tables, file labels, images, photo galleries and videos.
   Load after style.css, footer.css and accessibility-style.css.
   All colours and font sizes are the tokens from style.css (:root).
   ========================================================= */


/* ---------- Banner: photo with a dark key-colour overlay ----------
   Uses the first homepage banner photo. To use another photo, change the url(). */
.banner { position: relative; z-index: 1; margin: 0; clear: both; }
.banner .banner_inner {
  min-height: 15rem;
  padding: 3rem 5rem;
  background-color: var(--dbim-wintergreen-dream);
  background-image:
    linear-gradient(90deg, rgba(46, 31, 0, .93) 0%, rgba(var(--dbim-shadow-rgb), .84) 55%, rgba(var(--dbim-shadow-rgb), .70) 100%),
    url("../images/banner/banner-1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.banner .banner_content { width: 100%; max-width: 120rem; margin: 0 auto; }
/* Page title (Bootstrap's .fs-4 would make it 15px) */
.banner .banner_logo p,
.banner .banner_logo p.fs-4 {
  margin: 0 0 1rem;
  color: var(--dbim-white);
  font-size: var(--dbim-fs-h1-sm) !important;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.breadcrumb-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--dbim-white);
  font-size: var(--dbim-fs-label);
  font-weight: 700;
  line-height: 1.5;
}
.breadcrumb-trail li { display: inline-flex; align-items: center; }
.breadcrumb-trail li + li::before {
  content: "\00BB";                    /* » */
  margin: 0 .8rem;
  color: var(--dbim-white);
  font-weight: 400;
}
.banner .breadcrumb-trail a {
  color: var(--dbim-white);
  font-size: var(--dbim-fs-p1);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: .3rem;
}
.banner .breadcrumb-trail a:hover { color: var(--dbim-azureish-white-bg); text-decoration-thickness: 2px; }
.banner .breadcrumb-trail a:focus-visible {
  outline: 3px solid var(--dbim-white);
  outline-offset: 2px;
  border-radius: 2px;
}
.breadcrumb-trail [aria-current="page"] { font-weight: 700; }

@media (max-width: 768px) {
  .banner .banner_inner { min-height: 12rem; padding: 2rem; }
  .banner .banner_logo p,
  .banner .banner_logo p.fs-4 { font-size: var(--dbim-fs-h2-sm) !important; }
  .breadcrumb-trail,
  .banner .breadcrumb-trail a { font-size: var(--dbim-fs-p2); }
  .breadcrumb-trail li + li::before { margin: 0 .6rem; }
}

/* ---------- Layout: one column, no sidebar ---------- */
.waw.inner-page { width: 100%; padding: 3.2rem 0 4.8rem; background: var(--dbim-white); }
.waw.inner-page .custom-container { width: 100%; max-width: 130rem; margin: 0 auto; padding: 0 clamp(1.6rem, 3vw, 4rem); }
.waw.inner-page .waw-inner.no-sidebar { display: block; }
.waw.inner-page .waw-left.page-content {
  max-width: 120rem;
  margin: 0 auto;
  padding: 1rem 0 2.4rem;
}

/* Page heading: centred, with a short line either side */
.waw.inner-page .explore_head { position: relative; margin-bottom: 2.8rem; padding-top: 1rem; text-align: center; }
.waw.inner-page .explore_head h1 { margin: 0; font-size: var(--dbim-fs-h1-md); line-height: 1.25; }
.waw.inner-page .explore_head span {
  position: relative;
  display: inline-block;
  max-width: calc(100% - 180px);
  padding: 0 2rem;
  color: var(--dbim-wintergreen-dream);
  font-weight: 700;
}
.waw.inner-page .explore_head span::before,
.waw.inner-page .explore_head span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 70px;
  height: 2px;
  background: var(--dbim-wintergreen-dream);
}
.waw.inner-page .explore_head span::before { right: 100%; margin-right: 8px; }
.waw.inner-page .explore_head span::after { left: 100%; margin-left: 8px; }

@media (max-width: 767px) {
  .waw.inner-page { padding: 2rem 0 3.2rem; }
  .waw.inner-page .explore_head h1 { font-size: var(--dbim-fs-h1-sm); }
  .waw.inner-page .explore_head span { max-width: 100%; padding: 0; }
  .waw.inner-page .explore_head span::before,
  .waw.inner-page .explore_head span::after { display: none; }
}

/* ---------- Page text ---------- */
.page-content .grid {
  display: block;
  padding: 0;
  color: var(--dbim-dark-text);
  font-size: var(--dbim-fs-p1);
  line-height: 1.7;
}
.page-content .grid::after { content: ""; display: table; clear: both; }   /* contain floated photos */
.page-content .grid p,
.page-content .grid li,
.page-content .grid td,
.page-content .grid th { font-size: var(--dbim-fs-p1); line-height: 1.6; }
.page-content .grid p { margin: 0 0 1.6rem; }
.page-content .grid h2 {
  margin: 3.2rem 0 1.4rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--dbim-line);
  color: var(--dbim-wintergreen-dream);
  font-size: var(--dbim-fs-h2);
  font-weight: 700;
  line-height: 1.3;
}
.page-content .grid h2:first-child,
.page-content .grid h3:first-child { margin-top: 0; }
.page-content .grid h3 {
  margin: 2.4rem 0 1rem;
  color: var(--dbim-wintergreen-dream);
  font-size: var(--dbim-fs-h3);
  font-weight: 700;
  line-height: 1.35;
}
.page-content .grid h4 {
  margin: 2rem 0 .8rem;
  color: var(--dbim-dark-text);
  font-size: var(--dbim-fs-h4);
  font-weight: 700;
}
.page-content .grid ul,
.page-content .grid ol { margin: 0 0 2rem; padding-left: 2.4rem; }
.page-content .grid li { margin-bottom: .8rem; }
.page-content .grid li::marker { color: var(--dbim-text-accent); }

.page-content .grid a {
  color: var(--dbim-text-accent);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.page-content .grid a:hover { color: var(--dbim-wintergreen-dream); text-decoration-thickness: 2px; }
.page-content .grid a:focus-visible {
  outline: 3px solid var(--dbim-wintergreen-dream);
  outline-offset: 2px;
  border-radius: 2px;
}

/* "(PDF, 148KB)" after a link */
.page-content .file-type { color: var(--dbim-text-muted); font-size: .9em; font-weight: 400; white-space: nowrap; }

/* Short intro line + "View the archive" link */
.page-content .page-intro { margin: 0 0 2.4rem; font-size: var(--dbim-fs-p1); line-height: 1.6; }
.page-content .archive-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  margin-top: 1.2rem;
  padding: .8rem 2rem;
  border: 2px solid var(--dbim-wintergreen-dream);
  border-radius: .6rem;
  color: var(--dbim-wintergreen-dream) !important;
  font-weight: 700;
  text-decoration: none !important;
}
.page-content .archive-link:hover { background: var(--dbim-wintergreen-dream); color: var(--dbim-white) !important; }

/* Contact blocks (contacts.html) */
.page-content .contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
  gap: 1.6rem;
  margin: 0 0 2.4rem;
  padding: 0 !important;
  list-style: none;
}
.page-content .contact-cards > li {
  overflow-wrap: anywhere;
  margin: 0;
  padding: 1.6rem 2rem;
  background: var(--dbim-section-bg);
  border: 1px solid var(--dbim-azureish-white);
  border-left: 5px solid var(--dbim-wintergreen-dream);
  border-radius: .8rem;
}
.page-content .contact-cards h3 { margin: 0 0 .6rem; font-size: var(--dbim-fs-h4); }
.page-content .contact-cards p { margin: 0; }

/* ---------- Tables ---------- */
.page-content .table-responsive { margin-bottom: 2.4rem; }
.page-content .grid table {
  width: 100%;
  margin-bottom: 2.4rem;
  border-collapse: collapse;
  background: var(--dbim-white);
}
.page-content .table-responsive table { margin-bottom: 0; }
.page-content .grid table caption {
  caption-side: top;
  padding: 0 0 .8rem;
  color: var(--dbim-wintergreen-dream);
  font-size: var(--dbim-fs-h4);
  font-weight: 700;
  text-align: left;
}
.page-content .grid table th,
.page-content .grid table td {
  padding: 1rem 1.2rem;
  border: 1px solid var(--dbim-line);
  text-align: left;
  vertical-align: top;
}
.page-content .grid table th,
.page-content .grid table thead td {
  background: var(--dbim-wintergreen-dream);
  color: var(--dbim-white);
  font-weight: 700;
}
.page-content .grid table tbody th {
  background: var(--dbim-azureish-white-bg);
  color: var(--dbim-dark-text);
}
.page-content .grid table th a,
.page-content .grid table thead td a { color: var(--dbim-white) !important; }
.page-content .grid table tbody th a { color: var(--dbim-text-accent) !important; }
.page-content .grid table tbody tr:nth-child(even) > td { background: var(--dbim-surface-tint); }

/* ---------- Images and videos ---------- */
.page-content .grid img { max-width: 100%; height: auto; }
.page-content .grid .page-figure { margin: 0 0 2rem; text-align: center; }
.page-content .grid .page-figure img { border-radius: .8rem; }
.page-content .grid .img_right,
.page-content .grid .img_left { max-width: 32rem; margin-bottom: 1.6rem; }
.page-content .grid .img_right { float: right; margin-left: 2.4rem; }
.page-content .grid .img_left { float: left; margin-right: 2.4rem; }
.page-content .grid .img_right img,
.page-content .grid .img_left img { display: block; border-radius: .8rem; }
@media (max-width: 575.98px) {
  .page-content .grid .img_right,
  .page-content .grid .img_left { float: none; max-width: 100%; margin: 0 0 1.6rem; }
}
.page-content .grid h2,
.page-content .grid h3 { clear: both; }
.page-content .grid iframe,
.page-content .grid video { display: block; width: 100%; max-width: 80rem; margin: 0 auto 2rem; border: 0; border-radius: .8rem; }

/* ---------- Photo gallery ---------- */
.page-content .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: 1.6rem;
  margin: 0 0 2.4rem;
  padding: 0 !important;
  list-style: none;
}
.page-content .gallery-grid > li { margin: 0; }
.page-content .gallery-grid figure { margin: 0; }
.page-content .gallery-grid figure > a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--dbim-azureish-white);
  border-radius: .8rem;
  text-decoration: none !important;
}
.page-content .gallery-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .2s ease;
}
.page-content .gallery-grid figure > a:hover img { transform: scale(1.03); }
.page-content .gallery-grid figure > a:focus-visible { outline: 3px solid var(--dbim-wintergreen-dream); outline-offset: 3px; }
.page-content .gallery-grid figcaption {
  margin-top: .6rem;
  color: var(--dbim-dark-text);
  font-size: var(--dbim-fs-p2);
  line-height: 1.4;
}
/* Album list (photos.html) */
.page-content .album-grid figcaption { font-size: var(--dbim-fs-p1); font-weight: 600; }
.page-content .album-grid .album-count { display: block; color: var(--dbim-text-muted); font-size: var(--dbim-fs-p2); font-weight: 400; }
@media (prefers-reduced-motion: reduce) {
  .page-content .gallery-grid img { transition: none; }
  .page-content .gallery-grid figure > a:hover img { transform: none; }
}

/* ---------- Page not found ---------- */
.page-content .notfound { padding: 2rem 0 1rem; text-align: center; }
.page-content .notfound .notfound-code { margin: 0 0 .4rem; color: var(--dbim-wintergreen-dream); font-size: 7.2rem; font-weight: 800; line-height: 1; }
.page-content .notfound ul { display: inline-block; text-align: left; }

/* ---------- Photo viewer (assets/js/gallery.js) ---------- */
html.gv-open { overflow: hidden; }
.gallery-viewer {
  width: min(96vw, 120rem);
  max-width: none;
  height: min(94vh, 90rem);
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  background: var(--dbim-charcoal);
  border: 0;
  border-radius: 1.2rem;
  color: var(--dbim-white);
}
.gallery-viewer[open] { display: flex; flex-direction: column; }
.gallery-viewer::backdrop { background: rgba(0, 0, 0, .85); }
.gallery-viewer .gv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.4rem 1.6rem 1rem 2.4rem;
}
.gallery-viewer .gv-title { margin: 0; color: var(--dbim-white); font-size: var(--dbim-fs-h4); font-weight: 700; line-height: 1.35; }
.gallery-viewer .gv-count { margin: .2rem 0 0; color: var(--dbim-azureish-white-bg); font-size: var(--dbim-fs-p2); }
.gallery-viewer .gv-body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 1.2rem;
  min-height: 0;
  padding: 0 1.2rem 1.6rem;
}
.gallery-viewer .gv-stage {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 0;
}
.gallery-viewer .gv-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: .6rem;
  transition: opacity .15s ease;
}
.gallery-viewer.is-loading .gv-img { opacity: .25; }
.gallery-viewer .gv-loading {
  position: absolute;
  width: 4rem; height: 4rem;
  border: 4px solid rgba(255, 255, 255, .3);
  border-top-color: var(--dbim-white);
  border-radius: 50%;
  opacity: 0;
  animation: gv-spin 1s linear infinite;
}
.gallery-viewer.is-loading .gv-loading { opacity: 1; }
@keyframes gv-spin { to { transform: rotate(360deg); } }

.gallery-viewer .gv-btn,
.gallery-viewer .gv-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 5.2rem;
  height: 5.2rem;
  padding: 0 0 .4rem;
  background: var(--dbim-wintergreen-dream);
  border: 2px solid var(--dbim-white);
  border-radius: 50%;
  color: var(--dbim-white);
  font-size: 3.6rem;
  line-height: 1;
  cursor: pointer;
}
.gallery-viewer .gv-close { width: 4.4rem; height: 4.4rem; font-size: 3rem; }
.gallery-viewer .gv-btn[hidden] { display: none; }
.gallery-viewer .gv-btn:hover,
.gallery-viewer .gv-close:hover { background: var(--dbim-fill-accent); }
.gallery-viewer .gv-btn:focus-visible,
.gallery-viewer .gv-close:focus-visible {
  outline: 4px solid var(--dbim-focus-halo);
  outline-offset: 2px;
}
/* Phones: arrows sit over the photo */
@media (max-width: 575.98px) {
  .gallery-viewer { width: 100vw; height: 100dvh; border-radius: 0; }
  .gallery-viewer .gv-head { padding: 1.2rem 1.2rem .8rem 1.6rem; }
  .gallery-viewer .gv-body { padding: 0 0 1.2rem; }
  .gallery-viewer .gv-btn { position: absolute; top: 50%; z-index: 2; width: 4.4rem; height: 4.4rem; font-size: 3rem; transform: translateY(-50%); background: rgba(93, 62, 0, .85); }
  .gallery-viewer .gv-prev { left: .8rem; }
  .gallery-viewer .gv-next { right: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-viewer .gv-img { transition: none; }
  .gallery-viewer .gv-loading { animation: none; }
}