/* ========================================================================== LOVELY EVENTS & DECORATION — mobile.css Mobile/tablet responsive-polish pass. Loaded LAST (after motion.css) so these rules win the cascade at equal specificity. Reuses existing tokens (--color-*, --font-*, --dur-*, --ease) and classes from styles.css / category.css / quote.css / motion.css — no new components, only targeted fixes for phones (≤ 480px), small tablets and landscape phones. Sections: 1. About collage — robust mobile layout (was a CSS Grid row-track bug) 2. Gallery filter pills — horizontal scroll + snap + fade edges 3. Floating Call/WhatsApp + back-to-top — small-screen footprint 4. Landscape phone safety 5. Misc small-screen polish ========================================================================== */ /* -------------------------------------------------------------------------- 1. About collage -------------------------------------------------------------------------- */ /* Below the 900px breakpoint (see .about-grid in styles.css) the collage sits under the copy at full container width. Its 2-col / row-spanning bento grid relies on each photo's own aspect-ratio to size the tracks; at phone widths the browser's row-track distribution for the item spanning both rows (nth-child(1)) doesn't match the other two items' own row heights, so a large empty gap opens up between them. Simplify to a clean, fully predictable 2-row layout instead: one wide photo on top, two photos side by side underneath. */ @media (max-width: 899px) { .about-collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; min-height: 0; } .about-collage .media:nth-child(1) { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10 !important; } .about-collage .media:nth-child(2), .about-collage .media:nth-child(3) { grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1 !important; } } /* -------------------------------------------------------------------------- 2. Gallery filter pills — single horizontally-scrolling row -------------------------------------------------------------------------- */ /* At desktop widths the pills wrap and centre, which reads fine with the room available. Under 1024px (where .gallery-head stops being a flex row — see styles.css) that same wrap turns into 4-6 centred rows of pills, pushing the actual photos far down and, on the smallest phones, landing squarely under the fixed floating Call/WhatsApp buttons. A single scrollable row keeps the whole filter bar to one compact line, exactly like the category page's own .cat-switcher. */ @media (max-width: 1023px) { .gallery-filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline: 20px; padding-block: 2px; /* Fade the last pill at each edge so it's visually obvious the row scrolls, without needing arrow buttons. */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); } .gallery-filters::-webkit-scrollbar { display: none; } .gallery-filters { scrollbar-width: none; } .filter-btn { flex: none; scroll-snap-align: start; } } /* Container padding is 32px at ≥768px (see styles.css .container), so the scroll-padding/mask insets need to match at that breakpoint too. */ @media (min-width: 768px) and (max-width: 1023px) { .gallery-filters { scroll-padding-inline: 32px; } } /* -------------------------------------------------------------------------- 3. Floating Call/WhatsApp + back-to-top — small-screen footprint -------------------------------------------------------------------------- */ /* Both are fixed to the same bottom corners as content scrolls underneath, so on the narrowest phones every px of footprint matters. Shrink them a touch (still ≥ 44px) and pull them a little closer to the edge, matching the existing .m-top ≤480px rule already in motion.css. */ @media (max-width: 380px) { .floating-contact { right: 12px; } } /* -------------------------------------------------------------------------- 4. Landscape phone (short viewport, e.g. 844×390) -------------------------------------------------------------------------- */ @media (max-height: 480px) and (orientation: landscape) { /* The mobile drawer can otherwise exceed the viewport height with the contact block pushed out of reach; let it scroll internally. */ .mobile-drawer { overflow-y: auto; padding-bottom: max(20px, env(safe-area-inset-bottom)); } /* Shrink the banner so the switcher + close button never eat the whole visible height before the visitor sees any content. */ .cat-banner { min-height: 88vh; } } /* -------------------------------------------------------------------------- 5. Misc small-screen polish -------------------------------------------------------------------------- */ /* Quote chip grid: keep a comfortable 2-up minimum instead of 3+ cramped columns on the narrowest phones (contact.css already drops to 80px min at ≤374px; widen the floor slightly below 340px so labels don't wrap to 3+ lines inside a 76px-tall chip). */ @media (max-width: 340px) { #contact .q-chip-grid { grid-template-columns: repeat(2, 1fr); } } /* iOS Safari's date input can render its calendar glyph awkwardly tight against the field's right edge at 16px padding; give it a hair more breathing room so the native picker icon stays a comfortable tap target. */ @media (max-width: 480px) { .form-row input[type="date"] { padding-right: .6em; } } /* ========================================================================== 6. Shorten-the-scroll pass — phones (and, where noted, small tablets). The client reported the mobile page was "very long to scroll" (~16,900px at 375px). These rules convert three stacked grids (Services, Categories, Welcome) into horizontal swipe carousels, collapse the Gallery to a taste of 6 photos with a "View all" expander, compact Why Choose Us and About, and trim section/divider/footer spacing — all without deleting any copy, photos or links. Desktop (≥1024px) is untouched: every rule below is scoped to ≤1023px or ≤767px. ========================================================================== */ /* -------------------------------------------------------------------------- 6a. Shared swipe-carousel mechanics — Services / Categories / Welcome -------------------------------------------------------------------------- */ /* Nav row (arrows + counter/dots) is desktop-invisible by default; only the carousel breakpoint below turns it on, so the JS-rendered buttons never show up at ≥1024px where the grids stay as normal CSS grids. */ .mgrid-nav { display: none; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.1rem; } .mgrid-arrow { flex: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-gold); background: rgba(245, 243, 239, .06); color: var(--color-text); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .mgrid-arrow .icon { width: 18px; height: 18px; } .mgrid-arrow:hover, .mgrid-arrow:focus-visible { background: var(--color-secondary); border-color: var(--color-secondary); } .mgrid-counter { min-width: 4.4em; text-align: center; color: var(--color-text-muted); font-size: .82rem; font-weight: 700; letter-spacing: .04em; } .mgrid-dots { display: flex; align-items: center; gap: .1rem; } .mgrid-dot { flex: none; width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; } .mgrid-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-gold); transition: background var(--dur-fast) var(--ease), width var(--dur-fast) var(--ease); } .mgrid-dot.is-active::after { background: var(--color-secondary); width: 18px; border-radius: 999px; } @media (max-width: 1023px) { .mgrid-nav { display: flex; } #servicesGrid, #categoriesGrid, #welcomeGrid { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-padding-inline: 20px; /* Full-bleed to the viewport edge so the next card visibly peeks in, re-adding the container's own inline padding as inner scroll padding so the first/last card still lines up with the heading above it. */ margin-inline: -20px; padding-inline: 20px; padding-bottom: .35rem; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); } #servicesGrid::-webkit-scrollbar, #categoriesGrid::-webkit-scrollbar, #welcomeGrid::-webkit-scrollbar { display: none; } #servicesGrid, #categoriesGrid, #welcomeGrid { scrollbar-width: none; } #servicesGrid > .service-card, #categoriesGrid > .category-tile, #welcomeGrid > .welcome-card { scroll-snap-align: start; flex: none; } #servicesGrid { gap: 1rem; margin-top: 1.4rem; } #servicesGrid > .service-card { width: min(82vw, 320px); } /* Description trimmed to 2 lines so every card is the same compact height regardless of copy length — the full text is still in the DOM/markup, only the visual line count is capped. */ .service-card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #categoriesGrid { gap: .7rem; margin-top: 1.4rem; } #categoriesGrid > .category-tile { width: 46vw; min-height: 0; aspect-ratio: 1 / 1; } #welcomeGrid { gap: 1rem; margin-top: 1.6rem; } #welcomeGrid > .welcome-card { width: 86vw; } } @media (min-width: 768px) and (max-width: 1023px) { #servicesGrid, #categoriesGrid, #welcomeGrid { scroll-padding-inline: 32px; margin-inline: -32px; padding-inline: 32px; } } /* -------------------------------------------------------------------------- 6b. Gallery — collapse to 6 photos on phones, "View all" expander -------------------------------------------------------------------------- */ /* Pre-existing bug, all viewports: .gallery-item is a