.wp-block-optib-photo-frame {
  --optib-frame-width: 4px;
  --optib-frame-padding: 32px;
  --optib-frame-background: #ffffff;
  box-sizing: border-box;
  min-width: 0;
  padding: clamp(0px, 5vw, var(--optib-frame-padding));
  border: var(--optib-frame-width) solid #e6b800;
  background: var(--optib-frame-background);
  color: #222;
  box-shadow: 10px 12px 12px rgb(0 0 0 / 28%);
  margin-block: 1.5em 2em;
}

.wp-block-optib-photo-frame.optib-photo-frame--wood {
  border-color: #946139;
  border-style: ridge;
  border-width: calc(var(--optib-frame-width) + 8px);
  background-image: repeating-linear-gradient(3deg, #714725 0 2px, #a77648 3px 6px, #885733 7px 9px);
  box-shadow: 5px 7px 10px rgb(0 0 0 / 22%);
}

.wp-block-optib-photo-frame.optib-photo-frame--simple {
  border-color: #303030;
  box-shadow: none;
}

.wp-block-optib-photo-frame.optib-photo-frame--shadow {
  border-color: #fff;
  box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
}

.wp-block-optib-photo-frame > .optib-photo-frame__content {
  min-width: 0;
  display: flow-root;
  background: var(--optib-frame-background);
  padding: 0.01px; /* Keep child margins inside the mat. */
}

.optib-photo-frame__content > :first-child { margin-block-start: 0; }
.optib-photo-frame__content > :last-child { margin-block-end: 0; }
.optib-photo-frame__content :where(img, video, iframe) { max-width: 100%; }
.optib-photo-frame__content :where(img, video) { height: auto; }
.optib-photo-frame__content :where(.alignwide, .alignfull) { max-width: 100%; margin-inline: 0; }

/* Direction belongs to each frame; a nested frame can choose its own direction. */
.wp-block-optib-photo-frame {
  --optib-frame-writing-mode: horizontal-tb;
  --optib-frame-text-height: none;
}
.wp-block-optib-photo-frame.optib-photo-frame--vertical {
  --optib-frame-writing-mode: vertical-rl;
  --optib-frame-text-height: min(28rem, 70vh);
}
.wp-block-optib-photo-frame.optib-photo-frame--vertical-lr {
  --optib-frame-writing-mode: vertical-lr;
  --optib-frame-text-height: min(28rem, 70vh);
}
.optib-photo-frame__content :where(p, h1, h2, h3, h4, h5, h6) {
  writing-mode: var(--optib-frame-writing-mode);
  text-orientation: mixed;
  max-width: 100%;
  max-height: var(--optib-frame-text-height);
  overflow: auto;
}

.editor-styles-wrapper .optib-photo-frame__content {
  min-height: 64px;
}

/* Content alignment: 'start' keeps the original flow-root behaviour untouched. */
.optib-photo-frame--align-center > .optib-photo-frame__content,
.optib-photo-frame--align-end > .optib-photo-frame__content {
  display: flex;
  flex-direction: column;
}
.optib-photo-frame--align-center > .optib-photo-frame__content {
  align-items: center;
}
.optib-photo-frame--align-end > .optib-photo-frame__content {
  align-items: flex-end;
}

/* Shadow override: takes precedence over the per-frame box-shadow above. */
.wp-block-optib-photo-frame.optib-photo-frame--shadow-none {
  box-shadow: none;
}
.wp-block-optib-photo-frame.optib-photo-frame--shadow-soft {
  box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
}
.wp-block-optib-photo-frame.optib-photo-frame--shadow-strong {
  box-shadow: 10px 12px 12px rgb(0 0 0 / 28%);
}