/* === widget: public-profile (Phase 2 stub) ===
 * The visual styling for this widget is in /custom/styles/design-tokens.css
 * inside the "Profile Detail Page" section. Only the rules below are kept
 * here because they're JS-toggled (visibility / state) and the original
 * full sheet is preserved as `public-profile.css.original.bak` for rollback.
 */

/* Owner edit-mode visibility toggles — JS toggles `.editable-section` state */
.widget.public-profile .editable-section { position: relative; }
.widget.public-profile .editable-section .toggle-hideable-container { display: none !important; }
.widget.public-profile .editable-section .hidable { max-height: none !important; }
.widget.public-profile .editable-section .hidable .grad { display: none !important; }
.widget.public-profile .editable-section .edit-button {
    position: absolute;
    right: 0;
    top: 10px;
    color: #fff;
    z-index: 100;
    padding: 10px 14px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}
.widget.public-profile .editable-section .edit-button .icon {
    position: relative;
    z-index: 3;
}

/* Favourite button JS state — `.loading / .active` are toggled by JS */
.widget.public-profile .favourite { position: relative; cursor: pointer; }
.widget.public-profile .favourite.loading { pointer-events: none; }
.widget.public-profile .favourite.loading .ui.dimmer,
.widget.public-profile .favourite.loading .ui.loader { opacity: 1; display: block; }
.widget.public-profile .favourite .off,
.widget.public-profile .favourite .on {
    position: absolute;
    inset: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.widget.public-profile .favourite.active .off,
.widget.public-profile .favourite .on { opacity: 0; }
.widget.public-profile .favourite.active .on { opacity: 1; }

/* ---------------------------------------------------------------------------
   Moderation badge: "Pending approval" / "Submitted 7 Sep 2026"   (2026-09-07)

   It used to be a 40px-wide red box pinned to the top-left corner, which is why
   the sentence inside it stacked one character per line down the middle of the
   main photo, and why on a gallery thumbnail the same sentence at 10px filled
   the whole card. Both are the same cause: a long sentence in a box that was
   never sized for it.

   Now: one strip along the BOTTOM edge (faces sit high in these photos), two
   short lines, each on a single line with an ellipsis, over a gradient that
   fades to nothing at the top so it reads as a caption rather than a cover.
   Amber, not red - red is this site's danger colour and pending is not an
   error. Every colour, spacing and font comes from design-tokens.css, with the
   same values inline as the fallback.
   --------------------------------------------------------------------------- */
.widget.public-profile .pending {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    z-index: 10;
    padding: 20px var(--space-3, 12px) var(--space-2, 8px);
    background: linear-gradient(to top,
        rgba(10, 10, 15, 0.95) 0%,
        rgba(10, 10, 15, 0.80) 55%,
        rgba(10, 10, 15, 0) 100%);
    color: var(--text-primary, #ffffff);
    font-family: var(--font-body, 'Outfit', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    line-height: 1.3;
    text-align: left;
    text-shadow: none;
    pointer-events: none;
}
/* the amber cue: a short rule above the text, not a coloured block behind it */
.widget.public-profile .pending::before {
    content: "";
    position: absolute;
    left: var(--space-3, 12px);
    right: var(--space-3, 12px);
    bottom: 100%;
    height: 2px;
    background: linear-gradient(to right, var(--warning, #ff9800), rgba(255, 152, 0, 0));
}
.widget.public-profile .pending .pending-main,
.widget.public-profile .pending .pending-sub {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.widget.public-profile .pending .pending-main {
    font-size: var(--text-sm, 0.85rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--warning, #ff9800);
}
.widget.public-profile .pending .pending-sub {
    margin-top: 1px;
    font-size: var(--text-xs, 0.7rem);
    font-weight: 400;
    color: var(--text-secondary, #a0a0b0);
}
/* rejected reads as an error - that one IS red */
.widget.public-profile .pending.is-rejected::before { background: linear-gradient(to right, var(--danger, #f44336), rgba(244, 67, 54, 0)); }
.widget.public-profile .pending.is-rejected .pending-main { color: var(--danger, #f44336); }
/* the old corner flag and eye glyph are what the strip replaces */
.widget.public-profile .pending .triangle,
.widget.public-profile .pending .icon { display: none; }

/* Profile-header structural — name / name-short toggle by viewport */
.widget.public-profile .profile-header { position: relative; }
.widget.public-profile .profile-header .header { padding-right: 30px; }

/* Wrapper relative-positioning anchor for absolute children */
.widget.public-profile .wrapper { position: relative; }

/* Tooltip restyle */
.widget.public-profile .ui.popup,
.widget.public-profile [data-tooltip]:not([data-position]):before {
    background-color: #890b0b !important;
    color: #fff !important;
    border: none;
    box-shadow: none;
    padding: 5px 10px;
    font-size: 12px;
}
.widget.public-profile [data-tooltip]:after {
    border: none;
    background-color: #890b0b;
    color: #fff;
    padding: 5px 10px;
}

/* Gallery thumbnails: the same strip, tighter. The old rule pinned it to the top
   with a 65% red fill, so a thumbnail was mostly badge. */
.widget.public-profile .contact-column .images .pending,
.widget.public-profile .contact-column .videos .pending,
.widget.public-profile .gallery-column .images .pending,
.widget.public-profile .gallery-column .videos .pending,
.widget.public-profile .main-column .images .pending,
.widget.public-profile .main-column .videos .pending {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    padding: 16px var(--space-2, 8px) 6px;
}
.widget.public-profile .contact-column .images .pending::before,
.widget.public-profile .contact-column .videos .pending::before,
.widget.public-profile .gallery-column .images .pending::before,
.widget.public-profile .gallery-column .videos .pending::before,
.widget.public-profile .main-column .images .pending::before,
.widget.public-profile .main-column .videos .pending::before {
    left: var(--space-2, 8px);
    right: var(--space-2, 8px);
}
.widget.public-profile .contact-column .images .pending .pending-main,
.widget.public-profile .contact-column .videos .pending .pending-main,
.widget.public-profile .gallery-column .images .pending .pending-main,
.widget.public-profile .gallery-column .videos .pending .pending-main,
.widget.public-profile .main-column .images .pending .pending-main,
.widget.public-profile .main-column .videos .pending .pending-main { font-size: var(--text-xs, 0.7rem); }
.widget.public-profile .contact-column .images .pending .pending-sub,
.widget.public-profile .contact-column .videos .pending .pending-sub,
.widget.public-profile .gallery-column .images .pending .pending-sub,
.widget.public-profile .gallery-column .videos .pending .pending-sub,
.widget.public-profile .main-column .images .pending .pending-sub,
.widget.public-profile .main-column .videos .pending .pending-sub { font-size: 0.62rem; }

/* Narrow cards drop the date and keep only the main line. The date stays in the
   title attribute the view writes, so it is still reachable on hover. Declaring
   the container on the wrappers is additive: where the selector does not match,
   the rule above (both lines, each ellipsised) still holds. */
.widget.public-profile .images .image,
.widget.public-profile .videos .image,
.widget.public-profile .images > a,
.widget.public-profile .videos > a { container-type: inline-size; }
@container (max-width: 230px) {
    .widget.public-profile .pending .pending-sub { display: none; }
    .widget.public-profile .pending { padding-top: 14px; }
}
@media (max-width: 640px) {
    .widget.public-profile .images .pending .pending-sub,
    .widget.public-profile .videos .pending .pending-sub { display: none; }
}
.widget.public-profile .contact-column .images .pending .icon,
.widget.public-profile .contact-column .videos .pending .icon,
.widget.public-profile .gallery-column .images .pending .icon,
.widget.public-profile .gallery-column .videos .pending .icon,
.widget.public-profile .main-column .images .pending .icon,
.widget.public-profile .main-column .videos .pending .icon { display: none; }
.widget.public-profile .contact-column .images .pending .triangle,
.widget.public-profile .contact-column .videos .pending .triangle,
.widget.public-profile .gallery-column .images .pending .triangle,
.widget.public-profile .gallery-column .videos .pending .triangle,
.widget.public-profile .main-column .images .pending .triangle,
.widget.public-profile .main-column .videos .pending .triangle {
    position: absolute;
    top: 100%;
    display: none;
}

/* Section pending indicator inside editable-section */
.widget.public-profile .contact-column .editable-section .pending,
.widget.public-profile .gallery-column .editable-section .pending,
.widget.public-profile .main-column .editable-section .pending {
    position: relative;
    width: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    margin: -20px -10px 0;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background: rgba(255, 152, 0, 0.10);
    border-left: 3px solid var(--warning, #ff9800);
    border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
}
.widget.public-profile .contact-column .editable-section .pending::before,
.widget.public-profile .gallery-column .editable-section .pending::before,
.widget.public-profile .main-column .editable-section .pending::before { display: none; }
.widget.public-profile .contact-column .editable-section .pending .pending-sub,
.widget.public-profile .gallery-column .editable-section .pending .pending-sub,
.widget.public-profile .main-column .editable-section .pending .pending-sub { color: var(--text-secondary, #a0a0b0); }

/* Magnific popup gallery (Phase 1 legacy fallback if used) */
.mfp-gallery.public-profile .gallery-arrow {
    position: absolute;
    top: 50%;
    width: 80px;
    height: 80px;
    padding: 0;
    font-size: 24px;
    border: none;
    z-index: 9999;
}
.mfp-gallery.public-profile .gallery-arrow .icon {
    font-size: 60px;
    pointer-events: none;
}
.mfp-gallery.public-profile .gallery-arrow span { margin: 0; }
.mfp-gallery.public-profile .gallery-arrow-left { left: 5px; }
.mfp-gallery.public-profile .gallery-arrow-right { right: 5px; }