/* ==========================================================================
   Articles listing (Advice & Tips)
   --------------------------------------------------------------------------
   Enqueued after pages.css, so every token (--rmp-red, --rmp-line, the 8px
   spacing steps, the type scale) comes from there.

   Layout: the filter rail from the product listings on the left (all of
   .rmp-listing / .rmp-pfilter / .rmp-pfgroup / .rmp-pfopt comes from
   product-filter.css, which this file is loaded after), a result count, a
   card grid and numbered pagination.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Filter rail: only the differences from the product rail
   -------------------------------------------------------------------------- */

/* Search box above the accordions. */
.rmp-afilter__find{display:flex;flex-direction:column;gap:8px;
	padding:var(--rmp-s2) 0 var(--rmp-s3);border-bottom:1px solid var(--rmp-line)}
.rmp-afilter__findlabel{font-size:.8125rem;font-weight:700;letter-spacing:.1em;
	text-transform:uppercase;color:var(--rmp-ink)}
.rmp-afilter .rmp-input{min-height:44px;width:100%}

/* The product rail filters client side, so its foot (Apply) is mobile-only.
   Articles are a GET form, so the submit button has to be reachable on
   desktop too -- until the script takes over and submits on change. */
.rmp-afilter .rmp-pfilter__foot{display:block;padding-top:var(--rmp-s3)}
.rmp-afilter .rmp-pfilter__apply{width:100%;justify-content:center}
.rmp-afilter.is-js .rmp-pfilter__foot{display:none}
@media (max-width:1023px){
	/* On a phone the panel is a drawer: changing a filter there should not
	   reload the page under it, so Apply stays and does the submitting. */
	.rmp-afilter.is-js .rmp-pfilter__foot{display:block}
}

/* Radios standing in for the rail's checkboxes: same box, and a lit one can
   be clicked again to clear it (articles.js). */
.rmp-afilter .rmp-pfopt__box{border-radius:3px}

/* News Date group: a month sits under its year, its box in line with the
   year's label (20px box + 10px gap). */
.rmp-afilter .rmp-pfopt--sub{padding-left:30px}

/* --------------------------------------------------------------------------
   Intro copy inside the listing grid
   It shares the cards' column rather than spanning the whole shell, so the
   heading and paragraph line up with the grid and not with the rail. That
   adds a third row, so the rail is told to span all of them.
   -------------------------------------------------------------------------- */
.rmp-listing__intro{grid-column:2;margin-bottom:var(--rmp-s2)}
/* pages.css gives headings text-wrap:balance, which evens the lines up and
   leaves this long one as three short ones. Here the heading should fill the
   column the way the paragraph does, so each line runs to the edge. */
.rmp-listing__intro .rmp-h2{text-wrap:wrap;text-wrap-style:auto}
/* Three rows now (intro / results bar / cards): span them explicitly --
   1/-1 resolves against the explicit grid, which has none, and ends up
   inflating the intro row. */
.rmp-listing:has(.rmp-listing__intro) .rmp-pfilter{grid-row:1/span 3}
@media (max-width:1023px){
	.rmp-listing__intro{grid-column:1}
}
/* When the intro comes from the page's own blocks (a Group carrying
   rmp-slot--intro) core's flow layout supplies the spacing between heading and
   paragraph, so the wrapper must not add a trailing margin of its own. */
.rmp-listing__intro>.wp-block-group>:last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.rmp-acards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--rmp-s4)}
@media (max-width:1023px){.rmp-acards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.rmp-acards{grid-template-columns:1fr;gap:var(--rmp-s3)}}
/* The rail takes ~300px, so two cards read better than three squeezed ones
   until the wide shell kicks in at 1600px. */
@media (min-width:1024px) and (max-width:1439px){
	.rmp-listing .rmp-acards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--rmp-s3)}
}
@media (min-width:1600px){
	.rmp-listing .rmp-acards{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.rmp-acard{position:relative;display:flex;flex-direction:column;background:#fff;
	border:1px solid var(--rmp-line);border-radius:var(--rmp-radius);overflow:hidden;
	transition:box-shadow .18s ease,transform .18s ease}
.rmp-acard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.1)}
.rmp-acard__media{background:var(--rmp-ph)}
.rmp-acard__img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.rmp-acard__body{display:flex;flex-direction:column;flex:1;padding:var(--rmp-s3)}
.rmp-page .rmp-acard__topic{margin:0 0 10px;font-size:.75rem;font-weight:700;letter-spacing:.12em;
	text-transform:uppercase;color:var(--rmp-red)}
