/* ============================================================================ Roaya front theme — layout & responsiveness ---------------------------------------------------------------------------- main.css keeps the animations and interaction polish. This file owns every declaration that has to CHANGE with the viewport. ⚠ Why the --r-cols custom property pattern: the theme's markup is inline-styled, and an inline `grid-template-columns` beats any stylesheet. So the blades now set a *variable* (--r-cols) and this file owns the property itself. A media query can then override it with no !important and no specificity war. Keep it that way — never put grid-template-columns back into a style="" attribute. Breakpoints: 1080 (tablet landscape) · 900 (tablet / hamburger) · 640 (phone) · 420 (small phone) Everything is written with logical properties so dir="rtl" mirrors it. ========================================================================== */ :root { --r-pad: 28px; /* page gutter, narrows with the viewport */ --r-gap: 18px; --r-nav-h: 86px; /* sticky header height, for scroll offsets */ } /* Never let replaced content push the page wider than the screen. */ img, svg, video, iframe, canvas, table { max-width: 100%; } img { height: auto; } /* ─── Fluid type ────────────────────────────────────────────────────────── clamp() is what makes browser ZOOM work, not just narrow screens: the size tracks the viewport continuously instead of jumping at a breakpoint. */ .r-h1 { font-size: clamp(30px, 3.4vw + 16px, 58px); line-height: 1.06; } .r-h1-sm { font-size: clamp(27px, 2.4vw + 15px, 46px); line-height: 1.1; } .r-h2 { font-size: clamp(24px, 1.9vw + 15px, 38px); line-height: 1.15; } .r-h3 { font-size: clamp(21px, 1.4vw + 14px, 34px); line-height: 1.2; } .r-h4 { font-size: clamp(18px, 0.9vw + 13px, 24px); line-height: 1.25; } .r-num { font-size: clamp(24px, 1.9vw + 14px, 34px); } /* ─── Page container ───────────────────────────────────────────────────── */ .r-wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--r-pad); width: 100%; } /* ─── Grids ──────────────────────────────────────────────────────────────── Each class states its desktop shape; the media queries below collapse it. */ .r-grid-3, .r-grid-4, .r-cards-2, .r-split, .r-split-form, .r-detail, .r-footer, .r-stats, .r-mosaic, .r-unit-row, .r-unit-head { display: grid; gap: var(--r-gap); } .r-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .r-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .r-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Asymmetric two-column blocks. The ratio comes from the call site as style="--r-cols:1.55fr 1fr" so each section keeps its own proportion. */ .r-split { grid-template-columns: var(--r-cols, 1fr 1fr); align-items: var(--r-align, stretch); } .r-split-form { grid-template-columns: var(--r-cols, 0.85fr 1.15fr); } .r-detail { grid-template-columns: var(--r-cols, 1.35fr 1fr); align-items: start; } /* Project stat strip — was repeat(count($stats),1fr), which made 60px columns with five stats even on a desktop. */ .r-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; } /* Gallery mosaic. --r-cols is chosen by the blade from the tile count. ⚠ `grid-template-rows: minmax(0, 1fr)` and `min-height: 0` are what keep the photos INSIDE the box, and neither is optional. The mosaic had a fixed height and an implicit `auto` row. An auto row is sized by its content, and `align-content: stretch` can only ADD space to a track, never take it away — so the row grew to whatever the tiles wanted and the surplus painted straight over the page, because the container is `overflow: visible`. A tile wants a lot: `.gal-item` has no height of its own, so `img { height: 100% }` has no definite parent to resolve against and falls back to the image's own aspect ratio. Landscape photos happened to land under 380px and looked fine; PORTRAIT ones did not. Measured on the real catalogue: Glee and Layana ran the row to 700px and spilled 320px, burying the project's own

, its developer line and most of its description under the pictures. Four of the thirteen projects were affected — whichever ones the developer supplied portrait artwork for. `minmax(0, 1fr)` gives the row a definite height equal to the container, and `min-height: 0` removes the automatic minimum size that would let an item's intrinsic height push the track open again. `overflow: hidden` is the belt to that pair of braces: if a future tile ever measures wrong it gets clipped rather than dropped on top of the article. */ .r-mosaic { grid-template-columns: var(--r-cols, 1fr); grid-template-rows: minmax(0, 1fr); height: clamp(220px, 30vw, 380px); overflow: hidden; } /* auto-rows, not a template: the side column holds one tile or two depending on how many photos exist, and `1fr` auto-rows share the height either way. The blade used to write `grid-template-rows` INLINE, which no stylesheet could override — so the ≤640 rule below silently did nothing on a phone. */ .r-mosaic-side { display: grid; grid-auto-rows: minmax(0, 1fr); gap: var(--r-gap); } .r-mosaic > *, .r-mosaic-side > * { min-width: 0; min-height: 0; } /* Unit-price table: a real grid on desktop, stacked label/value rows on a phone. */ .r-unit-head, .r-unit-row { grid-template-columns: 1.5fr 1fr 1fr 0.8fr; gap: 10px; } .r-unit-table > .r-unit-row:not(:first-of-type) { border-top: 0; } /* Footer */ .r-footer { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; } /* ─── Horizontal rails (testimonials) ───────────────────────────────────── The one intentional horizontal scroller. Snap + edge padding so a phone can swipe it comfortably instead of half-showing a card. */ .r-rail { display: flex; gap: var(--r-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .r-rail::-webkit-scrollbar { display: none; } .r-rail > * { scroll-snap-align: start; } /* ─── Media boxes ───────────────────────────────────────────────────────── aspect-ratio instead of a fixed px height, so images scale with the column and never letterbox. The blade passes --r-ar when it wants a different one. */ .r-media { position: relative; overflow: hidden; aspect-ratio: var(--r-ar, 16 / 10); } .r-media > img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ─── Header / mobile drawer ──────────────────────────────────────────── */ /* Language switcher. Shaped like a .nav-pill so it reads as part of the nav, but it is a