/**
 * Available Works — list/grid view of for-sale ceramics.
 *
 * Live: https://sterretroquay.com/available-works/
 *
 * Live measurements captured 2026-05-28 @ 1440px:
 *   - section padding-top   = ~190px (header clearance)
 *   - toggle margin-top     = 90.5px (≈ var(--Space-2xl) which clamps to 90.5px at 1440)
 *   - grid padding          = 0 128px (≈ var(--Space-3xl) which clamps to 128px at 1440)
 *   - item gap (vertical)   = 64px    (= var(--Space-xl) at 1440)
 *   - item width            = 1152px (≈ 80vw of 1440)
 *   - item flex gap         = 20px (live used 20px literal; closest token is none — using --Space-xs which yields 16px at 1440, see note below)
 *   - img dims              = 179.5 × 135 (15vh tall, width follows aspect)
 *   - title                 = 12px aktiv-grotesk regular, color #1C1C1B
 *   - small-text            = 12px aktiv-grotesk regular, color #3e3e3b
 *   - toggle-switch         = 60 × 26.5 px, bg #e1e1e1 (= --color-surface-d-1)
 *   - toggle-slider         = 20 × 20 px, bg --text-primary, top/left 3
 *   - slider translate when grid-active = 34px
 *   - red label color       = #c7294d (= --color-primary)
 *
 * Spec deviations (live wins):
 *   - Toggle wrapper class is .view-toggle-btn (NOT .view-toggle-container).
 *   - List-view items keep a 3-child flex layout with .item-description and
 *     .item-price (NOT a single .row-meta).
 *   - Mobile keeps the toggle visible — spec said hide on mobile but live shows it.
 *
 * Token notes:
 *   - 20px between img / description / price doesn't map cleanly to a token at
 *     1440px; --Space-xs is 16px, --Space-s is 22.6px. Going with --Space-xs to
 *     match the "tight" feel — visual delta is 4px which the eye absorbs.
 */

/* ============================================================
   Page wrapper — matches portfolio header-clearance pattern.
   ============================================================ */
.available-works-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Live measurements: toggle starts at y=280, container at y=397.
	   Header is fixed and overlays content. --Space-4xll (~190px at 1440)
	   covers the header clearance; --Space-2xl (~90px) adds the breathing
	   room above the toggle so its top edge lands at ~280px. */
	padding-top: calc(var(--Space-4xll) + var(--Space-2xl));
	padding-bottom: var(--Space-3xl);
	min-height: 80vh;
}

/* ============================================================
   View toggle — three flex items (LIST label, switch, GRID label)
   centered above the grid.
   ============================================================ */
.view-toggle-btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--Space-xs); /* 16px at 1440 — matches live spacing between label and switch */
	margin: 0 auto var(--Space-2xl); /* 90.5px below toggle — live has y=280 toggle then y=397 grid */
	font-family: var(--font-accent);
	font-weight: 400;
	color: var(--text-primary);
}

.view-toggle-label {
	user-select: none;
	cursor: default;
}

.toggle-switch {
	position: relative;
	width: 60px;
	height: 26.5px;
	background: var(--color-surface-d-1);
	border: none;
	border-radius: var(--Radius-s);
	padding: 0;
	cursor: pointer;
	transition: background 0.3s ease;
}

.toggle-switch:focus-visible {
	outline: 2px solid var(--text-primary);
	outline-offset: 2px;
}

.toggle-slider {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: var(--text-primary);
	border-radius: 50%;
	transition: transform 0.3s ease;
	pointer-events: none;
}

.toggle-switch.grid-active .toggle-slider {
	transform: translateX(34px); /* 60 - 20 - 3 - 3 = 34 */
}

/* ============================================================
   List view — DEFAULT.
   Container is a flex column of items. Each item is a 3-child flex row.
   ============================================================ */
.portfolio-grid-container.available-works {
	display: flex;
	flex-direction: column;
	gap: var(--Space-xl); /* 64px at 1440 — matches live */
	padding: 0 var(--Space-3xl);
	width: 100%;
	max-width: 100vw;
	box-sizing: border-box;
	opacity: 1;
	transition: opacity 0.4s ease-in-out;
}

