/* =========== Base Styles =========== */
body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: Arial, sans-serif;
}
.header-photos {
  text-align: center;
}
.search-form {
  display: inline-block;
}
h2 {
  margin-top: 16px;
  font-size: clamp(1.25rem, 2.5vw, 2rem);
}

/* ======================
   Gallery Container & Justified Layout
   ====================== */
#gallery {
  max-width: 1323px;
  margin: 8px auto;
}
#gallery .img-container {
  display: none; /* hidden until JS builds rows */
  margin: 4px;   /* 4px on all sides */
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
#gallery .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-row {
  display: flex;
}
.gallery-row .img-container:last-child {
  margin-right: 4px;
}

/* Pager Links */
.pager {
  margin: 16px 0;
  font-size: clamp(0.875rem, 2vw, 1rem);
}
.pager a {
  margin: 0 8px;
  padding: 6px 12px;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
  border: 1px solid #fff;
  transition: background 0.2s;
}
.pager a:hover {
  background: rgba(255,255,255,0.2);
}

/* =====================
   Metadata Overlay Styles
   ===================== */
.img-container .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: 1fr auto; /* left column flexible, right column auto */
  grid-template-rows: 1fr auto;    /* two rows: top expands, bottom auto */
  padding: 12px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in;
  gap: 4px; /* small gap between rows */
  pointer-events: none !important;
}
/* But allow actual interactive elements inside the overlay to still catch clicks: */
.img-container .overlay a,
.img-container .overlay .likes,
.img-container .overlay .views {
  pointer-events: auto;
}
.img-container:hover .overlay,
.img-container.focused .overlay {
  opacity: 0.9;
  pointer-events: auto;
}

/* Responsive minimum width for overlay readability */
:root {
  --min-overlay-width: 180px;
}

/* --- Top-left cell: CAPTION --- */
.img-container .overlay .caption {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  justify-self: start;
  font-size: clamp(0.25rem, 1vw, 1rem);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
  font-weight: 700;
}

/* --- Top-right cell: LIKE COUNT --- */
.img-container .overlay .likes {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: end;
  font-size: clamp(0.25rem, 1vw, 0.75rem);
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}
.img-container .overlay .likes .count {
  order: 0;
}
.img-container .overlay .likes .heart-icon {
  order: 1;
  width: clamp(10px, 2vw, 16px);
  height: clamp(10px, 2vw, 16px);
  fill: #fff;
}

/* --- Bottom-left cell: TAGS --- */
.img-container .overlay .tags {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  justify-self: start;
  font-size: clamp(0.25rem, 1vw, 0.75rem);
  display: flex;
  gap: 4px;
  font-weight: 700;
}
.img-container .overlay .tags .tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2)!important;
  border-radius: 3px;
  padding: 2px 5px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  color: #fff!important;
  transition: background 0.2s;
}
.img-container .overlay .tags .tag:hover {
  background: rgba(255, 255, 255, 0.4)!important;
}

/* --- Bottom-right cell: VIEW COUNT --- */
.img-container .overlay .views {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: end;
  font-size: clamp(0.25rem, 1vw, 0.75rem);
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}
.img-container .overlay .views .count {
  order: 0;
}
.img-container .overlay .views .eye-icon {
  order: 1;
  width: clamp(10px, 2vw, 16px);
  height: clamp(10px, 2vw, 16px);
  fill: #fff;
}

/* --- More-Like-This button (search icon) --- */
.img-container .overlay .morelikethis-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.9);
  border: none;
  width: clamp(24px, 1.5vw, 38px);  /* slightly larger */
  height: clamp(24px, 1.5vw, 38px);
  border-radius: 50%;
  cursor: pointer;
  display: flex;                 /* center content */
  align-items: center;
  justify-content: center;
  padding: 0;                    /* remove shift from padding */
  z-index: 1;
  pointer-events: auto;
  opacity: 0.8;
}
.img-container .overlay .morelikethis-btn {
  /* existing styles */
  color: white; /* default icon color */
}
.img-container .overlay .morelikethis-btn:hover {
  color: #ED1C24!important; /* on hover, changes icon fill */
  opacity: 1;
}

/* =====================
   Mobile: One‐image‐per‐row
   ===================== */
