/* LIKELIKE-NYLAND (2026-10-13, redesign v2): dedicated, fully isolated stylesheet for the "Дед Мороз и Снегурочка — новогодние праздники" landing (frontend/event.blade.php, event_types.slug = ded-moroz-i-snegurochka-novogodnie-prazdniki). Loaded ONLY by this one page. Every selector below is scoped under .nyland-* / body.nyland-page - nothing here touches style.css/city.css/home.css or any class used by another page. Palette v2 (owner-specified brand colors, 2026-10-13): #FF4616 / #FF0A57 / #FF830A / #FFFFFF, plus a light festive green and small gold accents - replaces the v1 solid dark-navy treatment, which the owner rejected as not matching LikeLike's actual visual style (city pages: light/photo-led, not a dark app-like theme). */ :root { --nyland-red: #FF4616; --nyland-pink: #FF0A57; --nyland-orange: #FF830A; --nyland-green: #2E9E53; --nyland-green-soft: #E6F6EA; --nyland-gold: #D4AF37; --nyland-gold-light: #F7E2A0; --nyland-white: #FFFFFF; --nyland-cream: #FFF7F0; --nyland-ink: #2B2420; --nyland-ink-soft: #7A6F63; /* Dark tone used ONLY for the small legibility scrim directly on the hero photo (see .nyland-hero-scrim) - a warm near-black red, not navy, so even that one necessarily-dark patch reads as part of the red/gold palette rather than a leftover of the old theme. */ --nyland-scrim: 28, 6, 6; } body.nyland-page { background: var(--nyland-white); color: var(--nyland-ink); /* Last-resort safety net only, NOT the real fix - see the box-sizing rule immediately below for the actual root cause this was masking. */ overflow-x: hidden; } /* LIKELIKE-NYLAND (2026-10-12, mobile overflow fix): the real cause of the reported Android edge-clipping - style.css (sitewide) never sets a universal box-sizing:border-box, only on a handful of its own specific classes (confirmed by grep - the only project-wide default is the browser's content-box). Several .nyland-* rules combine `width: 100%` with horizontal padding (.nyland-btn-sm, the mobile .nyland-btn, .nyland-audience-card) - in content-box sizing that padding is ADDED on top of the 100% width, so those elements render wider than their parent. .nyland-audience-card has no clipping ancestor, so on mobile (where it also gets width:100%) that overflow reached all the way to the page body, masked only by the overflow-x:hidden above - exactly the "content cut off at the edges" the owner reported. Scoped to this page only via the body class, same fix already proven on Netanya's content cards (CLAUDE.md §E). */ body.nyland-page *, body.nyland-page *::before, body.nyland-page *::after { box-sizing: border-box; } body.nyland-page h1, body.nyland-page h2, body.nyland-page h3, body.nyland-page h4, body.nyland-page .nyland-section-title { font-family: "Playfair Display", "Fira Sans", Arial, Helvetica, sans-serif; } /* LIKELIKE-NYLAND (2026-10-13, redesign v3): festive red tint behind the SHARED sitewide header, scoped to this page only via the body class - header.blade.php and style.css's own `header{...}` rules are never touched, so every other page's header stays exactly as it is today. Icons/logo already render in white/light colors sitewide (confirmed live on every existing page), so no icon recoloring is needed here. */ body.nyland-page header { background: linear-gradient(135deg, var(--nyland-red), var(--nyland-pink)); } .nyland-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } /* LIKELIKE-NYLAND (2026-10-13): the sitewide language pill (`.screen-bg .lang{position:fixed}` in style.css, shared by every .screen-bg page on the site) is hidden ONLY here, on mobile, and replaced by this page's own in-flow .nyland-hero-lang in the control bar under the photo - exact same reasoning/precedent as the homepage Hero's .home-hero-lang. style.css itself is never touched; desktop keeps the sitewide floating pill, untouched. */ @media only screen and (max-width: 767px) { body.nyland-page .lang { display: none; } } /* ================= DRAFT RIBBON ================= */ .nyland-draft-ribbon { background: var(--nyland-gold-light); color: #4a3a00; text-align: center; font-size: 13px; font-weight: 700; padding: 8px 12px; letter-spacing: 0.02em; position: relative; z-index: 5; } /* ================= HERO ================= */ /* LIKELIKE-NYLAND (2026-10-13, redesign v2): real pixel sampling of the mobile panda photo (940x1672, sampled at the horizontal center column) found: sky/snowflakes 0-24%, the Santa hat begins at ~25-26%, face ~30-40%, and the figure (body/arms/legs/shoes) continues almost to the bottom in this full-body action pose. So the ONLY safe zone for text directly on the photo is the top ~24% - that is where the H1 (and only the H1 - a short, single piece of text) is anchored, with a scrim that fades out before the hat starts. Subtitle/buttons/language links live in the compact, light .nyland-hero-bar immediately below the photo - flush against it (no gap, same visual unit), not a separate "huge section". .nyland-hero-photo-wrap's aspect-ratio matches each source photo exactly (mobile 940:1672, desktop 1920:768 - see media query below), so the (height:100%, object-fit:contain as a pure safety net) is never cropped and never letterboxed - the box IS the photo's own shape at every width, by construction, not by chance. */ .nyland-hero { position: relative; } @media only screen and (min-width: 768px) { .nyland-hero { max-width: 1920px; margin: 0 auto; } } .nyland-hero-photo-wrap { position: relative; overflow: hidden; aspect-ratio: 940 / 1672; background: #efe4d8; } @media only screen and (min-width: 768px) { .nyland-hero-photo-wrap { aspect-ratio: 1920 / 768; } } .nyland-hero-photo { display: block; width: 100%; height: 100%; object-fit: contain; } /* LIKELIKE-NYLAND (2026-10-14, redesign v5 - poster hero): the owner's ready-made RU/EN posters are a single 1024x1536 (2:3) image used identically at every width - no separate mobile/desktop crop this time (the .nyland-hero-photo-wrap rule above, with its own 940:1672/1920:768 aspect-ratio pair, stays exactly as-is and keeps serving the fallback HE path). Same "box IS the photo's own shape, by construction" no-crop guarantee as every previous hero version - just a different, single, simpler ratio. */ .nyland-hero-photo-wrap-poster { aspect-ratio: 1024 / 1536; } @media only screen and (min-width: 768px) { .nyland-hero-photo-wrap-poster { /* Caps how wide/tall the poster can get on a big desktop screen - a 2:3 portrait poster rendered edge-to-edge on a 1920px-wide desktop viewport would be nearly 2900px tall. Centers instead, same max-width approach .nyland-hero itself already uses. */ max-width: 640px; margin: 0 auto; } } /* Standard accessible "visually hidden" utility - the real H1 text stays in the DOM (readable by screen readers, indexable by search engines) but is not shown on screen, since the poster already carries the heading visually. Deliberately NOT display:none (which some screen readers skip entirely) - this is the standard, broadly-documented "sr-only" pattern (WebAIM/Bootstrap's own implementation), not a one-off guess. */ .nyland-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Height is a PERCENTAGE of the photo box (not a fixed px value) so the safe margin above the hat scales correctly at 360/390/412px alike - verified against the real measured ~25% hat-start threshold, with a small buffer under it. */ .nyland-hero-scrim { position: absolute; top: 0; left: 0; right: 0; height: 24%; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(var(--nyland-scrim), 0.82) 0%, rgba(var(--nyland-scrim), 0.52) 60%, rgba(var(--nyland-scrim), 0) 100% ); } /* A few small static snowflake dots over the scrim only - cheap, no JS, no animation. Not used anywhere else on the page (every other section is light, where white dots would be invisible/pointless). */ .nyland-hero-scrim::after { content: ""; position: absolute; inset: 0; opacity: 0.55; background-image: radial-gradient(1.5px 1.5px at 12% 30%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 30% 60%, #fff, transparent 60%), radial-gradient(2px 2px at 50% 20%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 70% 55%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 88% 35%, #fff, transparent 60%); } .nyland-h1 { position: absolute; top: 0; left: 0; right: 0; /* Hard safety cap matching the scrim's own 24% zone (percentage, so it scales correctly at every width the same way .nyland-hero-scrim does - see that rule's comment). If a future, much longer H1 would otherwise wrap past this, it gets clipped here rather than silently spilling text, unprotected by the scrim, onto the panda's hat/face below. */ max-height: 24%; overflow: hidden; z-index: 2; /* LIKELIKE-NYLAND (2026-10-14, redesign v4): a bit more breathing room from the site header above (owner feedback: title sat too close to the top edge) - still well inside the measured-safe 24% zone (see the pixel-sampling comment on .nyland-hero-photo-wrap above), just no longer flush against it. */ padding: 18px 14px 0; text-align: center; margin: 0; } .nyland-h1-main { display: block; font-family: "Playfair Display", "Fira Sans", Arial, Helvetica, sans-serif; font-weight: 900; /* Scales with viewport width (not a fixed px) so it stays proportionally smaller on a 360px phone than a 412px one, reducing wrap risk specifically at the narrowest tested width. */ font-size: clamp(19px, 5.8vw, 26px); line-height: 1.22; } /* LIKELIKE-NYLAND (2026-10-14, redesign v4 - readability fix): replaces the v3 background-clip:text gradient + semi-transparent stroke (which depends on `-webkit-text-fill-color`/`background-clip:text` support - inconsistent on some Android WebViews, and was the likely cause of the "dark, hard to read" report together with the Cyrillic font-fallback bug above). This is a SOLID base color (always renders, on every browser, no fallback gamble) plus an 8-direction text-shadow "faux stroke" for the embossed outline look the mockup has, plus one more shadow layer for a soft glow and one for drop-shadow separation from the busy photo behind it. */ .nyland-h1-part1 { color: var(--nyland-red); text-shadow: -1.5px -1.5px 0 var(--nyland-gold), 1.5px -1.5px 0 var(--nyland-gold), -1.5px 1.5px 0 var(--nyland-gold), 1.5px 1.5px 0 var(--nyland-gold), 0 0 1px var(--nyland-gold), 0 0 16px rgba(212,175,55,0.85), 0 3px 8px rgba(0,0,0,0.6); } .nyland-h1-part2 { display: inline-block; margin-top: 2px; color: #F2FAFF; text-shadow: -1.5px -1.5px 0 #1C4E8C, 1.5px -1.5px 0 #1C4E8C, -1.5px 1.5px 0 #1C4E8C, 1.5px 1.5px 0 #1C4E8C, 0 0 10px rgba(212,175,55,0.6), 0 3px 8px rgba(0,0,0,0.6); } /* The "occasion" line (after the em-dash) - a small ribbon-style tag, icy white/pale-blue so it reads as a secondary line under the big names, not competing with them. */ .nyland-h1-ribbon { display: inline-block; margin-top: 8px; padding: 3px 14px; border-radius: 999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.4); color: #eaf6ff; font-family: "Fira Sans", Arial, Helvetica, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.02em; text-shadow: 0 1px 4px rgba(0,0,0,0.5); } @media only screen and (min-width: 768px) { .nyland-h1 { padding: 30px 24px 0; } .nyland-h1-main { font-size: 46px; } .nyland-h1-ribbon { font-size: 15px; padding: 5px 20px; margin-top: 12px; } } /* LIKELIKE-NYLAND (2026-10-13, redesign v3): red/gold gradient instead of plain white - per the owner's explicit "убрать ощущение пустой белой страницы" direction, the bar reads as part of the same festive composition as the photo above it, not a plain utility strip. */ .nyland-hero-bar { background: linear-gradient(135deg, var(--nyland-red) 0%, var(--nyland-pink) 100%); padding: 18px 20px 20px; text-align: center; border-bottom: 4px solid var(--nyland-gold); position: relative; overflow: hidden; } /* LIKELIKE-NYLAND (2026-10-14, redesign v6): the bar now holds ONLY the order/WhatsApp buttons + language links (subtitle/points moved to .nyland-summary, below the programs grid) - tighter vertical padding since there is less content, so it stays a genuinely compact strip between the photo and the programs section right under it. */ .nyland-hero-bar-compact { padding-top: 14px; padding-bottom: 14px; } .nyland-hero-bar-compact .nyland-hero-actions { margin-bottom: 0; } /* Soft snowflake texture, identical technique to .nyland-hero-scrim::after above, reused here since this bar is also a dark-ish, photo-free surface where white dots read clearly. */ .nyland-hero-bar::before { content: ""; position: absolute; inset: 0; opacity: 0.25; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 8% 25%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 22% 70%, #fff, transparent 60%), radial-gradient(2px 2px at 40% 40%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 60% 75%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 78% 30%, #fff, transparent 60%), radial-gradient(2px 2px at 92% 60%, #fff, transparent 60%); } .nyland-hero-bar > * { position: relative; z-index: 1; } .nyland-hero-subtitle { font-size: 15px; font-weight: 700; color: var(--nyland-gold-light); margin: 0 0 12px; } @media only screen and (min-width: 768px) { .nyland-hero-subtitle { font-size: 19px; } } /* Compact 3-line summary list under the subtitle - gold star markers, matches the mockup's bullet treatment. */ .nyland-hero-points { list-style: none; margin: 0 0 16px; padding: 0; display: inline-flex; flex-direction: column; gap: 6px; text-align: left; } .nyland-hero-points li { color: #fff; font-size: 13px; font-weight: 600; padding-left: 22px; position: relative; } .nyland-hero-points li::before { content: "⭐"; position: absolute; left: 0; top: -1px; font-size: 12px; } @media only screen and (min-width: 768px) { .nyland-hero-points { gap: 8px; } .nyland-hero-points li { font-size: 15px; padding-left: 26px; } } /* LIKELIKE-NYLAND (2026-10-14, redesign v6 - layout reorder): the subtitle + points list used to sit only inside the dark-red hero bar. They now also appear in .nyland-summary, a light section below the programs grid - these "-light" modifiers swap the colors tuned for a dark background (gold/white) for ones tuned for a light one (dark red subtitle, ink body text, red/gold star marker), reusing the same markup/sizing rules above unchanged. */ .nyland-hero-subtitle-light { color: var(--nyland-red); } .nyland-hero-points-light li { color: var(--nyland-ink); } .nyland-hero-intro { font-size: 16px; line-height: 1.6; color: var(--nyland-ink); margin: 0; max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; } .nyland-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .nyland-hero-lang { display: none; gap: 8px; justify-content: center; margin-top: 14px; font-family: "Fira Sans", Arial, Helvetica, sans-serif; font-size: 13px; } @media only screen and (max-width: 767px) { .nyland-hero-lang { display: flex; } } .nyland-hero-lang a, .nyland-hero-lang span { padding: 4px 11px; border-radius: 999px; text-decoration: none; color: #fff; border: 1px solid rgba(255,255,255,0.5); } .nyland-hero-lang span.is-active { background: var(--nyland-gold); color: #4a2a00; border-color: var(--nyland-gold); font-weight: 700; } /* LIKELIKE-NYLAND (2026-10-13): the primary button sits on a red bar here (and in .nyland-final-cta, also a dark red background) - red-on-red gradient would lose almost all contrast with the default .nyland-btn-primary styling (used elsewhere, correctly, on WHITE program cards - not changed there). Inverted to a bright white/gold "ticket" treatment ONLY in these two dark contexts. */ .nyland-hero-bar .nyland-btn-primary, .nyland-final-cta .nyland-btn-primary { background: linear-gradient(135deg, #fff, var(--nyland-gold-light)); color: var(--nyland-red); box-shadow: 0 6px 16px rgba(0,0,0,0.25); } /* ================= BUTTONS ================= */ .nyland-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 999px; font-family: "Fira Sans", Arial, Helvetica, sans-serif; font-weight: 700; font-size: 15px; text-decoration: none; border: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .nyland-btn:hover { transform: translateY(-1px); } .nyland-btn-sm { padding: 10px 18px; font-size: 13px; width: 100%; } .nyland-btn-primary { background: linear-gradient(135deg, var(--nyland-red), var(--nyland-pink)); color: #fff; box-shadow: 0 6px 16px rgba(255,10,87,0.3); } .nyland-btn-whatsapp { background: #25D366; color: #fff; } .nyland-btn-outline { background: #fff; color: var(--nyland-red); border: 1.5px solid var(--nyland-red); } /* ================= SECTIONS (shared rhythm) ================= */ .nyland-section { padding: 48px 0; } .nyland-section-title { font-size: 26px; color: var(--nyland-red); text-align: center; margin: 0 0 28px; } .nyland-intro { background: var(--nyland-white); padding-top: 32px; } /* LIKELIKE-NYLAND (2026-10-14, redesign v6 - layout reorder): new section, sits right after the relocated programs grid - same light background .nyland-intro used, so the page still alternates white/cream/green section tones below it (audiences/gallery/geo/why/faq) exactly as before. */ .nyland-summary { background: var(--nyland-white); padding-top: 32px; } .nyland-audiences { background: var(--nyland-cream); } .nyland-gallery { background: var(--nyland-cream); } .nyland-geo { background: var(--nyland-white); } .nyland-why { background: var(--nyland-green-soft); } .nyland-faq { background: var(--nyland-white); } /* LIKELIKE-NYLAND (2026-10-13, redesign v3): "Выберите программу" gets its own rich red/gold section background, matching the mockup - deliberately the most saturated section on the page, since the 6 priced programs are the main conversion point. Snowflake texture reused from the hero bar at lower opacity so it doesn't fight the white program cards for attention. */ .nyland-programs { background: linear-gradient(160deg, var(--nyland-red) 0%, #c22c0a 100%); position: relative; overflow: hidden; } .nyland-programs::before { content: ""; position: absolute; inset: 0; opacity: 0.12; pointer-events: none; background-image: radial-gradient(2px 2px at 6% 15%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 18% 55%, #fff, transparent 60%), radial-gradient(2px 2px at 32% 85%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 48% 30%, #fff, transparent 60%), radial-gradient(2px 2px at 64% 65%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 80% 20%, #fff, transparent 60%), radial-gradient(2px 2px at 92% 75%, #fff, transparent 60%); } .nyland-programs .nyland-container { position: relative; z-index: 1; } .nyland-programs .nyland-section-title { color: var(--nyland-gold-light); } /* LIKELIKE-NYLAND (2026-10-14, redesign v4): Mountains of Christmas dropped here too, same Cyrillic-support reasoning as .nyland-h1-part1/ part2 above - this heading ("Выберите программу") is RU/EN/HE text same as the H1. */ .nyland-section-title-script { font-family: "Playfair Display", "Fira Sans", Arial, Helvetica, sans-serif; font-weight: 900; font-size: 32px; margin-bottom: 8px; } @media only screen and (min-width: 768px) { .nyland-section-title-script { font-size: 44px; } } /* LIKELIKE-NYLAND (2026-10-13, redesign v3): small ornamental divider under the script heading - pure CSS (two short gradient lines + a star), no extra image/HTTP request, per "не перегружать... не ухудшать скорость загрузки". */ .nyland-section-title-script + .nyland-flourish { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 28px; } .nyland-flourish::before, .nyland-flourish::after { content: ""; width: 46px; height: 2px; background: linear-gradient(90deg, transparent, var(--nyland-gold-light)); } .nyland-flourish::after { background: linear-gradient(90deg, var(--nyland-gold-light), transparent); } .nyland-flourish span { color: var(--nyland-gold-light); font-size: 16px; } /* LIKELIKE-NYLAND: the former sleigh/reindeer hero photo (kept as a file, reused here as the one deliberately atmospheric/photo section on an otherwise light page - the closing CTA). Dark overlay retinted to a warm maroon (matching the new palette) instead of the old navy, so it reads as "part of the red/gold theme" rather than a leftover. */ .nyland-final-cta { position: relative; background-color: #3a0d0d; background-size: cover; background-position: 50% 30%; overflow: hidden; } .nyland-final-cta-overlay { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(58,13,13,0.88) 0%, rgba(58,13,13,0.93) 100%); } .nyland-final-cta .nyland-section-title { color: var(--nyland-gold-light); } .nyland-final-cta { text-align: center; } .nyland-why p, .nyland-geo-text { color: var(--nyland-ink); font-size: 16px; line-height: 1.7; text-align: center; max-width: 760px; margin: 0 auto; } /* ================= AUDIENCE CARDS (3 blocks) ================= */ .nyland-audiences-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .nyland-audience-card { background: var(--nyland-white); border: 1px solid #f1e4cf; border-top: 4px solid var(--nyland-orange); border-radius: 16px; padding: 26px 20px; text-align: center; color: var(--nyland-ink); display: flex; flex-direction: column; align-items: center; box-shadow: 0 6px 20px rgba(43,36,32,0.06); } .nyland-audience-icon { font-size: 32px; margin-bottom: 10px; } .nyland-audience-card h3 { color: var(--nyland-red); font-size: 18px; margin: 0 0 10px; } .nyland-audience-card p { font-size: 14px; line-height: 1.6; color: var(--nyland-ink-soft); margin: 0 0 20px; flex-grow: 1; } /* LIKELIKE-NYLAND (2026-10-13, redesign v3): three distinct card colors per the mockup (red / white / green), instead of all-white - the outline button inside each is recolored to match so it still reads as "outlined", not just invisible-on-same-color. */ .nyland-audience-card-red { background: linear-gradient(160deg, var(--nyland-red), #d43a12); border-top-color: var(--nyland-gold); color: #fff; } .nyland-audience-card-red h3 { color: #fff; } .nyland-audience-card-red p { color: rgba(255,255,255,0.88); } .nyland-audience-card-red .nyland-btn-outline { background: transparent; color: #fff; border-color: #fff; } .nyland-audience-card-white { border-top-color: var(--nyland-red); } .nyland-audience-card-green { background: linear-gradient(160deg, var(--nyland-green), #22813f); border-top-color: var(--nyland-gold); color: #fff; } .nyland-audience-card-green h3 { color: #fff; } .nyland-audience-card-green p { color: rgba(255,255,255,0.88); } .nyland-audience-card-green .nyland-btn-outline { background: transparent; color: #fff; border-color: #fff; } /* LIKELIKE-NYLAND (2026-10-12, SEO-NY-1): contextual cross-link to items.id=86 ("Дед Мороз и Снегурочка на дом") inside the one audience card it's actually relevant to - small, secondary text link so it doesn't compete visually with the card's own primary CTA button right below it. Gold tone reads clearly on this card's dark green background and matches the page's festive accent color. */ .nyland-audience-link { display: inline-block; margin-bottom: 14px; font-size: 13px; color: var(--nyland-gold-light); text-decoration: underline; } .nyland-audience-link:hover { color: #fff; } /* ================= PROGRAMS GRID ================= */ .nyland-programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .nyland-program-card { background: var(--nyland-white); border: 1px solid #f1e4cf; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 6px 20px rgba(43,36,32,0.06); } .nyland-program-photo { aspect-ratio: 4 / 3; background: var(--nyland-green-soft); overflow: hidden; } /* LIKELIKE-NYLAND (2026-10-13): changed from object-fit:cover to contain - per explicit instruction "без обрезки лиц персонажей". Real photos arrive one at a time with varying, unpredictable aspect ratios (the first one is 1536x1024/3:2 against this box's 4:3), so cropping to fill would risk cutting a face at the edge depending on each photo's own framing. contain guarantees no face is ever cropped, at the cost of a small amount of visible card background on photos whose aspect doesn't exactly match 4:3 - an acceptable, deliberate trade-off here (unlike the hero, where the photo wrapper's aspect-ratio is tuned to match exactly and there's no trade-off at all). */ .nyland-program-photo img { width: 100%; height: 100%; object-fit: contain; display: block; } .nyland-program-noimg { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 34px; background: linear-gradient(135deg, var(--nyland-green-soft), #fff); } .nyland-program-noimg span { font-family: "Fira Sans", Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 600; color: var(--nyland-ink-soft); } .nyland-program-body { padding: 16px 18px 20px; text-align: center; color: var(--nyland-ink); } .nyland-program-body h4 { font-size: 17px; margin: 0 0 8px; color: var(--nyland-ink); } .nyland-program-duration { font-size: 13px; color: var(--nyland-ink-soft); margin-bottom: 6px; } .nyland-program-price { font-size: 22px; font-weight: 700; color: var(--nyland-red); margin-bottom: 14px; } /* ================= GALLERY ================= */ /* LIKELIKE-NYLAND (2026-10-12, gallery v1): replaces the old repeat(auto-fill, minmax(160px, 1fr)) rule - that 160px hard floor was itself a second overflow source (2 tracks * 160px + gap can exceed a ~320-360px phone's available width once the 16px container padding is subtracted), independent of the box-sizing bug fixed above. Explicit column counts per breakpoint instead, same pattern as .nyland-programs-grid. */ .nyland-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media only screen and (min-width: 1200px) { .nyland-gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } } /* Real event photos arrive at varying aspect ratios (square, 4:3-ish landscape) - contain, not cover, per explicit "сохранять пропорции изображений, без обрезания" instruction, same reasoning already applied to .nyland-program-photo above. The cream fill shows only as a thin letterbox strip on the landscape shots. */ .nyland-gallery-item { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid #f1e4cf; background: var(--nyland-cream); padding: 0; margin: 0; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; /* now a