/* ==========================================================================
   oorhni 2.0 — homepage (front-page.php + template-parts/sections/home-*.php)
   Owner: Homepage agent. Uses the shared tokens from base.css; defines none.
   Mobile first (360–430px), then 600 / 768 / 1000px.
   Backgrounds: ground everywhere, --soft for Falasteen + newsletter,
   --night for the one statement band.
   ========================================================================== */

.home-sec{--home-pad:var(--sec-pad,clamp(56px,8vw,120px));padding-block:var(--home-pad)}
/* Two plain (ground) sections in a row share one gap instead of two. */
.home-sec:not(.home-sec--soft):not(.home-sec--night)+.home-sec:not(.home-sec--soft):not(.home-sec--night){padding-top:0}
.home-sec--soft{background:var(--soft,#F3EEE6)}
.home-sec--night{background:var(--night);color:var(--night-ink)}

/* ---------- shared section head ---------- */
.home-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:clamp(28px,4vw,48px)}
.home-head__main{flex:1 1 320px;min-width:0;max-width:62ch}
.home-head__eyebrow{margin:0 0 12px}
.home-head__title{font-size:clamp(2.1rem,4.2vw,3.6rem);line-height:1.02}
.home-head__text{margin:14px 0 0;color:var(--muted);max-width:52ch}
.home-head__aside{display:flex;align-items:center;gap:20px;flex:none}

/* Text links are .link-u (44px tall, from base.css); keep them on one line. */
.home-more{white-space:nowrap}

/* Previous / next buttons for product rows (.rail-ctrl look from base.css; shown by home.js on overflow). */
.home-row-ctrl{display:flex;gap:8px}
.home-row-ctrl__btn{width:44px;height:44px;display:grid;place-items:center;padding:0;background:transparent;border:1px solid var(--sand);border-radius:0;color:var(--ink);transition:border-color .25s,opacity .25s}
.home-row-ctrl__btn:hover{border-color:var(--ink)}
.home-row-ctrl__btn[disabled]{opacity:.35;cursor:default;border-color:var(--sand)}
.home-row-ctrl__btn .icon{width:18px;height:18px}
@media (max-width:767px){.home-row-ctrl{display:none}}

/* ==========================================================================
   1. Hero — photograph + text on a plain ground (text never sits on the photo)
   ========================================================================== */
.home-hero{display:grid;background:var(--ground)}
.home-hero__media{position:relative;overflow:hidden;background:var(--sand);aspect-ratio:4/5;max-height:82svh;width:100%}
.home-hero__media picture{display:contents}
.home-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.home-hero__body{display:flex;align-items:center;padding:clamp(32px,7vw,64px) var(--gutter) clamp(48px,8vw,72px)}
.home-hero__inner{max-width:34rem}
.home-hero__eyebrow{margin:0 0 18px}
.home-hero__title{font-size:clamp(2.6rem,9.5vw,5.6rem);line-height:1;margin:0}
.home-hero__line{display:block}
.home-hero__title em{font-style:italic}
.home-hero__text{margin:22px 0 0;max-width:42ch;color:var(--muted);font-size:16px}
.home-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.home-hero__cta .btn{flex:1 1 180px;min-height:50px}
.home-hero--no-media .home-hero__body{padding-block:clamp(72px,12vw,140px)}
.home-hero--no-media .home-hero__inner{margin-inline:auto;text-align:center}
.home-hero--no-media .home-hero__text{margin-inline:auto}
.home-hero--no-media .home-hero__cta{justify-content:center}

@media (min-width:600px){
  .home-hero__cta .btn{flex:0 0 auto}
}

@media (min-width:900px){
  /* Split: text left, photograph right, one fixed height (no layout shift). */
  .home-hero--split{grid-template-columns:minmax(0,45fr) minmax(0,55fr);height:clamp(560px,calc(100vh - var(--header-h,124px) - 40px),880px);height:clamp(560px,calc(100svh - var(--header-h,124px) - 40px),880px)}
  .home-hero--split .home-hero__media{grid-column:2;grid-row:1;aspect-ratio:auto;max-height:none;height:100%}
  .home-hero--split .home-hero__body{grid-column:1;grid-row:1;padding:48px clamp(32px,5vw,88px) 48px max(var(--gutter),calc((100vw - var(--page-width)) / 2 + var(--gutter)))}

  .home-hero--split.home-hero--no-media{grid-template-columns:minmax(0,1fr);height:auto}
  .home-hero--split.home-hero--no-media .home-hero__body{padding-inline:var(--gutter)}

  /* Full: wide photograph, the text on a paper panel below it, overlapping slightly. */
  .home-hero--full .home-hero__media{aspect-ratio:auto;height:clamp(460px,72vh,760px);height:clamp(460px,72svh,760px);max-height:none}
  .home-hero--full .home-hero__body{position:relative;z-index:1;width:min(calc(100% - 2 * var(--gutter)),760px);margin:-120px 0 0 max(var(--gutter),calc((100vw - var(--page-width)) / 2 + var(--gutter)));padding:48px 56px;background:var(--paper);border:1px solid var(--sand)}
  .home-hero--full .home-hero__inner{max-width:none}
  .home-hero__title{font-size:clamp(3.6rem,5.6vw,6rem)}
}

/* ==========================================================================
   2. Shop by category — 7 cards: phones 1 wide + 2 columns; 768+ 4 over 3
   ========================================================================== */
.home-cats__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
.home-cat{min-width:0}
.home-cat:first-child{grid-column:1 / -1}
.home-cat__link{display:block;text-decoration:none;color:inherit}
.home-cat__media{position:relative;display:block;overflow:hidden;background:var(--soft,#F3EEE6);aspect-ratio:3/4}
.home-cat:first-child .home-cat__media{aspect-ratio:4/3}
.home-cat__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform 1.2s var(--ease-out)}
.home-cat__link:hover .home-cat__img{transform:scale(1.03)}
.home-cat__label{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding-top:12px}
.home-cat__name{font:400 clamp(21px,2.1vw,28px)/1.1 var(--serif);letter-spacing:-.005em}
.home-cat__label .icon{width:16px;height:16px;flex:none;transition:transform .5s var(--ease-out)}
.home-cat__link:hover .home-cat__label .icon,.home-cat__link:focus-visible .home-cat__label .icon{transform:translateX(4px)}
.home-cat__link:hover .home-cat__name{color:var(--accent)}
.home-cat__link:focus-visible{outline:none}
.home-cat__link:focus-visible .home-cat__media{outline:2px solid var(--ink);outline-offset:3px}

/* Placeholder: soft panel + centred oorhni mark (+ "Coming soon"). */
.home-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--soft,#F3EEE6);color:var(--ink)}
.home-ph__mark{width:30%;max-width:120px;height:auto;opacity:.22}
.home-ph__label{font:500 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

@media (min-width:768px){
  .home-cats__grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:36px clamp(14px,1.6vw,24px)}
  .home-cat,.home-cat:first-child{grid-column:span 3}
  .home-cat:first-child .home-cat__media{aspect-ratio:3/4}
  /* Second row: three wider cards, square, so both rows end at the same height. */
  .home-cat:nth-child(n+5){grid-column:span 4}
  .home-cat:nth-child(n+5) .home-cat__media{aspect-ratio:1/1}
}

/* ==========================================================================
   3, 4, 6, 7. Product rows
   ========================================================================== */
.home-row{
  --gap:clamp(14px,1.8vw,24px);
  display:grid;grid-auto-flow:column;grid-auto-columns:76%;gap:var(--gap);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--gutter) * -1);padding:0 var(--gutter) 6px;scroll-padding-inline:var(--gutter);
  scrollbar-width:none
}
.home-row::-webkit-scrollbar{display:none}
.home-row__item{scroll-snap-align:start;min-width:0}
.home-row__item>.card{height:100%}