@media (max-width: 768px) {
  #gallery .gallery-row {
    display: block;
  }
  #gallery .gallery-row .img-container {
    width: 100% !important;
    height: auto !important;
    display: block;
  }
}

/* =========================================================================
   RANDOM TAGS BAR + SCROLL BUTTON STYLES
   ========================================================================= */

/* 1) WRAPPER: positions arrows over the tag list */
.tags-bar {
  position: relative;
  max-width: 1323px;
  width: 100%;
  margin: 0 auto 16px;  /* centers it and preserves the 16px bottom gap */
}

/* 2) SCROLLABLE TAG LIST: hides native scrollbar */
.tags-bar .tags-list-photo {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;     /* smooth scrolling */
  margin: 0;                   /* remove default margins */
}
.tags-bar .tags-list-photo::-webkit-scrollbar {
  display: none;               /* hide scrollbar in Chrome/Safari */
}
.tags-bar .tags-list-photo {
  -ms-overflow-style: none;    /* hide scrollbar in IE/Edge */
  scrollbar-width: none;       /* hide scrollbar in Firefox */
}

/* 3) EACH TAG LINK */
.tags-bar .tags-list-photo a {
  flex: 0 0 auto;              /* don’t shrink, don’t grow */
  margin-right: 4px;
  padding: 6px 12px;
  background: #181818;
  color: #fff;
  text-decoration: none;
  border: 1px solid #333;
  border-radius: 4px;
  white-space: nowrap;         /* keep text on one line */
  font-size: 1.1rem;
}

.tags-bar .tags-list-photo a:hover {
  border-color: #666;          /* subtle hover effect */
}

/* 4) ACTIVE TAG HIGHLIGHT */
.tags-bar .tags-list-photo a.active {
  border-color: #ED1C24 !important;  /* bright red border */
}

/* 5) SCROLL ARROW BUTTONS */
.tags-bar .scroll-btn.scroll-left {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: 100%;
  border: none;
  background: linear-gradient(270deg, rgba(6,7,13, 0) 0, rgba(6,7,13, 0.9));
  color: #fff;
  cursor: pointer;
  font-size: 2.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: opacity 0.2s ease;
}
.tags-bar .scroll-btn.scroll-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 70px;
  height: 100%;
  border: none;
  background: linear-gradient(270deg, rgba(6,7,13, 0.9) 0, rgba(6,7,13, 0));
  color: #fff;
  cursor: pointer;
  font-size: 2.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: opacity 0.2s ease;
}

.tags-bar .scroll-btn:hover {
  color: #ED1C24!important;
}

/* Position left arrow on the left edge */
.tags-bar .scroll-left {
  left: 0;
}

/* Position right arrow on the right edge */
.tags-bar .scroll-right {
  right: 0;
}

/* 6) HIDE ARROW WHEN SCROLLED TO END */
.tags-bar .scroll-btn.hidden {
  opacity: 0;
  pointer-events: none;
}

/*end tag bar style*/

/*search box style */
/* ====== CSS (either put into a <style> block or your stylesheet) ====== */

/* 1) The wrapper makes it possible to absolutely position the icon */
/* ================== CSS ================== */

.search-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 400px;

  /* One variable for both icon + placeholder color */
  --search-icon-color: #666;
}

/* 2) SVG icon: 16×16, centered by top:50% + translateY(-50%) */
.search-icon {
  position: absolute;
  left: 8px;               /* 8px from the left edge */
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--search-icon-color);
  pointer-events: none;    /* clicks pass through to the input */
}

/* 3) Input itself: fixed height, centered text via line-height */
.search-input {
  width: 100%;
  height: 32px;                 /* total height = 32px */
  line-height: 32px;            /* same as height → vertical center */
  padding-left: 32px;           /* 16px icon + 8px spacing + 8px extra */
  padding-right: 8px;
  border: 1px solid #363a42;
  border-radius: 6px;
  background-color: #111;
  color: #fff;
  font-size: 1rem;
  box-sizing: border-box;
  outline: none;
}

/* 4) Hover / focus-visible border colors */
.search-input:hover {
  border-color: #5d5d6c;
}

.search-input:focus-visible {
  border-color: #ED1C24!important;
}

