/* Page builder: view spacing + edit mode.
   Edit mode toolbars are overlays shown on hover, so they take no room in the page.
   Only the "add row" strip between rows takes space. */

.pb-page {
  text-align: left;
}

.pb-part {
  margin-bottom: 1em;
}

.pb-cell {
  min-width: 0;
}

/* ---- thumbnail grid: each thumbnail fills its cell so the last column lines up with the group bars.
   Stored thumbnails are 320x180, so they stay sharp up to about 320px wide. ---- */
.pb-thumb table {
  width: 100%;
  border-spacing: 0;
}

.pb-thumb td {
  padding-left: 0;
  padding-right: 0;
}

.pb-thumb .blurbThumb {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* ---- gallery: N thumbnails per row, filling the width (same 1em gap as the thumbnail grid so edges line up) ---- */
.pb-gallery {
  --gc: 4;
  display: grid;
  grid-template-columns: repeat(var(--gc), 1fr);
  gap: 1em;
}

.pb-gc-2 { --gc: 2; }
.pb-gc-3 { --gc: 3; }
.pb-gc-4 { --gc: 4; }
.pb-gc-6 { --gc: 6; }

@media (max-width: 640px) {
  .pb-gallery { --gc: 2; }
}

.pb-g-thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
}

.pb-g-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* enlarged picture: same look as the detail page viewer */
.pb-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99998;
  align-items: center;
  justify-content: center;
  background-color: rgba(56, 56, 56, 0.85);
}

.pb-lightbox:target {
  display: flex;
}

.pb-lb-bg {
  position: absolute;
  inset: 0;
}

.pb-lb-frame {
  position: relative;
  min-width: 220px;
  min-height: 150px;
  max-width: 92vw;
  max-height: 88vh;
  line-height: 0;
  border: 15px solid #ebebeb;
  border-radius: 7px;
  background-color: #d0d0d0;
  box-shadow: 5px 5px 7px #000000;
}

.pb-lb-frame img {
  max-width: calc(92vw - 30px);
  max-height: calc(88vh - 30px);
  width: auto;
  height: auto;
}

.pb-lb-close,
.pb-lb-prev,
.pb-lb-next,
.pb-lb-close:visited,
.pb-lb-prev:visited,
.pb-lb-next:visited {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-size: 30px;
  line-height: 1;
  text-decoration: none;
  color: #ffffff !important;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background-color: #000000;
}

.pb-lb-close { top: 14px; right: 14px; }
.pb-lb-prev  { left: 14px;  top: calc(50% - 21px); }
.pb-lb-next  { right: 14px; top: calc(50% - 21px); }

.pb-lb-count {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  font-size: 12px;
  color: #ffffff;
  text-shadow: 1px 1px 2px #000000;
}

/* settings dialog: current pictures with a remove tick */
.pb-gal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pb-gal-edit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
}

.pb-gal-edit img {
  display: block;
  width: 72px;
  height: 40px;
  object-fit: cover;
  border: 1px solid #4f4f4f;
}

/* ---- sub navigation: menus open on hover or keyboard focus, no script needed ---- */
.pb-subnav {
  border-bottom: 1px solid rgba(128, 128, 128, 0.6);
}

.pb-sn {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pb-sn > li {
  position: relative;
}

.pb-sn > li > a,
.pb-sn > li > span {
  display: block;
  padding: 7px 16px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}

.pb-sn-cat > span::after {
  content: " \25BE";
}

.pb-sn-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 180px;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  border-radius: 0 0 5px 5px;
  background-color: #2b2b2b;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.pb-sn-cat:hover > .pb-sn-menu,
.pb-sn-cat:focus-within > .pb-sn-menu {
  display: block;
}

.pb-sn-menu a,
.pb-sn-menu a:visited {
  display: block;
  padding: 6px 16px;
  white-space: nowrap;
  text-decoration: none;
  color: #ffffff !important;
}

.pb-sn-menu a:hover {
  background-color: #000000;
}

/* ---- files part: cards ---- */
.pb-files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1em;
}

.pb-filestitle {
  margin-bottom: 0.6em;
}

.pb-filecard {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px 12px;
  text-align: center;
  border: 1px solid rgba(128, 128, 128, 0.55);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.35);
}

.pb-badge {
  min-width: 54px;
  padding: 10px 8px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #ffffff;
  border-radius: 6px;
  background-color: #6b7280;
}

