/* ================================================
   RED POINT — BLOG BROWSER
   ================================================
   The blog archive: the product page's coloured pill strip (109:1332) applied to articles,
   over a grid of the home page's blog cards (109:652).

   Almost all the styling is inherited — `.rp-ctabs` brings the pills and `.rp-blog-card`
   brings the cards, both declared as style dependencies on the widget. This file only holds
   the shell, the grid, and the few places the two need to sit differently here than they do
   on their original sections.
   ================================================ */

.rp-blogx {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 90px 60px;
	box-sizing: border-box;
}

.rp-blogx__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* ------------------------------------------------
   FILTER STRIP
   ------------------------------------------------
   .rp-ctabs carries its own 1440 shell and 60px gutter, which would double up inside this
   section's padding. Neutralised here so the pills line up with the grid below them. */
.rp-blogx__filter.rp-ctabs {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* The strip wraps here. On the product page it is one row of eight; with an "All" pill added
   and a narrower column it needs to fall onto a second line rather than scroll.

   The inner element is `.rp-ctabs__list` — that is where Category Tabs puts `display:flex`.
   Naming anything else produces a block-level div and the pills stack into a vertical column,
   which is exactly what happened when this was first written against a guessed class name. */
/* ONE ROW, MENU BUTTON AT THE END — the same shape as the product category strips.
   The chips sit in .rp-strip__set and the button is its sibling, so no number of chips can push
   the button off the row. */
.rp-blogx__filter .rp-ctabs__list {
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
}

/* `overflow: hidden`, and NOT a scroller. redpoint-catmenu.js hides any chip that would be cut,
   so the row ends on a whole chip rather than half of one — this just guarantees nothing paints
   outside the box in the moment before the script runs, or if it fails to load. */
.rp-blogx__filter .rp-strip__set {
	flex-wrap: nowrap;
	overflow: hidden;
}

/* Chips keep their own width — flex items shrink by default, and squeezed chips are exactly
   what went wrong on the product gallery's thumbnails. */
.rp-blogx__filter .rp-ctabs__chip {
	flex: 0 0 auto;
}

/* Set by the script on chips that do not fit whole. (0,3,0) so it beats the chip's own
   `display: flex` at (0,2,0) — the reason this is a class and not the `hidden` attribute. */
.rp-blogx__filter .rp-ctabs__chip.is-clipped {
	display: none;
}

/* ------------------------------------------------
   GRID
   ------------------------------------------------
   auto-fill rather than a fixed count: the archive can hold any number of posts, unlike the
   Blog Teaser's fixed three-up carousel. */
.rp-blogx__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 32px;
}

/* The card is a carousel slide on the home page, so it carries a fixed width there. In a
   grid it has to fill its track instead. */
.rp-blogx__grid .rp-blog-card {
	width: 100%;
	max-width: none;
}

/* ------------------------------------------------
   EMPTY STATE */
.rp-blogx__empty {
	margin: 0;
	padding: 40px 0;
	font-family: 'Google Sans', sans-serif;
	font-size: 18px;
	color: var(--rp-muted, #818181);
	text-align: center;
}

/* ------------------------------------------------
   RESPONSIVE */
@media (max-width: 1024px) {
	.rp-blogx {
		padding: 48px 24px;
	}

	.rp-blogx__inner {
		gap: 28px;
	}

	.rp-blogx__grid {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
		gap: 24px;
	}
}

/* ------------------------------------------------
   PHONES — the post filter
   ------------------------------------------------
   This strip stays VISIBLE on a phone, unlike the product category strips. Those were hidden
   because everything they link to now lives in the mobile header's menu; these chips filter
   POSTS by query string and have no equivalent there, so hiding them would leave no way to
   filter the blog at all.

   The chips carry full category names — "אביזרי מין ללסביות" — so at phone width they need to
   wrap freely and sit tighter than the product chips do. Left to the base sizing, nine of them
   at 16px would be a wall of text. */
/* ------------------------------------------------
   PHONES — the chips go, the button stays
   ------------------------------------------------
   At phone width only two chips fit beside the button, which reads as a broken row rather than
   a filter. So the chip row is hidden, exactly as the product strips are.

   THE BUTTON STAYS, and that is the difference from those strips. They can disappear entirely
   because every category they link to is repeated in the mobile header's menu. These chips
   filter POSTS by query string and appear nowhere else on the site — hide the button too and
   there is no way to filter the blog on a phone at all. It stretches to full width instead,
   which is the treatment the product strips themselves used before their categories moved into
   the header.

   The whole SET is hidden rather than the chips inside it: an emptied wrapper is still a flex
   item and would keep the row's gap, pushing a 100%-wide button past the edge. */
@media (max-width: 767px) {

	.rp-blogx__filter .rp-strip__set {
		display: none;
	}

	.rp-blogx__filter .rp-catmenu {
		width: 100%;
		flex: 0 0 100%;
	}

	/* Matched to the chips' own phone geometry so it reads as part of the strip rather than a
	   control that wandered in. Bars stay stacked — three short lines centred in a full-width
	   pill still read as a menu, where turning them sideways would look like a divider. */
	.rp-blogx__filter .rp-catmenu button.rp-catmenu__btn {
		width: 100%;
		height: auto;
		min-height: 46px;
		padding: 13px 16px;
		flex-direction: column;
		gap: 5px;
	}
}