/* ==========================================================================
   Editor-controlled presentation.

   Loaded on every page. The classes here are applied by the size an editor
   picks on a block, so the choices stay within a designed range rather than
   letting arbitrary pixel values into the page.

   A block with no size chosen gets no class at all and inherits the original
   design untouched.
   ========================================================================== */

/* ------------------------------------------------------------ webcams --- */

/* Slightly rounded rather than hard-cornered. The wrapper does the clipping
   because the iframe is third-party content we don't control. */
/* Applied by class name only where the markup already sits, so no template
   changes are needed for this to take effect. */
.webcams-sayulita figure > a {
  display: block;
  overflow: hidden;
  border-radius: 12px;
}
.webcams-sayulita iframe {
  display: block;
  border-radius: 12px;
}

/* Size steps -- height only, so the two-up layout never breaks.
   No default is declared on purpose: a camera with no size chosen keeps
   exactly the height it has today. Selectors are scoped under
   .webcams-sayulita so they outrank the inline rule in the home page. */
.webcams-sayulita .cam-sm iframe { height: 220px; }
.webcams-sayulita .cam-md iframe { height: 320px; }
.webcams-sayulita .cam-lg iframe { height: 430px; }
.webcams-sayulita .cam-xl iframe { height: 560px; }

@media (max-width: 960px) {
  /* Kept proportional but capped, so a large camera can't swamp a phone. */
  .webcams-sayulita .cam-sm iframe { height: 200px; }
  .webcams-sayulita .cam-md iframe { height: 260px; }
  .webcams-sayulita .cam-lg iframe { height: 320px; }
  .webcams-sayulita .cam-xl iframe { height: 380px; }
}

/* -------------------------------------------------------------- text ---- */

/* Relative steps, so each block scales from whatever the design gave it
   instead of being pinned to a fixed pixel size. */
.txt-sm { font-size: .85em; }
.txt-md { font-size: 1em; }
.txt-lg { font-size: 1.25em; }
.txt-xl { font-size: 1.5em; }

/* Headings need a little more room once they grow. */
h1.txt-lg, h2.txt-lg, h3.txt-lg,
h1.txt-xl, h2.txt-xl, h3.txt-xl { line-height: 1.2; }

/* ------------------------------------------------- the size control ----- */

.cms-sizer {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 20;
  display: none;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(36, 28, 43, .9);
}
body.cms-editing .cms-sizer { display: inline-flex; }

.cms-sizer button {
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #d9cfe2;
  font: 700 10px/1 "Open Sans", -apple-system, sans-serif;
  cursor: pointer;
}
.cms-sizer button:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.cms-sizer button[aria-pressed="true"] { background: #7f3f98; color: #fff; }

/* The control is absolutely positioned, so whatever it sits in needs to be
   a positioning context. Only applied while editing so the public page keeps
   its original stacking exactly as it was. */
body.cms-editing .cms-sizable { position: relative; }

/* Outline the resizable region so it is obvious what the buttons affect. */
body.cms-editing .cms-sizable:hover { outline: 2px solid rgba(127, 63, 152, .5); outline-offset: 3px; }