/* Little Tyvy Montessori - "Visit Our Centre" split panel (details card + live map).
   Reuses .ty-sec/.ty-head/.ty-meta/.ty-btn/.ty-fill tokens from home.css and pages.css,
   which must load first. Namespaced under .ty-visit so it never touches the shared
   .ty-centre/.ty-map classes used elsewhere on the site (e.g. program page cross-links). */

.ty-visit {
  margin-top: 52px;
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 30px 70px -40px rgba(60, 58, 44, .38);
}

.ty-visit__card { display: flex; flex-direction: column; }
.ty-visit__media { position: relative; aspect-ratio: 16 / 11; }
.ty-visit__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ty-visit__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,18,10,0) 55%, rgba(20,18,10,.28) 100%);
}

.ty-visit__body { padding: 30px 32px 32px; display: flex; flex-direction: column; flex: 1; }
.ty-visit__body h3 { font-family: var(--serif); font-size: 24px; color: var(--ink); }

.ty-visit__actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.ty-visit__actions .ty-btn { flex: 1 1 auto; }

.ty-visit__map {
  position: relative;
  min-height: 340px;
  --map-pad: 16px;
  background: var(--cream-2);
}

/* iframe sits inset from the card edge, framed like a photo rather than
   bleeding edge-to-edge; grayscale + a warm cast pulls Google's default
   red/blue/yellow palette back in line with the site's cream/olive tones.
   Full color returns on hover/focus as a hint the map is interactive. */
.ty-visit__map iframe {
  position: absolute;
  inset: var(--map-pad);
  border: 0;
  border-radius: 12px;
  filter: grayscale(82%) sepia(10%) saturate(125%) hue-rotate(-6deg) brightness(1.04) contrast(.97);
  transition: filter .45s ease;
}
.ty-visit__map:hover iframe,
.ty-visit__map:focus-within iframe {
  filter: grayscale(25%) sepia(4%) saturate(112%) brightness(1.01) contrast(1);
}

/* hairline border + soft lifted shadow around the framed map, matching the
   card / elevation language used elsewhere on the site (.ty-card, .ty-tm) */
.ty-visit__map::after {
  content: '';
  position: absolute;
  inset: var(--map-pad);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(44, 44, 39, .1), 0 18px 40px -22px rgba(60, 58, 44, .45);
  pointer-events: none;
}

.ty-visit__pin {
  position: absolute;
  top: calc(var(--map-pad, 16px) + 14px);
  left: calc(var(--map-pad, 16px) + 14px);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px 8px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 10px 26px -14px rgba(60, 58, 44, .5);
}
.ty-visit__pin svg { width: 15px; height: 15px; color: var(--green); flex: none; }

@media (max-width: 900px) {
  .ty-visit { grid-template-columns: 1fr; }
  .ty-visit__map { min-height: 300px; order: -1; --map-pad: 12px; }
}
@media (max-width: 640px) {
  .ty-visit__body { padding: 26px 22px 28px; }
  .ty-visit__actions { flex-direction: column; }
}

/* Empty-state shown in place of the live map while the centre's address is still a
   placeholder ([Street address, city, postcode]) — avoids handing Google an unresolvable
   query, which otherwise renders an unrelated, zoomed-out corner of the world map.
   Fills the exact same framed area as the iframe, so the layout never shifts. */
.ty-visit__mapEmpty {
  position: absolute;
  inset: var(--map-pad, 16px);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 24px;
  background: repeating-linear-gradient(135deg, rgba(197, 155, 92, .07) 0 10px, transparent 10px 20px), var(--cream-2);
  border: 1.5px dashed var(--line-2);
}
.ty-visit__mapEmpty svg { width: 30px; height: 30px; color: var(--gold); }
.ty-visit__mapEmpty strong { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ty-visit__mapEmpty span { max-width: 240px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }