/* corissia-web 2026-11-15: the gallery /hotels/{en,de}/gallery (core/cw_gallery.php, static/script/gallery.js), only on that page.
   The colours and fonts of look.css (its variables); the viewer is PhotoSwipe 5 (photoswipe.css) with the bar below the photo. */

.cw-gal { margin: 8px 0 48px; }
.cw-gal-team {
  margin: 0 0 16px; padding: 10px 14px; border-radius: 8px; font-size: 14px;
  background: var(--cw-sand, #EFE6D6); color: var(--cw-ink, #172A33); border: 1px solid var(--cw-line, #DDD6CA);
}

/* the page of one photo or video (gallery?p=<id>): the item itself, large, before the filters (core/cw_gallery.php) */
.cw-gal-item { margin: 0 auto 28px; max-width: 1000px; }
.cw-gal-item-media { display: block; width: 100%; height: auto; margin: 0 auto; border-radius: 8px; background: var(--cw-tint, #E8EEEF); }
.cw-gal-item-up .cw-gal-item-media { width: auto; max-width: 100%; max-height: 78vh; }
video.cw-gal-item-media { background: #000; }
.cw-gal-item figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px; }
.cw-gal-item-cap { font-size: 15px; line-height: 1.45; color: var(--cw-ink, #172A33); }
.cw-gal-item-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-gal-item-cta, .cw-gal-item-back {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; text-decoration: none;
}
.cw-gal-item-cta { background: var(--cw-head-cta-bg, #C8A76B); color: var(--cw-head-cta-ink, #141210); font-weight: 600; }
.cw-gal-item-back { border: 1px solid var(--cw-line, #DDD6CA); color: var(--cw-ink, #172A33); }
.cw-gal-item-cta:hover, .cw-gal-item-cta:focus { color: var(--cw-head-cta-ink, #141210); text-decoration: none; }
.cw-gal-item-back:hover, .cw-gal-item-back:focus { color: var(--cw-ink, #172A33); text-decoration: none; }
@media (hover: hover) {
  .cw-gal-item-cta:hover { background: var(--cw-head-cta-hover-bg, #DCC08C); }
  .cw-gal-item-back:hover { border-color: var(--cw-primary, #1D4352); background: var(--cw-tint, #E8EEEF); }
}

/* the filters: two rows of chips; on a phone each row scrolls sideways instead of wrapping */
.cw-gal-filters { display: grid; gap: 10px; margin: 0 0 14px; }
.cw-gal-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--cw-line, #DDD6CA); background: var(--cw-surface, #FFF); color: var(--cw-ink, #172A33);
  font-size: 15px; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s;
}
/* the site's a:hover / a:focus (link colour, underline) never reaches the chips; on a phone the last tapped one keeps :hover */
.cw-chip:hover, .cw-chip:focus { color: var(--cw-ink, #172A33); text-decoration: none; }
@media (hover: hover) { .cw-chip:hover { border-color: var(--cw-primary, #1D4352); background: var(--cw-tint, #E8EEEF); color: var(--cw-ink, #172A33); text-decoration: none; } }
.cw-chip:focus-visible { outline: 2px solid var(--cw-accent, #8A5D27); outline-offset: 2px; }
.cw-chip.is-on, .cw-chip.is-on:hover, .cw-chip.is-on:focus { background: var(--cw-primary, #1D4352); border-color: var(--cw-primary, #1D4352); color: #FFF; text-decoration: none; }
/* a chosen hotel or category is a switch (Giorgos 15/11 15:07): a small × says that a second tap takes it off */
.cw-chip.is-on:not([data-h=""]):not([data-c=""])::after { content: "×"; margin-left: 8px; font-size: 17px; line-height: 1; opacity: .8; }
.cw-chip[hidden] { display: none; }
@media (max-width: 640px) {
  .cw-gal-chips {
    flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .cw-gal-chips::-webkit-scrollbar { display: none; }
  .cw-chip { min-height: 38px; padding: 0 14px; font-size: 14px; }
}

.cw-gal-count { margin: 0 0 12px; font-size: 14px; color: var(--cw-muted, #56636B); }

/* the grid: 3:4 tiles, 2 columns on a phone, up to 5 on a wide screen */
.cw-gal-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
}
@media (min-width: 641px) { .cw-gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
@media (min-width: 1025px) { .cw-gal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 1400px) { .cw-gal-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cw-gal-grid li { margin: 0; padding: 0; list-style: none; }
.cw-gal-t {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px;
  background: var(--cw-tint, #E8EEEF);
}
.cw-gal-t img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
@media (hover: hover) { .cw-gal-t:hover img { transform: scale(1.03); } }
.cw-gal-t:hover, .cw-gal-t:focus { text-decoration: none; }
.cw-gal-t:focus-visible { outline: 3px solid var(--cw-accent, #8A5D27); outline-offset: 2px; }
.cw-gal-play {
  position: absolute; left: 8px; bottom: 8px; padding: 4px 9px 4px 8px; border-radius: 999px;
  background: rgba(16, 18, 20, .66); color: #FFF; font-size: 12px; line-height: 1.2; font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); pointer-events: none;
}
.cw-gal-none { margin: 24px 0; color: var(--cw-muted, #56636B); }
.cw-gal-more { margin: 24px 0 0; text-align: center; }
.cw-gal-morebtn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px;
  border: 1px solid var(--cw-primary, #1D4352); color: var(--cw-primary, #1D4352); text-decoration: none; font-size: 15px;
}
.cw-gal-morebtn:hover, .cw-gal-morebtn:focus { color: var(--cw-primary, #1D4352); text-decoration: none; }
@media (hover: hover) { .cw-gal-morebtn:hover { background: var(--cw-primary, #1D4352); color: #FFF; text-decoration: none; } }
.cw-gal-morebtn[hidden] { display: none; }

/* ---- the viewer (PhotoSwipe): the bar under the photo */
.pswp__cw-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .55) 70%, rgba(0, 0, 0, 0));
  color: #FFF; font-family: "CW Text", "Segoe UI", Arial, sans-serif;
  transition: opacity .25s;
}
.pswp:not(.pswp--ui-visible) .pswp__cw-bar { opacity: 0; pointer-events: none; }
.cw-pv-cap {
  margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: #FFF;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cw-pv-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cw-pv-cta {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--cw-head-cta-bg, #C8A76B); color: var(--cw-head-cta-ink, #141210); font-size: 14px; font-weight: 600;
  text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cw-pv-cta:hover, .cw-pv-cta:focus { background: var(--cw-head-cta-hover-bg, #DCC08C); color: var(--cw-head-cta-ink, #141210); text-decoration: none; }
.cw-pv-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); color: #FFF;
  font: inherit; font-size: 14px; text-decoration: none; cursor: pointer;
}
/* the site's a:hover (main.css: link colour, underline) must not reach the buttons of the viewer (Giorgos 15/11 15:01) */
.cw-pv-btn:hover, .cw-pv-btn:focus { color: #FFF; text-decoration: none; }
@media (hover: hover) { .cw-pv-btn:hover { background: rgba(255, 255, 255, .22); border-color: #FFF; color: #FFF; text-decoration: none; } }
.cw-pv-btn[hidden] { display: none; }
.cw-pv-btn[disabled] { opacity: .7; cursor: progress; }
.cw-pv-story[data-state="ready"], .cw-pv-story[data-state="ready"]:hover { background: #FFF; color: #141210; border-color: #FFF; }
.cw-pv-cta:focus-visible, .cw-pv-btn:focus-visible, .cw-pv-mi:focus-visible { outline: 2px solid #FFF; outline-offset: 2px; }
.cw-pv-menu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cw-pv-menu[hidden] { display: none; }
.cw-pv-mi:hover, .cw-pv-mi:focus { background: var(--cw-sand, #EFE6D6); color: #141210; text-decoration: none; }
.cw-pv-mi {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 8px;
  background: #FFF; color: #141210; border: 0; font: inherit; font-size: 14px; text-decoration: none; cursor: pointer;
}
@media (max-width: 719px) {
  .cw-pv-acts { gap: 6px; }
  .cw-pv-cta { flex: 1 1 100%; justify-content: center; }
  .cw-pv-btn { flex: 1 1 0; justify-content: center; padding: 0 10px; }
}

/* a video in the viewer: the size PhotoSwipe gives the slide, the whole video visible */
.cw-pv-video { position: relative; }
.cw-pv-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }