/**
 * izebuy home feed layout — the 2-column shell.
 * Main feed column · right widget sidebar, plus the infinite-scroll sentinel and
 * loader. The cards themselves are the shared .ize-listing component
 * (components.css).
 * Depends on: tokens.css
 */

/* ── Feed grid ──────────────────────────────────────────────────────────── */
.ize-feed-layout {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "main";
	gap: var(--ize-5);
	max-width: var(--ize-container);
	margin: 0 auto;
	padding: var(--ize-4);
	align-items: start;
}

/* min-width:0 lets each column shrink below its content size — without this,
 * wide legacy content forces the column (and page) to overflow. */
.ize-feed-layout__main    { grid-area: main;    min-width: 0; }
/* Mobile: hide the right widget sidebar entirely (it stacked below the feed,
 * pushing widgets to the bottom of the page). Shown from tablet up. */
.ize-feed-layout__widgets { grid-area: widgets; min-width: 0; display: none; }

/* Normalise legacy content in the main column to the design-system scale.
 * A6 will replace this with the real izebuy listing feed. */
.ize-feed-layout__main {
	font-size: var(--ize-fs-base);
	line-height: var(--ize-lh);
}
/* Keep embedded media responsive. (Images are already handled by the global
 * `img { max-width:100%; height:auto }` reset, so an `img` rule here was both
 * redundant and — being more specific — it overrode the category/card image
 * fills. Removed.) */
.ize-feed-layout__main video,
.ize-feed-layout__main iframe { max-width: 100%; height: auto; }
/* Listing-card images: fixed-height box, full image shown (contain, centred). */
.ize-feed-layout__main .ize-listing__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
.ize-feed-layout__main .container,
.ize-feed-layout__main .container-fluid { width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; }

/* Tablet up: two columns — the feed + a single right sidebar. */
@media (min-width: 768px) {
	.ize-feed-layout {
		grid-template-columns: 1fr 300px;
		grid-template-areas: "main widgets";
	}
	.ize-feed-layout__widgets { display: block; }
}

/* Desktop: a roomier right sidebar (comfortably fits 300px ad units). */
@media (min-width: 1024px) {
	.ize-feed-layout {
		grid-template-columns: 1fr 340px;
	}
}

/* ── Home sidebars scroll with the page ──────────────────────────────────────
 * The sidebar columns are deliberately NOT sticky. A sidebar taller than the
 * viewport (e.g. the Newspaper widget) would pin its top and leave its bottom
 * unreachable — you could never scroll to the end of it. Letting the columns
 * scroll normally with the page keeps long widgets fully readable. */

/* Widget card + internal styling lives in widgets.css (reusable on any sidebar). */

/* ── Infinite-scroll feed (A6) ──────────────────────────────────────────── */

/* The sentinel is a full-width invisible row that sits at the end of the
 * grid. grid-column: 1 / -1 stretches it across all columns so it reliably
 * triggers the IntersectionObserver regardless of the column count. */
.ize-feed-sentinel {
	grid-column: 1 / -1;
	height: 1px;
}

.ize-feed-loader {
	grid-column: 1 / -1;
	/* Reserve a screenful-ish of height: when fast scrolling outruns the fetch,
	 * the user lands on this loading zone (held on the current items) instead of
	 * dropping into blank space, then new cards render above it. */
	min-height: 180px;
	padding: var(--ize-5) 0;
	text-align: center;
}

.ize-feed-end {
	text-align: center;
	padding: var(--ize-5) 0;
	font-size: var(--ize-fs-sm);
}

/* Feed grid: inherit the .ize-grid column rules but also contain the sentinel */
.ize-feed-grid {
	contain: layout;
}

/* ── Mobile: hide the footer chrome on the feed ─────────────────────────────
 * The infinite feed should never bottom out into the footer menu on a phone.
 * Hiding the clients/newsletter/footer-widgets/copyright block means fast
 * scrolling lands on the loader and is held there until the next page renders.
 * Login/register/filter modals live outside .ize-footer and are kept. */
@media (max-width: 767px) {
	.ize-feed-page .ize-footer {
		display: none;
	}
}