/* Last-resort CSS only. Each block names the control searched for and the
   controls.py query that came back empty. */

/* --- bento grid -------------------------------------------------------
   `python controls.py container grid` -> only _grid_row/_grid_column
   (widget placement inside a GRID container), no way to set
   display:grid + grid-template-areas on a flex container from the panel. */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(300px, 1fr));
}
.bento .t1 { grid-column: 1 / 3; grid-row: 1; }
.bento .t2 { grid-column: 3; grid-row: 1 / 3; }
.bento .t3 { grid-column: 1 / 3; grid-row: 2; }
@media (max-width: 859px) {
  .bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .bento .t1, .bento .t2, .bento .t3 { grid-column: 1; grid-row: auto; }
  .bento__tile { min-height: 280px; }
}

/* --- bento scrim ------------------------------------------------------
   `python controls.py container background_overlay_` -> the overlay group
   is a 2-stop gradient (color / color_b). The static uses a 5-stop
   linear-gradient, which no control can express; a pseudo-element is the
   only place to put it. */
.bento__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(28, 31, 26, 0.93) 0%,
    rgba(28, 31, 26, 0.80) 50%,
    rgba(28, 31, 26, 0.62) 72%,
    rgba(28, 31, 26, 0.24) 90%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.bento__tile > .e-con-inner,
.bento__tile > .elementor-widget { position: relative; z-index: 2; }
.bento__tile > .elementor-widget { z-index: 2; }

/* hover image zoom: the static scales the <img>; here the image is the
   container background, and `controls.py container background_size` offers
   only cover/contain/auto with no hover variant. */
.bento__tile { transition: background-size .5s ease, transform .4s ease, box-shadow .4s ease; }
.bento__tile:hover { background-size: 106% auto; }
.bento__tile:hover .bento__more { letter-spacing: .16em; }

/* --- intro media ------------------------------------------------------
   `python controls.py image aspect` -> nothing matched. No aspect-ratio
   control on the image widget, and the static sizes by ratio, not height. */
.intro-media img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 859px) {
  .intro-media img { aspect-ratio: 3 / 2; }
}
/* offset frame is a pseudo-element — no control exists for one. */
.intro-media { position: relative; }
.intro-media::after {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1.5px solid #c2735a;
  border-radius: 24px 24px 24px 4px;
  opacity: .55;
  pointer-events: none;
}

/* --- therapies.html --- */
/* aspect-ratio has no image control (controls.py image aspect -> no match) */
.t-media-wide img, .t-media-tall img { aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 860px) { .t-media-tall img { aspect-ratio: 4 / 5; } }
/* @keyframes have no control (controls.py image animation -> entrance only) */
@keyframes pan-drift { from { transform: translateX(0); } to { transform: translateX(-18%); } }
.pan-img img { animation: pan-drift 34s ease-in-out infinite alternate; }

/* .gallery__item — caption revealed by hovering the PARENT tile, and the
   image zoom that goes with it. No control models a parent-triggered child
   state: `controls.py container parent` -> only sticky_parent; and
   `controls.py heading opacity` -> motion_fx only, no hover opacity. */
.gal-item img { transition: transform .7s ease; }
.gal-item:hover img, .gal-item:focus-within img { transform: scale(1.06); }
.gal-cap {
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
  background: linear-gradient(to top, rgba(24,26,21,.72), rgba(24,26,21,.46) 45%, rgba(24,26,21,.14) 75%, rgba(24,26,21,0));
  pointer-events: none;
}
.gal-item:hover .gal-cap, .gal-item:focus-within .gal-cap { opacity: 1; transform: translateY(0); }

/* .contact-card:hover .contact-card__icon — the badge recolours when the
   PARENT card is hovered. No control models a parent-triggered child state:
   `controls.py container parent` -> only sticky_parent, and
   `controls.py icon hover` -> hover_primary_color etc. fire on the icon's
   own hover, not the card's. */
.cc-icon { transition: background-color .3s ease; }
.cc-icon i, .cc-icon svg { transition: color .3s ease, fill .3s ease; }
.contact-card:hover .cc-icon { background-color: #c2735a; }
.contact-card:hover .cc-icon i { color: #ffffff; }