/* The collection heroes (Raouf 2026-10-15: the tops of the collection pages "are too simple, give them a redesign"; inc/collection-hero.php).
   Like the /shop/ film: full width, three close-ups of the collection's own rugs side by side with thin dark seams, the heading,
   intro and weave links bottom left in white. Loaded only when the page has panels (body.has-collection-hero). The collection
   pages also get their intro rows (.ch-split) as full-width editorial rows and All collections its six collection tiles (.ch-tiles). */

body.has-collection-hero { --ch-bleed: max(var(--gutter, 16px), calc((100vw - var(--page-max, 1440px)) / 2 + var(--gutter, 16px))); }
body.has-collection-hero main.page-main { padding-top: 0 !important; }

/* ---------- the hero ---------- */
.wp-block-group.collection-head.has-panels { position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
  width: 100vw; max-width: none !important; margin: 0 0 0 calc(50% - 50vw) !important;
  display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(540px, 82svh, 920px);
  padding: calc(var(--header-h, 56px) + var(--sp-8, 72px)) var(--ch-bleed) clamp(36px, 5vw, 80px) !important;
  background: var(--c-band-stone); color: var(--c-on-photo); }
.collection-head.has-panels > * { position: relative; max-width: 48rem !important; margin-left: 0 !important; margin-right: 0 !important; }
.collection-head.has-panels > .ch-panels { position: absolute; inset: 0; z-index: -2; max-width: none !important; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; background: var(--c-photo-shade); }
.collection-head.has-panels > .ch-panels img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collection-head.has-panels::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--c-photo-shade) 92%, transparent) 0, color-mix(in srgb, var(--c-photo-shade) 70%, transparent) 38%, color-mix(in srgb, var(--c-photo-shade) 25%, transparent) 72%, color-mix(in srgb, var(--c-photo-shade) 55%, transparent) 100%),
    linear-gradient(to right, color-mix(in srgb, var(--c-photo-shade) 45%, transparent), transparent 70%); }

.collection-head.has-panels :is(h1, p, .rank-math-breadcrumb, .rank-math-breadcrumb a, .rank-math-breadcrumb .last) { color: var(--c-on-photo); }
.collection-head.has-panels h1 { margin: var(--sp-3, 12px) 0 0; font-size: clamp(2.75rem, 6.4vw, 5.5rem); line-height: 1; letter-spacing: -0.015em;
  text-wrap: balance; text-shadow: 0 2px 24px color-mix(in srgb, var(--c-photo-shade) 45%, transparent); }
.collection-head.has-panels .rank-math-breadcrumb { font: 500 0.875rem / 1.4 var(--font-ui); letter-spacing: 0.04em; }
.collection-head.has-panels .rank-math-breadcrumb p { margin: 0; }
.collection-head.has-panels .rank-math-breadcrumb a { text-decoration: none; opacity: 0.85; }
.collection-head.has-panels .rank-math-breadcrumb a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.collection-head.has-panels .rank-math-breadcrumb .separator { opacity: 0.6; }
.collection-head.has-panels :is(.sarabi-cat-intro, .ch-lede) { margin: var(--sp-5, 24px) 0 0; max-width: 40rem; }
.collection-head.has-panels .sarabi-cat-intro p { margin: 0; }
.collection-head.has-panels p.ch-lede { margin: var(--sp-4, 16px) 0 0; }
.collection-head.has-panels :is(.sarabi-cat-intro p, p.ch-lede) { color: color-mix(in srgb, var(--c-on-photo) 92%, transparent);
  font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.65; }

