/*
* The mobile layer.
*
* WHY THIS FILE EXISTS
* --------------------
* The 2021 theme ships TWO complete stylesheets and WordPress chose between
* them SERVER-SIDE, by user agent:
*
* desktop UA -> dist/styles/news_e2fdb926.css `body,html{min-width:768px}`
* mobile UA -> dist/styles/mobile-news_e2fdb926.css `body,html{min-width:320px}`
*
* The migration vendored only the desktop one, so every phone got the desktop
* sheet -- and with it a hard 768px floor on `body`. Measured at a 390x844
* iPhone viewport against all three countries, homepage and category alike:
*
* ours: documentElement.scrollWidth 768 vs viewport 390 (378px of sideways
* scroll on every page)
* WordPress mobile: 390 vs 390, no overflow
*
* Worse than the scroll itself: with the page's minimum content width stuck at
* 768, Chrome's mobile viewport algorithm reports `window.innerWidth` as 768,
* so the theme's own news.js sized the Headlines carousel for a desktop and
* showed 3 cramped slides where WordPress shows 1.
*
* WHY A RESPONSIVE LAYER RATHER THAN THE REAL mobile-news.css
* -----------------------------------------------------------
* mobile-news.css is a separate BUILD against separate mobile TEMPLATES, not a
* responsive variant of the desktop one. Diffing the two: 487 selectors only in
* mobile, 705 only in desktop, 236 shared selectors whose declarations differ,
* and even the palette custom property is renamed (`--topbar-color` ->
* `--theme-color`). It has no `.container`, no `.media-box`, no `.l-major1`, no
* `hd4/hd5/hd6`; it uses `.ph`, `.pd`, `.col-gradient`, `.col-header`, `.h4/.h5`,
* `.swipe-block`, `.has-decor`. Adopting it means a second set of components and
* UA-based serving -- which would also put the User-Agent in the CloudFront
* cache key, splitting the cache for 141k pages.
*
* We serve ONE document to every device, so this reshapes the markup we already
* emit instead. The reference it is built against is the live WordPress MOBILE
* rendering, captured with an iPhone UA against the origins directly
* (`--host-resolver-rules`), not a desktop rendering shrunk down.
*
* ⚠️ LOAD ORDER IS LOAD-BEARING. This file is linked AFTER /theme/news.css in
* app/layout.tsx on purpose: several overrides here deliberately match the
* theme's specificity exactly (e.g. `.media-box.lg>.media:not(figure)`), so
* source order is what decides them. Moving the above news.css, or
* folding these rules into globals.css (which Next injects BEFORE our theme
* links), silently reverts half of them.
*/
/*
* The floor itself -- the single line that caused the horizontal scroll.
* 320px is the value mobile-news.css used; keeping a floor rather than dropping
* to 0 means a very narrow viewport scrolls instead of crushing the cards.
* Same specificity as the theme's `body,html{min-width:768px}`, later source.
*/
html,
body {
min-width: 320px;
}
/* The theme's own phone breakpoint (47.9375em = 767px), not a new one. */
@media (max-width: 47.9375em) {
/* ---------------------------------------------------------------- chrome */
/*
* Eight topbar links do not fit 390px. The theme solves exactly this problem
* for `.header-nav-home` at max-width:69.3125em with a hidden-scrollbar
* strip, so reuse that idea rather than wrapping the row -- the topbar is a
* single line in the design and a wrapped one reads as broken.
*/
.topbar-nav > .container,
.main-nav > .container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.topbar-nav > .container::-webkit-scrollbar,
.main-nav > .container::-webkit-scrollbar {
display: none;
}
.topbar-nav > .container > ul,
.main-nav > .container > ul {
white-space: nowrap;
}
/*
* The logo line: country switcher | logo | search.
*
* The theme centres the logo with `position:absolute; left:50%` and a
* translate, which has room only at >=768px -- the width this sheet was
* written for. At 390px the absolutely-positioned logo starts at x=113 while
* "United States" runs to x=139, so the brand sits UNDER the country label
* (26px of overlap on US, worse the narrower the screen: 44px at 320).
* BR ("Brasil") and PH ("Philippines") are shorter and hide it.
*
* So on phones the logo rejoins the flex flow and is allowed to grow into
* whatever the other two leave, capped at its natural size. Measured across
* 320/360/390/414/767: no overlap at any width, nothing wrapped to a second
* line, and the search box stays pinned to the right edge.
*
* ⚠️ Do NOT add `flex-wrap:nowrap` here. `.l-justify:after` is a
* `content:"";width:100%` justify hack that is itself a flex item; with wrap
* (the theme's own setting) it drops harmlessly to a second, zero-height
* line, but forced onto this line it eats the `space-between` slot and the
* search box stops reaching the right edge.
*/
.header-logoline .l-justify {
align-items: center;
}
.header-logoline .l-justify > a.logo {
position: static;
left: auto;
transform: none;
margin: 0 0.5rem;
flex: 1 1 5rem;
min-width: 0;
max-width: 9.375rem;
text-align: center;
}
.header-logoline .l-justify > a.logo img {
width: 100%;
height: auto;
}
/* The switcher and the search keep their intrinsic size; only the logo flexes. */
.header-logoline .l-justify > :first-child,
.header-logoline .l-justify > :last-child {
flex: 0 0 auto;
}
/* ----------------------------------------------------- the homepage rail */
/*
* `.media-box.lg` is the rail's TWO-COLUMN box: the lead article floats at
* `max-width:48%` beside the headline list. At 390px that lead is ~170px
* wide, which is why the rails read as two cramped columns. Stack them.
*
* The theme rule being beaten is `.media-box.lg>.media:not(figure)
* {width:19.625rem}` -- identical specificity (0,3,1), so this only wins
* because this file is linked after news.css. See the header of this file.
*/
.media-box.lg > .media:not(figure) {
float: none;
width: 100%;
max-width: none;
margin: 0 0 1.25rem;
}
/*
* The lead image goes edge to edge, as it does on the WordPress mobile
* homepage. -20px cancels the horizontal padding that `[class*=container]`
* applies (`{max-width:84.375rem;margin:0 auto;padding:0 20px}`) -- if that
* padding ever changes, this number follows it.
*/
.media-box.lg > .media > figure {
margin: 0 -20px 0.75rem;
}
.media-box.lg > .media > figure img {
display: block;
width: 100%;
height: auto;
}
/* hd5 is sized for a 314px column; as a full-width lead it reads as a caption. */
.media-box.lg > .media > h3.hd5 {
font-size: 1.375rem;
line-height: 1.25;
}
/* ------------------------------------------- the Headlines carousel slide */
/*
* Two separate reasons the FEATURED image came out smaller than the LATEST
* lead directly beneath it, measured at a 390px viewport:
*
* 1. the carries the theme's width=315 attribute and nothing sets a
* width, so `img{max-width:100%}` left it at its intrinsic 315px inside
* a 350px slide;
* 2. the whole carousel strip sits inside `.container`, so it was inset by
* that element's 20px padding as well.
*
* before: slide image 315px (20 -> 335) rail lead 390px (0 -> 390)
* after: slide image 390px (0 -> 390) rail lead 390px (0 -> 390)
*
* `.tns-outer` is tiny-slider's own wrapper, so pulling it out by the
* container padding takes ONLY the sliding strip edge to edge and leaves the
* "FEATURED" header and the prev/next controls correctly inset. The padding
* then goes back onto everything in the slide EXCEPT the figure, which is
* what makes the picture full-bleed while the headline keeps the page gutter
* -- the same shape the WordPress mobile carousel has.
*
* Safe against tiny-slider's measuring: this arrives in a , so the
* container is already its full-bleed width when news.js sizes the slides at
* init. Before init `.tns-outer` does not exist, so a JS failure degrades to
* the plain inset strip rather than to a broken one.
*/
.slider-wp .tns-outer {
margin-left: -20px;
margin-right: -20px;
}
.slider-wp .tns-item article > :not(figure) {
padding-left: 20px;
padding-right: 20px;
}
.slider-wp .tns-item figure {
margin-bottom: 0.75rem;
}
.slider-wp .tns-item figure img {
display: block;
width: 100%;
height: auto;
}
/* Matches the rail lead, for the same reason: hd5 is sized for a 314px column. */
.slider-wp .tns-item h3.hd5 {
font-size: 1.375rem;
line-height: 1.25;
}
/* --------------------------------------------- the archive (listing) card */
/*
* The archive LEAD (`figure.media.left`): image above the headline, edge to
* edge, matching the WordPress mobile archive.
*/
.media-box.md > figure.media.left {
float: none;
width: auto;
max-width: none;
margin: 0 -20px 0.75rem;
}
.media-box.md > figure.media.left img {
width: 100%;
height: auto;
}
.media-box.md > figure.media.left ~ .txt > h2.hd3 {
font-size: 1.5rem;
line-height: 1.25;
}
/*
* Every other card (`figure.media.right`): headline on the left, a small
* thumbnail on the right. The theme's 48% would give a ~170px picture beside
* ~170px of text; WordPress mobile uses roughly a 6.5rem thumb.
*
* The excerpt is hidden because the WordPress mobile archive shows one only
* on the lead -- it is not dropped content, it is the theme's own rhythm.
*/
.media-box.md > figure.media.right {
width: 6.75rem;
max-width: 32%;
margin-left: 0.9375rem;
margin-bottom: 0;
}
.media-box.md > figure.media.right img {
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.media-box.md > figure.media.right ~ .txt > h2.hd4 {
font-size: 1.0625rem;
line-height: 1.3;
}
.media-box.md > figure.media.right ~ .txt > p.p {
display: none;
}
}