.portfolio-grid-container.available-works .portfolio-grid-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;                 /* 20px — live measured. No clean token at 20px */
	width: 80vw;
	margin: 0 auto;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	text-align: left;
}

.portfolio-grid-container.available-works .portfolio-grid-item:focus-visible {
	outline: 2px solid var(--text-primary);
	outline-offset: 4px;
}

/* Thumbnail base — live: permanent subtle drop shadow on the image.
   Hover state gets a slightly larger shadow + all row text underlines. */
.portfolio-grid-container.available-works .portfolio-thumbnail {
	height: 15vh;
	width: auto;
	max-width: 50vh;
	object-fit: cover;
	flex: 0 0 auto;
	display: block;
	box-shadow: 1px 1px 5px 0 var(--color-surface-d-1);
	transition: box-shadow var(--transition-fast);
}

/* Hover: shadow grows, all text in the row underlines (title already
   underlined; materials/dimensions/price/sold gain underline too). */
.portfolio-grid-container.available-works .portfolio-grid-item:hover .portfolio-thumbnail,
.portfolio-grid-container.available-works .portfolio-grid-item:focus-visible .portfolio-thumbnail {
	box-shadow: 2px 2px 8px 0 var(--color-surface-d-2);
}

.portfolio-grid-container.available-works .portfolio-grid-item:hover .small-text,
.portfolio-grid-container.available-works .portfolio-grid-item:hover .red,
.portfolio-grid-container.available-works .portfolio-grid-item:focus-visible .small-text,
.portfolio-grid-container.available-works .portfolio-grid-item:focus-visible .red {
	text-decoration: underline;
}

/* Item description + price columns:
   Live structure has each column at ~474px wide (33% of 1440 row), with
   inner content (title + lines) in a 216px block centered horizontally
   within. Achieve the same effect without an extra wrapper by giving
   each direct child `align-self: center; width: 21.6rem` so the text
   block is centered as a unit and the text inside is left-aligned. */
.portfolio-grid-container.available-works .item-description {
	display: flex;
	flex-direction: column;
	align-items: center;       /* horizontal center within the column */
	gap: 0;
	flex: 1 1 0;               /* equal split with .item-price */
	padding: 0 var(--Space-4xs); /* 5.6px each side — matches live */
	min-width: 0;
}

.portfolio-grid-container.available-works .item-description > * {
	width: 21.6rem;            /* 216px — matches live's inner block width */
	align-self: center;
}

.portfolio-grid-container.available-works .portfolio-title {
	font-family: var(--font-body); /* aktiv-grotesk — matches live h6 */
	font-size: var(--body-s);      /* 12px at 1440 */
	font-weight: 400;
	color: var(--text-primary-d-6); /* #1c1c1b — matches live computed */
	margin: 0 0 var(--Space-4xs);
	line-height: 1.4;
	text-decoration: underline;     /* live titles render as underlined links */
	text-underline-offset: 2px;
}

.portfolio-grid-container.available-works .item-description .small-text {
	color: var(--text-primary);
	line-height: 1.7;
}

.portfolio-grid-container.available-works .item-price {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	flex: 1 1 0;
	padding: 0 var(--Space-4xs);
	min-width: 0;
}

.portfolio-grid-container.available-works .item-price > * {
	width: 21.6rem;
	align-self: center;
}

.portfolio-grid-container.available-works .item-price .small-text {
	color: var(--text-primary);
	line-height: 1.7;
}

/* Price (live uses aktiv-grotesk same as everything else — NOT co-text/serif).
   Available: weight 700 (bold). Sold: weight 400 + line-through. */
.portfolio-grid-container.available-works .price {
	font-family: var(--font-body);
	font-weight: 700;
}

.portfolio-grid-container.available-works .price-available {
	font-weight: 700;
}

.portfolio-grid-container.available-works .price-sold {
	text-decoration: line-through;
	font-weight: 400;
}

.portfolio-grid-container.available-works .red {
	color: var(--color-primary);
}

/* HOVER STATE — live darkens text in the row from --text-primary
   (rgb 62,62,59) → --text-primary-d-10 (rgb 6,6,5). The title's color
   stays --text-primary-d-6 (already dark enough). No new underline added
   — title is permanently underlined; lines stay un-underlined. */
