/* ==========================================================================
   F1 · taller.html — page-only styles
   Unlayered on purpose: always wins over @layer f1.* (see DESIGN-SYSTEM.md §0).
   ========================================================================== */

/* ---------- 1. hero ---------- */
/* index strip = shared .page-index (f1.css); page only widens the copy column */
.taller-hero .page-hero__content { max-width: 64rem; }

/* ---------- 2. intro ---------- */
.taller-intro .section-head { gap: 1.25rem; }
/* .link--touch pulls its 44px hit-area padding back with negative margins: keep that pull-back */
.taller-intro__link { margin-top: calc(.5rem - var(--link-pad, 0px)); font-weight: 500; }
.taller-intro__stats { margin-top: var(--sp-2xl); }
@media (min-width: 992px) {
  .taller-intro .checklist { padding-bottom: .25rem; }
}

/* ---------- 3. gallery: editorial bento (12-col, spans set per item) ---------- */
.taller-gallery__hint {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  justify-self: end;
  padding-bottom: .5rem;
}
.taller-gallery__hint .icon { color: var(--brand); }
@media (max-width: 991px) {
  .taller-gallery__hint { justify-self: start; padding-bottom: 0; }
}

.bento {
  --bento-gap: clamp(.5rem, .25rem + .8vw, 1rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(5.5rem, 11.5vw, 10.5rem);
  gap: var(--bento-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.bento__item { min-width: 0; grid-column: span var(--c, 4); grid-row: span var(--r, 2); }
.bento__item--8x3 { --c: 8; --r: 3; }
.bento__item--4x3 { --c: 4; --r: 3; }
.bento__item--3x2 { --c: 3; --r: 2; }
.bento__item--6x2 { --c: 6; --r: 2; }
.bento__item--4x2 { --c: 4; --r: 2; }
.bento__item--5x2 { --c: 5; --r: 2; }
@media (min-width: 768px) {
  /* narrow crop of a wide photo: keep the storefront sign in frame */
  .bento__item--focus-right .thumb__media img { object-position: 100% 50%; }
}

.bento .thumb { height: 100%; }
.bento .thumb__media { height: 100%; }
.bento .thumb__media img { filter: grayscale(.15) contrast(1.04); }
.bento .thumb__caption { padding: .375rem .625rem; }
.bento .thumb__media::after {
  /* subtle bottom grade so the mono caption always sits on a dark base */
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 35%;
  background: linear-gradient(0deg, rgba(0, 0, 0, .35), transparent);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .bento .thumb:hover .thumb__media img { filter: none; }
  .bento .thumb:hover .thumb__caption { background: var(--red-500); }
}
.bento .thumb:focus-visible .thumb__caption { background: var(--red-500); }
.bento .thumb__caption { transition: background-color .3s ease; }

@media (max-width: 767px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  .bento__item { grid-column: span 1; grid-row: auto; }
  .bento__item--wide { grid-column: span 2; }
  .bento .thumb__media { height: auto; aspect-ratio: 4 / 5; }
  .bento__item--wide .thumb__media { aspect-ratio: 16 / 10; }
}

/* ---------- 4. slider section ---------- */
.taller-marcas .section-head--split { align-items: end; }

/* ---------- 5. visitanos ---------- */
/* "Lomas del Mirador," is bound with   (≈7.4em wide): on small phones step the size down so it fits the column */
@media (max-width: 479px) {
  .taller-visit .section-head .h2 { font-size: min(var(--fs-h2), calc((100vw - 2.5rem) / 7.6)); }
}
.taller-visit__grid { --split-gap: var(--sp-2xl); }
.taller-visit__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-l);
  padding-top: .25rem;
}
.taller-visit__list { gap: 0; }
.taller-visit__list > .info-list__item {
  padding-block: 1.25rem;
  border-top: 1px solid var(--line);
}
.taller-visit__list > .info-list__item:first-child { padding-top: 0; border-top: 0; }
.taller-visit__list .info-list__value { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.35; }
.taller-visit__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
  text-underline-offset: .28em;
  transition: text-decoration-color .3s ease, color .3s ease;
}
.taller-visit__link:focus-visible { text-decoration-color: var(--brand); }
@media (hover: hover) and (pointer: fine) {
  .taller-visit__link:hover { color: var(--brand); text-decoration-color: var(--brand); }
}
.taller-visit__list .mono.info-list__value { letter-spacing: .02em; }

/* brackets wrapper (DESIGN-SYSTEM §2.24) stretches with the info column; the frame fills it */
.taller-visit__map { align-self: stretch; margin: .75rem; }
.taller-visit__map .map-frame { --map-min-h: 26rem; height: 100%; }
@media (max-width: 991px) {
  .taller-visit__map { margin: .75rem 0; }
}
@media (max-width: 767px) {
  .taller-visit__map .map-frame { --map-min-h: 22rem; }
}