/* =========================
   Vars
========================= */
:root{
  --tile-width: 175px;
  --tile-aspect: 4 / 2.4;
  --grid-gap: 20px;
  --grid-pad-x: 250px;
  --grid-max-w: 50%;
  --elev: 0 0 8px rgba(0,0,0,.4);
  --elev-hover: 0 0 12px rgba(0,0,0,.6);
  --t-fast: .2s;
  --t-med: .5s;                /* expansion speed */
}

/* =========================
   Layout wrappers
========================= */
.landing-wrapper{ display:flex; justify-content:center; width:100%; }
.landing-content{ display:inline-block; text-align:left; }
h1{ text-align:center; }

.landing-expandable-wrapper{
  position:relative;
  overflow:visible;            /* let button overlap if needed */
}

/* =========================
   Grid (collapsed/expanded)
========================= */
.landing-card-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--grid-gap);
  padding-inline:var(--grid-pad-x);
  max-width:var(--grid-max-w);
  overflow:hidden;
  max-height:118px;            /* collapsed: ~1 row */
  transition: max-height 1s cubic-bezier(0.5, 0, 0.5, 1);  /* <— expansion speed */
}
.landing-card-grid.expanded{ max-height:2000px; }

/* =========================
   Cards
========================= */
.landing-card{
  width:var(--tile-width);
  flex:0 1 auto;
  text-align:center;
  background:#111;
  border-radius:8px;
  overflow:hidden;
  font-family: "Beleren Bold", "Trebuchet MS";
  box-shadow:var(--elev);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
}

.landing-card.full-size {
  width: 400px;
  height: auto;
}

.landing-card .image-placeholder img:hover {
  transform: scale(1.03);
}

.landing-card a{ text-decoration:none; color:inherit; }

/* Image */
.image-placeholder{
  position:relative;
  width:100%;
  aspect-ratio:var(--tile-aspect);
  overflow:hidden;
  background:#222;
}

.image-placeholder img{
  width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}

/* Title overlay */
.landing-card-title{
  position:absolute; left:0; right:0; bottom:6px; margin:0 auto;
  color:#fff; font-size:1rem; font-weight:700; text-align:center;
  pointer-events:none; padding:0 6px; word-wrap:break-word;
  text-shadow:-1.2px -1.2px 0 #000, 1.2px -1.2px 0 #000,
              -1.2px  1.2px 0 #000, 1.2px  1.2px 0 #000;
}

.landing-card-title.full-size{
  position:absolute; left:0; right:0; bottom:24px; margin:0 auto;
  color:#fff; font-size:2.8rem; font-weight:700; text-align:center;
  pointer-events:none; padding:0 6px; word-wrap:break-word;
  text-shadow:-1.2px -1.2px 0 #000, 1.2px -1.2px 0 #000,
              -1.2px  1.2px 0 #000, 1.2px  1.2px 0 #000;
}

.show-more-overlay {
  font-family: "Beleren Bold", "Georgia", "Times New Roman", serif;
}

.landing-card-title img{
  display:inline !important; height:20px !important; width:auto !important;
  vertical-align:middle;
}

/* =========================
   Toggle button (standalone or inside .toggle-row)
========================= */
.toggle-grid-button{
  width:var(--tile-width);      /* match card width */
  padding:10px 0;
  margin:6px auto 0x;
  background:rgba(34,34,34,.72);
  color:#eee; border:1px solid #bbb; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:.85; backdrop-filter:blur(2px);
  box-shadow:var(--elev);
  transition:opacity .25s, background-color .25s, transform var(--t-fast), box-shadow var(--t-fast);
  transform:translateY(-20px);  /* sit on the tiles a bit */
}

.toggle-grid-button:hover,
.toggle-grid-button:focus-visible{
  background:#222; opacity:1; box-shadow:var(--elev-hover);
  transform:translateY(-19px);
}

/* Optional: rails extending from sides of the button without going under it */
#toggleLandingGrid::before,
#toggleLandingGrid::after{
  content:""; position:absolute; top:50%; height:1px; background:#444;
  transform:translateY(-50%); pointer-events:none;
  width:385px;                 /* or replace with a flex .toggle-row variant */
}

#toggleLandingGrid::before{ right:100%; margin-right:8px; }
#toggleLandingGrid::after { left:100%;  margin-left:8px;  }
#toggleLandingGrid:hover::before,
#toggleLandingGrid:hover::after{ background:#888; }

/* =========================
   Responsive
========================= */
@media (max-width:768px){
  .landing-content h1{ font-size:1.1rem; }
  .landing-card{ width:45%; }
  .landing-card-grid{
    gap:15px;
    padding-inline:5px;
    max-width:100%;
  }

  .card-grid .show-more-tile .show-more-overlay {
    font-size: 1.1rem !important;
    padding-left: 5px;
    padding-right: 5px;
  }

  .toggle-grid-button {
    opacity: 1;
  }

  #toggleLandingGrid::before,
  #toggleLandingGrid::after{
    content:""; position:absolute; top:50%; height:1px; background:#444;
    transform:translateY(-50%); pointer-events:none;
    width:75px;
}

  .landing-card .caption em { 
    font-size:.7rem; color:#ccc;
  }
}

/* Show More "card" */
.show-more-tile .card-front { position: relative; }

.show-more-tile .show-more-card { display: block; }

.show-more-tile .card-image {
  display: block;
  width: 100%;
  height: auto;
  filter: blur(1.2px) brightness(0.98);
  transform: scale(1.01);     /* tiny zoom so blur doesn’t show edges */
}

.show-more-tile .show-more-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  background: rgba(0,0,0,0.35);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  border-radius: inherit;      /* follow card-image rounding */
  pointer-events: none;        /* let anchor receive the click */
}

/*.show-more-art:hover { 
  transform:scale(1.02);
}*/


/* ADded fpr black mode */
/*.card-grid .show-more-tile.show-more--black .card-image {
  display: block;
  width: 100%;
  height: auto;
  /* turn the image into a pure black block while keeping intrinsic sizing */
  /*filter: brightness(0) saturate(100%);
  transform: none;             /* override any previous zoom */
  /*background: #000;            /* extra safety if filter isn't supported */
/*}

/* Keep the overlay behavior the same */
.card-grid .show-more-tile .show-more-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.8rem;
  color: #fff;
  background: rgba(0,0,0,0.35);
  text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
  border-radius: inherit;
  pointer-events: none;
}

.card-grid .show-more-tile .card-front { position: relative; }
.card-grid .show-more-tile .show-more-card { display: block; }

.show-more-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
  cursor: pointer;
}

.show-more-card img.show-more-art {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* crop instead of stretch */
  object-position: center;   /* keep center visible */
  display: block;
}

.show-more-card .show-more-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  text-align: center;
  font-weight: bold;
  font-size: 2rem;
  color: white;
  background: rgba(0, 0, 0, 0.6);
}