/* ============================================================================
 * Component: camp-theme-lego (0.333.0) — the look of /feriencamp/lego/ (activity 14540) and «Stein auf Stein».
 * Motif from the owner's hero (a boy at a LEGO SPIKE vehicle, yellow and azure beams): the LEGO brick.
 * Hero: a pale baseplate of studs behind the picture, eyebrow in teal. Section: five bricks with studs laid as a small
 * wall, dropping into place once. Brick colours are decoration only (variables); every action stays ROBBO green.
 * ========================================================================= */
.rc-camp-landing[data-activity-id="14540"],
.rc-lg {
    --lg-base: #F2F8FB;
    --lg-base-2: #FAFDFE;
    --lg-teal-ink: #0B6E72;
    --lg-yellow: #F6C624;
    --lg-azure: #3FB4E5;
    --lg-teal: #19A3A6;
    --lg-lime: #9BCB3C;
    --lg-coral: #F26D4F;
}

/* ------------------------------------------------------------- hero --- */
.rc-camp-landing[data-activity-id="14540"] .rc-comp-hero {
    background: linear-gradient(180deg, var(--lg-base-2) 0%, var(--lg-base) 100%) !important;
}
.rc-camp-landing[data-activity-id="14540"] .rc-comp-hero-confetti { display: none; }
.rc-camp-landing[data-activity-id="14540"] .rc-comp-hero-eyebrow {
    background: var(--robbo-white) !important;
    border: 1px solid color-mix(in srgb, var(--lg-teal) 35%, transparent) !important;
    color: var(--lg-teal-ink) !important;
}
/* A baseplate: rows of studs, faint, behind the picture. */
.rc-camp-landing[data-activity-id="14540"] .rc-comp-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle at 14px 14px, color-mix(in srgb, var(--lg-azure) 22%, transparent) 6px, transparent 6.5px);
    background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}
@media (max-width: 767px) {
    .rc-camp-landing[data-activity-id="14540"] .rc-comp-hero-media--illustration { max-width: 250px; }
}

/* ---------------------------------------------------------- section --- */
.rc-lg {
    padding: 48px 16px 56px;
    background: linear-gradient(180deg, var(--lg-base) 0%, var(--robbo-white) 45%);
    font-family: 'ProximaNova', 'Proxima Nova', 'Noto Sans', sans-serif;
    color: var(--robbo-coal);
}
.rc-lg *, .rc-lg *::before, .rc-lg *::after { box-sizing: border-box; }
.rc-lg-wrap { max-width: 1120px; margin: 0 auto; }
.rc-lg-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.rc-lg-eyebrow {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--robbo-white);
    border: 1px solid color-mix(in srgb, var(--lg-teal) 35%, transparent);
    font-size: var(--robbo-fs-badge);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--lg-teal-ink);
}
.rc-lg-h2 { margin: 12px 0 10px; font-family: 'Plakkaat', sans-serif; font-weight: 500; font-size: 28px; line-height: 1.2; color: var(--robbo-black); }
.rc-lg-lead { margin: 0; font-size: var(--robbo-fs-base); line-height: 1.6; }

/* The wall: one brick per step, studs on top in the brick's colour. */
.rc-lg-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px 16px; }
.rc-lg-brick { --lg-c: var(--lg-yellow); position: relative; margin: 0; padding-top: 10px; min-width: 0; }
.rc-lg-brick--azure { --lg-c: var(--lg-azure); }
.rc-lg-brick--teal { --lg-c: var(--lg-teal); }
.rc-lg-brick--lime { --lg-c: var(--lg-lime); }
.rc-lg-brick--coral { --lg-c: var(--lg-coral); }
.rc-lg-studs {
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 12px;
    background-image: radial-gradient(ellipse 12px 7px at 16px 7px, var(--lg-c) 99%, transparent 100%);
    background-size: 40px 12px;
    background-repeat: repeat-x;
    filter: drop-shadow(0 -1px 0 color-mix(in srgb, var(--robbo-black) 12%, transparent));
}
.rc-lg-body {
    height: 100%;
    overflow: hidden;
    border-radius: 14px;
    border-top: 12px solid var(--lg-c);
    background: var(--robbo-white);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--robbo-coal) 9%, transparent), inset 0 0 0 1px var(--robbo-line);
}
.rc-lg-photo { margin: 0; aspect-ratio: 16 / 10; background: var(--robbo-grey-light); }
.rc-lg-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rc-lg-text { padding: 14px 18px 20px; }
.rc-lg-step { font-size: var(--robbo-fs-badge); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--lg-teal-ink); }
.rc-lg-t { margin: 4px 0 6px; font-size: 21px; font-weight: 800; line-height: 1.25; color: var(--robbo-black); }
.rc-lg-p { margin: 0; font-size: var(--robbo-fs-base); line-height: 1.6; }
/* Drop-in, only when the script armed it (the wall was below the first screen). */
.rc-lg-wall.is-armed .rc-lg-brick { opacity: 0; transform: translateY(-48px); }
.rc-lg-wall.is-armed.is-in .rc-lg-brick {
    opacity: 1;
    transform: none;
    transition: transform 0.5s cubic-bezier(0.3, 1.45, 0.5, 1) calc(var(--lg-i) * 130ms), opacity 0.25s ease calc(var(--lg-i) * 130ms);
}

.rc-lg-more { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px; }
.rc-lg-note { padding: 22px 22px 24px; border-radius: 20px; background: var(--lg-base); }
.rc-lg-note--merged { background: var(--robbo-grey-light); }
.rc-lg-note-eyebrow { font-size: var(--robbo-fs-badge); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--robbo-green-dark); }
.rc-lg-h3 { margin: 2px 0 8px; font-size: 21px; font-weight: 800; line-height: 1.25; color: var(--robbo-black); }
.rc-lg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--robbo-fs-base); line-height: 1.55; }
.rc-lg-list strong { color: var(--robbo-black); }
.rc-lg-day { margin: 24px auto 0; max-width: 760px; font-size: var(--robbo-fs-base); line-height: 1.6; text-align: center; }
.rc-lg-day a { font-weight: 700; color: var(--robbo-green-dark); text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 720px) {
    .rc-lg-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rc-lg-brick:last-child { grid-column: 1 / -1; max-width: 50%; justify-self: center; width: 100%; }
}
@media (min-width: 1024px) {
    .rc-lg { padding: 64px 32px 72px; }
    .rc-lg-h2 { font-size: 32px; }
    /* Three bricks below, two laid on top half-way across — a small wall. */
    .rc-lg-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .rc-lg-brick { grid-column: span 2; }
    .rc-lg-brick:nth-child(4) { grid-column: 2 / span 2; }
    .rc-lg-brick:last-child { grid-column: 4 / span 2; max-width: none; }
    .rc-lg-more { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}
@media (prefers-reduced-motion: reduce) {
    .rc-lg-wall.is-armed .rc-lg-brick { opacity: 1; transform: none; transition: none; }
}