@media (min-width:600px){
  .home-row{grid-auto-columns:42%}
}
@media (min-width:1000px){
  .home-row{margin-inline:0;padding-inline:0;scroll-padding-inline:0;grid-auto-columns:calc((100% - (var(--per,4) - 1) * var(--gap)) / var(--per,4))}
  .home-row--fit{overflow:visible}
}

/* Large cards (Abayas) */
.home-products--abayas .home-row{grid-auto-columns:84%}
@media (min-width:600px){.home-products--abayas .home-row{grid-auto-columns:46%}}
@media (min-width:1000px){.home-products--abayas .home-row{grid-auto-columns:calc((100% - (var(--per,3) - 1) * var(--gap)) / var(--per,3))}}

/* ==========================================================================
   5. Falasteen Edition — editorial, on the soft tone
   ========================================================================== */
.home-fal__grid{display:grid;gap:clamp(28px,5vw,48px)}
.home-fal__media{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--sand)}
.home-fal__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.home-fal__body{min-width:0}
.home-fal__eyebrow{margin:0 0 14px}
.home-fal__title{font-size:clamp(2.2rem,4.6vw,4rem);line-height:1.02}
.home-fal__text{margin:20px 0 0;max-width:48ch;color:var(--muted);font-size:16px}
.home-fal__cta{margin:28px 0 0}
.home-fal__products{margin-top:clamp(36px,5vw,56px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--sand)}
.home-fal .card__media{background:var(--paper)}

