/* Gallery styles for the FFXIV screenshots page.
   Sits on top of the site's css/stylesheet.css, so the main page look
   (background, header, dangling o, frosted container, pink buttons) is reused. */

.container.wide {
  width: min(92vw, 1000px);
  flex-direction: column;
  gap: 18px;
}

/* the light/dark switch, on the right side just above the main box */

.mode-bar {
  width: min(92vw, 1000px);
  margin: 0 auto 14px;

  display: flex;
  justify-content: flex-end;
}

/* the current design is the light theme, so the switch shows a light button
   with dark text; dark.css flips it to a dark button with light text */

.mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  padding: 10px 16px;

  color: #3a3a44;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 8px;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.mode-toggle:hover {
  background-color: #e6dede;
  transform: translateY(-2px);
}

.mode-toggle:active {
  transform: translateY(0);
}

.mode-toggle .icon {
  display: block;
}

/* the icon shows the theme you are currently in: sun for light, moon for dark */

.mode-toggle .moon {
  display: none;

  color: #9b8fb5;
}

body.dark .mode-toggle .moon {
  display: block;

  color: #b3a8cc;
}

body.dark .mode-toggle .sun {
  display: none;
}

.mode-toggle .sun {
  color: #d98a4c;
}

body.dark .mode-toggle .sun {
  color: #f2b95f;
}

.subtitle {
  font-family: "Nunito", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #ebe7e7;
  text-align: center;
}

