/* ========== Polaroid Album Card ========== */
:root{
  --polaroid-border: #fff;           /* white frame */
  --polaroid-shadow: 0 10px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
  --polaroid-bg: #fff;
  --caption-color: #222;
  --tape: #ffd54d;                   /* yellow masking tape */
  --tape-shadow: 0 4px 8px rgba(0,0,0,.15);
}

/* Responsive grid (no Bootstrap required) */
.album-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
}

/* Anchor wrapper so the whole card is clickable */
.polaroid{
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  transform-origin: center 20px; /* rotate around near top like real polaroids */
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* Subtle staggered angles */
.tilt-left { transform: rotate(-3deg); }
.tilt-right{ transform: rotate(3deg); }
.tilt-none { transform: rotate(0deg); }

/* “Polaroid” body */
.polaroid-inner{
  background: var(--polaroid-bg);
  border: 8px solid var(--polaroid-border); /* the white frame */
  border-bottom-width: 28px;                 /* thicker bottom lip */
  border-radius: 6px;
  box-shadow: var(--polaroid-shadow);
  overflow: hidden;
}

/* The photo inside */
.polaroid-photo{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;          /* square image area, adjust as you like */
  object-fit: cover;
  background: #111;             /* dark fallback if image missing */
}

/* Caption printed on the bottom lip */
.caption{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;                  /* sits on the thicker bottom border */
  text-align: center;
  font-size: .92rem;
  font-weight: 600;
  color: var(--caption-color);
  pointer-events: none;         /* clicking stays on the card link */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover: lift & focus */
.polaroid:hover{
  transform: translateY(-4px) scale(1.02) rotate(0deg);
  filter: saturate(1.03);
}

/* ========== Yellow masking tape ========== */
/* Top-left & top-right tapes use pseudo-elements so you only add one extra node for bottom tape */
/* .polaroid::before,
.polaroid::after{
  content: "";
  position: absolute;
  top: -10px;
  width: 56px;
  height: 18px;
  background: var(--tape);
  box-shadow: var(--tape-shadow);
  transform: rotate(-10deg);
  border-radius: 2px;
  opacity: .96;
  z-index: 2;
}
.polaroid::before{
  left: 12px;
}
.polaroid::after{
  right: 12px;
  transform: rotate(10deg);
} */

/* .polaroid::before{
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  width: 70px;
  height: 18px;
  background: var(--tape);
  box-shadow: var(--tape-shadow);
  border-radius: 2px;
  opacity: .96;
  z-index: 2;
} */

.tape-top {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--tape);
  box-shadow: var(--tape-shadow);
  border-radius: 2px;
  padding: 2px 10px;

  font-family: 'Permanent Marker', cursive;

  font-size: 0.8rem;
  font-weight: 400;
  color: #000;
  text-align: center;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.96;
  z-index: 3;
}



/* Bottom tape is a real element so it can sit below the card visually if desired */
.tape-bottom{
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  bottom: -12px;
  width: 70px;
  height: 18px;
  background: var(--tape);
  box-shadow: var(--tape-shadow);
  border-radius: 2px;
  opacity: .96;
  z-index: 0; /* behind the card’s shadow edge */
}

/* Accessibility: focus ring on the whole card */
.polaroid:focus{
  outline: 3px solid rgba(0, 123, 255, .6);
  outline-offset: 4px;
}

/* Small screens tweaks */
@media (max-width: 420px){
  .album-grid{ gap: 14px; }
  .polaroid::before,
  .polaroid::after{ width: 48px; height: 16px; top: -8px; }
  .tape-bottom{ width: 60px; height: 16px; bottom: -10px; }
}