.rmp-page .rmp-acard__title{margin:0 0 10px;font-size:var(--rmp-h3);line-height:1.3;
	color:var(--rmp-ink)}
.rmp-acard__title a{color:inherit;text-decoration:none}
.rmp-acard__title a:hover{color:var(--rmp-red)}
/* Stretched link: the title is the only link, but the whole card is the
   hit area. */
.rmp-acard__title a:after{content:"";position:absolute;inset:0}
.rmp-acard__title a:focus-visible{outline:none}
.rmp-acard:focus-within{outline:3px solid var(--rmp-ink);outline-offset:3px}
.rmp-page .rmp-acard__excerpt{margin:0 0 var(--rmp-s2);font-size:.9375rem;line-height:1.6;
	color:var(--rmp-body)}
.rmp-acard__more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;
	font:700 .8125rem/1 var(--rmp-font);letter-spacing:.09em;text-transform:uppercase;
	color:var(--rmp-red)}
.rmp-acard__more:after{content:"";width:8px;height:8px;border-right:2px solid currentColor;
	border-top:2px solid currentColor;transform:rotate(45deg);transition:transform .18s ease}
.rmp-acard:hover .rmp-acard__more:after{transform:rotate(45deg) translate(2px,-2px)}

/* Promo tile sitting in the grid. */
.rmp-apromo{display:flex;flex-direction:column;align-items:flex-start;gap:var(--rmp-s2);
	padding:var(--rmp-s4);border:2px solid var(--rmp-red);border-radius:var(--rmp-radius);
	background:var(--rmp-red-tint)}
.rmp-page .rmp-apromo__eyebrow{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.12em;
	text-transform:uppercase;color:var(--rmp-red)}
.rmp-page .rmp-apromo__title{margin:0;font-size:var(--rmp-h3);color:var(--rmp-ink)}
.rmp-page .rmp-apromo__text{margin:0}
.rmp-apromo .rmp-cta,
.rmp-apromo .rmp-ctas{margin-top:auto}
/* Block version of the tile: a Group with rmp-apromo rmp-slot--promo. The
   tile is a flex column with its own gap, so core's flow-layout margins
   between the children would double the spacing. */
.rmp-apromo.is-layout-flow>*{margin-block:0}

/* promo_pos="end": the same tile run as a full-width band under all the
   articles. Centred, because at full width a left-aligned stack leaves the
   button floating a long way from the copy. */
.rmp-apromo-end{margin-top:var(--rmp-s5)}
.rmp-apromo-end .rmp-apromo{align-items:center;text-align:center;
	padding:var(--rmp-s5) var(--rmp-s4)}
.rmp-apromo-end .rmp-apromo__text{max-width:56ch}
.rmp-apromo-end .rmp-apromo .rmp-cta,
.rmp-apromo-end .rmp-apromo .rmp-ctas{margin-top:var(--rmp-s2);justify-content:center}
@media (max-width:639px){
	.rmp-apromo-end .rmp-apromo{padding:var(--rmp-s4) var(--rmp-s3)}
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.rmp-apag{margin-top:var(--rmp-s5);text-align:center}
.rmp-page .rmp-apag__count{margin:0 0 var(--rmp-s2);font-size:.9375rem;color:var(--rmp-muted)}
.rmp-apag__list{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:8px}
.rmp-apag__link{display:inline-flex;align-items:center;justify-content:center;
	min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--rmp-line);
	border-radius:4px;background:#fff;color:var(--rmp-ink);text-decoration:none;
	font:700 .9375rem/1 var(--rmp-font)}
.rmp-apag__link:hover{border-color:var(--rmp-red);color:var(--rmp-red)}
.rmp-apag__link.is-active{background:var(--rmp-red);border-color:var(--rmp-red);color:#fff}

/* --------------------------------------------------------------------------
   Single article
   -------------------------------------------------------------------------- */
.rmp-article__meta{display:flex;flex-wrap:wrap;gap:var(--rmp-s2);align-items:center;
	margin-bottom:var(--rmp-s3);font-size:.875rem;color:var(--rmp-muted)}
.rmp-article__topic{font-weight:700;letter-spacing:.12em;text-transform:uppercase;
	color:var(--rmp-red)}