/**
 * ridephoto.css — layout for the ride-photo tool page.
 *
 * One framed picture, exported as-is. The frame itself is the journal
 * theme's .gm-image-frame border-image (see the theme files); this file
 * only covers the stage and the two overlays stamped on the photo —
 * the logo top-right and the caption bottom-centre. Theme vars
 * (--gm-page-bg, --gm-*) come from the injected theme stylesheet.
 */

body {
    background: var(--gm-page-bg, #111);
    color: var(--gm-text, #eee);
    min-height: 100vh;
}

/* Centred stage — the photo keeps its natural aspect ratio inside a
   comfortable max width. */
.gm-ride-stage {
    width: min(920px, 100%);
    margin: 0 auto;
    font-family: var(--gm-font, serif);
}

/* #ride-photo is a .gm-result-media.gm-image-frame — the theme's square
   border asset wraps it via border-image (and the ::after overlay in
   themes whose rim art must paint over the photo edge). Children live
   inside the border band, so both overlays land on the photo. */
#ride-photo {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
}

/* Logo stamp — right upper corner of the photo. Sized relative to the
   photo so it scales with any upload; the drop shadow keeps it readable
   on bright screenshots. z-index above the frame overlay (2 in themes
   that use it) so the stamp is never caught under the rim art. */
.gm-ride-logo {
    position: absolute;
    top: 4%;
    right: 4%;
    width: 22%;
    max-width: 220px;
    height: auto;
    z-index: 3;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

/* Caption — translucent pill centred along the bottom edge of the
   photo, text in the theme's body font and colour. Same z-index as the
   logo; the rim only reaches the outer few px so they never fight. */
.gm-ride-caption {
    position: absolute;
    left: 50%;
    bottom: 4%;
    transform: translateX(-50%);
    max-width: 80%;
    padding: 0.35em 1.1em;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: var(--gm-header-text, #fff);
    font-family: var(--gm-font, serif);
    font-size: 1.35em;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    z-index: 3;
}

/* .gm-exporting strips .gm-editable backgrounds (they're field cues in
   the journal) — the pill here is part of the design, so it overrides
   that strip back on for export. Half size in export: the screen's
   roomy pill reads oversized on the print. */
.gm-exporting .gm-ride-caption {
    background: rgba(0, 0, 0, 0.45) !important;
    font-size: 0.675em;
}

/* An empty caption (placeholder only — never real content) must not
   leave a stray pill on the print; the toolbar toggle hides it on
   screen and export alike via .gm-no-caption. */
.gm-exporting .gm-ride-caption:empty,
.gm-no-caption .gm-ride-caption {
    display: none !important;
}

/* Toolbar sits under the photo, centred like the journal toolbar. */
#editor-controls {
    margin-top: 2rem;
}