/* 5) Placeholder uses the same var for consistency */
.search-input::placeholder {
  color: var(--search-icon-color);
  /* Because the input is 32px tall and line-height=32px, 
     the placeholder text will sit exactly in the middle. */
}

input:focus, textarea:focus {
  outline: 0;
  color: #fafafa !important;
}
/*end search box style */

/* start pagination css */
/* Container for Pagination */
.custom-pagination-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

/* Reset list styling and layout */
.custom-pagination {
    list-style: none;
    display: flex;
    gap: 5px; /* spacing between page items */
    margin: 0;
    padding: 0;
}

/* Base style for pagination boxes */
.custom-page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
		margin: 0 3px;
    text-decoration: none;
    font-size: 22px;
    font-weight: 700;
		line-height: 55px;
    border-radius: 5px;
    background-color: #151515;
    color: #c6c6c6;
		border: 3px solid transparent;
}

/* Hover effect for normal (enabled) links */
.custom-page-link:hover {
    background-color: #2f2f2f;
	color: #c6c6c6!important;
}

/* Active page styling (orange background with black text) */
.custom-page-item.active .custom-page-link,
.custom-page-link.current {
    border: 3px solid #ED1C24;
    color: #fff!important;
	cursor: default !important;
}

.custom-page-link.dots {
	cursor: default !important;
}

/* Styling for Prev and Next buttons (enabled) */
.custom-page-item:first-child .custom-page-link,
.custom-page-item:last-child .custom-page-link {
		min-width: 200px!important;
    background-color: #ED1C24!important;
    color: #000!important;
    font-weight: 700;
}

/* Hover state for enabled Prev/Next buttons */
.custom-page-item:first-child:not(.disabled) .custom-page-link:hover,
.custom-page-item:last-child:not(.disabled) .custom-page-link:hover {
    background-color: #ef343b;
}

