/* Brainflood Sites: mechanics every look shares (loaded before the look's own stylesheet).
   Only layout mechanics live here; colour and type belong to each look. */

/* Owner-written HTML (the custom_html section): never wider than its column. */
.custom-html { overflow-wrap: anywhere; }
.custom-html img { max-width: 100%; height: auto; }
.custom-html table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.custom-html th, .custom-html td { padding: 0.45rem 0.6rem; text-align: left; vertical-align: top; }
.custom-html .center { text-align: center; }
.custom-html > :first-child { margin-top: 0; }

/* Embedded players (app/services/site_embeds.py): sized boxes, the iframe fills the box. */
.embed { position: relative; width: 100%; margin: 1.25rem 0; overflow: hidden; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed.embed-video { aspect-ratio: 16 / 9; }
.embed.embed-map, .embed.embed-calendar { aspect-ratio: 4 / 3; max-height: 70vh; }
.embed.embed-audio { aspect-ratio: auto; height: 152px; max-width: 640px; }
@supports not (aspect-ratio: 1) {
  .embed.embed-video { padding-top: 56.25%; }
  .embed.embed-map, .embed.embed-calendar { padding-top: 75%; }
}