/* ============================================================
   OFFICE GALLERY — Bento Collage
   Version 1.0.7
   ============================================================ */

/* --- Section wrapper --- */
.office-gallery {
  width: 100%;
  padding: 30px 20px;
  background: #f8f9fa;
  box-sizing: border-box;
}

.office-gallery__container {
  max-width: 1280px;
  margin: 0 auto;
}

.office-gallery__title {
  text-align: center;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  margin: 0 0 8px;
  color: #111827;
  line-height: 1.2;
}

.office-gallery__subtitle {
  text-align: center;
  font-size: 15px;
  color: #6b7280;
  margin: 0 0 16px;
  line-height: 1.5;
}

/* --- GRID — Desktop ≥1024px --- */
.office-gallery__grid {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(3, clamp(120px, calc((100vh - 180px) / 3), 210px));
  grid-template-areas:
    "entrance  entrance  entrance  reception  reception  classroom  classroom  classroom"
    "entrance  entrance  entrance  waiting    waiting    classroom  classroom  classroom"
    "corridor  corridor  consult   consult    conference conference recep-alt  recep-alt";
  gap: 10px;
  width: 100%;
}

/* --- Tiles --- */
.office-gallery__tile {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.10) !important;
  background: #e5e7eb !important;
  text-decoration: none !important;
  cursor: zoom-in !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Grid area assignments */
.office-gallery__tile--entrance   { grid-area: entrance; }
.office-gallery__tile--reception  { grid-area: reception; }
.office-gallery__tile--classroom  { grid-area: classroom; }
.office-gallery__tile--waiting    { grid-area: waiting; }
.office-gallery__tile--consult    { grid-area: consult; }
.office-gallery__tile--corridor   { grid-area: corridor; }
.office-gallery__tile--conference { grid-area: conference; }
.office-gallery__tile--recep-alt  { grid-area: recep-alt; }

/* --- Images — must fill tile exactly --- */
/* These !important flags defeat WordPress themes' default:
   img { height: auto; max-width: 100%; }
   which BREAKS object-fit:cover by collapsing height to auto */
.office-gallery__tile img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform 500ms ease-out !important;
}

/* --- Per-tile focal point overrides for bottom-row images --- */
.office-gallery__tile--corridor img {
  object-position: center 30% !important;
}
.office-gallery__tile--conference img {
  object-position: center center !important;
  filter: contrast(1.08) saturate(1.12) !important;
}
.office-gallery__tile--recep-alt img {
  object-position: center 20% !important;
  filter: contrast(1.06) saturate(1.08) !important;
}

/* --- Hover zoom (desktop only) --- */
@media (hover: hover) {
  .office-gallery__tile:hover img {
    transform: scale(1.06) !important;
  }
  .office-gallery__tile:hover .office-gallery__caption {
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0) 75%);
  }
}

/* --- Caption overlay --- */
.office-gallery__caption {
  position: absolute !important;
  inset: auto 0 0 0 !important;
  padding: 12px 14px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0) 75%) !important;
  pointer-events: none !important;
  letter-spacing: 0.01em !important;
  display: block !important;
}

/* ============================================================
   TABLET — 640px to 1023px
   ============================================================ */
@media (min-width: 640px) and (max-width: 1023px) {
  .office-gallery__grid {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: 180px 180px 180px 180px !important;
    grid-template-areas:
      "entrance   entrance   reception   reception"
      "entrance   entrance   classroom   classroom"
      "waiting    consult    classroom   classroom"
      "corridor   conference recep-alt   recep-alt" !important;
  }
}

/* ============================================================
   MOBILE — below 640px
   ============================================================ */
@media (max-width: 639px) {
  .office-gallery {
    padding: 36px 12px;
  }

  .office-gallery__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-rows: 150px !important;
    grid-template-areas: none !important;
    gap: 8px !important;
  }

  .office-gallery__tile--entrance,
  .office-gallery__tile--reception,
  .office-gallery__tile--classroom,
  .office-gallery__tile--waiting,
  .office-gallery__tile--consult,
  .office-gallery__tile--corridor,
  .office-gallery__tile--conference,
  .office-gallery__tile--recep-alt {
    grid-area: auto !important;
  }

  .office-gallery__caption {
    position: static !important;
    background: none !important;
    color: #374151 !important;
    font-size: 12px !important;
    padding: 6px 2px !important;
    display: block !important;
  }
}