/* ========================================================================
   .tapedPhoto — shared "taped photo" effect for case thumbnails: a uniform
   white frame around the image, an aged translucent tape strip across the
   top, a soft shadow, and a slight resting tilt.

   Used by (all gated by settings constants, see settings_jr.py):
   - the cases-list dossier gallery (JR_CASELIST_DOSSIER_FRAMES; class added
     by caseList.js, folder + layout integration in caseList.css)
   - review/response/case tiles on /cases/reviews and the profile page, and
     the case detail popup modal (JR_CASE_TAPED_PHOTO_THUMBS; class emitted
     by the tapedPhotoClass template tag in casetemplatetags.py)

   Loaded once from cases/_caseDetailModal.html, which every page showing
   case thumbnails already includes (so it arrives after the page css).

   TUNING: everything context-specific is a custom property ("knob") — set
   them in a variant class below (or any more specific page rule) rather
   than restyling the component itself.
   ======================================================================== */

.tapedPhoto {
    /* knobs (defaults; override per variant/context) */
    --tpBorder: 6px;                          /* white frame thickness (px or %) */
    --tpRotate: -2deg;                        /* resting tilt */
    --tpBg: #fbf9f3;                          /* frame color */
    --tpTapeWidth: 34%;                       /* tape strip size */
    --tpTapeHeight: 14px;
    --tpTapeBg: rgba(233, 226, 198, 0.6);     /* tape color/translucency */
    --tpShadow: 0 3px 9px rgba(30, 20, 5, 0.38);
}

/* class doubled for specificity: these must beat same-specificity wrapper
   rules like caseList.css's base .caseCard__imageWrap regardless of load order */
.tapedPhoto.tapedPhoto {
    position: relative;
    background: var(--tpBg);
    padding: var(--tpBorder);
    overflow: visible;
    box-shadow: var(--tpShadow);
    transform: rotate(var(--tpRotate));
    transition: transform 0.18s ease;
}

/* aged tape strip across the top edge, half in / half out of the frame */
.tapedPhoto.tapedPhoto::before {
    content: "";
    position: absolute;
    top: calc(var(--tpTapeHeight) / -2);
    left: 50%;
    width: var(--tpTapeWidth);
    height: var(--tpTapeHeight);
    transform: translateX(-50%) rotate(-3deg);
    background: var(--tpTapeBg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.tapedPhoto.tapedPhoto > img {
    display: block;
}


/* --- Context variants (knob settings only) --- */

/* cases-list dossier gallery polaroids (applied by caseList.js; tilt variation
   and hover-straighten live in caseList.css's dossier block) */
.tapedPhoto--gallery {
    --tpBorder: 4%;
    --tpRotate: -2.2deg;
    --tpTapeHeight: 18px;
}

/* the small (110px) thumbs on review/response/case tiles (/cases/reviews and
   the profile page); applied to the <a> wrapping the img */
.tapedPhoto--thumbSmall {
    display: inline-block;
    margin-top: 6px;                          /* headroom for the tape strip */
    --tpBorder: 5px;
    --tpRotate: -2deg;
    --tpTapeWidth: 44%;
    --tpTapeHeight: 12px;
}

/* alternate the small-thumb tilt: every tile partial is wrapped in a div.col
   at its call site, so odd/even columns lean opposite ways */
.col:nth-child(even) .tapedPhoto--thumbSmall {
    --tpRotate: 1.6deg;
}

/* the case detail popup modal thumbnail (sits on the dark noir modal).
   align-self keeps the frame shrink-wrapped to the image: the modal body is a
   flex row whose default stretch would extend the frame's background below the
   photo (a fake polaroid bottom) whenever the text column is taller */
.tapedPhoto--modal {
    align-self: flex-start;
    --tpBorder: 8px;
    --tpRotate: -1.6deg;
    --tpTapeHeight: 16px;
    --tpShadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

/* the cases-list detail (list) view thumbnails (240px image column; layout
   integration in caseList.css's detail-mode section) */
.tapedPhoto--listDetail {
    --tpBorder: 8px;
    --tpRotate: -1.6deg;
    --tpTapeHeight: 14px;
}

/* the homepage featured-cases carousel cover (centered on the card's art panel,
   which taped mode paints manila to match the card; sizing/centering integration
   lives in homeNoir.css) */
.tapedPhoto--carousel {
    --tpBorder: 7px;
    --tpRotate: -2deg;
    --tpTapeHeight: 14px;
    /* darker aged tape: the default light tape disappears against the manila
       panel + white frame at this size */
    --tpTapeBg: rgba(140, 120, 85, 0.55);
    --tpShadow: 0 6px 16px rgba(60, 40, 10, 0.35);
}

/* the case detail page's banner cover (large photo on the dark noir banner;
   applied in cases/partials/_caseBanner.html — no align-self here: the banner
   row bottom-aligns the cover with the title block, which also never stretches) */
.tapedPhoto--banner {
    display: inline-block;
    --tpBorder: 9px;
    --tpRotate: -1.8deg;
    --tpTapeHeight: 16px;
    --tpShadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}