.subtitle .accent {
  color: #ff7eb6;

  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

/* the series heading, plain text */

.preview-title {
  font-family: "Nunito", sans-serif;
  font-size: 34px;
  font-weight: 900;
  color: #ebe7e7;
  text-align: center;

  /* cancel the container gap so the spoiler line sits right under the title */
  margin: 0 0 -18px 0;
}

.preview-title .accent {
  color: #ff7eb6;

  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

/* one box per set of screenshots in the series */

.set-box {
  position: relative;

  width: 100%;
  padding: 10px;

  display: flex;
  flex-direction: column;
  gap: 10px;

  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* the title, caption and gallery */

.set-body {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

.set-box + .set-box {
  margin-top: 18px;
}

/* collapsible box: the gallery is hidden until the header is clicked */

.set-box.collapsed .gallery {
  display: none;
}

/* the header block groups the title, the show/hide button and the caption */

.set-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.set-toggle {
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  /* no bottom padding so the caption can sit right under the title */
  padding: 4px 6px 0;

  font-family: "Nunito", sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: #ebe7e7;

  background: none;
  border: none;

  cursor: pointer;
}

.set-toggle .accent {
  color: #ff7eb6;

  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.set-toggle:hover,
.set-toggle:focus {
  color: #ffffff;
  outline: none;
}

/* Light keeps its pink colour when the title is hovered or clicked */

.set-toggle:hover .accent,
.set-toggle:focus .accent {
  color: #ff7eb6;
}

/* the show/hide button sits inline next to the title, as tall as the letters */

.set-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 21px;
  line-height: 21px;
  padding: 0 8px;

  font-size: 18px;
  font-weight: 700;
  color: #ffffff;

  background-color: #ff7eb6;
  border: 1px solid #ffffff;
  border-radius: 8px;

  transition: background-color 0.2s ease;
}

.set-toggle:hover .set-hint,
.set-toggle:focus .set-hint {
  background-color: #d31467;
}

/* title for a box that has no toggle button */

.set-title {
  font-family: "Nunito", sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: #ebe7e7;
  text-align: center;

  margin: 0;
}

.set-title .accent {
  color: #ff7eb6;

  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

/* short explanation under the set title, visible even when collapsed */

.set-desc {
  font-family: "Nunito", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: rgba(235, 231, 231, 0.85);

  text-align: center;
  max-width: 640px;

  /* cancel the box gap so the caption sits right under the title */
  margin: -10px auto 0;

  line-height: 1.5;
}

/* smaller explanatory text under the box title */

.box-desc {
  font-family: "Nunito", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: rgba(235, 231, 231, 0.85);

  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.5;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;

  width: 100%;
}

.card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 16px;

  padding: 10px;

  display: flex;
  flex-direction: column;

  /* tight spacing between the image, the date and the caption */
  gap: 3px;

  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.card:hover {
  border-color: #ff7eb6;
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}

.card button {
  position: relative;

  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* styled tooltip, shown near the bottom of the picture on hover */

.card button::after {
  content: attr(data-tip);

  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;

  padding: 6px 12px;

  font-family: "Nunito", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;

  background-color: #ff7eb6;
  border: 1px solid #ffffff;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);

  white-space: nowrap;
  opacity: 0;
  pointer-events: none;

  transition: opacity 0.2s ease;
}

.card button:hover::after,
.card button:focus-visible::after {
  opacity: 1;
}

.card img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;

  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);

  background: #2c2c34;
}

.card button:focus-visible {
  outline: 2px solid #ff7eb6;
  outline-offset: 2px;
  border-radius: 10px;
}

.card .date {
  font-family: "Nunito", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #ff7eb6;
  text-align: center;
}

.card .caption {
  font-family: "Nunito", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: rgba(235, 231, 231, 0.85);
  text-align: center;
  line-height: 1.4;
}

/* lightbox: click a picture to see it big */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;

  display: none;
  justify-content: center;
  align-items: center;

  background: rgba(20, 20, 26, 0.85);
  backdrop-filter: blur(6px);
}

.lightbox.open {
  display: flex;

  /* image on top, buttons in a row underneath it */
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.lightbox img {
  max-width: 92vw;
  max-height: 88vh;

  /* sit right under the pinned date and caption, with no blank gap */
  margin-top: 48px;

  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* full-size mode: show the image at its real size and let it scroll */

.lightbox.full {
  overflow: auto;

  /* start at the top so all of a huge image stays reachable by scrolling */
  align-items: flex-start;
  justify-content: flex-start;
}

.lightbox.full img {
  max-width: none;
  max-height: none;

  margin: 70px 0 40px;
}

/* the buttons live outside the lightbox so they pin to the screen itself.
   normal size: a row centred under the picture. full size: stacked at the
   bottom-right, in the same place Close occupies, so they stay on screen
   while the huge image scrolls */

.controls,
.close {
  display: none;
}

body.viewer-open .controls,
body.viewer-open .close {
  display: flex;
}

.controls {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;

  flex-direction: row;
  align-items: center;
  gap: 10px;
}

body.viewer-full .controls {
  left: auto;
  right: 24px;
  bottom: 77px;
  transform: none;

  flex-direction: column;
  align-items: flex-end;
}

/* the stage shrinks to the picture so it sizes to the image */

.lightbox .stage {
  position: relative;
  display: inline-block;
}

.controls button,
.close {
  padding: 10px 18px;

  font-family: "Nunito", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;

  background-color: #ff7eb6;
  border: 1px solid #ffffff;
  border-radius: 8px;

  cursor: pointer;
}

/* the full size button stacks its label above the dimensions */

.fullsize {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.fullsize .dims {
  font-size: 15px;
  font-weight: 600;
  opacity: 0.9;
}

.controls button:hover,
.close:hover {
  background-color: #d31467;
}

/* Close sits at the very bottom-right, under the stacked buttons */

.close {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
}

body.viewer-open .close {
  display: flex;
}

/* the date and caption are pinned to the top of the screen, above the picture */

.lightbox .meta {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;

  font-family: "Nunito", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ebe7e7;

  text-align: center;
  max-width: 90vw;
}

.lightbox .meta .accent {
  color: #ff7eb6;
}

.nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.nav .button_1 {
  font-size: 20px;
  padding: 10px 16px;
}

/* shared button effect, matching the site's .button_1: soft shadow on the
   text, a smooth transition, and a small lift on hover */

.set-hint,
.controls button,
.close,
.card button {
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.controls button:hover,
.close:hover,
.set-toggle:hover .set-hint,
.set-toggle:focus .set-hint {
  background-color: #d31467;
  transform: translateY(-2px);
}

.controls button:active,
.close:active,
.set-toggle:active .set-hint {
  transform: translateY(0);
}

/* the gallery pictures lift on hover, like the buttons do */

.card button:hover {
  transform: translateY(-2px);
}