/* IXXO Cart 8 storefront: the home page's sections (Phase 10a Task 9, the Ampere mockup's home).
   Templates: content/templates/storefront/sections/<type>/section.php inside storefront/home.php.
   Tokens only (tokens.css and /theme.css) and logical properties, so the page also reads right to left. */

/* The page: the hero and the promo tiles share the first row when they follow each other,
   every other section takes the full width. */
.sf-home{ display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: 16px; padding-block-end: 72px; }
.sf-home > *{ grid-column: 1 / -1; }
.sf-home > .sf-hero:has(+ .sf-promos){ grid-column: 1; }
.sf-home > .sf-hero + .sf-promos{ grid-column: 2; }

/* A section's heading line: the title, and "See all" at the end. */
.sf-sec{ margin-block-start: 72px; }
.sf-sec-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-block-end: 24px; }
.sf-sec-title{ margin: 0; font-family: var(--font-heading); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 740; text-wrap: balance; }
.sf-sec-more{ display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; }
.sf-sec-more:hover{ gap: 10px; text-decoration: underline; }
.sf-ico-s{ inline-size: 16px; block-size: 16px; }
[dir="rtl"] .sf-sec-more .sf-ico, [dir="rtl"] .sf-promo-go .sf-ico{ transform: scaleX(-1); }