.portfolio-grid-container.available-works .portfolio-grid-item:hover .small-text,
.portfolio-grid-container.available-works .portfolio-grid-item:focus-visible .small-text {
	color: var(--text-primary-d-10);
}
/* Exception: the .red "Sold" label keeps its color regardless of hover. */
.portfolio-grid-container.available-works .portfolio-grid-item:hover .red,
.portfolio-grid-container.available-works .portfolio-grid-item:focus-visible .red {
	color: var(--color-primary);
}

/* ============================================================
   Grid view (toggle clicked) — 3-col grid matching Portfolio.
   ============================================================ */
/* Grid view — live measured at 1440×900:
     container: display: grid, 3 cols × 352px, gap 64px (Space-xl),
                padding 0 128px (Space-3xl), grid-auto-rows 400px, dense flow
     item:      display: block (NOT flex like list view), 352×341px
     image:     352×235px, object-fit: cover (natural 3:2-ish)
     desc:      full-width below image, padding 22.6 5.6 0 (Space-s/4xs)
     price:     full-width, padding 0 5.6 (Space-4xs)
   Live KEEPS description + price visible in grid view (NOT hidden). */
.portfolio-grid-container.available-works.grid-view {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--Space-xl);                 /* 64px */
	grid-auto-rows: 400px;                /* live measured exactly */
	grid-auto-flow: dense;
	padding-left: var(--Space-3xl);       /* 128px */
	padding-right: var(--Space-3xl);
	width: 100%;
	margin: 0;
}

/* Item in grid view: block layout (image on top, then description, then
   price flow vertically). Overrides the list-view's flex-row. */
.portfolio-grid-container.available-works.grid-view .portfolio-grid-item {
	display: block;
	width: auto;
	height: auto;
	grid-row: span 1;
	margin: 0;
	position: relative;
	gap: 0;                                /* no flex gap in block layout */
}

/* Image takes top of cell — live: 352×235 (3:2 aspect). */
.portfolio-grid-container.available-works.grid-view .portfolio-thumbnail {
	width: 100%;
	height: auto;
	max-width: none;
	aspect-ratio: 352 / 235;               /* matches live's image proportions */
	object-fit: cover;
	display: block;
}

/* Description and price stack BELOW the image (NOT hidden — live shows them).
   Reset the list-view's inner-block-center trick: full width, text flows
   naturally to the left within the column padding. */
.portfolio-grid-container.available-works.grid-view .item-description,
.portfolio-grid-container.available-works.grid-view .item-price {
	display: flex;
	flex-direction: column;
	align-items: stretch;                  /* full-width text — not centered block */
	flex: 0 0 auto;                        /* override list-view flex: 1 1 0 */
	width: 100%;
}

.portfolio-grid-container.available-works.grid-view .item-description {
	padding: var(--Space-s) var(--Space-4xs) 0;  /* 22.6px top, 5.6px L/R — matches live */
}

.portfolio-grid-container.available-works.grid-view .item-price {
	padding: 0 var(--Space-4xs);                  /* 5.6px L/R */
}

/* Disable the list-view's "centered 216px block" child width trick in grid. */
.portfolio-grid-container.available-works.grid-view .item-description > *,
.portfolio-grid-container.available-works.grid-view .item-price > * {
	width: auto;
	align-self: auto;
}

/* ============================================================
   Tablet (768–991px) — GRID view: 2 columns, content-height rows.
   The desktop grid forces `grid-auto-rows: 400px`; on tablet the cell content
   is shorter than 400px so the leftover shows as an oversized white band
   between rows. Switching to `auto` rows makes the visible row spacing equal
   the `Space-xl` (64px) gap — the same rhythm the desktop (~1400px) grid has.
   2 columns (was 3) relieves the cramping. Scoped with min-width:768 so it
   never overlaps the ≤767 mobile flex layout below.
   Matches the sibling portfolio grid's 991px tablet boundary.
   ============================================================ */
@media (min-width: 768px) and (max-width: 991px) {
	.portfolio-grid-container.available-works.grid-view {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: auto;        /* rows fit content — kills the 400px white band */
		gap: var(--Space-xl);        /* 64px — same row/col rhythm as desktop */
	}

	/* LIST view: guarantee clear space to the right of the image. On tablet the
	   description column shrinks below the inner text block's fixed 216px width,
	   so that centered block overflows leftward toward the image, eating the
	   row's 20px gap. A hard right margin on the image stacks on top of that gap
	   so there's always breathing room before the text, whatever the bleed. */
	.portfolio-grid-container.available-works:not(.grid-view) .portfolio-thumbnail {
		margin-right: var(--Space-l);   /* ~45px, on top of the row's 20px gap */
	}
}

