/* articles.css - "מאמרים וידע מקצועי" listing page.
Auto-loaded by the SDK for ?contents=articles only (css/<page>.css convention).
Sliced from pages_png/מאמרים.png. Comp canvas 2666px,so the same fluid rule as the rest
of the site:a comp px N becomes clamp(MOBILE_MIN,(N/26.66)vw,Npx). Tokens,.wrap,
.title--underline and .reveal come from css.css. Asset URLs stay RELATIVE (../files/...)
because the SDK's bundler rewrites them into cache/css/<theme>/cache__*.css.
Sizes are measured off the comp,not eyeballed - font sizes from the ink-width ratio of a
matching line of text against a trial render,spacing from each line's ink-band position. */
/* ---- r1 hero ----
The band itself - photo,veil,aspect ratio,and the phone-width variant - is
.hero--photo in css.css,shared with /article,whose comp's hero band is pixel-identical
to this one apart from the rows this page's title occupies. Only the caption and the
title live here,because /article has no hero title at all. */
.hero--articles .hero__caption{padding-inline-start:clamp(var(--gutter),40.44vw,1078px);
padding-inline-end:0;
padding-block:clamp(16px,1.88vw,50px) 0;
text-align:start}
.hero__title{color:#fff;
font-size:clamp(34px,5.06vw,135px);
font-weight:700;
line-height:1.037}
.hero__dot{color:var(--c-gold)}
/* ---- r2 article grid ---- */
.arts{background:var(--c-cream);
padding-block:clamp(44px,4.61vw,123px) clamp(50px,5.36vw,143px)}
/* position:relative is required for the underline:css.css puts it on each individual title
class rather than on .title--underline,so a new title class has to bring its own. */
.arts__title{position:relative;
text-align:center;
color:var(--c-navy);
font-size:clamp(26px,3.11vw,83px);
font-weight:700;
line-height:1}
.arts__title.title--underline{padding-block-end:clamp(10px,.94vw,25px)}
.arts__title.title--underline::after{width:clamp(60px,6.23vw,166px);
background:var(--c-tan)}
/* The grid is exactly the .wrap content width (comp:cards span 500-2165 of a 500-2166 box),
so no max-width of its own - three equal columns and a 76px gutter fill it. */
.arts__grid{list-style:none;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:clamp(28px,3.64vw,97px) clamp(18px,2.85vw,76px);
margin-block-start:clamp(32px,3.60vw,96px)}
/* ---- a card ----
The whole card is one <a>;
.art is the <li>. The photo is flush with the card's top and
side edges (verified by scanning for the white card background:it starts at the photo,
with no inset),so the radius has to clip it - hence overflow:hidden on the link. */
.art{display:flex}
.art__link{display:flex;
flex-direction:column;
width:100%;
background:#fff;
border-radius:clamp(8px,.60vw,16px);
overflow:hidden;
color:inherit;
box-shadow:0 4px 24px rgba(31,56,101,.10);
transition:transform .25s ease,box-shadow .25s ease}
/* Not in the comp - a static comp cannot show a hover state,but a card-sized link needs to
read as clickable. Deliberately small:a 2px lift,no colour change. */
.art__link:hover{transform:translateY(-2px);
box-shadow:0 10px 30px rgba(31,56,101,.16)}
.art__link:focus-visible{outline:3px solid var(--c-gold);
outline-offset:3px}
@media (prefers-reduced-motion:reduce){
.art__link{transition:none}
.art__link:hover{transform:none}
}
.art__img{width:100%;
aspect-ratio:505/367;
object-fit:cover;
display:block}
.art__body{display:flex;
flex-direction:column;
flex:1;
padding:clamp(16px,1.16vw,31px) clamp(20px,1.58vw,42px) clamp(18px,1.24vw,33px)}
.art__title{color:var(--c-navy);
font-size:clamp(19px,1.463vw,39px);
font-weight:700;
line-height:1.077;
text-align:start}
/* The comp breaks every title after its kicker. display:block does that without a hard <br>,
so the break stays a styling decision. */
.art__kicker{display:block}
/* Justified to match the comp:lines 1-3 of every card's body are flush on both edges. */
.art__text{color:var(--c-ink);
font-size:clamp(16px,1.35vw,36px);
line-height:1.25;
text-align:justify;
margin-block-start:clamp(20px,1.95vw,52px);
overflow-wrap:anywhere}
/* margin-block-start:auto pins the cue to the card's foot,so cards with different title or
body lengths still line their "קראו עוד" up - the comp has all six on one baseline. */
.art__more{color:var(--c-navy);
font-size:clamp(15px,1.05vw,28px);
font-weight:700;
line-height:1;
align-self:flex-end;
margin-block-start:auto;
padding-block-start:clamp(18px,1.575vw,42px)}
/* ---- narrow screens ---- */
@media (max-width:1060px){
.arts__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
/* The band's own phone-width treatment - released aspect ratio,heavier veil - is on
.hero--photo in css.css. Only the caption's padding is this page's business. */
.hero--articles .hero__caption{padding-inline-start:var(--gutter);
padding-block:clamp(24px,7vw,60px) clamp(28px,8vw,64px)}
}
@media (max-width:680px){
.arts__grid{grid-template-columns:1fr}
}