/* Disabled Prev/Next: force no pointer events and not-allowed cursor */
.custom-page-item.disabled .custom-page-link {
    background-color: #333 !important;
    color: #666 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
/* end pagination css */


/* -----------------------------------------
   single-image.php layout & thumbnails
   ----------------------------------------- */
.single-container {
  display: grid;
  grid-template-columns: 1fr auto;      /* left fills, right fits */
  grid-template-rows:    1fr auto auto; /* image | header | tags */
}

.left-column {
  display: grid;
  grid-template-rows: auto 1fr 2fr;
  background: #000;
  align-items: start;
}

/* 1) IMAGE WRAPPER (row 1) */
.image-wrapper {
  grid-row:   1 / 2;
  position:   relative;
  display:    flex;
  justify-content: center;
  align-items:    center;
  overflow:   hidden;                   /* no inner scroll */
}
.image-wrapper img {
  max-width:  100%;
  max-height: 100%;
  object-fit: contain;
}

/* make just image+header fill the viewport */
.top-block {
  height:           calc(100vh - 94px);
  display:          grid;
  grid-template-rows: 1fr auto; /* image wraps the free space, header sizes itself */
}

body {
  margin: 0;
  padding: 0;
  overflow-y: auto;
  height: auto;
}
/* Home & nav buttons, hidden until hover */
.btn-home,
.nav {
  opacity:       0;
  transition:    opacity 0.2s ease;
}
.image-wrapper:hover .btn-home,
.image-wrapper:hover .nav {
  opacity: 1;
}
.btn-home:hover, .btn-home:hover svg {
  color: #ED1C24!important;
  fill: #ED1C24
}

/* Home button */
.btn-home {
  display: inline-flex!important;
  align-items: center!important; 
  position:     absolute!important;
  top:          6px!important;
  left:         36px;
  background:   rgba(0, 0, 0, 0)!important;
  color:        #fff!important;
  text-decoration: none;
  font-size:    1.2rem;
  padding:      4px 8px!important;
  border-radius: 4px;
  z-index:      10!important;
}

/* Prev/Next arrows */
.nav {
  position:       absolute;
  top:            50%;
  transform:      translateY(-50%);
  background:     rgba(0, 0, 0, 0);
  border:         none;
  color:          #fff;
  font-size:      5rem;
  width:          48px;
  height:         48px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  cursor:         pointer;
  z-index:        10;
}
.nav.prev { left: 16px; }
.nav.next { right: 16px; }

/* 2) HEADER (row 2): title + stats */
.image-header {
  grid-row: 2 / 3;
  display:    grid;
  grid-template-columns: 2fr 1fr;
  align-items:           center;
  padding:    12px 16px;
  background: #000;
  color:      #F2F2F2;
}
.image-header .image-title {
  text-align: left;
  font-size:  1.6rem;
  font-weight: 700;
}
.image-stats {
  display: flex;
  align-items: center;       /* vertically center icon+text */
  justify-content: flex-end; /* keep it right-aligned in the header */
  font-size: 18px;
  color: #B1B1B9;
}

/* make each span an inline-flex so its children (svg + text) align nicely */
.image-stats span {
  display: inline-flex;
  align-items: center;
  margin-left: 1.5rem;         /* space between stats */
}
.image-stats span:first-child {
  margin-left: 0;
}

/* give a little breathing room between icon and number/text */
.image-stats span svg {
  margin-right: 0.2rem;
}

/* 3) TAGS (row 3): scrollable below */
.image-tags {
  grid-row: 3 / 4;
  padding:   12px 16px 0;
  background: #000;
  display:   flex;
  flex-wrap: wrap;
  gap:       0.5rem;
}
.tag-pill {
  margin-right: 4px;
    padding: 8px 12px;
    background: #181818;
    color: #fff;
    text-decoration: none;
    border: 1px solid #333;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 1.1rem;
}

/* RIGHT COLUMN (sidebar) */
.right-column {
  grid-column: 2 / 3;
  grid-row:    1 / 4;      /* span full height */
  background:  #000;
  padding:     16px;
}

/* Always 3 thumbs per row in sidebar */
.right-column .thumbnail-grid {
  display:           grid;
  grid-template-columns: repeat(3, 1fr);
  gap:               16px;
  margin:            16px 0;
}

/* Section headings */
.section {
  margin-top: 24px;
}
.section-header {
  display:        flex;
  justify-content: space-between;
  align-items:    center;
}
.section-title,
.section-suggest {
  font-size:   16px;
  font-weight: 700;
  color:       #C9CACF;
  text-align:  left;
}
.section-suggest {
  margin-bottom: 16px;
}

/* Tag‑heading links */
.tag-heading {
  text-decoration: none;
  font-size:      16px;
  font-weight:    700;
  color:          #F2F2F2;
}
.tag-heading:hover {
  color: #ED1C24!important;
}

/* Global thumbnail style for sidebar & other grids */
.thumbnail-grid .thumb {
  width:    92px;
  height:   92px;
  overflow: hidden;
}
.thumbnail-grid .thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  cursor:     pointer;
}

/* More Like This icon */
.morelike-icon {
  background: none;
  border:     none;
  padding:    0;
  cursor:     pointer;
}
.morelike-icon svg {
  width:      24px;
  height:     24px;
  fill:       #fff;
  transition: fill 0.2s;
}
.morelike-icon:hover svg {
  fill: #ED1C24;
}
.image-wrapper img {
  cursor: zoom-in;
}
/* lightbox overlay */
.lightbox {
  display:          none;
  position:         fixed;
  top:              0;
  left:             0;
  width:            100%;
  height:           100%;
  background:       rgba(0, 0, 0, 0.9);
  overflow:         auto;               /* ← make it scrollable */
  justify-content:  center;
  align-items:      center;
  -webkit-overflow-scrolling: touch;    /* smooth scrolling on iOS */
  z-index:          9999;
}

/* the image itself */
.lightbox img {
  display:      block;       /* so scrollbars appear when larger */
  margin:       auto;        /* center when fitting */
  object-fit:   contain;
  max-width:    90%;         /* fit-to-viewport on open */
  max-height:   90%;
  cursor:       zoom-in;     /* initial state */
}

