/* Styling for markup inherited from the WordPress site.
 *
 * Two families arrive in the imported bodies, and neither has any CSS of its own
 * here:
 *
 *   wp-block-*  WordPress CORE block classes. The biggest by far is
 *               wp-block-media-text (45 instances) — a photo paired with text,
 *               which is how the equipment listings are built. Unstyled it
 *               stacks into an undifferentiated column.
 *
 *   su-*        Shortcodes Ultimate, a WordPress PLUGIN. Its tab widget renders
 *               as a bare row of <span>s, so the labels run together as
 *               "CamerasTripodsAudioLights" and every pane shows at once.
 *
 * Styled in branding-kit tokens so the imported pages read as part of this site
 * rather than as a foreign plugin. Scoped under .prose so none of it can leak
 * into the chrome or the admin.
 *
 * The alternative was rewriting the six affected pages' markup. Deferred
 * deliberately: this is reversible, touches no content, and the pages can be
 * re-authored in the editor later without a migration.
 */

/* ---------------------------------------------------- WP core: media + text */

/* Photo beside its description. `is-stacked-on-mobile` is WordPress's own
   opt-in, so honour it rather than inventing a breakpoint. */
.prose .wp-block-media-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 26px;
  align-items: center;
  margin: 1.6em 0;
  padding-bottom: 1.6em;
  border-bottom: 1px solid var(--grey-2);
}
.prose .wp-block-media-text:last-child { border-bottom: 0; }

.prose .wp-block-media-text__media { margin: 0; }
.prose .wp-block-media-text__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.prose .wp-block-media-text__content > *:first-child { margin-top: 0; }
.prose .wp-block-media-text__content > *:last-child { margin-bottom: 0; }

/* WordPress puts the media second when this class is present. */
.prose .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 2; }

@media (max-width: 700px) {
  .prose .wp-block-media-text,
  .prose .wp-block-media-text.is-stacked-on-mobile {
    grid-template-columns: 1fr;
  }
  .prose .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 0; }
}

/* --------------------------------------------------- WP core: odds and ends */

.prose .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--grey-2);
  margin: 2em 0;
}
.prose .wp-block-quote {
  margin: 1.6em 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--cyan);
  color: var(--grey-5);
}
.prose .wp-block-group { margin: 1.4em 0; }
.prose .has-text-align-center { text-align: center; }
.prose .has-text-align-right { text-align: right; }

/* ------------------------------------------------ Shortcodes Ultimate: tabs
 * Progressive enhancement. With no JS every pane stays visible and each label
 * reads as a heading above its own content — longer, but complete and correct.
 * public/js/chrome.js adds `is-enhanced`, which switches on real tab behaviour.
 */

.prose .su-tabs {
  margin: 1.6em 0;
  border: 1px solid var(--grey-2);
  border-radius: var(--radius);
  overflow: hidden;
}

.prose .su-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--grey-1);
  border-bottom: 1px solid var(--grey-2);
}

.prose .su-tabs-nav span {
  padding: 11px 18px;
  font-size: 14px;
  color: var(--grey-5);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  user-select: none;
}
.prose .su-tabs-nav span:hover { color: var(--blue); background: rgba(0, 178, 206, .06); }
.prose .su-tabs-nav span.is-active {
  color: var(--blue);
  background: var(--white);
  border-bottom-color: var(--cyan);
  font-weight: 500;
}
.prose .su-tabs-nav span:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(0, 178, 206, .45);
}

.prose .su-tabs-pane { padding: 20px 22px; }
.prose .su-tabs-pane > *:first-child { margin-top: 0; }
.prose .su-tabs-pane > *:last-child { margin-bottom: 0; }

/* Un-enhanced: the nav is redundant (the labels repeat as pane headings), so
   hide it and separate the panes instead. */
.prose .su-tabs:not(.is-enhanced) .su-tabs-nav { display: none; }
.prose .su-tabs:not(.is-enhanced) .su-tabs-pane + .su-tabs-pane {
  border-top: 1px solid var(--grey-2);
}
.prose .su-tabs.is-enhanced .su-tabs-pane { display: none; }
.prose .su-tabs.is-enhanced .su-tabs-pane.is-active { display: block; }

/* Injected label shown only in the un-enhanced/stacked state. */
.prose .su-pane-label {
  display: block;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 400;
  color: var(--blue);
  margin: 0 0 .6em;
}
.prose .su-tabs.is-enhanced .su-pane-label { display: none; }

/* ------------------------------------------- Shortcodes Ultimate: box, etc. */

.prose .su-box {
  margin: 1.6em 0;
  border: 1px solid var(--grey-2);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}
.prose .su-box-title {
  padding: 10px 16px;
  background: var(--grey-1);
  border-bottom: 1px solid var(--grey-2);
  font-weight: 500;
  font-size: 14.5px;
  color: var(--blue);
}
.prose .su-box-content { padding: 16px; }
.prose .su-box-content > *:first-child { margin-top: 0; }
.prose .su-box-content > *:last-child { margin-bottom: 0; }

.prose .su-heading {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 400;
  color: var(--blue);
  line-height: 1.25;
  margin: 1.8em 0 .5em;
}
.prose .su-heading-align-center { text-align: center; }
.prose .su-heading-inner { display: block; }

/* The plugin emitted these as fixed-height spacer divs; a margin is enough. */
.prose .su-spacer { display: block; height: 0; margin-bottom: 1.2em; }

/* Float clears the plugin relied on. */
.prose .su-u-clearfix::after { content: ''; display: table; clear: both; }
.prose .su-u-trim > *:first-child { margin-top: 0; }
.prose .su-u-trim > *:last-child { margin-bottom: 0; }