/* ---------- Global-safe tweaks (same spirit as node-art.css) ---------- */
html, body,
.dialog-off-canvas-main-canvas,
.layout-container {
  min-width: 0;
  overflow-x: clip;
  margin: 0;
}

body {
  font-family: "EB Garamond", ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1em;
}

/* Keep containers from causing horizontal scroll on tiny screens */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  box-sizing: border-box;
}

/* ---------- Brand bar & back button (reused look) ---------- */
.brandbar__logo img { max-height: 62px; }

.brandbar__back .btn-link {
  background: url("/themes/custom/inspirarte/img/watercolor-button.png");
  background-position: left center;
  background-size: cover;
  height: 85px;
  width: 231px;
  opacity: .75;
  text-decoration: none;
  color: #fff;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: bold;
}

/* layout spacing */
.content-shell { margin-bottom: 4.5rem !important; }

/* Phone “excess fixer” (same as node-art.css) */
@media (max-width: 575.98px) {
  .brandbar.container,
  .content-shell.container {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ---------- Typography & media inside the info page ---------- */
.content-node--info .content-node__title { 
    margin-bottom: 1rem;
    text-align:center;
 }

.content-node--info .content-node__body img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* If you ever add a “hero” image to these pages, keep consistent rules */
.media--hero img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* ---------- Optional: video embed support (kept consistent) ---------- */
.video-embed { margin: 1.25rem 0; }
.video-embed .ratio { width: 100%; }

/* Make our own aspect-ratio helpers (since we only load grid/utilities) */
.ratio { position: relative; width: 100%; }
.ratio::before { display: block; content: ""; }
.ratio-16x9::before { padding-top: 56.25%; } /* 9/16 */
.ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; }

.video-embed .media-oembed-content { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Clickable image affordance (if you enable body image linking) ---------- */
.content-node__body img { cursor: zoom-in; }
.body-image-link:hover img { opacity: .95; transition: opacity .15s linear; }