/* ============================ Kmagazine (category page) — page styles Uses shared TXL scaffold from /dirs/site/tx/common/txl.css ============================ */ .lp--kmag{background:#0B0B0B;color:#fff;min-width:360px;margin:0;overflow-x:hidden;} /* Type hierarchy per spec — H1: Archivo Black; H2: Barlow Condensed Black (900); H3: Barlow Condensed Extrabold (800); Body/CTA: Barlow Regular (400). All caps applied where the spec calls for it. */ .kmag{--cr-hl:#C0FB50;--cr-dark:#0B0B0B;--cr-gray:#E8E8E9;--cr-grad-dark:linear-gradient(263deg, rgba(8, 11, 12, 0.00) -1.01%, rgba(8, 11, 12, 0.97) 133.59%), #747474;font-family:'Barlow',Roboto,sans-serif;font-weight:400;font-size:16px;line-height:1.5;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} .kmag *{font-family:'Barlow',Roboto,sans-serif;} .kmag *,.kmag *::before,.kmag *::after{box-sizing:border-box;} .kmag h1{font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-0.01em;line-height:0.85;margin:0;} .kmag h2{font-family:'Barlow Condensed',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-0.01em;line-height:0.95;margin:0;} .kmag h3{font-family: 'PPRightGrotesk', sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-0.01em;line-height:0.95;margin:0;} .kmag img{max-width:100%;display:block;} .kmag a{color:inherit;text-decoration:none;} /* --- Hero (split: title + CTA on left, 3 stacked feature cards on right) --- */ /* Right column (hero feature stack) takes ~65% of the row, left column ~35%, per design. */ .kmag__heroInner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.85fr);gap:60px;align-items:stretch;} /* Left column splits vertically: label + title at top, desc + CTA at bottom (justify-content: space-between). */ .kmag__heroLeft{display:flex;flex-direction:column;justify-content:space-between;gap:32px;} .kmag__heroLeftTop{display:flex;flex-direction:column;gap:15px;} .kmag__heroLeftBottom{display:flex;flex-direction:column;align-items:flex-start;} .kmag__heroLeft .txl__label{margin-bottom:0;} /* Hero h1 — overrides the page-wide `.kmag h1` (Archivo Black) with PPRightGrotesk. Chained under `.kmag` so the (0,2,0) specificity wins against `.kmag h1` (0,1,1). */ .kmag .kmag__heroTitle{font-family:'PPRightGrotesk',sans-serif;font-size:clamp(2.5rem,4.5vw,4.3rem);color:#fff;margin:10px 0 0;} .kmag__heroDesc{font-size:1rem;line-height:1.55;color:rgba(255,255,255,0.75);max-width:480px;margin:0;} /* Hero CTA group: two inline combo buttons (primary green + white-fill secondary). The hero left column is ~310px wide at 1024px viewport, narrower than the natural button widths combined (~470px with default tx__btn padding). `width:max-content` lets the group extend past the grid track into the column gap; tighter padding/font on this CTA only keeps both labels readable while still fitting on one line. Stacks at ≤768px where the left column wraps to full width. */ .kmag__heroCtas{display:flex;flex-flow:row nowrap;gap:8px;align-items:center;margin-top:24px;width:max-content;max-width:100%;} .kmag__heroCta{align-self:flex-start;flex-shrink:0;} /* Compact button sizing for the hero CTAs only — overrides the global .tx__btn padding (0 20px, 12px font) so two buttons fit on one line in the hero left column. */ .kmag__heroCta .tx__btn--sq{padding:0 14px;font-size:11px;letter-spacing:0.4px;} .kmag__heroCta .tx__btn--round{width:26px;height:26px;} @media(max-width:768px){.kmag__heroCtas{flex-flow:row wrap;width:auto;}} @media(max-width:500px){.kmag__heroCtas{flex-direction:column;align-items:flex-start;gap:10px;}} .kmag__heroRight{position:relative;display:flex;flex-direction:column;gap:16px;} /* Each period gets its own stack of 3 hero cards; only the active one is visible. JS toggles --active. */ .kmag__heroBlock{display:none;flex-direction:column;gap:14px;flex:1;} .kmag__heroBlock--active{display:flex;} /* align-items:start keeps the image at its aspect-ratio-derived height instead of stretching it to match the (taller) text column. The text column has its own min-height so the title-top / desc-bottom split still has room to breathe. */ .kmag__heroCard{position:relative;display:grid;grid-template-columns:360px 1fr;gap:28px;align-items:start;background:transparent;border:1px solid transparent;border-radius:2px;padding:12px;transition:background 0.2s ease,border-color 0.2s ease,color 0.2s ease;} /* Hover: green fill, dark text — was previously the --hl variant baked into the second card by default. Now applies to whichever card the user is over. */ .kmag__heroCard:hover{background:var(--cr-hl);color:#0B0B0B;border-color:var(--cr-hl);} /* Image is widescreen rectangular (2:1) — keeps the same width but trims overall card height vs 16:9. align-self:start so the aspect-ratio governs height instead of stretching to match the text column. */ .kmag__heroCardImgWrap{width:100%;aspect-ratio:2/1;align-self:start;border-radius:2px;overflow:hidden;background:#151515;} .kmag__heroCardImg{width:100%;height:100%;object-fit:cover;} /* Title at top, bottom row (description + READ MORE) at the bottom — justify-content:space-between separates them vertically. min-height keeps the card from collapsing when the description is short. Date stays absolutely positioned in the top-right corner. */ .kmag__heroCardText{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:180px;min-width:0;} /* Date + read-time render in green by default; on hover the card flips to a green background, so they swap to dark to keep contrast. */ .kmag__heroCardDate{position:absolute;top:0;right:0;font-family:'Barlow',sans-serif;font-size:0.7rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--cr-hl);display:flex;gap:10px;align-items:center;} /* Title reserves padding-right for the date+read-time block (the row reads ~150px wide in upper case). */ .kmag__heroCardTitle{font-size:clamp(1.5rem,1.4vw,3rem);line-height:1.05;color:inherit;margin:0;padding-right:180px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} /* Bottom row: description on the left, READ MORE pill on the right, baseline-aligned. */ .kmag__heroCardBottom{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;} .kmag__heroCardDesc{flex:1;font-size:0.85rem;line-height:1.45;color:inherit;opacity:0.7;margin:0;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} /* Compact READ MORE pill — sits inline at the right end of the bottom row. The label and round + sit flush against each other (no gap). */ .kmag__heroCardCta{flex-shrink:0;display:inline-flex;align-items:center;font-family:'Barlow',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:0.04em;font-size:0.65rem;} .kmag__heroCardCtaSq{background:var(--cr-hl);color:#0B0B0B;padding:8px 14px;border-radius:2px;display:flex;align-items:center;} .kmag__heroCardCtaRd{background:var(--cr-hl);color:#0B0B0B;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:0;font-size:0.85rem;} /* Hover overrides — flip date/desc to dark, invert the CTA pill so the dark `+` stays distinct on the now-green card. */ .kmag__heroCard:hover .kmag__heroCardDate{color:#0B0B0B;} .kmag__heroCard:hover .kmag__heroCardDesc{color:#0B0B0B;opacity:0.8;} .kmag__heroCard:hover .kmag__heroCardCtaSq{background:#0B0B0B;color:var(--cr-hl);} .kmag__heroCard:hover .kmag__heroCardCtaRd{background:#0B0B0B;color:var(--cr-hl);} @media(max-width:1200px){ /* Intermediate desktop: between the cramped 1024 stack and the wide >1200 layout. The hero is still 2-col but the right column has shrunk enough that a 360px card image was leaving the text col around ~200px wide — too narrow for the title and desc. Narrow the image col instead of stacking yet, and match the text height to the smaller (280×140) image so the desc still bottom-aligns. */ .kmag__heroCard{grid-template-columns:280px 1fr;gap:24px;} .kmag__heroCardText{min-height:140px;} } @media(max-width:1024px){ .kmag__heroInner{grid-template-columns:1fr;gap:40px;align-items:stretch;} .kmag__heroLeft{justify-content:flex-start;} .kmag__heroDesc{max-width:none;} /* Hero left column is full-width once the hero stacks, so the title's desktop top-margin (which was buffering a tall right column) no longer needs to push down — collapse it. Card image col drops to 220px since the card is no longer sharing space with the left column; text min-height drops to 110 to match the aspect-ratio'd image height so the description stays bottom-aligned with the image. */ .kmag .kmag__heroTitle{margin-top:0;} .kmag__heroCard{grid-template-columns:220px 1fr;gap:20px;} .kmag__heroCardText{min-height:110px;} } @media(max-width:768px){ .kmag__heroCard{grid-template-columns:160px 1fr;gap:16px;padding:10px;} /* On narrow viewports the date drops back into the flow above the title and the bottom row stacks (desc above the cta) so the cards stay legible. The text column now grows taller than the aspect-ratio'd image, so let the image stretch to match the row height — `align-self:stretch` + `aspect-ratio:auto` overrides the desktop 2:1 behavior. object-fit:cover on the inner img keeps the photo from distorting; it just becomes a taller crop. */ .kmag__heroCardTitle{padding-right:0;} .kmag__heroCardDate{position:static;margin-bottom:6px;} .kmag__heroCardBottom{flex-direction:column;align-items:flex-start;gap:10px;} .kmag__heroCardImgWrap{align-self:stretch;aspect-ratio:auto;} .kmag__heroCardText{min-height:0;} } @media(max-width:500px){ .kmag__heroCard{grid-template-columns:110px 1fr;gap:12px;padding:8px;} } /* --- Period filter pills (small, solid-dark chips tucked under the hero feature stack; mirrors the design mockup's WEEK / MONTH / 2 MONTHS row) --- */ .kmag__pPills{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start;margin-top:8px;} .kmag__pPill{font-family:'Barlow',sans-serif;font-weight:500;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;background:#1a1a1a;color:rgba(255,255,255,0.55);border:1px solid transparent;border-radius:999px;padding:8px 20px;cursor:pointer;transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease;} .kmag__pPill:hover{background:#252525;color:#fff;} .kmag__pPill--active,.kmag__pPill--active:hover{background:#fff;color:#0B0B0B;border-color:#fff;} /* --- Article grid (4 columns at desktop for the main layout; the mag variant bumps to 5, see `.kmag__cards--mag` further down) --- */ /* `minmax(0, 1fr)` instead of plain `1fr` so the columns stay equal-width even when one item (the ad card) has content with a large intrinsic min-size — the ad's laptop image uses `width:130%; max-width:none`, which would otherwise push the ad's `1fr` track wider than the others and visibly shrink the three article columns to make room. */ .kmag__cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:55px 28px;} .kmag__card{display:flex;flex-direction:column;gap:14px;color:#0B0B0B;transition:transform 0.2s ease;} .kmag__card:hover{transform:translateY(-2px);} /* Hover accent — chunky green highlighter stroke across the title; brand colour reads through the text itself rather than recoloring the card chrome. */ .kmag__card:hover .kmag__cardTitle{color:#0B0B0B;text-decoration:underline;text-decoration-color:var(--cr-hl);text-decoration-thickness:0.32em;text-underline-offset:-0.1em;text-decoration-skip-ink:none;} .kmag__cardImgWrap{position:relative;aspect-ratio:4/3;border-radius:2px;overflow:hidden;background:#E8E8E9;} /* Absolute-position the img inside the (position:relative, overflow:hidden) wrap so its intrinsic pixel dimensions don't leak into grid track sizing. Without this, tall mag cards (which use `flex:1; aspect-ratio:auto` on the wrap) push the natural img height up the parent chain, growing the row tracks past what regular cards need — making the tall card's text drop below the adjacent row-2 cards. Taking the img out of flow keeps the wrap's content size at 0 so the tracks stay sized by the regular cards. */ .kmag__cardImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease;} .kmag__card:hover .kmag__cardImg{transform:scale(1.04);} /* Play-button overlay — only rendered for articles with a non-empty video field. Centered circle with a triangle, sits above the thumbnail and inherits the card hover lift via the parent. */ .kmag__cardPlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(11,11,11,0.7);color:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:background 0.2s ease,transform 0.2s ease;} .kmag__cardPlay svg{width:24px;height:24px;fill:currentColor;margin-left:2px;} .kmag__card:hover .kmag__cardPlay{background:var(--cr-hl);color:#0B0B0B;transform:translate(-50%,-50%) scale(1.05);} .kmag__cardMeta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-family:'Barlow',sans-serif;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.06em;} /* The CATEGORY / sub-category two-part label uses the shared `txl__label` component (see /dirs/site/tx/common/txl.css). Overrides: drop the default 15px bottom margin so it sits inline with the date, shrink padding to fit the small card scale, and flip the pill (sub-category) part to a black fill. */ .kmag__cardMeta .txl__label{margin-bottom:0;font-size:0.6rem;} .kmag__cardMeta .txl__labelPart{padding:4px 10px;} .kmag__cardMeta .txl__labelPart--pill{background:#0B0B0B;color:#fff;} .kmag__cardDate{color:rgba(11,11,11,0.5);font-weight:500;margin-left:auto;} .kmag__cardTitle{font-size:clamp(1.3rem,1.3vw,1.37rem);line-height:1.15;color:#0B0B0B;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color 0.2s ease;} @media(max-width:1200px){ /* 4-to-3 transition bumped up from 1024 to 1200 so the columns drop BEFORE the card images shrink past a comfortable size. At ≥1201 a 4-col card image renders around 280px wide (matches the desktop design); below that the cards would squeeze down, so we step to 3 cols where the same viewport gives ~340px-wide images. */ .kmag__cards{grid-template-columns:repeat(3,minmax(0,1fr));} } @media(max-width:768px){ .kmag__cards{grid-template-columns:repeat(2,minmax(0,1fr));} } @media(max-width:500px){ .kmag__cards{grid-template-columns:1fr;} } /* Embedded ad / promo card. Tall variant — pinned to the last column across rows 1–2 of the secondary grid so it reads like a sidebar promo. The grid scaffold (display/columns/gap) comes from `.kmag__cards`; this modifier only positions the ad tile. Mag and non-mag both run at 4 cols at desktop, so col 4 is the right slot for both. */ .kmag__cards--withAd .kmag__card--ad{grid-column:4;grid-row:1 / span 2;} /* Mid-grey base with a dark gradient overlay (--cr-grad-dark) — keeps the left side bright while fading to near-black on the right and bottom. Shared with .kmag__bannerCard. The card clips its overflow so the oversized laptop PNG gets cropped at the card's right edge. */ .kmag__card--ad{background:var(--cr-grad-dark);color:#fff;border-radius:8px;padding:24px;border:none;transform:none;overflow:hidden;} .kmag__card--ad:hover{transform:none;} .kmag__card--ad .kmag__adInner{position:relative;display:flex;flex-direction:column;gap:18px;height:100%;} .kmag__adTop{display:flex;flex-direction:column;gap:20px;} /* Ad promo title — overrides the page-wide h2/h3 (Barlow Condensed) with PPRightGrotesk. `.kmag` prefix needed to outscope `.kmag h2`/`h3` (0,1,1). */ /* Clamp floor dropped from 1.8rem to 1.4rem and `vw` slope bumped to 4vw so the title actually scales down when the embedded ad is in a narrow column (e.g. col 2 of a 2-col grid at ~500-768px viewports — the previous 1.8rem floor kept the title at ~29px even when the column was only ~200px wide, pushing the text past the card's right edge). `overflow-wrap:break-word` is the safety net: long words like "Platform" will break mid-word rather than overflow if the column is ever narrower than a single word at the current font size. */ .kmag .kmag__adTitle{font-family:'PPRightGrotesk',sans-serif;font-size:clamp(1.4rem,4vw,2.6rem);color:#fff;line-height:1.05;letter-spacing:-0.05em !important;overflow-wrap:break-word;} .kmag__adDesc{font-size:1.1rem;line-height:1.5;color:rgba(255,255,255,0.75);margin:0;} /* Image wrap pushes the laptop past the card's right edge; the card's overflow:hidden then clips it. Image itself is upsized (130% width) for a more impactful presence. */ .kmag__adImgWrap{flex:1;display:flex;align-items:center;justify-content:flex-start;background:transparent;min-height:220px;margin-left:-8px;margin-right:-80px;overflow:visible;} .kmag__adImgWrap img{width:130%;height:auto;max-width:none;max-height:100%;object-fit:contain;object-position:left center;display:block;} .kmag__adCtaWrap{display:flex;justify-content:flex-start;position:relative;z-index:2;} @media(max-width:1200px){ /* Both layouts run at 3 cols from here down (the article grid drops to 3 at 1200). */ .kmag__cards--withAd .kmag__card--ad{grid-column:3;grid-row:1 / span 2;} } @media(max-width:768px){ /* Keep the ad as a tall right-column tile so two articles can stack alongside it (col 1 rows 1-2), mirroring the desktop pattern. Without this override the ad sat in normal flow and only one article landed beside it. */ .kmag__cards--withAd .kmag__card--ad{grid-column:2;grid-row:1 / span 2;} } @media(max-width:500px){ /* Reset the 768px tall-tile placement: at 500px the grid is single-column so column 2 doesn't exist — let the ad take its natural article-sized slot in flow. */ .kmag__cards--withAd .kmag__card--ad{grid-column:auto;grid-row:auto;} } /* --- Magazine layout variant — activated by `?layout=mag` URL param (PHP appends `.kmag__cards--mag` to both grid containers). Cards keep the default layout (image on top, text below); the only change is that select cards span 2 grid rows so their image stretches taller, introducing the magazine-style size variation. Layout shape (primary grid, no ad): - Every batch of 17 cards (initial render + each View More append) gets the same 3-tall pattern: tall at relative nth=3 → col 3 (r1-2), nth=5 → col 1 (r2-3), nth=14 → col 4 (r4-5). In absolute child indices: 17n+3, 17n+5, 17n+14 for n=0, 1, 2, ... — matching nth=3, 5, 14, 20, 22, 31, 37, 39, 48, ... - Cell math is clean at every batch count: N cards × 17/batch + 3 talls per batch = 20 cells/batch = 5 clean rows × 4 cols per appended section. Tall slots are positioned (via grid-column) into non-adjacent columns so two tall images never appear side-by-side in the same row, and into low-enough nth slots that the second tall card claims r2c1 before dense flow can auto-fill it with a normal card. `grid-auto-flow:dense` (on the container) backfills the gaps. Secondary grid (with ad) has its own pattern — 4 tall articles per batch at nth=3, 5, 10, 12 — handled in the `.kmag__cards--withAd` scoped rules below. The shared `17n+14 → col 4` rule for primary is scoped to `:not(.kmag__cards--withAd)` so secondary doesn't pick it up. --- */ /* Mag inherits the base 4 / 3 / 2 / 1 column count across breakpoints; only `grid-auto-flow:dense` is added on top so dense flow can backfill around the tall cards. */ .kmag__cards--mag{grid-auto-flow:dense;} /* Lock every mag card's title to exactly 3 lines worth of vertical space (matches the existing `-webkit-line-clamp:3` cap). Reason: the tall (span-2) card sizes its image via `flex:1`, so any difference between the tall card's actual title height and its row neighbours' title heights gets absorbed into the image — pushing the tall card's image bottom and text below the row 2 baseline whenever the tall card has a shorter title than its row neighbours. Pinning all titles to 3 lines makes the per-row text block consistent so the `flex:1` math lines up. Shorter titles just render with empty space below the text inside the title block; the surrounding row was already being stretched to fit 3-line cards via `align-items:stretch`, so total row height is unchanged in the common case. */ .kmag__cards--mag .kmag__cardTitle{min-height:calc(3 * 1.15em);} /* Tall-card rules are scoped with bounded media queries (min-width AND max-width) so each rule ONLY applies at its target breakpoint. This avoids a specificity trap from an earlier iteration: the original desktop rules included `:not(:nth-last-child(-n+3))` which raised their specificity to (0,4,0), and the smaller-breakpoint resets (without `:not`) sat at (0,3,0) — so the resets lost the cascade and tall cards kept their `grid-row:span 2` / explicit `grid-column` at narrower widths, breaking the responsive drop to 2 columns. Bounding each rule by min/max-width means below 769px no tall rules apply at all and the layout naturally falls back to the base `.kmag__cards` 2-col / 1-col uniform grid. */ @media(min-width:1201px){ /* 4 cols (default desktop). Periodic tall pattern with cycle period 17 (matches the server-side `$perPage` for mag mode), so each batch — the initial 17-card render AND every View More append — gets the same 3-tall layout. - 17n+3 → col 3 (relative nth=3 of each batch): nth=3, 20, 37, ... Lands at r1-2 c3 in batch 1, r6-7 c3 in batch 2, r11-12 c3 in batch 3, etc. — the first tall of each batch starts in that batch's first row. - 17n+5 → col 1 (relative nth=5): nth=5, 22, 39, ... Lands at r2-3 c1 in batch 1, r7-8 c1 in batch 2, etc. Critical that this is at relative nth=5 (not nth=7 like a 4n+3 cycle would suggest): by relative nth=7 dense flow has already filled the batch's r2c1 with the 5th auto-placed card, forcing the tall card down a row. nth=5 grabs r2c1 before any normal card can take it. - 17n+14 → col 4 (relative nth=14): nth=14, 31, 48, ... Lands at r4-5 c4 of each batch. Scoped to `:not(.kmag__cards--withAd)` because the secondary grid runs its own 4-tall layout below. Cell math is clean at every batch count: each batch of 17 cards adds 3 talls = 20 cells per batch = 5 clean rows × 4 cols. So 17 cards = 5 rows, 34 cards = 10 rows, 51 cards = 15 rows, etc. Image wrap stretches to fill the doubled vertical space — `flex:1` works because `.kmag__card` is already `display:flex; flex-direction:column`; `min-height:0` lets the wrap shrink below its intrinsic size (flexbox quirk for percentage-height children). The `:not(:nth-last-child(-n+3))` exclusion also drops nth=14 in the secondary grid (15 children — nth=14 is the 2nd-to-last, in the last 3), as a defensive guard in case the `:not(.kmag__cards--withAd)` scope is ever bypassed. */ .kmag__cards--mag .kmag__card:nth-child(17n+3):not(:nth-last-child(-n+3)), .kmag__cards--mag .kmag__card:nth-child(17n+5):not(:nth-last-child(-n+3)){grid-row:span 2;} .kmag__cards--mag:not(.kmag__cards--withAd) .kmag__card:nth-child(17n+14):not(:nth-last-child(-n+3)){grid-row:span 2;} .kmag__cards--mag .kmag__card:nth-child(17n+3):not(:nth-last-child(-n+3)) .kmag__cardImgWrap, .kmag__cards--mag .kmag__card:nth-child(17n+5):not(:nth-last-child(-n+3)) .kmag__cardImgWrap{flex:1;aspect-ratio:auto;min-height:0;} .kmag__cards--mag:not(.kmag__cards--withAd) .kmag__card:nth-child(17n+14):not(:nth-last-child(-n+3)) .kmag__cardImgWrap{flex:1;aspect-ratio:auto;min-height:0;} .kmag__cards--mag .kmag__card:nth-child(17n+3):not(:nth-last-child(-n+3)){grid-column:3;} .kmag__cards--mag .kmag__card:nth-child(17n+5):not(:nth-last-child(-n+3)){grid-column:1;} .kmag__cards--mag:not(.kmag__cards--withAd) .kmag__card:nth-child(17n+14):not(:nth-last-child(-n+3)){grid-column:4;} /* Secondary mag grid (with ad) — bonus tall articles at nth=7 col 4 and nth=10 col 1. The secondary grid runs 14 articles + 1 ad = 15 children; with the existing nth=3 / nth=5 talls plus these two new ones, it has 4 tall articles total, spread across rows 1-5 (one tall starts in each of rows 1, 2, 3, 4). Position rationale: - nth=7 col 4 lands at r3-4 c4 — placed early enough (right after child 6 fills r2c2) that r3c4 is still free. Falls directly below the ad in c4, creating a vertical rhythm down column 4 (ad r1-2, tall r3-4). - nth=10 col 1 lands at r4-5 c1 — by child 10, r3c1 is taken by the nth=5 tall continuation, so col 1 starts at r4. Cols 1 and 4 are distance 3 apart — non-adjacent in a 4-col grid, so the two new tall images never touch each other or the ad. Cell math: 10 normal + 4·2 tall + 2 ad = 20 = 5 clean rows × 4 cols. */ .kmag__cards--mag.kmag__cards--withAd .kmag__card:nth-child(7):not(:nth-last-child(-n+3)), .kmag__cards--mag.kmag__cards--withAd .kmag__card:nth-child(10):not(:nth-last-child(-n+3)){grid-row:span 2;} .kmag__cards--mag.kmag__cards--withAd .kmag__card:nth-child(7):not(:nth-last-child(-n+3)) .kmag__cardImgWrap, .kmag__cards--mag.kmag__cards--withAd .kmag__card:nth-child(10):not(:nth-last-child(-n+3)) .kmag__cardImgWrap{flex:1;aspect-ratio:auto;min-height:0;} .kmag__cards--mag.kmag__cards--withAd .kmag__card:nth-child(7):not(:nth-last-child(-n+3)){grid-column:4;} .kmag__cards--mag.kmag__cards--withAd .kmag__card:nth-child(10):not(:nth-last-child(-n+3)){grid-column:1;} } @media(min-width:769px) and (max-width:1200px){ /* 3 cols. Tall positions retuned for the narrower grid: 17n+2 → col 3, 17n+4 → col 1. Per-batch relative nth=2 keeps col 3 free in row 1 (only card 1 is placed before it); relative nth=4 picks up col 1 before the batch's r2c1 auto-fills. Cell math caveat: 17 cards + 2 talls = 19 cells per batch, which does NOT divide cleanly into 3 cols (19/3 = 6.33). The 3-col mag layout sits with a partial last row in each batch by design — the clean alternative (3 talls per batch) requires three non-adjacent columns, which a 3-col grid doesn't have. */ .kmag__cards--mag .kmag__card:nth-child(17n+2):not(:nth-last-child(-n+3)), .kmag__cards--mag .kmag__card:nth-child(17n+4):not(:nth-last-child(-n+3)){grid-row:span 2;} .kmag__cards--mag .kmag__card:nth-child(17n+2):not(:nth-last-child(-n+3)) .kmag__cardImgWrap, .kmag__cards--mag .kmag__card:nth-child(17n+4):not(:nth-last-child(-n+3)) .kmag__cardImgWrap{flex:1;aspect-ratio:auto;min-height:0;} .kmag__cards--mag .kmag__card:nth-child(17n+2):not(:nth-last-child(-n+3)){grid-column:3;} .kmag__cards--mag .kmag__card:nth-child(17n+4):not(:nth-last-child(-n+3)){grid-column:1;} } /* Below 769px: no tall rules apply — mag falls back to the base 2-col (≤768) / 1-col (≤500) uniform grid. A span-2 tall card inside a narrow 2-col grid would leave awkward dead space, so this is the right behavior. */ /* --- Load more --- */ .kmag__moreWrap{display:flex;justify-content:center;margin-top:48px;} /* Strip native