/* media2.html: the redesigned Media page (drawn by assets/js/media2.js from
   public-api/media.php). Same language as resourcehub2.html.
   Only the theme's own colours (style.css :root): --color-primary (green),
   --color-secondary (near black), --color-body (grey text) and, in dark mode,
   --color-success, with the theme's greys #f7f7f7 / #eaeaea and white. No
   orange. Fonts: Exo headings, Albert Sans text. The page is marked .dm-keep
   so the site's dark mode script leaves it alone: its dark colours are set here. */

.nx {
  --nx-green: var(--color-primary, #006834);
  --nx-dark: var(--color-secondary, #1f1f25);
  --nx-accent: var(--color-primary, #006834);
  --nx-ink: var(--color-heading-1, #1f1f25);
  --nx-muted: var(--color-body, #6e777d);
  --nx-bg: #ffffff;
  --nx-soft: #f7f7f7;
  --nx-card: #ffffff;
  --nx-line: #eaeaea;
  --nx-shadow: 0 22px 50px -28px rgba(31, 31, 37, .4);
  font-family: 'Albert Sans', sans-serif;
  color: var(--nx-ink);
  background: var(--nx-bg);
}
html[data-theme="dark"] .nx {
  --nx-ink: #ffffff;
  --nx-muted: #a7b0ab;
  --nx-accent: var(--color-success, #3eb75e);
  --nx-bg: #0f1512;
  --nx-soft: var(--color-secondary, #1f1f25);
  --nx-card: var(--color-secondary, #1f1f25);
  --nx-line: rgba(255, 255, 255, .1);
  --nx-shadow: 0 22px 50px -28px rgba(0, 0, 0, .8);
}
.nx h1, .nx h2, .nx h3 { font-family: 'Exo', sans-serif; font-weight: 700; color: var(--nx-ink); }
.nx a { text-decoration: none; }
.nx img { max-width: 100%; }

/* ---------------------------------------------------------------- hero */
.nx-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 96px;
  color: #fff;
  background:
    linear-gradient(rgba(31, 31, 37, .62), rgba(31, 31, 37, .62)),
    url('../images/media/2b2f490379594cd098b4462004d34ab0.jpeg') center / cover no-repeat,
    var(--nx-dark);
}
.nx-hero .container { position: relative; z-index: 1; }
.nx-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: #fff;
}
.nx-lead { max-width: 680px; margin: 0; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .9); }
.nx-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 34px;
  font-size: 14px;
  color: rgba(255, 255, 255, .75);
}
.nx-crumbs a { color: rgba(255, 255, 255, .86); }
.nx-crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.nx-crumbs span { color: #fff; font-weight: 600; }
.nx-crumbs i { font-size: 10px; opacity: .6; }

/* ------------------------------------------------------------- buttons */
.nx-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.nx-btn {
  width: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--nx-green);
  color: #fff;
  font-family: 'Exo', sans-serif;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.nx-btn:hover { background: var(--nx-dark); color: #fff; }
.nx-btn--light { background: #fff; color: var(--nx-dark); }
.nx-btn--light:hover, html[data-theme="dark"] .nx-btn--light:hover { background: var(--nx-green); color: #fff; }
.nx-btn--ghost { background: transparent; color: var(--nx-ink); border: 1px solid var(--nx-line); }
.nx-btn--ghost:hover, html[data-theme="dark"] .nx-btn--ghost:hover { background: var(--nx-soft); color: var(--nx-ink); }
.nx-btn--onphoto { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.nx-btn--onphoto:hover { background: #fff; color: var(--nx-dark); }
.nx-btn:focus-visible { outline: 3px solid var(--nx-accent); outline-offset: 2px; }
.nx-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--nx-accent); }
.nx-link i { transition: transform .25s; }
.nx-link:hover { color: var(--nx-accent); }
.nx-link:hover i { transform: translateX(4px); }

/* ------------------------------------------------------------ sections */
.nx-section { padding: 96px 0; }
.nx-section--soft { background: var(--nx-soft); }
.nx-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 32px;
  margin-bottom: 36px;
}
.nx-head h2 { margin: 0; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.15; }
.nx-skeleton { border-radius: 20px; background: linear-gradient(90deg, var(--nx-soft) 0%, var(--nx-line) 50%, var(--nx-soft) 100%) 0 0 / 200% 100%; animation: nx-shimmer 1.4s linear infinite; }
@keyframes nx-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.nx-empty { grid-column: 1 / -1; padding: 40px; border-radius: 20px; background: var(--nx-soft); text-align: center; color: var(--nx-muted); }
.nx-more { display: flex; justify-content: center; margin-top: 44px; }
.nx-more[hidden] { display: none; }

/* ------------------------------------------------------- filter chips */
.nx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-chip {
  width: auto !important;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--nx-soft);
  color: var(--nx-ink);
  font-family: 'Exo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.nx-chip:hover { background: var(--nx-line); }
.nx-chip[aria-pressed="true"] { background: var(--color-primary, #006834); color: #fff; }
.nx-chip[hidden] { display: none; }
.nx-chip:focus-visible { outline: 3px solid var(--nx-accent); outline-offset: 2px; }

/* -------------------------------------------------------------- albums */
.nx-albums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; }
.nx-album {
  display: block;
  width: 100% !important;
  padding: 0;
  border: 0;
  background: none;
  color: var(--nx-ink);
  text-align: left;
  cursor: pointer;
}
.nx-album-stack { position: relative; display: block; aspect-ratio: 4 / 3; margin: 0 8px 14px 0; }
/* the photos behind the cover, like a small pile of prints */
.nx-album-stack::before, .nx-album-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: var(--nx-line);
  transition: transform .35s;
}
.nx-album-stack::before { transform: rotate(3deg) translate(6px, 2px); }
.nx-album-stack::after { transform: rotate(-2deg) translate(-3px, 3px); background: var(--nx-soft); }
.nx-album-stack img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 18px;
  background: var(--nx-soft);
  transition: transform .35s;
}
.nx-album:hover .nx-album-stack img { transform: translateY(-5px) rotate(-1deg); }
.nx-album:hover .nx-album-stack::before { transform: rotate(5deg) translate(10px, 2px); }
.nx-album:focus-visible { outline: none; }
.nx-album:focus-visible .nx-album-stack img { box-shadow: 0 0 0 3px var(--nx-accent); }
.nx-album-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: 'Exo', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
}
.nx-album:hover .nx-album-name { color: var(--nx-accent); }
.nx-album-meta { display: block; margin-top: 4px; font-size: 14px; color: var(--nx-muted); }

/* -------------------------------------------------------------- videos */
.nx-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; }
.nx-video { margin: 0; }
.nx-video button {
  position: relative;
  display: block;
  width: 100% !important;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: var(--nx-dark);
  cursor: pointer;
}
.nx-video img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: transform .6s, opacity .3s; }
.nx-video button:hover img { transform: scale(1.05); opacity: 1; }
.nx-video i {
  position: absolute;
  left: 50%; top: 50%;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary, #006834);
  font-size: 20px;
}
.nx-video button:focus-visible { outline: 3px solid var(--nx-accent); outline-offset: 3px; }
.nx-video figcaption { margin-top: 12px; font-family: 'Exo', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.35; }

/* --------------------------------------------------------- the photobook */
.nx-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 48px;
  align-items: center;
  padding: 44px;
  border-radius: 28px;
  background: var(--nx-dark);
  color: #fff;
}
html[data-theme="dark"] .nx-feature { background: var(--nx-card); }
.nx-feature h2 { margin: 0 0 12px; font-size: clamp(26px, 3vw, 38px); color: #fff; }
.nx-feature p { margin: 0 0 26px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.nx-feature img { display: block; width: 100%; border-radius: 16px; box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .7); transform: rotate(2deg); transition: transform .4s; }
.nx-feature:hover img { transform: rotate(0deg) translateY(-4px); }

/* ------------------------------------- the photo viewer and video player */
.nx-viewer {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  background: rgba(15, 21, 18, .96);
  color: #fff;
  font-family: 'Albert Sans', sans-serif;
}
.nx-viewer[hidden] { display: none; }
.nx-viewer-top { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.nx-viewer-top h2 { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; font-family: 'Exo', sans-serif; font-size: 17px; white-space: nowrap; text-overflow: ellipsis; color: #fff; }
.nx-viewer-top span { flex: 0 0 auto; font-size: 14px; color: rgba(255, 255, 255, .7); }
.nx-viewer-top a { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: #fff; }
.nx-viewer-top a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.nx-viewer-top a[hidden] { display: none; }
.nx-viewer-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 76px; }
.nx-viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.nx-viewer-stage iframe { width: min(1100px, 100%); aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: #000; }
.nx-round {
  width: 48px !important; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.nx-round:hover { background: #fff; color: var(--color-secondary, #1f1f25); }
.nx-round:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.nx-round[hidden] { display: none; }
.nx-viewer-stage .nx-round { position: absolute; top: 50%; margin-top: -24px; }
.nx-viewer-stage .nx-prev { left: 16px; }
.nx-viewer-stage .nx-next { right: 16px; }
.nx-viewer-strip { display: flex; gap: 8px; overflow-x: auto; padding: 14px 20px 18px; scrollbar-width: thin; }
.nx-viewer-strip[hidden] { display: none; }
.nx-viewer-strip button {
  flex: 0 0 auto;
  width: 84px !important; height: 60px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  opacity: .55;
  cursor: pointer;
}
.nx-viewer-strip button img { width: 100%; height: 100%; object-fit: cover; }
.nx-viewer-strip button[aria-current="true"] { opacity: 1; border-color: #fff; }
.nx-viewer-strip button:hover { opacity: 1; }
html.nx-locked, html.nx-locked body { overflow: hidden; }

/* ------------------------------------------------------------ smaller */
@media (max-width: 991px) {
  .nx-section { padding: 72px 0; }
  .nx-albums, .nx-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-feature { grid-template-columns: 1fr; gap: 36px; padding: 32px; }
  .nx-feature img { max-width: 360px; }
}
@media (max-width: 767px) {
  .nx .container { padding-left: 16px; padding-right: 16px; }
  .nx-hero { padding: 36px 0 72px; }
  .nx-lead { font-size: 16px; }
  .nx-section { padding: 56px 0; }
  .nx-albums, .nx-videos { gap: 20px 12px; }
  .nx-album-name, .nx-video figcaption { font-size: 14px; }
  .nx-album-meta { font-size: 13px; }
  .nx-album-stack img, .nx-album-stack::before, .nx-album-stack::after, .nx-video button { border-radius: 12px; }
  .nx-video i { width: 44px; height: 44px; margin: -22px 0 0 -22px; font-size: 15px; }
  .nx-feature { padding: 24px; }
  .nx-viewer-stage { padding: 0 8px; }
  .nx-viewer-stage .nx-round { top: auto; bottom: 8px; margin-top: 0; background: rgba(15, 21, 18, .6); }
}
@media (prefers-reduced-motion: reduce) {
  .nx *, .nx *::before, .nx *::after { transition: none !important; animation: none !important; }
}