.pb-ft-image   { background-color: #2f855a; }
.pb-ft-doc     { background-color: #2b6cb0; }
.pb-ft-archive { background-color: #b7791f; }
.pb-ft-model   { background-color: #6b46c1; }
.pb-ft-media   { background-color: #c05621; }

.pb-filename {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
}

.pb-filemeta {
  font-size: 11px;
  opacity: 0.8;
}

.pb-dl,
.pb-dl:visited {
  margin-top: 6px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  border-radius: 14px;
  background-color: #2b2b2b;
}

.pb-dl:hover {
  background-color: #000000;
}

.pb-dl-login {
  background-color: #6b7280;
}

/* ---- banner / image parts ---- */
.pb-banner,
.pb-image {
  position: relative;
  overflow: hidden;
  line-height: 0;
  box-sizing: border-box;
}

/* an image is only as wide as the picture, so its border hugs it (and text alignment can centre it) */
.pb-image {
  display: inline-block;
  max-width: 100%;
}

.pb-banner img,
.pb-banner video,
.pb-image img,
.pb-image video {
  display: block;
  width: 100%;
  height: auto;
}

.pb-image img {
  max-width: 100%;
  width: auto;
}

.pb-banner-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 16px 10px;
  line-height: 1.3;
  font-size: 22px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 3px #000000;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
}

.pb-nomedia {
  padding: 12px;
  font-style: italic;
  border: 1px dashed #8a8a8a;
}

/* full screen layout: let long pages scroll (the template hides overflow by default) */
.fullScreen {
  overflow-y: auto;
}

/* full screen pages are a fixed 1024px column (shrinks on narrow screens, never wider) */
.fullScreen .pb-page {
  box-sizing: border-box;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
}

/* big text boxes inside popups: the form style gives them a fixed 797px width, wider than the dialog */
.pop .allformAreaFull {
  width: 100%;
  max-width: 100%;
  resize: vertical;
}

/* folded option groups in dialogs (Style, Colors) */
.pb-fold {
  margin-top: 4px;
}

.pb-fold > summary {
  cursor: pointer;
  font-weight: bold;
  font-style: italic;
  padding: 4px 0;
}

.pb-fold > .grid {
  margin-top: 6px;
}

/* tall dialogs scroll instead of running off the bottom of the window */
.pop > div > div {
  max-height: 78vh;
  overflow-y: auto;
}

/* ---- floating page bar (top right) ---- */
.pb-pagebar {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9000;
  padding: 7px 16px;
  font-size: 14px;
  color: #ffffff;
  border: 1px solid #000000;
  border-radius: 18px;
  background-color: #2b2b2b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.pb-pagebar a,
.pb-pagebar a:visited {
  margin-left: 12px;
  color: #ffd45e;
  font-weight: bold;
  text-decoration: none;
}

.pb-pagebar a:first-child {
  margin-left: 0;
}

.pb-pagebar a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ---- outlines ---- */
.pb-editing .pb-row,
.pb-editing .pb-cell,
.pb-editing .pb-part {
  position: relative;
}

.pb-editing .pb-row {
  outline: 1px dashed #b5b5b5;
}

.pb-editing .pb-cell {
  outline: 1px dotted #c8c8c8;
  min-height: 12px;
}

.pb-editing .pb-row:hover {
  outline-color: #4f4f4f;
}

.pb-editing .pb-part:hover {
  outline: 1px solid #4f8fd0;
}

/* rules and spacers are hair thin: widen what the mouse can hit (invisible, no layout change) */
.pb-editing .pb-t-rule::before,
.pb-editing .pb-t-spacer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  bottom: -12px;
}

.pb-editing .pb-t-spacer {
  min-height: 8px;
}

/* ---- icon buttons ---- */
.pb-ico {
  display: inline-block;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  border: 1px solid #4f4f4f;
  border-radius: 3px;
  background-color: #ebebeb;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  cursor: pointer;
  vertical-align: top;
}

.pb-ico:hover {
  background-color: #ffffff;
  border-color: #000000;
}

.pb-up   { background-image: url('../img/ico/sup.png'); }
.pb-down { background-image: url('../img/ico/sdown.png'); }
.pb-edit { background-image: url('../img/ico/edit.png'); }
.pb-del  { background-image: url('../img/ico/delete.png'); }
.pb-add  { background-image: url('../img/ico/add.png'); }
.pb-split { background-image: url('../img/ico/last.png'); }

.pb-ico.pb-text {
  width: auto;
  padding: 0 6px;
  font-size: 10px;
  font-weight: bold;
  line-height: 14px;
  text-decoration: none;
  text-transform: uppercase;
  color: #2b2b2b;
}

.pb-btnform {
  display: inline;
  margin: 0;
}

/* ---- hover toolbars (absolute, so they cost no layout space) ----
   Three levels, each with its own corner and color so they never stack up:
     row  = orange, above the row, left
     cell = green,  below the cell, left
     part = blue,   inside the part, top right */
.pb-bar-row,
.pb-bar-cell,
.pb-bar-part {
  position: absolute;
  display: none;
  align-items: center;
  gap: 3px;
  padding: 2px 4px;
  z-index: 100;
  font-size: 10px;
  line-height: 16px;
  color: #ffffff;
  background-color: #2b2b2b;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.pb-bar-row span,
.pb-bar-cell span,
.pb-bar-part span {
  margin-right: 3px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pb-bar-row  { top: -13px;    left: 6px;  border-left: 4px solid #ff9a1f; }
.pb-bar-cell { bottom: -13px; left: 6px;  border-left: 4px solid #3fb950; }
.pb-bar-part { top: 4px;      right: 4px; border-left: 4px solid #4f8fd0; }

.pb-row:hover > .pb-bar-row,
.pb-cell:hover > .pb-bar-cell,
.pb-part:hover > .pb-bar-part {
  display: flex;
}

/* an empty cell always shows its add button, centred */
.pb-empty {
  min-height: 34px;
}

.pb-empty > .pb-bar-cell {
  display: flex;
  bottom: auto;
  top: 4px;
  left: 6px;
}

/* ---- add row strip: the one thing that takes space ---- */
.pb-addrow {
  height: 14px;
  line-height: 14px;
  margin: 3px 0;
  text-align: center;
  border-top: 1px dashed #c8c8c8;
}

.pb-addrow .pb-ico {
  margin-top: -8px;
  opacity: 0.55;
}

.pb-addrow:hover .pb-ico {
  opacity: 1;
}