/* the weave links: glass chips on the photo */
.collection-head.has-panels .sarabi-cat-weaves { margin-top: var(--sp-5, 24px); gap: var(--sp-2, 8px); }
.collection-head.has-panels .sarabi-cat-weaves a { color: var(--c-on-photo); border-color: color-mix(in srgb, var(--c-on-photo) 50%, transparent);
  background: color-mix(in srgb, var(--c-photo-shade) 30%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.collection-head.has-panels .sarabi-cat-weaves a:is(:hover, :focus-visible) { background: var(--c-on-photo); color: var(--c-ink); border-color: var(--c-on-photo); text-decoration: none; }

/* the buttons on the collection pages: white on the photo, ink sweep (as the home photo hero) */
.collection-head.has-panels .wp-block-buttons { margin-top: var(--sp-6, 32px); gap: var(--sp-3, 12px); }
.collection-head.has-panels .wp-block-button:not(.is-style-outline) .wp-block-button__link { background-color: var(--c-on-photo); border: 1px solid var(--c-on-photo); color: var(--c-ink);
  --sweep: var(--c-ink); --sweep-ink: var(--c-on-photo); }
.collection-head.has-panels .wp-block-button:not(.is-style-outline) .wp-block-button__link:is(:hover, :focus-visible) { background-color: var(--c-on-photo); border-color: var(--c-on-photo); }
.collection-head.has-panels .is-style-outline .wp-block-button__link { background-color: transparent; border: 1px solid var(--c-on-photo); color: var(--c-on-photo);
  --sweep: var(--c-on-photo); --sweep-ink: var(--c-ink); }
.collection-head.has-panels .is-style-outline .wp-block-button__link:is(:hover, :focus-visible) { background-color: transparent; border-color: var(--c-on-photo); }
.collection-head.has-panels :focus-visible { outline-color: var(--c-on-photo); }

/* the panels settle in once, one after another (off for reduced motion and the site's motion switch) */
@keyframes ch-settle { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
.collection-head.has-panels > .ch-panels img { animation: ch-settle 1.6s cubic-bezier(0.2, 0.7, 0.1, 1) both; }
.collection-head.has-panels > .ch-panels img:nth-child(2) { animation-delay: 0.12s; }
.collection-head.has-panels > .ch-panels img:nth-child(3) { animation-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .collection-head.has-panels > .ch-panels img { animation: none; } }
html:is([data-motion="none"], [data-motion="reduced"]) .collection-head.has-panels > .ch-panels img { animation: none; }

/* the category pages: the filters start a little below the hero */
body.has-collection-hero .wp-block-group.collection-body { padding-top: var(--sp-6, 32px); }

@media (max-width: 781px) {
  .wp-block-group.collection-head.has-panels { min-height: clamp(500px, 84svh, 760px); }
  .collection-head.has-panels .sarabi-cat-weaves a { min-height: 40px; padding: 0 var(--sp-3, 12px); }
}

/* ---------- the intro rows on the collection pages: full width, the photo full height to the edge, words in generous space ---------- */
.entry > .ch-split { box-sizing: border-box; width: 100vw; max-width: none !important; margin: 0 0 0 calc(50% - 50vw) !important;
  gap: 0 !important; align-items: stretch !important; }
.entry > .ch-split > .wp-block-column { margin: 0; min-width: 0; }
.entry > .ch-split > .wp-block-column:has(> .wp-block-image) { position: relative; min-height: 520px; }
.entry > .ch-split > .wp-block-column > .wp-block-image { margin: 0; position: absolute; inset: 0; }
.entry > .ch-split > .wp-block-column > .wp-block-image img { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; }
.entry > .ch-split > .wp-block-column:not(:has(> .wp-block-image)) { align-self: center; padding: var(--sp-9, 96px) clamp(32px, 6vw, 112px); }
.entry > .ch-split > .wp-block-column:first-child:not(:has(> .wp-block-image)) { padding-left: var(--ch-bleed); }
.entry > .ch-split > .wp-block-column:last-child:not(:has(> .wp-block-image)) { padding-right: var(--ch-bleed); }
.entry > .ch-split h2 { margin-top: 0; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; max-width: 18ch; text-wrap: balance; }
.entry > .ch-split p { max-width: 36rem; }
.entry > .ch-split ul { padding-left: 0; list-style: none; border-top: 1px solid var(--c-rule); max-width: 36rem; }
.entry > .ch-split ul li { padding: var(--sp-3, 12px) 0; border-bottom: 1px solid var(--c-rule); }
.entry > .ch-split + .ch-split { background: color-mix(in srgb, var(--c-text) 6%, var(--c-page)); }
.entry > .ch-split:last-of-type { margin-bottom: var(--section-y, 56px) !important; }
.entry > .collection-head.has-panels + .ch-split { margin-top: 0 !important; }

@media (max-width: 781px) {
  .entry > .ch-split { flex-direction: column; }
  .entry > .ch-split > .wp-block-column { flex-basis: auto !important; width: 100%; }
  .entry > .ch-split > .wp-block-column:has(> .wp-block-image) { order: -1; min-height: 0; }
  .entry > .ch-split > .wp-block-column > .wp-block-image { position: static; }
  .entry > .ch-split > .wp-block-column > .wp-block-image img { aspect-ratio: 4 / 3; height: auto; }
  .entry > .ch-split > .wp-block-column:not(:has(> .wp-block-image)) { padding: var(--sp-7, 48px) var(--gutter, 16px) !important; }
}

/* ---------- All collections: the six collections as photo tiles, name and link on each ---------- */
.entry > .ch-tiles { margin-block: var(--section-y, 56px); }
.entry > .ch-tiles > h2 { margin: 0 0 var(--sp-6, 32px); font-size: clamp(2rem, 3.4vw, 3rem); }
.entry > .ch-tiles > .ch-tile-grid { display: grid; gap: var(--sp-4, 16px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); max-width: none; }
.entry .ch-tile { position: relative; isolation: isolate; overflow: hidden; margin: 0; aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--sp-5, 24px); color: var(--c-on-photo); background: var(--c-band-stone); }
.entry .ch-tile > .wp-block-image { position: absolute; inset: 0; z-index: -2; margin: 0; }
.entry .ch-tile > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.1, 1); }
.entry .ch-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--c-photo-shade) 85%, transparent) 0, color-mix(in srgb, var(--c-photo-shade) 35%, transparent) 45%, transparent 70%); }
.entry .ch-tile:is(:hover, :focus-within) > .wp-block-image img { transform: scale(1.05); }
.entry .ch-tile p { margin: 0; color: var(--c-on-photo); }
.entry .ch-tile p:first-of-type { font: 400 clamp(1.5rem, 2.2vw, 2rem) / 1.1 var(--font-display); text-transform: capitalize; }
.entry .ch-tile p:first-of-type strong { font-weight: inherit; }
.entry .ch-tile p + p { margin-top: 4px; font: 500 0.875rem / 1.4 var(--font-ui); letter-spacing: 0.04em; opacity: 0.9; }
.entry .ch-tile .wp-block-buttons { margin-top: var(--sp-4, 16px); }
.entry .ch-tile .wp-block-button__link { background-color: transparent; border: 1px solid var(--c-on-photo); color: var(--c-on-photo); --sweep: var(--c-on-photo); --sweep-ink: var(--c-ink); }
.entry .ch-tile .wp-block-button__link:is(:hover, :focus-visible) { background-color: transparent; border-color: var(--c-on-photo); }
.entry .ch-tile .wp-block-button__link::after { content: ""; position: absolute; inset: 0; }   /* the whole tile opens the collection */
.entry .ch-tile :focus-visible { outline-color: var(--c-on-photo); }
@media (prefers-reduced-motion: reduce) { .entry .ch-tile > .wp-block-image img { transition: none; } }
html:is([data-motion="none"], [data-motion="reduced"]) .entry .ch-tile > .wp-block-image img { transition: none; }