/* OLAVO / OS 1.1 — posições e enquadramento da foto. */
.desktop .desktop-widget {
  position:absolute;
  inset:auto;
  margin:0;
  transform:none;
  max-width:calc(100% - 56px);
  pointer-events:none;
}
.desktop .coordinate.desktop-widget {
  display:block;
  white-space:normal;
  line-height:1.8;
}
.desktop-widget[data-position^="top-"] { top:9%; }
.desktop-widget[data-position^="bottom-"] { bottom:28px; }
.desktop-widget[data-position$="-left"] { left:28px; right:auto; text-align:left; align-items:flex-start; }
.desktop-widget[data-position$="-right"] { right:5.5%; left:auto; text-align:right; align-items:flex-end; }
.desktop-widget[data-position="top-center"],
.desktop-widget[data-position="bottom-center"] { left:50%; transform:translateX(-50%); text-align:center; align-items:center; }
.desktop-widget[data-position="center-left"],
.desktop-widget[data-position="center-right"] { top:50%; transform:translateY(-50%); }
.desktop-widget[data-position="center"] { top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; align-items:center; }
.desktop-widget[data-position="screen-top-right"] { top:9%; }
.desktop-widget[data-position="screen-bottom-right"] { bottom:28px; }
.desktop .desktop-widget[data-position="hidden"] { display:none; }

.desktop .desktop-intro > .aligned-clock {
  position:static;
  inset:auto;
  transform:none;
  align-items:flex-start;
  text-align:left;
  max-width:100%;
  margin:0 0 22px;
}
.aligned-clock > span { font-size:clamp(34px,4vw,56px); }
.aligned-clock > small { margin-top:6px; }
.desktop .footnote-copy {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.desktop .desktop-footnote { align-items:flex-start; }
.desktop .footnote-copy > .aligned-signature {
  position:static;
  inset:auto;
  transform:none;
  margin:0;
  max-width:100%;
  text-align:left;
}
@media (min-width:761px) {
  .desktop-intro.has-aligned-clock { top:8%; }
}
@media (min-width:1600px) {
  .desktop-intro.has-aligned-clock { top:12%; }
}
@media (max-height:650px) and (min-width:761px) {
  .desktop-intro.has-aligned-clock { top:4%; }
  .aligned-clock > span { font-size:34px; }
  .desktop .desktop-intro > .aligned-clock { margin-bottom:15px; }
}

.portrait-frame,
.photo-preview-frame {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  width:100%;
  aspect-ratio:5 / 6;
  padding:min(var(--photo-margin,12px),25%);
  background:#161321;
  border:1px solid var(--line,#d0b7f026);
  border-radius:6px 40px 6px 6px;
  box-sizing:border-box;
}
.portrait-frame > img,
.photo-preview-frame > img {
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  object-fit:contain;
  object-position:center;
  border:0;
  border-radius:0;
}
[data-photo-fit="cover"] > .portrait-frame > img,
[data-photo-fit="cover"] > .photo-preview-frame > img { object-fit:cover; }
[data-photo-fit="cover"] > .portrait-frame,
[data-photo-fit="cover"] > .photo-preview-frame { overflow:hidden; }
.portrait[data-photo-fit] > figcaption {
  position:static;
  inset:auto;
  margin:10px 0 0;
  padding:9px 10px;
}
.photo-preview {
  display:flex;
  align-items:center;
  gap:24px;
  padding:20px;
  margin-bottom:17px;
  background:#15121c;
  border:1px solid var(--line,#d0b7f026);
  border-radius:10px;
}
.photo-preview-frame { width:210px; max-width:48%; flex-shrink:0; padding:min(var(--photo-margin,12px),52px); }
.photo-preview strong { display:block; font-size:12px; color:#d8c5e9; margin-bottom:10px; font-weight:500; }
.photo-preview p { font-size:11px; color:#a18bae; line-height:1.8; max-width:360px; margin:0 0 12px; }
.photo-preview small { display:block; font-size:10px; color:#83708e; line-height:1.7; }
@media (max-width:760px) {
  /* No smartphone, os indicadores de hora continuam nas barras do sistema. */
  .desktop .desktop-clock.desktop-widget,
  .desktop .coordinate.desktop-widget { display:none; }
  .portrait-frame { aspect-ratio:1; border-radius:28px; }
}
@media (max-width:700px) {
  .photo-preview { flex-direction:column; align-items:stretch; padding:18px; gap:18px; }
  .photo-preview-frame { width:min(210px,100%); max-width:100%; margin-inline:auto; }
  .photo-preview p { max-width:none; }
}