/* when zoomed, swap cursor on the image */
.lightbox.zoomed img {
  cursor: zoom-out;
  max-width: none !important;
  max-height: none !important;
  width: auto !important;
  height: auto !important;
  object-fit: none !important;
}
/* 2) Allow scrolling from the top‑left instead of centering */
.lightbox.zoomed {
  justify-content: flex-start;
  align-items: flex-start;
}
#lightbox-close {
    display:        flex;
  justify-content: center;
  align-items:    center;
  padding:        0;       /* remove any default button padding */
  position: fixed;   /* fix to viewport */
  top:      24px;    /* or whatever offset you like */
  right:    24px;
  background: rgba(14, 13, 32,0.4);
  border:     none;
  color:      #fff;
  font-size:  1.8rem;
  cursor:     pointer;
  z-index:    1; /* ensure it floats above the image */
  width: 48px;
    height: 48px;
    border-radius: 48px;
}
  /* add to your CSS */
  #lightbox.zoom-in { cursor: zoom-in; }
  #lightbox.zoom-out { cursor: zoom-out; }
body.no-scroll {
  position: fixed;
  width:    100%;
  overflow: hidden;
}

/* Targets your various “title” classes */
.image-title::first-letter,
.section-title::first-letter,
.section-suggest::first-letter,
.tag-heading::first-letter {
  text-transform: uppercase;
}
/* End single-image.php CSS */

.custom-page-item {
  /* in case you’re using custom list‐style */
  list-style: none;
}
custom-page-item::marker {
  /* hide any default marker */
  content: none;
  /* in some browsers you may need: */
  display: none;
}
ul.pagination {
  display: flex;
  justify-content: center;
  padding: 0;            /* remove default UL padding */
  list-style: none;      /* remove default bullets */
}
/* =====================
   MOBILE REGRID OVERRIDES
   (≤768px)
   ===================== */
