/* ===================================================================
   SAMPLE REPORT WATERMARK

   Every report page rendered on the marketing surfaces is one filled-in
   example — the same fictional family on every screen. Parents were reading
   those previews as their own result, so each preview now carries a repeating
   "PRZYKŁAD" wash, and each preview block carries one sentence saying the real
   report is generated from that child's own answers and measurements.

   Loaded by both layouts (Views/Shared/_Layout.cshtml and
   Areas/Reminders/Views/Shared/_Layout.cshtml) because the previews live on the
   Bootstrap main site and the Tailwind Zdrowa Sowka site alike. Nothing here is
   baked into the PNGs: the same renders are reused by the Google Ads assets and
   by internal previews, which must stay clean.
   =================================================================== */

/* Wrapper for a preview whose image fills the box (grid cell, carousel slide,
   Alpine page stage). */
.report-sample {
    position: relative;
    display: block;
}

/* Wrapper for a preview that is centred and sized by the image itself — the
   zoom modals, where the image is capped by max-height and the wrapper must
   shrink to it rather than to the dialog. */
.report-sample-fit {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}

/* The wash. pointer-events:none so click-to-zoom, Alpine handlers and carousel
   swipes still reach the image underneath. Sized as a percentage of the box, so
   one rule reads correctly on a 140px thumbnail and on a 980px full page. */
.report-sample::after,
.report-sample-fit::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Ctext x='100' y='68' text-anchor='middle' transform='rotate(-20 100 60)' font-family='Segoe UI,Tahoma,Arial,sans-serif' font-size='26' font-weight='700' letter-spacing='2' fill='%231b5e20' fill-opacity='0.3' stroke='%23ffffff' stroke-opacity='0.75' stroke-width='2.6' paint-order='stroke'%3EPRZYK%C5%81AD%3C/text%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 50% auto;
}

/* Thumbnails and rail tiles: one word across the tile instead of two, or the
   wash shrinks to an unreadable smudge. */
.report-sample--sm::after {
    background-size: 100% auto;
}

/* Large surfaces — the full-screen reader — get a denser tile so the wash does
   not thin out to a few widely spaced words. */
.report-sample--lg::after {
    background-size: 34% auto;
}

/* Corner pill, for previews big enough to carry one. Sits above the wash. */
.report-sample__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(27, 94, 32, .88);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

/* The explanation. One per preview block, not per image. */
.report-sample-note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    max-width: 620px;
    margin: .75rem auto 0;
    padding: .6rem .8rem;
    border: 1px solid #e6ede2;
    border-left: 3px solid #2e7d32;
    border-radius: 8px;
    background: #f6faf5;
    color: #4b5563;
    font-size: .82rem;
    line-height: 1.45;
    text-align: left;
}

.report-sample-note i {
    flex: 0 0 auto;
    margin-top: .1rem;
    color: #2e7d32;
}

.report-sample-note strong {
    color: #1b5e20;
}

/* On the dark zoom modals the note sits on the backdrop, not on a card. */
.report-sample-note--onDark {
    border-color: rgba(255, 255, 255, .25);
    border-left-color: #a5d6a7;
    background: rgba(0, 0, 0, .55);
    color: #e8f0e6;
}

.report-sample-note--onDark i,
.report-sample-note--onDark strong {
    color: #a5d6a7;
}