/* Gallery (Bootstrap structure + Whisker Witch vibe)
   This file assumes Bootstrap 5 is loaded on gallery.php
*/

/* Apply gallery styles even if body doesn't get the tarot-gallery class */
.shop-layout .tarot-shell{
  max-width: 1120px;
}

/* Bootstrap card theme */
.shop-layout .tarot-card{
  background: rgba(27, 14, 40, 0.96);
  border-radius: 14px;
  border: 1px solid rgba(214,171,255,0.7);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.45),
    0 0 18px rgba(190,140,255,0.55);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.shop-layout .tarot-card:hover{
  transform: translateY(-4px);
  background: rgba(35, 18, 60, 0.98);
  box-shadow:
    0 14px 28px rgba(0,0,0,0.6),
    0 0 24px rgba(215,170,255,0.9);
}

/* FORCE a consistent image tile (this is the key for your screenshot) */
.shop-layout .tarot-card-media{
  position: relative;
  overflow: hidden;
  height: 260px;     /* set the tile height here */
  background: radial-gradient(circle at 50% 0%, #4a2c6f 0, #14091f 55%);
}

.shop-layout .tarot-card-media .tarot-card-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
background: radial-gradient(circle at 50% 0%, #4a2c6f 0, #14091f 55%);
  display: block;
  transition: transform 0.3s ease;
}

.shop-layout .tarot-card:hover .tarot-card-img{
  transform: scale(1.04);
}

body.tarot-gallery .tarot-shell{
  max-width: 1120px;
}

/* Keep the overall magical page layout consistent */
body.tarot-gallery .page-shell{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.tarot-gallery .parchment-wrapper{
  position: relative;
  flex: 1 0 auto;
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 140px !important; /* room for tear + bottom rod */
  margin-bottom: 40px !important;   /* gap before footer */
  overflow: visible !important;     /* don't clip torn edge */
  transform: none !important;       /* avoid stacking quirks */
}

body.tarot-gallery .parchment{
  position: absolute;
  inset: 0;
  height: 100%;
}

body.tarot-gallery .page-content.tarot-page{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  justify-content: flex-start;
  align-items: stretch;
  padding: 2.4rem 2rem 3.2rem;
}

@media (max-width: 640px){
  body.tarot-gallery .page-content.tarot-page{
    padding: 2rem 1.4rem 2.6rem;
  }
}

body.tarot-gallery .scroll-cap--bottom{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -18px !important;
}

/* Chapter heading (match your other pages) */
body.tarot-gallery .chapter-heading{ text-align:center; margin-bottom: 1.4rem; }
body.tarot-gallery .chapter-label{
  font-family:'Cinzel', serif;
  font-size:0.85rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#7b5532;
  margin-bottom:0.35rem;
}
body.tarot-gallery .chapter-title{
  font-family:'Cinzel', serif;
  font-size:1.85rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#4b2c16;
  text-shadow: 0 0 6px rgba(255,248,205,0.9), 0 0 18px rgba(223,188,115,0.85);
  margin:0;
}
body.tarot-gallery .chapter-subtitle{
  margin-top:0.5rem;
  font-size:0.98rem;
  color:#5c3921;
  font-style:italic;
  font-family:'Crimson Pro', serif;
}
body.tarot-gallery .chapter-divider{
  margin: 1.1rem auto 1.6rem;
  width:60%;
  height:1px;
  background: linear-gradient(to right,
    rgba(73,47,20,0),
    rgba(214,171,89,0.9),
    rgba(73,47,20,0));
}

body.tarot-gallery .tarot-intro{
  text-align:center;
  margin-bottom: 0.6rem;
  color:#5b3a29;
  font-size: 0.98rem;
  font-family:'Crimson Pro', serif;
}
body.tarot-gallery .tarot-subcopy{
  text-align:center;
  margin-bottom: 1.4rem;
  font-size: 0.95rem;
  color:#7b6b5d;
  font-family:'Crimson Pro', serif;
}

/* Toolbar */
body.tarot-gallery .tarot-toolbar-label{
  font-family:'Cinzel', serif;
  letter-spacing:0.12em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.78rem;
  color:#5b3a29;
}
body.tarot-gallery .tarot-toolbar-select{
  border-radius: 999px;
  border: 1px solid rgba(190,150,90,0.9);
  background: rgba(255,252,240,0.96);
  font-family:'Crimson Pro', serif;
  color:#4b2c16;
  min-width: 180px;
}

/* Bootstrap card theme */
body.tarot-gallery .tarot-card{
  background: rgba(27, 14, 40, 0.96);
  border-radius: 14px;
  border: 1px solid rgba(214,171,255,0.7);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.45),
    0 0 18px rgba(190,140,255,0.55);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body.tarot-gallery .tarot-card:hover{
  transform: translateY(-4px);
  background: rgba(35, 18, 60, 0.98);
  box-shadow:
    0 14px 28px rgba(0,0,0,0.6),
    0 0 24px rgba(215,170,255,0.9);
}

/* Image area */
body.tarot-gallery .tarot-card-media{
  position: relative;
  background: radial-gradient(circle at 50% 0%, #4a2c6f 0, #14091f 55%);
  overflow: hidden;
}

body.tarot-gallery .tarot-card-img{
  width: 100%;
  height: 260px;         /* consistent tile */
  object-fit: contain;
background: radial-gradient(circle at 50% 0%, #4a2c6f 0, #14091f 55%);
  display: block;
  transition: transform 0.3s ease;
}

body.tarot-gallery .tarot-card:hover .tarot-card-img{
  transform: scale(1.04);
}

body.tarot-gallery .tarot-card-img--empty{
  color: #e2d0ff;
  font-family:'Cinzel', serif;
  letter-spacing:0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

/* Text */
body.tarot-gallery .tarot-card-title{
  font-family:'Cinzel', serif;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fbe8ff;
}

body.tarot-gallery .tarot-card-subtitle{
  font-size: 0.82rem;
  color: #d3c1ff;
  font-style: italic;
  font-family:'Crimson Pro', serif;
}

body.tarot-gallery .tarot-card-meaning{
  font-size: 0.9rem;
  color: #f9edf9;
  line-height: 1.5;
  font-family:'Crimson Pro', serif;

  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.tarot-gallery .tarot-card-footer{
  background: rgba(255,255,255,0.06);
  border-top: 1px solid rgba(255,255,255,0.10);
}

/* “Full Reading” button (Bootstrap button but themed) */
body.tarot-gallery .tarot-btn-reading{
  border-radius: 999px;
  border: 1px solid rgba(233,195,120,0.95);
  background: linear-gradient(to bottom, #fbe4b3, #d8b36b);
  color: #3c2210;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.5),
    0 0 10px rgba(224,188,115,0.9);
  white-space: nowrap;
}

body.tarot-gallery .tarot-btn-reading:hover{
  transform: translateY(-1px);
  background: linear-gradient(to bottom, #ffeaba, #deb873);
  box-shadow:
    0 7px 16px rgba(0,0,0,0.7),
    0 0 16px rgba(255,228,145,0.95);
}

/* Lightbox link */
body.tarot-gallery .tarot-view-large{
  text-decoration: none;
  font-family:'Crimson Pro', serif;
  font-size: 0.9rem;
  color: #e9dafc;
}

body.tarot-gallery .tarot-view-large:hover{
  text-decoration: underline;
  color: #ffffff;
}

body.tarot-gallery .tarot-card-footnote{
  font-family:'Crimson Pro', serif;
  font-size: 0.86rem;
  color: #d4c2ff;
  font-style: italic;
}

/* Footer below parchment (force normal flow) */
body.tarot-gallery .site-footer{
  position: static !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;

  display: flex !important;
  width: min(1400px, 100vw - 3rem) !important;
  margin: 0 auto 2rem !important;
  padding: 1.5rem 0 !important;

  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  pointer-events: auto !important;
  z-index: auto !important;
}
/* FORCE tarot images to behave as tiles, even if other CSS overrides */
body.tarot-gallery .tarot-card-media {
  height: 260px;
}

body.tarot-gallery .tarot-card-media .tarot-card-img {
  height: 100% !important;
  width: 100% !important;
  object-fit: contain;
background: radial-gradient(circle at 50% 0%, #4a2c6f 0, #14091f 55%);
  display: block;
}
/* Force multi-card grid, independent of Bootstrap column quirks */
.shop-layout .tarot-grid{
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: stretch;
}

/* Neutralize Bootstrap row/col behavior inside this grid */
.shop-layout .tarot-grid > [class*="col-"]{
  width: auto !important;
  max-width: none !important;
  flex: initial !important;
  padding: 0 !important;
}

/* Optional: slightly smaller cards on small screens */
@media (max-width: 520px){
  .shop-layout .tarot-grid{
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

/* Optional: make image tile height scale with card width */
.shop-layout .tarot-card-media{
  height: clamp(180px, 22vw, 260px);
}
.shop-layout .tarot-grid{ grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1200px){ .shop-layout .tarot-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px){  .shop-layout .tarot-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){  .shop-layout .tarot-grid{ grid-template-columns: 1fr; } }
.shop-layout .tarot-card-media .tarot-card-img{
  object-fit: contain;
}