@media (max-width: 768px) {
  /* ——— GALLERY.PHP: one image per row ——— */
  #gallery .gallery-row {
    display: block;                 /* force one row per image */
  }
  #gallery .gallery-row .img-container {
    width: 100%   !important;
    height: auto  !important;
    margin: 16px 0 !important;
    display: block !important;
  }

  /* ——— make overlay static 3-row info block ——— */
  .img-container .overlay {
    position: static;
    opacity: 1 !important;
    pointer-events: none !important;
    background: none;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;  /* caption | (photo sits outside) | stats */
    padding: 8px 0;
    gap: 4px;
  }
  /* Row 1: caption spans full width */
  .img-container .overlay .caption {
    grid-row: 1;
    grid-column: 1 / -1;
    white-space: normal;
    overflow: visible;
    font-size: 1rem;
  }
  /* Row 2 is your <a><img>…</a> (no change needed) */

  /* Row 3: likes + views on the left */
  .img-container .overlay .likes,
  .img-container .overlay .views {
    grid-row: 3;
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  /* …and “more like this” button on the right */
  .img-container .overlay .morelikethis-btn {
    grid-row: 3;
    grid-column: 2;
    position: static;
    margin: 0;
    opacity: 1;
  }

  /* ——— SINGLE-IMAGE.PHP: stack columns & flow stats ——— */
  .single-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
  }
  .left-column {
    grid-row: 1;
    grid-column: 1;
    grid-template-rows: none;
  }
  .right-column {
    grid-row: 2;
    grid-column: 1;
  }

  /* move stats below title in .image-header */
  .image-header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    row-gap: 8px;
    padding: 12px 16px;
  }
  .image-header .image-title {
    grid-row: 1;
    text-align: left;
  }
  .image-header .image-stats {
    grid-row: 2;
    justify-content: flex-start;
  }
  .btn-home {
    opacity: 1 !important;
    pointer-events: auto !important;
    left: -6px!important;
  }
  .nav {
    display: none !important;
  }
  .lightbox img {
    touch-action: pinch-zoom;
  }
  .right-column {
    padding: 0 16px; 
  }

  /* 2) Define a 3-column grid with 16px gaps */
  .right-column .thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 16px 0;
  }

  /* 3) FORCE-OVERRIDE the 92×92 and switch to fluid squares */
  .right-column .thumbnail-grid .thumb {
    width: 100%     !important;  /* fill each grid cell */
    height: auto    !important;  /* cancel the fixed height */
    aspect-ratio: 1/1 !important;/* perfect square */
    overflow: hidden;
  }

  /* 4) Fill each square with the image */
  .right-column .thumbnail-grid .thumb img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
  }

  /*mobile gallery css */
    .img-container .overlay {
    display: none !important;
  }

  .mobile-card {
    background: #000;
    margin: 16px 0;
    padding: 12px;
    border-radius: 8px;
    color: #fff;
  }
  .mobile-caption {
    font-weight: 700;
    margin-bottom: 8px;
    text-align: left;
  }
  .mobile-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    margin-bottom: 8px;
  }
  .mobile-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mobile-stats span {
    font-size: 0.875rem;
    opacity: 0.8;
    margin-right: 8px;
  }
  .mobile-morelikethis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
  }
  .mobile-morelikethis:hover {
    background: rgba(255,255,255,0.1);
  }
  /* hide the original desktop image block */
  .img-container > a {
    display: none !important;
  }

  /* you already have this, but just to be sure: */
  .img-container .overlay {
    display: none !important;
  }

  /* show your mobile card: */
  .img-container .mobile-card {
    display: block !important;
    background: #000;
    margin: 0;           /* flush to viewport edges */
    padding: 0;          /* so image can hit edges */
    border-radius: 0;    /* no rounding on the card itself */
  }
  /* 2) force the image to break out full-width, no rounding */
  .img-container .mobile-card .mobile-image img {
    width: 100vw;               /* span the entire viewport */
    height: auto;
    object-fit: cover;
    border-radius: 0 !important;/* kill any inherited rounding */
    /* center it horizontally: */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    margin: 0;                  /* no extra gaps */
  }
  .img-container .mobile-card .mobile-caption,
  .img-container .mobile-card .mobile-footer {
    padding: 6px;
  }

  .img-container .mobile-card .morelikethis-btn,
  .img-container .mobile-card .morelikethis-btn svg {
    color: #fff !important;
    border-color: #fff !important;
    fill: #fff !important;
  }

  /* Prevent the hover‐red from kicking in */
  .img-container .mobile-card .morelikethis-btn:hover,
  .img-container .mobile-card .morelikethis-btn:hover svg {
    color: #fff !important;
    fill: #fff !important;
    background: rgba(255,255,255,0.1); /* optional: keep a subtle background hover */
  }

  .img-container .mobile-card {
    text-align: left;
  }

  /* caption: block, capped at 80vw, ellipsis, always left */
  .mobile-caption {
    display: block;         /* block-level, not inline-block */
    max-width: 80vw;        /* up to 80% of viewport */
    white-space: nowrap;    
    overflow: hidden;       
    text-overflow: ellipsis;
    text-align: left;       /* ensure its content is left-aligned */
    font-weight: 700;
    margin-bottom: 8px;
  }

  .pagination-wrapper .custom-pagination {
    display: none;
  }
  /* show our “More Results” button */
  .load-more-btn {
    width: 40vw;
    display: block;
    margin: 16px auto;
    padding: 12px 24px;
    background: #ED1C24;
    color: #fff;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  #load-more-btn:disabled {
    background-color: #333 !important;
    color:          #666 !important;
    cursor:         not-allowed !important;
    pointer-events: none !important;
  }

  /* sticky search and tag on mobile */
.header-photos {
  top: calc(env(safe-area-inset-top, 0px) + 50px);
  z-index: 899;
  background: #000;              /* match your page bg */
  padding-top: env(safe-area-inset-top);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: fixed;  /* “always sticky” fallback */
  left: 0;
  right: 0;
}

/* Optional inner spacing */
.search-wrapper {
  padding: 8px 0;
}
.tags-bar .tags-list-photo {
  margin: -15px 0px 0px 2px!important;
  padding-bottom: 8px!important;
}
.tags-bar .scroll-btn.scroll-left , .tags-bar .scroll-btn.scroll-right {
  height: calc(100% - 2px);
  margin-top: -6px;
}
.tags-bar {
  margin: 0;
}

/* push body content down so nothing hides behind notch/header */
body {
  margin: 0;
  padding-top: calc(env(safe-area-inset-top) + /* header height if needed */ 0px);
  background: #000;
}
  /* end mobile gallery css */
}

/* On desktop, hide the mobile card completely */
@media (min-width: 769px) {
  .img-container .mobile-card {
    display: none;
  }
  .load-more-btn {
    display: none;
  }
  .header-photos {
    margin-top: 16px;
  }
}