/* =========================================================
   INNER-PAGE.CSS — Directorate of Sericulture and Weaving, Government of Meghalaya
   Shared layout for all inner pages (About Us, Museum, Library, Festivals …).
   Uses the DBIM colour tokens from style.css, so load style.css first.

   1. Top banner (page title + breadcrumb)
   2. Page layout (content + related-pages sidebar)
   3. Page heading
   4. Content: text, lists, links, images
   5. Tables
   6. Photo gallery
   7. Related-pages sidebar
   8. Virtual museum tour (museum.html)
   9. Responsive + reduced motion
   ========================================================= */

/* =========================================================
   1. TOP BANNER
   ========================================================= */
.banner {
  width: 100%;
  background: var(--dbim-wintergreen-dream);
  background-image: linear-gradient(120deg, var(--dbim-wintergreen-dream) 0%, var(--dbim-powder-blue) 100%);
  color: var(--dbim-white);
}
.banner_inner {
  max-width: 132rem;
  margin: 0 auto;
  padding: 3.2rem 2.4rem;
}
.banner_content { display: flex; flex-direction: column; gap: .8rem; }
.banner_logo p {
  margin: 0;
  color: var(--dbim-white);
  font-size: var(--dbim-fs-h2) !important;
  font-weight: 700;
  line-height: 1.25;
}
/* Breadcrumb: Home » Section » Page */
.breadcrumb-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--dbim-fs-p2);
}
.breadcrumb-trail li { display: inline-flex; align-items: center; color: var(--dbim-white); }
.breadcrumb-trail li + li::before {
  content: "»";
  margin: 0 .8rem;
  opacity: .85;
}
.breadcrumb-trail a {
  color: var(--dbim-white);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.breadcrumb-trail a:hover { text-decoration-thickness: 2px; }
.breadcrumb-trail a:focus-visible { outline: 3px solid var(--dbim-white); outline-offset: 2px; border-radius: .2rem; }
.breadcrumb-trail [aria-current="page"] { font-weight: 600; }

/* =========================================================
   2. PAGE LAYOUT
   ========================================================= */
.inner-page {
  padding: 4rem 0 5.6rem;
  background: var(--dbim-white);
}
.inner-page .custom-container {
  max-width: 132rem;
  margin: 0 auto;
  padding: 0 2.4rem;
}
.inner-page .waw-inner {
  display: grid !important;
  gap: 3.2rem;
  align-items: start;
}
.inner-page .waw-inner.has-sidebar { grid-template-columns: minmax(0, 1fr) 30rem; }
.inner-page .waw-inner.no-sidebar  { grid-template-columns: minmax(0, 1fr); }

.inner-page .page-content {
  min-width: 0;
  padding: 0;
  background: transparent;
}

/* =========================================================
   3. PAGE HEADING
   ========================================================= */
.page-content .explore_head { margin: 0 0 2.4rem; padding: 0; text-align: center; }
.page-content .explore_head h1 {
  position: relative;
  margin: 0;
  padding-bottom: 1.2rem;
  color: var(--dbim-powder-blue);
  font-size: var(--dbim-fs-h1);
  font-weight: 700;
  line-height: 1.25;
}
.page-content .explore_head h1 span { padding: 0; }
.page-content .explore_head h1 span::before,
.page-content .explore_head h1 span::after { content: none; }   /* cancel any decorative side lines */
.page-content .explore_head h1::after {
  content: "";
  position: absolute;
  left: 50%;                       /* underline bar centred under the heading */
  bottom: 0;
  width: 6.4rem;
  height: .4rem;
  background: var(--dbim-wintergreen-dream);
  border-radius: .2rem;
  transform: translateX(-50%);
}

/* =========================================================
   4. CONTENT
   ========================================================= */
.page-content .grid {
  display: block;
  color: var(--dbim-dark-text);
  font-size: var(--dbim-fs-p1);
  line-height: 1.7;
}
.page-content .grid > * + * { margin-top: 1.6rem; }
.page-content .grid p { margin: 0 0 1.6rem; text-align: left; }
.page-content .grid h2 {
  margin: 3.2rem 0 1.2rem;
  color: var(--dbim-wintergreen-dream);
  font-size: var(--dbim-fs-h2);
  font-weight: 700;
  line-height: 1.3;
}
.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,
.page-content .grid h5,
.page-content .grid h6 {
  margin: 2rem 0 .8rem;
  color: var(--dbim-deep-earthy-brown);
  font-size: var(--dbim-fs-p1);
  font-weight: 700;
}
.page-content .grid > :first-child { margin-top: 0; }

.page-content .grid ul,
.page-content .grid ol { margin: 0 0 1.6rem; padding-left: 2.4rem; }
.page-content .grid li { margin-bottom: .6rem; }
.page-content .grid li > ul,
.page-content .grid li > ol { margin: .6rem 0 0; }
.page-content .grid ol[type="a"] { list-style-type: lower-alpha; }
.page-content .grid ol[type="i"] { list-style-type: lower-roman; }

.page-content .grid a {
  color: var(--dbim-powder-blue);
  font-weight: 500;
  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-info-blue); outline-offset: 2px; border-radius: .2rem; }