/* The hero: slides side by side in a strip the shopper scrolls (no script needed). */
.sf-hero{ margin-block-start: 24px; min-inline-size: 0; }
.sf-hero-slides{ display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: calc(var(--r) * 2); background: var(--tile); }
.sf-hero-slide{ position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-block-size: 500px; scroll-snap-align: start; }
.sf-hero-copy{ display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-block: 56px 88px; padding-inline-start: 56px; }
.sf-hero-title{ margin: 0; font-family: var(--font-heading); font-size: clamp(40px, 4.6vw, 68px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 760; text-wrap: balance; }
.sf-hero-text{ margin: 0; max-inline-size: 40ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.sf-hero-cta{ margin: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.sf-hero-count{ position: absolute; inset-inline-start: 56px; inset-block-end: 24px; margin: 0; font-size: 13px; color: var(--muted); }
.sf-hero-media{ display: flex; align-items: center; justify-content: center; padding: 24px; block-size: 100%; }
.sf-hero-media img{ inline-size: 100%; max-inline-size: 460px; block-size: auto; }

/* The promo tiles: stacked beside the hero (one under the other below it on a phone). */
.sf-promos{ display: grid; grid-auto-rows: 1fr; gap: 16px; margin-block-start: 24px; }
.sf-promo{ position: relative; display: flex; flex-direction: column; gap: 10px; min-block-size: 242px; padding: 32px; overflow: hidden; border-radius: calc(var(--r) * 2); text-decoration: none; }
.sf-promo-accent, .sf-promo-accent:hover{ background: var(--accent); color: var(--on-accent); }
.sf-promo-dark, .sf-promo-dark:hover{ background: var(--ink); color: var(--on-ink); }
.sf-promo-title{ position: relative; margin: 0; max-inline-size: 11ch; font-family: var(--font-heading); font-size: 28px; line-height: 1.04; letter-spacing: -0.025em; font-weight: 740; }
.sf-promo-text{ position: relative; margin: 0; max-inline-size: 23ch; font-size: 15px; }
.sf-promo-go{ position: relative; display: inline-flex; align-items: center; gap: 6px; margin-block-start: auto; font-weight: 600; font-size: 15px; }
.sf-promo-img{ position: absolute; inset-inline-end: -30px; inset-block-end: -40px; inline-size: 236px; block-size: auto; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.sf-promo:hover .sf-promo-img{ transform: translate(calc(-8px * var(--ic-dir)), -8px) rotate(calc(-3deg * var(--ic-dir))); }
.sf-promo:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }

/* The trust strip: four reasons in one bordered row. */
.sf-trust{ margin-block-start: 16px; }
.sf-trust-list{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: calc(var(--r) * 2); }
.sf-trust-item{ display: flex; align-items: center; gap: 14px; padding-block: 20px; padding-inline: 24px; }
.sf-trust-item + .sf-trust-item{ border-inline-start: 1px solid var(--line); }
.sf-trust-ico{ display: grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--tile); color: var(--ink); }
.sf-trust-copy{ margin: 0; }
.sf-trust-copy b{ display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.sf-trust-copy span{ font-size: 13.5px; color: var(--muted); }

/* The category tiles. */
.sf-cats{ display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sf-cat{ display: flex; flex-direction: column; gap: 10px; color: var(--ink); text-decoration: none; }
.sf-cat-img{ display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: calc(var(--r) * 1.5); background: var(--tile); }
.sf-cat-img img{ inline-size: 80%; block-size: auto; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.sf-cat:hover .sf-cat-img img{ transform: scale(1.07); }
.sf-cat-meta b{ display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }
.sf-cat-meta span{ font-size: 13px; color: var(--muted); }

/* The seller row. */
.sf-seller-cards{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.sf-seller-card{ display: flex; flex-direction: column; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: calc(var(--r) * 2); transition: border-color 0.2s; }
.sf-seller-card:hover{ border-color: var(--ink); }
.sf-seller-card-top{ display: flex; align-items: center; gap: 14px; }
.sf-seller-card-mark{ display: grid; place-items: center; flex: none; inline-size: 52px; block-size: 52px; border-radius: var(--r); background: var(--ink); color: var(--on-ink); font-weight: 800; font-size: 17px; }
.sf-seller-card-name{ margin: 0; font-size: 17px; font-weight: 650; line-height: 1.25; }
.sf-seller-card-meta{ font-size: 13px; color: var(--muted); }
.sf-seller-card-summary{ margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.sf-seller-card-visit{ display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; margin-block-start: auto; font-weight: 600; font-size: 14.5px; color: var(--ink); text-decoration: none; }
.sf-seller-card-visit:hover{ text-decoration: underline; }

/* The brand strip: logos (or names) in a row of equal cells. */
.sf-brands{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sf-brand{ display: grid; place-items: center; min-block-size: 88px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none; }
.sf-brand:hover{ border-color: var(--ink); }
.sf-brand img{ max-inline-size: 100%; block-size: auto; max-block-size: 48px; object-fit: contain; }
.sf-brand-name{ font-weight: 700; font-size: 16px; }

/* Picture and text, and plain text. */
.sf-iwt{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; }
.sf-iwt-end .sf-iwt-media{ order: 2; }
.sf-iwt-media img{ display: block; inline-size: 100%; block-size: auto; border-radius: calc(var(--r) * 2); background: var(--tile); }
.sf-iwt-copy{ display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.sf-iwt-copy p{ margin: 0; }
.sf-rich-text{ max-inline-size: 72ch; }
.sf-rich-text p + p{ margin-block-start: 0.8em; }
.sf-prose{ font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.sf-prose > :first-child{ margin-block-start: 0; }
.sf-prose > :last-child{ margin-block-end: 0; }
.sf-prose a{ color: var(--ink); }

@media (max-width: 1000px){
	.sf-home{ grid-template-columns: minmax(0, 1fr); }
	.sf-home > .sf-hero:has(+ .sf-promos), .sf-home > .sf-hero + .sf-promos{ grid-column: 1; }
	.sf-promos{ grid-template-columns: 1fr 1fr; grid-auto-rows: auto; margin-block-start: 16px; }
	.sf-hero-slide{ grid-template-columns: minmax(0, 1fr); min-block-size: 0; }
	.sf-trust-list{ grid-template-columns: 1fr 1fr; }
	.sf-trust-item:nth-child(3){ border-inline-start: 0; }
	.sf-trust-item:nth-child(n + 3){ border-block-start: 1px solid var(--line); }
	.sf-cats{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sf-seller-cards{ grid-template-columns: 1fr 1fr; }
	.sf-brands{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sf-iwt{ grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.sf-iwt-end .sf-iwt-media{ order: 0; }
}

@media (max-width: 560px){
	.sf-sec{ margin-block-start: 48px; }
	.sf-hero-copy{ padding-block: 32px 64px; padding-inline: 24px; }
	.sf-hero-count{ inset-inline-start: 24px; }
	.sf-promos{ grid-template-columns: minmax(0, 1fr); }
	.sf-promo{ padding: 24px; min-block-size: 200px; }
	.sf-trust-list{ grid-template-columns: minmax(0, 1fr); }
	.sf-trust-item + .sf-trust-item{ border-inline-start: 0; border-block-start: 1px solid var(--line); }
	.sf-cats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sf-seller-cards{ grid-template-columns: minmax(0, 1fr); }
	.sf-brands{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce){
	.sf-promo-img, .sf-cat-img img, .sf-seller-card{ transition: none; }
	.sf-promo:hover .sf-promo-img, .sf-cat:hover .sf-cat-img img{ transform: none; }
}