/* ---- GRID ---- */
.tdoc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 32px 32px;
  justify-items: center;
  align-items: start;
  padding: 20px 20px;
}

/* ---- TILE ---- */
.tdoc-door {
  perspective: 1000px;
  width: 440px;
  height: 320px;
  border-radius: 16px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  cursor: pointer;
  position: relative;
  transition: transform 0.3s ease;
}

/* Hover animation */
.tdoc-door:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

/* ---- FLIP INNER ---- */
.tdoc-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  border-radius: 16px;
}

.tdoc-door.flipped .tdoc-inner {
  transform: rotateY(180deg);
}

/* ---- FRONT & BACK ---- */
.tdoc-front,
.tdoc-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ---- FRONT ---- */
.tdoc-front {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2.6em;
  font-weight: bold;
  background-size: cover;
  background-position: center;
  background-color: transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  border-radius: 16px;
  transition: filter 0.3s ease;
}

/* ---- DAY NUMBER ---- */
.tdoc-front span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.6rem;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 2px 5px rgba(0,0,0,0.7);
  z-index: 3;
}

/* Hide the number when flipped (in case backface is glitchy) */
.tdoc-door.flipped .tdoc-front span {
  display: none !important;
}

/* ---- BACK ---- */
.tdoc-back {
  transform: rotateY(180deg);
  background: rgba(0,0,0,0.75); /* darker so white text reads well */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 16px;
  padding: 10px;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  color: #ffffff;
  font-size: 0.5rem;
}

/* Make ALL text on the back smaller + white */
.tdoc-back * {
  color: #ffffff !important;
  font-size: 0.5rem;
  line-height: 1.4;
}

/* ---- BACK IMAGE (full frame) ---- */
.tdoc-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  margin: 0;
  padding: 0;
}

/* ---- BUTTON ---- */
.tdoc-btn {
  display: inline-block;
  padding: 8px 16px;
  background: #c1272d;
  color: #fff !important;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.25s ease;
  margin-top: 12px;
}

.tdoc-btn:hover {
  background: #8b1a1f;
}

/* ---- IMAGE ON FRONT ---- */
.tdoc-door img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/* 🔒 Locked tiles — DO NOT greyscale the whole tile */
.tdoc-door.locked {
  filter: none !important;
}

/* 🖼 Greyscale ONLY the tile front (the background image) */
.tdoc-door.locked .tdoc-front {
  filter: grayscale(1) !important;
}

/* Keep the number BRIGHT and above the filter */
.tdoc-door.locked .tdoc-front span {
  filter: none !important;
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9) !important;
  z-index: 5;
}

/* Lock icon */
.tdoc-door.locked::after {
  content: "🔒";
  font-size: 1.6em;
  color: rgba(255, 255, 255, 1);
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 6;
}

/* Make the back image full-frame behind the content */
.tdoc-door .tdoc-back {
  position: relative;            /* anchor for absolutely positioned image */
  overflow: hidden;
}

.tdoc-door .tdoc-back img {
  position: absolute;
  inset: 0;                      /* top:0; right:0; bottom:0; left:0; */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;  /* full frame */
  border-radius: 16px;
  margin: 0;
  padding: 0;
  z-index: 0;
}

/* Make sure text + button sit on top of the image */
.tdoc-door .tdoc-back *:not(img) {
  position: relative;
  z-index: 1;
}