/* contacto.css — ported from reference/css/pages/contacto.css. Loaded with the page-contacto template.
   The page has no form by product decision: channel links, a map and the studio card.
   DOM difference: core/buttons wraps each link in div.wp-block-buttons > div.wp-block-button. The reference's
   flex rules (.lm-map__btn, .lm-studio__cta) need the link to be the flex item, so those wrappers are
   display: contents here; every other declaration is the reference's. */

/* ---------- channels ---------- */
.lm-channels { padding-top: var(--wp--preset--spacing--30); }
/* Equal rows: cards keep one height even when a subtitle wraps to two lines (tablet / mobile). */
.lm-channels__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--wp--preset--spacing--50); }
.lm-channels__item { display: flex; min-width: 0; }

/* One card per channel. --lm-channel-color drives the icon, its tinted circle and the hover border. */
.lm-channel {
  --lm-channel-color: var(--wp--preset--color--accent);
  display: flex; align-items: center; gap: var(--wp--preset--spacing--40);
  flex: 1; min-width: 0;
  padding: var(--wp--preset--spacing--60);
  border: var(--wp--custom--border--control) solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--lg);
  transition: border-color var(--wp--custom--motion--fast) ease, transform var(--wp--custom--motion--fast) ease, box-shadow var(--wp--custom--motion--fast) ease;
}
.lm-channel--whatsapp       { --lm-channel-color: var(--wp--custom--brand--whatsapp); }
.lm-channel--instagram      { --lm-channel-color: var(--wp--preset--color--accent); }
.lm-channel--google-reviews { --lm-channel-color: var(--wp--custom--brand--google-yellow); }
.lm-channel--tiktok         { --lm-channel-color: var(--wp--preset--color--contrast); }
.lm-channel--waze           { --lm-channel-color: var(--wp--custom--brand--waze); }
.lm-channel--google-maps    { --lm-channel-color: var(--wp--preset--color--accent); }

.lm-channel__icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: var(--wp--custom--radius--pill);
  background: color-mix(in srgb, var(--lm-channel-color) 14%, transparent);
  color: var(--lm-channel-color);
  transition: transform var(--wp--custom--motion--fast) ease;
}
.lm-channel__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lm-channel__name {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--large); font-weight: var(--wp--custom--font-weight--semibold);
  line-height: var(--wp--custom--line-height--snug);
}
.lm-channel__sub { margin-top: 2px; text-wrap: pretty; font-size: var(--wp--preset--font-size--small); line-height: var(--wp--custom--line-height--snug); color: var(--wp--preset--color--muted); }
.lm-channel__arrow {
  color: var(--wp--preset--color--faint);
  transition: transform var(--wp--custom--motion--fast) ease, color var(--wp--custom--motion--fast) ease;
}

.lm-channel:hover, .lm-channel:focus-visible {
  border-color: var(--lm-channel-color);
  transform: translateY(-2px);
  box-shadow: var(--wp--preset--shadow--pop);
}
.lm-channel:focus-visible { border-radius: var(--wp--custom--radius--lg); }
.lm-channel:hover .lm-channel__icon, .lm-channel:focus-visible .lm-channel__icon { transform: scale(1.06); }
.lm-channel:hover .lm-channel__arrow, .lm-channel:focus-visible .lm-channel__arrow { transform: translateX(4px); color: var(--lm-channel-color); }

@media (max-width: 1023px) {
  .lm-channels__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); }
}
@media (max-width: 639px) {
  .lm-channels { padding-top: 0; }
  .lm-channels__grid { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--30); }
  .lm-channel { padding: var(--wp--preset--spacing--50); }
  .lm-channel__icon { width: 48px; height: 48px; }
}

/* ---------- location: map + studio card ---------- */
.lm-location { padding-top: var(--wp--preset--spacing--100); padding-bottom: var(--wp--preset--spacing--130); }
.lm-location__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; gap: var(--wp--preset--spacing--70); }

/* The embed fills the box; the filter turns Google's light tiles into something that sits on the dark theme. */
.lm-map {
  position: relative; min-height: 420px; overflow: hidden;
  border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--lg);
  background: var(--wp--preset--color--surface);
}
.lm-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.3) invert(0.92) contrast(0.9); }
.lm-map__actions {
  position: absolute; left: var(--wp--preset--spacing--40); right: var(--wp--preset--spacing--40); bottom: var(--wp--preset--spacing--40);
  z-index: var(--wp--custom--z-index--raised);
  display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30);
}
/* Front end only: in the editor these wrappers are the block boxes the toolbar and selection outline need. */
:where(body:not(.editor-styles-wrapper)) .lm-map__actions > .wp-block-button { display: contents; }
/* Equal halves while both labels fit on one row; each button takes a full row when they do not. */
.lm-map__btn { flex: 1 1 0; }
.lm-map__btn.lm-btn--dark { border-color: var(--wp--preset--color--line-strong); }

.lm-studio { display: flex; flex-direction: column; }
:where(body:not(.editor-styles-wrapper)) .lm-studio > .wp-block-buttons,
:where(body:not(.editor-styles-wrapper)) .lm-studio > .wp-block-buttons > .wp-block-button { display: contents; }
.lm-studio__eyebrow { margin-bottom: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--caption); }
.lm-studio__city { font-size: var(--wp--preset--font-size--huge); letter-spacing: var(--wp--custom--letter-spacing--normal); }
.lm-studio__address { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--30); margin-top: var(--wp--preset--spacing--50); color: var(--wp--preset--color--contrast-soft); }
.lm-studio__address .lm-icon { margin-top: var(--wp--preset--spacing--10); color: var(--wp--preset--color--accent); }
.lm-studio__hours { margin-top: var(--wp--preset--spacing--60); margin-bottom: var(--wp--preset--spacing--70); padding-top: var(--wp--preset--spacing--40); border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line); }
.lm-studio__hours-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--wp--preset--spacing--40); padding-block: var(--wp--preset--spacing--40); }
.lm-studio__hours-row + .lm-studio__hours-row { border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--line); }
.lm-studio__hours-days { color: var(--wp--preset--color--secondary); }
.lm-studio__hours-time { font-weight: var(--wp--custom--font-weight--semibold); text-align: right; }
.lm-studio__hours-row--closed .lm-studio__hours-time { font-weight: var(--wp--custom--font-weight--regular); color: var(--wp--preset--color--muted); }
/* Pinned to the bottom so the card and the map end on the same line whichever is taller. */
.lm-studio__cta { margin-top: auto; }

@media (max-width: 1023px) {
  .lm-location { padding-top: var(--wp--preset--spacing--90); padding-bottom: var(--wp--preset--spacing--110); }
  .lm-location__grid { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--60); }
  .lm-map { min-height: 360px; }
}
@media (max-width: 639px) {
  .lm-location { padding-top: var(--wp--preset--spacing--80); padding-bottom: var(--wp--preset--spacing--100); }
  .lm-location__grid { gap: var(--wp--preset--spacing--50); }
  .lm-map { min-height: 320px; }
  .lm-map__actions { left: var(--wp--preset--spacing--30); right: var(--wp--preset--spacing--30); bottom: var(--wp--preset--spacing--30); gap: var(--wp--preset--spacing--20); }
  .lm-studio__hours { margin-bottom: var(--wp--preset--spacing--60); }
}