/* My Directional Gallery - Styles
   Updated: fixes for active/inactive tab colors and arrow sizing
*/

.cp-gallery-widget { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; display:block; width:100%; }

/* Tabs: stable left-aligned container, prevents layout shift */
.cp-filter-tabs {
  display:flex;
  gap:8px;
  margin-bottom:18px;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:center;
  position:relative;
  z-index:30;
  -webkit-font-smoothing:antialiased;
  will-change: background;
}

/* Tabs appearance */
.cp-filter-tabs .cp-tab {
  box-sizing:border-box;
  min-width:64px;
  text-align:center;
  padding:10px 18px;
  font-weight:700;
  text-transform:uppercase;
  border-radius: 5px;
  border: none;
  cursor:pointer;
  transition: background .16s ease, color .16s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  background-clip: padding-box;
}

/* Focus styling (no scroll jump) */
.cp-filter-tabs .cp-tab:focus {
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
  scroll-margin-top: 0;
}

/* Active state note: JS applies inline background and color only */
.cp-filter-tabs .cp-tab.active { }

/* Swiper container */
.cp-swiper-container { width:100%; position:relative; }
.swiper-wrapper { display:flex; align-items:stretch; }

/* Slide & image */
.cp-item { display:flex; align-items:stretch; }
.cp-img-wrap { position:relative; overflow:hidden; width:100%; height:320px; display:block; background:#f4f4f4; }
.cp-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }

/* Overlay full-cover; default off-canvas (translateY) */
.cp-overlay {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.45);
  color:#fff;
  transform: translateY(100%);
  transition: transform .42s cubic-bezier(.22,.98,.3,1);
  pointer-events:none;
}

/* Meta container: centered stack */
.cp-meta { padding:18px; pointer-events:auto; display:flex; align-items:center; justify-content:space-between; width:100%; gap:12px; }
.cp-meta-center { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; pointer-events:auto; }
.cp-meta-left { display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; }

/* Title & category */
.cp-title { margin:0; font-size:18px; font-weight:700; letter-spacing:1px; color:inherit; }
.cp-category { font-size:13px; opacity:.95; text-transform:uppercase; color:inherit; }

/* Zoom anchor base */
.cp-zoom { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:inherit; text-decoration:none; transition: background .18s; overflow:hidden; }

/* Swiper arrows base (we will set sizes via JS inline, but give fallback styles) */
.swiper-button-prev, .swiper-button-next {
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-sizing:border-box;
  width:44px;
  height:44px;
  padding:6px;
  background: rgba(255,255,255,0.9);
  border-radius:6px;
}

/* If arrows use pseudo or svg, control svg size here, JS will override if needed */
.swiper-button-prev svg, .swiper-button-next svg { width:18px; height:18px; display:block; }

/* Hover visible */
.cp-img-wrap.hovering .cp-overlay { transform: translateY(0); pointer-events:auto; }

/* Placeholder (no image) */
.cp-placeholder { display:flex; align-items:center; justify-content:center; height:100%; color:#777; }

/* Accessibility: pressed state uses no layout changes; JS handles colors */
.cp-tab[aria-pressed="true"] { }

/* Responsive adjustments */
@media (max-width:1024px) {
  .cp-img-wrap { height:280px; }
  .cp-title { font-size:16px; }
}
@media (max-width:768px) {
  .cp-img-wrap { height:220px; }
  .cp-meta { padding:12px; }
  .cp-title { font-size:14px; }
}
@media (max-width:768px) {
  .cp-gallery-widget .cp-filter-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 10px;
    align-items: stretch;
    margin-bottom: 14px;
    padding: 0 8px;
  }

  /* First tab spans both columns */
  .cp-gallery-widget .cp-filter-tabs .cp-tab:first-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    text-align: center;
    padding: 14px 18px;
    clip-path: none;
    border-radius: 10px;
    font-weight: 800;
    font-size: 16px;
    box-sizing: border-box;
  }

  /* Remaining tabs: 2 per row */
  .cp-gallery-widget .cp-filter-tabs .cp-tab:not(:first-child) {
    width: 100%;
    text-align: center;
    padding: 12px 10px;
    clip-path: none;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
  }

  /* Optional: make sure tab text doesn’t wrap awkwardly */
  .cp-gallery-widget .cp-filter-tabs .cp-tab {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Swiper spacing below tabs */
  .cp-gallery-widget .cp-swiper-container {
    margin-top: 8px;
  }
}