/* ============================================================
   Mobile (≤767px) — divergent layouts per view:
     LIST view: image LEFT (50%), info stacked vertically on RIGHT
     GRID view: 1 column, image on top, info below
   Both views: pushed below the fixed mobile header so the toggle
   isn't jammed under it.
   ============================================================ */
@media (max-width: 767px) {
	/* Push content below the fixed mobile header (~137px) with breathing
	   room. --Space-4xll resolves to ~147px at 414 viewport, plus a Space-m
	   (~32px) gap above the toggle. */
	.available-works-page {
		padding-top: calc(var(--Space-4xll) + var(--Space-m));
		padding-bottom: var(--Space-3xl);
	}

	/* Container — both views: vertical stack, centered horizontally with
	   even L/R padding so items don't sit lopsided against the screen edge. */
	.portfolio-grid-container.available-works,
	.portfolio-grid-container.available-works.grid-view {
		display: flex;
		flex-direction: column;
		align-items: center;          /* centers items horizontally */
		grid-auto-rows: auto;
		padding: 0 var(--Space-m);    /* even ~32px L/R margins */
		gap: var(--Space-l);
		width: 100%;
	}

	/* Items fill the container's content area (100% within the padded box),
	   no width: 90vw which created lopsided centering. */
	.portfolio-grid-container.available-works .portfolio-grid-item,
	.portfolio-grid-container.available-works.grid-view .portfolio-grid-item {
		width: 100%;
		margin: 0;
	}

	/* ── LIST view — image LEFT half, info stacked on RIGHT ──
	   Use a 2-column grid with template areas so .item-description and
	   .item-price (siblings of the image in the markup) stack vertically
	   in the right column without restructuring HTML. */
	.portfolio-grid-container.available-works:not(.grid-view) .portfolio-grid-item {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"img desc"
			"img price";
		align-items: start;
		/* gap shorthand: row-gap 0 / column-gap --Space-xl. Order matters —
		   shorthand at the END would override individual column-gap above it.
		   Space-xl at 414 ≈ 48px = ~2× the container L/R padding (Space-m ≈ 24px),
		   matching the page-edge rhythm. */
		gap: 0 var(--Space-xl);
	}

	.portfolio-grid-container.available-works:not(.grid-view) .portfolio-thumbnail {
		grid-area: img;
		width: 100%;
		height: auto;
		max-width: none;
		aspect-ratio: 1 / 1;          /* square image on the left */
		object-fit: cover;
	}

	.portfolio-grid-container.available-works:not(.grid-view) .item-description {
		grid-area: desc;
		padding: 0;
		align-items: flex-start;
		text-align: left;
	}

	.portfolio-grid-container.available-works:not(.grid-view) .item-price {
		grid-area: price;
		padding: 0;
		align-items: flex-start;
		text-align: left;
	}

	/* ── GRID view — single column, image on top, info below ── */
	.portfolio-grid-container.available-works.grid-view .portfolio-grid-item {
		display: block;
	}

	.portfolio-grid-container.available-works.grid-view .portfolio-thumbnail {
		width: 100%;
		height: auto;
		max-width: none;
		aspect-ratio: 352 / 235;
		object-fit: cover;
	}

	.portfolio-grid-container.available-works.grid-view .item-description {
		display: flex;
		padding: var(--Space-s) 0 0;  /* matches desktop grid: 22.6px top */
		align-items: flex-start;
		text-align: left;
	}

	.portfolio-grid-container.available-works.grid-view .item-price {
		display: flex;
		padding: 0;
		align-items: flex-start;
		text-align: left;
	}

	/* Both views: reset the desktop "centered 216px inner block" trick so
	   description + price content uses full width with left-aligned text. */
	.portfolio-grid-container.available-works .item-description > *,
	.portfolio-grid-container.available-works .item-price > * {
		width: auto;
		align-self: auto;
	}
}