.page-content .grid hr { margin: 2.4rem 0; border: 0; border-top: 1px solid var(--dbim-azureish-white); opacity: 1; }
.page-content .grid blockquote {
  margin: 0 0 1.6rem;
  padding: 1.2rem 1.6rem;
  background: var(--dbim-surface-tint, #FFFBF2);
  border-left: 4px solid var(--dbim-wintergreen-dream);
}

/* "(PDF, 7 KB)" next to document links */
.page-content .file-type {
  color: var(--dbim-grey-03, #4A4A4A);
  font-size: .85em;
  font-weight: 400;
  white-space: nowrap;
}

/* Lists of documents (Sample Forms, Notifications …): each link on its own card */
.page-content .grid ul:has(> li > a[href$=".pdf"]) { padding: 0; list-style: none; }
.page-content .grid ul:has(> li > a[href$=".pdf"]) > li {
  margin-bottom: .8rem;
  padding: 1.2rem 1.6rem;
  background: var(--dbim-surface-tint, #FFFBF2);
  border: 1px solid var(--dbim-azureish-white);
  border-left: 4px solid var(--dbim-wintergreen-dream);
  border-radius: .6rem;
}

/* Issue links on the Heritage of Meghalaya page */
.page-content .issue-list { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0 !important; list-style: none; }
.page-content .issue-list li { margin: 0; }
.page-content .issue-list a {
  display: inline-block;
  padding: .8rem 1.6rem;
  background: var(--dbim-white);
  border: 1px solid var(--dbim-powder-blue);
  border-radius: .4rem;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.page-content .issue-list a:hover { background: var(--dbim-powder-blue); color: var(--dbim-white) !important; }

/* Images */
.page-content .grid img {
  max-width: 100%;
  height: auto;
  border-radius: .4rem;
}
.page-content .grid .img-left  { float: left;  max-width: 40%; margin: .4rem 2rem 1.2rem 0; }
.page-content .grid .img-right { float: right; max-width: 40%; margin: .4rem 0 1.2rem 2rem; }
.page-content .grid::after { content: ""; display: block; clear: both; }
.page-content .text-center { text-align: center; }

/* =========================================================
   5. TABLES
   ========================================================= */
.page-content .table-wrap {
  width: 100%;
  margin: 0 0 2rem;
  overflow-x: auto;
  border: 1px solid var(--dbim-azureish-white);
  border-radius: .6rem;
}
.page-content .table-wrap:focus-visible { outline: 3px solid var(--dbim-info-blue); outline-offset: 2px; }
.page-content .table-wrap table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: var(--dbim-fs-p1);
  line-height: 1.5;
}
.page-content .table-wrap caption {
  padding: 1rem 1.4rem;
  caption-side: top;
  color: var(--dbim-wintergreen-dream);
  font-weight: 700;
  text-align: left;
}
.page-content .table-wrap th,
.page-content .table-wrap td {
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--dbim-azureish-white);
  text-align: left;   /* DBIM 4.1.1 */
  vertical-align: top;
}
.page-content .table-wrap th {
  background: var(--dbim-wintergreen-dream);
  color: var(--dbim-white);
  font-weight: 600;
  white-space: nowrap;
}
.page-content .table-wrap tr:nth-child(even) td { background: var(--dbim-surface-tint, #FFFBF2); }
.page-content .table-wrap tr:last-child td { border-bottom: 0; }

/* =========================================================
   6. PHOTO GALLERY (Photo Gallery and Photo Album pages)
   ========================================================= */
.page-content .gallery,
.page-content .image-gallery,
.page-content .image-gallery > p {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.6rem;
  margin: 0;
}
.page-content .image-gallery { display: block; }
.page-content .image-gallery > p { margin-bottom: 1.6rem; }
.page-content .gallery a,
.page-content .image-gallery a {
  display: block;
  overflow: hidden;
  background: var(--dbim-surface-tint, #FFFBF2);
  border: 1px solid var(--dbim-azureish-white);
  border-radius: .8rem;
  transition: box-shadow .2s ease, transform .2s ease;
}
.page-content .gallery img,
.page-content .image-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}
.page-content .gallery a:hover,
.page-content .image-gallery a:hover {
  box-shadow: 0 6px 16px rgba(var(--dbim-shadow-rgb, 60, 10, 10), .15);
  transform: translateY(-2px);
}
.page-content .next { margin-top: 2.4rem; }

/* =========================================================
   7. RELATED-PAGES SIDEBAR
   ========================================================= */
.page-sidebar { display: flex; flex-direction: column; gap: 2rem; position: sticky; top: 2rem; }
.sidebar-box {
  overflow: hidden;
  background: var(--dbim-white);
  border: 1px solid var(--dbim-azureish-white);
  border-top: 4px solid var(--dbim-wintergreen-dream);
  border-radius: .8rem;
}
.sidebar-title {
  margin: 0;
  padding: 1.4rem 1.6rem 1rem;
  color: var(--dbim-wintergreen-dream);
  font-size: var(--dbim-fs-p1);
  font-weight: 700;
  line-height: 1.3;
}
.sidebar-box ul { margin: 0; padding: 0 0 .8rem; list-style: none; }
.sidebar-box li { margin: 0; }
.sidebar-box a {
  position: relative;
  display: block;
  padding: .9rem 1.6rem .9rem 3.2rem;
  color: var(--dbim-dark-text);
  font-size: var(--dbim-fs-p1);
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.sidebar-box a::before {
  content: "";
  position: absolute;
  left: 1.6rem;
  top: 1.45rem;
  width: .6rem;
  height: .6rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .7;
}
.sidebar-box a:hover { background: var(--dbim-surface-tint, #FFFBF2); color: var(--dbim-powder-blue); text-decoration: underline; }
.sidebar-box a:focus-visible { outline: 3px solid var(--dbim-info-blue); outline-offset: -3px; }
.sidebar-box a[aria-current="page"] {
  background: var(--dbim-section-bg-strong, #F9E7C2);
  color: var(--dbim-wintergreen-dream);
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--dbim-wintergreen-dream);
}

/* =========================================================
   8. VIRTUAL MUSEUM TOUR (museum.html — old road-map layout)
   ========================================================= */
.page-content #museum-data { overflow-x: auto; }
.page-content #museum-data table { width: auto; border-collapse: collapse; }
.page-content #museum-data caption {
  padding-bottom: 1.2rem;
  caption-side: top;
  color: var(--dbim-wintergreen-dream);
  font-size: var(--dbim-fs-h3);
  font-weight: 700;
  text-align: left;
}
.page-content #museum-data td { padding: .2rem .4rem; vertical-align: middle; }
.page-content #museum-data img { border-radius: 0; }
.page-content #museum-data .rmap { font-weight: 700; color: var(--dbim-wintergreen-dream); }

/* =========================================================
   9. RESPONSIVE + REDUCED MOTION
   ========================================================= */
@media (max-width: 991.98px) {
  .inner-page .waw-inner.has-sidebar { grid-template-columns: minmax(0, 1fr); }
  .page-sidebar { position: static; }
}
@media (max-width: 575.98px) {
  .banner_inner { padding: 2.4rem 1.6rem; }
  .inner-page { padding: 2.8rem 0 4rem; }
  .inner-page .custom-container { padding: 0 1.6rem; }
  .page-content .grid .img-left,
  .page-content .grid .img-right { float: none; max-width: 100%; margin: 0 0 1.6rem; }
  .page-content .gallery,
  .page-content .image-gallery > p { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .page-content .gallery a,
  .page-content .image-gallery a,
  .sidebar-box a { transition: none; }
  .page-content .gallery a:hover,
  .page-content .image-gallery a:hover { transform: none; }
}

/* =========================================================
   10. SITEMAP (sitemap.html) – plain list: section heading, then its pages
   indented with a thin line between items. No cards, bullets or icons.
   ========================================================= */
.page-content .sitemap { display: block; max-width: 80rem; }
.page-content .sitemap-group { margin: 0 0 2.4rem !important; padding: 0; background: none; border: 0; }
.page-content .sitemap-group h2 {
  margin: 0 0 .4rem !important;
  color: var(--dbim-dark-text);
  font-size: var(--dbim-fs-h2);
  font-weight: 600;
}
.page-content .sitemap-group ul { margin: 0 !important; padding: 0 0 0 4rem; list-style: none; }
.page-content .sitemap-group li { margin: 0; line-height: 1.5; }
.page-content .sitemap-group li > a {
  display: block;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--dbim-azureish-white);
  color: var(--dbim-dark-text);
  font-size: var(--dbim-fs-h3);
  font-weight: 400;
  text-decoration: none;
}
.page-content .sitemap-group li > a:hover { color: var(--dbim-powder-blue); text-decoration: underline; text-underline-offset: .2em; }
.page-content .sitemap-group li > ul { padding-left: 3.2rem; }            /* sub-pages one step further in */
.page-content .sitemap-group li > ul a { font-size: var(--dbim-fs-p1); padding: 1rem 0; }
@media (max-width: 575.98px) {
  .page-content .sitemap-group ul { padding-left: 1.6rem; }
  .page-content .sitemap-group li > ul { padding-left: 1.6rem; }
}
.page-content .sitemap-group h2 a { color: inherit; text-decoration: none; }
.page-content .sitemap-group h2 a:hover { color: var(--dbim-powder-blue); text-decoration: underline; text-underline-offset: .2em; }

/* =========================================================
   11. CONTACT CARDS (contacts.html) and ORGANISATION TREE
   ========================================================= */
.page-content .grid ul.contact-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-content .grid ul.contact-list > li {
  margin: 0;
  padding: 1.6rem 1.8rem;
  background: var(--dbim-white);
  border: 1px solid var(--dbim-azureish-white);
  border-left: 4px solid var(--dbim-wintergreen-dream);
  border-radius: .8rem;
}
.page-content .grid .contact-list h2.contact-name {
  margin: 0 0 .6rem !important;
  padding: 0 !important;
  color: var(--dbim-wintergreen-dream);
  font-size: var(--dbim-fs-p1);
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}
.page-content .grid .contact-list h2.contact-name::after { display: none; }
.page-content .grid .contact-list address { margin: 0; font-style: normal; line-height: 1.6; }

.page-content .grid ul.org-tree,
.page-content .grid ul.org-tree ul { list-style: none; padding-left: 0; margin: 0; }
.page-content .grid ul.org-tree ul { margin-left: 1.2rem; padding-left: 1.8rem; border-left: 2px solid var(--dbim-azureish-white); }
.page-content .grid ul.org-tree li { position: relative; margin: .6rem 0; }
.page-content .grid ul.org-tree ul > li::before {
  content: ""; position: absolute; left: -1.8rem; top: 1.2rem; width: 1.2rem; height: 2px; background: var(--dbim-azureish-white);
}