@media (min-width:900px){
  .home-fal__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(40px,6vw,96px)}
  .home-fal--no-media .home-fal__grid{grid-template-columns:minmax(0,1fr)}
  .home-fal--no-media .home-fal__body{max-width:760px}
  .home-fal__products .home-row{margin-inline:0;padding-inline:0;scroll-padding-inline:0;grid-auto-columns:calc((100% - 2 * var(--gap)) / 3)}
}

/* ==========================================================================
   8. Brand statement — the one dark band
   ========================================================================== */
.home-statement{position:relative;overflow:hidden;text-align:center;--home-pad:clamp(72px,11vw,150px)}
.home-statement__inner{position:relative;z-index:1;max-width:980px}
.home-statement .home-statement__eyebrow{margin:0 0 26px;color:var(--night-ink);opacity:.82}
.home-statement__quote{font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1.18;margin:0 auto;max-width:30ch;color:var(--night-ink)}
.home-statement__cta{margin:34px 0 0;display:flex;justify-content:center}
.home-statement__word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(9rem,30vw,22rem);line-height:1;color:var(--night-ink);opacity:.05;pointer-events:none;user-select:none;white-space:nowrap}
.home-statement :focus-visible{outline-color:var(--night-ink)}

/* ==========================================================================
   9. Instagram / community — 3 across on phones, all in one row from 900px
   ========================================================================== */
.home-ig__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.home-ig__link{position:relative;display:block;overflow:hidden;aspect-ratio:1/1;background:var(--soft,#F3EEE6)}
.home-ig__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out),opacity .4s}
.home-ig__link:hover .home-ig__img{transform:scale(1.03)}
.home-ig__link:focus-visible{outline-offset:-2px}
.home-ig__follow{margin:clamp(20px,3vw,32px) 0 0;display:flex;justify-content:center}

@media (min-width:900px){
  .home-ig__grid{grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:10px}
}

/* ==========================================================================
   10. Newsletter band (the form itself is styled by its owner)
   ========================================================================== */
.home-nl__inner{max-width:720px;text-align:center}
.home-nl .nl-form__row{justify-content:center}

/* ---------- reduced motion: no zooms ---------- */
@media (prefers-reduced-motion:reduce){
  .home-cat__img,.home-ig__img,.home-cat__label .icon{transition:none}
  .home-cat__link:hover .home-cat__img,.home-ig__link:hover .home-ig__img{transform:none}
  .home-row{scroll-behavior:auto}
}