/* =============================================
   PURAALI — Home page, styled after the Umino theme's own home page
   (D:\Development\puraali.com\theme\index.html): rounded image tiles, white pill
   labels, soft grey image grounds, centred Jost headings, pill buttons.
   Loaded only by Views/Home/Index.cshtml. Colours come from styles.css tokens.
   ============================================= */

:root { --ph-radius: 10px; --ph-ground: #f5f5f5; }

.ph-btn { display: inline-block; padding: 13px 34px; border-radius: 30px; background: var(--dark); color: #fff; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; border: 1px solid var(--dark); transition: var(--transition); }
.ph-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.ph-btn--light { background: #fff; color: var(--dark); border-color: #fff; }
.ph-btn--light:hover { background: var(--dark); border-color: var(--dark); color: #fff; }
.ph-btn--outline { background: transparent; color: var(--dark); }
.ph-btn--outline:hover { background: var(--dark); color: #fff; }

/* hero */
.ph-hero { position: relative; height: min(78vh, 720px); min-height: 460px; overflow: hidden; background: var(--ph-ground); }
.ph-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; }
.ph-slide.active { opacity: 1; z-index: 1; }
.ph-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,12,10,0.45), rgba(20,12,10,0) 60%); }
.ph-slide__copy { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; transform: translateY(-50%); color: #fff; }
.ph-slide__copy .eyebrow { color: #fff; letter-spacing: 0.2em; font-size: 0.8rem; }
.ph-slide__copy h1, .ph-slide__copy h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(2.5rem, 5.5vw, 4.6rem); line-height: 1.08; margin: 12px 0 16px; max-width: 620px; color: #fff; }
.ph-slide__copy em { font-style: normal; }
.ph-slide__desc { max-width: 440px; font-size: 1rem; margin-bottom: 30px; color: rgba(255,255,255,0.9); }
.ph-slide .hero-countdown { margin-bottom: 22px; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ph-slide .hero-countdown b { font-size: 1.3rem; margin-left: 6px; }
.ph-dots { position: absolute; z-index: 3; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.ph-dots button { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; background: transparent; }
.ph-dots button.active { background: #fff; }

.ph-reminder { background: var(--bg-subtle); }
.ph-reminder__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; font-size: 0.9rem; }
.ph-reminder .ph-btn { padding: 9px 22px; }

/* sections + headings (Umino: centred, sans, one-line subtitle) */
.ph-section { padding: 90px 0; }
.ph-section--flush { padding-top: 0; }
@media (max-width: 767px) { .ph-section { padding: 56px 0; } .ph-section--flush { padding-top: 0; } }
.ph-head { text-align: center; margin-bottom: 40px; }
.ph-head h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: 0; }
.ph-head p { color: var(--mid); max-width: 560px; margin: 8px auto 0; font-size: 0.95rem; }
.ph-center { text-align: center; margin-top: 44px; }

/* featured collections — packery mosaic */
.ph-packery { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; gap: 24px; }
/* Explicit placement: auto-flow would put tile 3 in column 3 and push the second tall
   tile under column 2. Umino's layout is tall / two stacked / tall. */
.ph-packery--4 > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.ph-packery--4 > :nth-child(2) { grid-column: 2; grid-row: 1; }
.ph-packery--4 > :nth-child(3) { grid-column: 2; grid-row: 2; }
.ph-packery--4 > :nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
.ph-packery--3 > :nth-child(1) { grid-row: span 2; }
.ph-packery--3 > :nth-child(2), .ph-packery--3 > :nth-child(3) { grid-column: span 2; }
.ph-cat { position: relative; overflow: hidden; border-radius: var(--ph-radius); background: var(--ph-ground); display: block; }
.ph-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s; }
.ph-cat:hover img { transform: scale(1.05); }
.ph-pill { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); background: #fff; color: var(--dark); padding: 10px 30px; border-radius: 30px; font-size: 0.9rem; font-weight: 500; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,0.06); transition: var(--transition); }
.ph-cat:hover .ph-pill { background: var(--dark); color: #fff; }
/* Tablet (768–991): Umino keeps the 3-column mosaic, just shorter rows. */
@media (max-width: 991px) {
  .ph-packery { grid-auto-rows: 230px; gap: 15px; }
}
/* Phone (≤767): Umino's staggered 2-column packery (collections-item.css .grid-4):
   left = tall then short, right = short then tall. Rows scale with the screen so the
   photos keep their portrait shape instead of being cropped into squat boxes.
   (The phone pill rule is at the end of this file, after the type-scale overrides.) */
@media (max-width: 767px) {
  .ph-packery { grid-template-columns: 1fr 1fr; grid-auto-rows: calc((100vw - 47px) / 2 * 0.78); gap: 15px; }
  .ph-packery--4 > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .ph-packery--4 > :nth-child(2) { grid-column: 1; grid-row: 3; }
  .ph-packery--4 > :nth-child(3) { grid-column: 2; grid-row: 1; }
  .ph-packery--4 > :nth-child(4) { grid-column: 2; grid-row: 2 / span 2; }
  .ph-packery--3 > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .ph-packery--3 > :nth-child(2), .ph-packery--3 > :nth-child(3) { grid-column: 2; grid-row: auto; }
  .ph-packery--2 > *, .ph-packery--1 > * { grid-row: span 2; }
  .ph-packery--1 { grid-template-columns: 1fr; }
}

/* tabs + product grid */
.ph-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 34px; flex-wrap: wrap; }
.ph-tabs button { font-size: 0.85rem; color: var(--dark); padding: 8px 22px; border: 1px solid var(--bg-warm); border-radius: 30px; transition: var(--transition); }
.ph-tabs button.active, .ph-tabs button:hover { background: var(--dark); border-color: var(--dark); color: #fff; }
.ph-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 24px; }
@media (max-width: 1023px) { .ph-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .ph-grid { grid-template-columns: 1fr 1fr; gap: 26px 12px; } }

/* product card (.pc) styles live in styles.css — shared with the listing page */

/* banner trio */
.ph-promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ph-promo { position: relative; overflow: hidden; aspect-ratio: 4/3.4; border-radius: var(--ph-radius); background: var(--ph-ground); }
.ph-promo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s; }
.ph-promo:hover img { transform: scale(1.05); }
.ph-promo__t { position: absolute; left: 30px; right: 30px; bottom: 28px; color: var(--dark); }
.ph-promo__t small { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }
.ph-promo h3 { font-family: var(--font-sans); font-weight: 400; font-size: 1.9rem; line-height: 1.15; margin: 4px 0 10px; }
.ph-promo__t span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
/* CMS promo photos are darker than Umino's studio shots — flip text to white there. */
.ph-promo::after { content: ""; position: absolute; inset: 50% 0 0 0; background: linear-gradient(0deg, rgba(0,0,0,0.45), transparent); }
.ph-promo__t { z-index: 1; color: #fff; }
@media (max-width: 900px) { .ph-promos { grid-template-columns: 1fr; } }

/* flash sale strip */
.ph-flash { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--bg-subtle); border-radius: var(--ph-radius); padding: 30px 40px; }
.ph-flash small { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.ph-flash h3 { font-family: var(--font-sans); font-weight: 500; font-size: 2rem; }
.ph-countdown { display: flex; gap: 10px; }
.ph-countdown div { background: #fff; border-radius: 8px; padding: 10px 0; width: 66px; text-align: center; }
.ph-countdown b { display: block; font-size: 1.5rem; font-weight: 500; line-height: 1.1; }
.ph-countdown small { font-size: 0.62rem; color: var(--mid); letter-spacing: 0.1em; }

/* customer say */
.ph-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ph-review { border: 1px solid var(--bg-warm); border-radius: var(--ph-radius); padding: 34px 30px; text-align: center; background: #fff; }
.ph-avatar { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: var(--bg-subtle); color: var(--accent); display: grid; place-items: center; font-weight: 500; }
.ph-review p { color: var(--dark-mid); margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ph-stars { color: var(--dark); letter-spacing: 3px; margin-bottom: 10px; }
.ph-review__who { font-size: 0.9rem; color: var(--mid); }
.ph-review__who b { color: var(--dark); font-weight: 500; }
@media (max-width: 900px) { .ph-reviews { grid-template-columns: 1fr; } }

/* shop by gram */
.ph-insta { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.ph-insta a { aspect-ratio: 3/4; overflow: hidden; border-radius: var(--ph-radius); background: var(--ph-ground); }
.ph-insta img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.ph-insta a:hover img { transform: scale(1.06); }
@media (max-width: 700px) { .ph-insta { grid-template-columns: repeat(3, 1fr); gap: 8px; } }

/* newsletter (light band, Umino keeps it low-key) */
.ph-news { background: var(--bg-subtle); text-align: center; padding: 70px 0; }
.ph-news h2 { font-family: var(--font-sans); font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.2rem); }
.ph-news p { color: var(--mid); margin: 8px 0 24px; }
.ph-news__form { display: flex; max-width: 520px; margin: 0 auto; background: #fff; border-radius: 30px; padding: 5px; border: 1px solid var(--bg-warm); }
.ph-news__form input[type=email] { flex: 1; min-width: 0; background: transparent; border: 0; padding: 10px 18px; font-family: var(--font-sans); font-size: 0.9rem; outline: none; }
.ph-news__form button { background: var(--dark); color: #fff; border-radius: 30px; padding: 0 26px; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.ph-news__form button:hover { background: var(--accent); }
.ph-news__small { font-size: 0.75rem; margin-top: 14px !important; }
.ph-news__err { color: var(--accent); font-weight: 600; }
.ph-news__code { display: inline-flex; gap: 14px; align-items: center; background: #fff; border: 1px dashed var(--bg-warm); border-radius: 30px; padding: 10px 18px; }
.ph-news__code strong { font-size: 1.15rem; letter-spacing: 0.08em; }
.ph-news__code button { border: 1px solid var(--dark); border-radius: 20px; padding: 4px 12px; font-size: 0.75rem; }

/* ── Umino type scale for home sections (measured from the theme) ── */
.ph-slide__copy h1, .ph-slide__copy h2 { font-weight: 400; font-size: clamp(3rem, 5.6vw, 5rem); line-height: 1.12; }
.ph-slide__copy .eyebrow { font-size: 0.875rem; }
.ph-slide__desc { font-size: 1rem; line-height: 1.75; }
.ph-btn, .ph-slide .ph-btn { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; height: 52px; line-height: 50px; padding: 0 44px; }
.ph-head h2 { font-size: clamp(1.75rem, 2.4vw, 1.96rem); font-weight: 400; }
.ph-head p { font-size: 1rem; line-height: 1.75; }
.ph-pill { font-size: 1rem; padding: 11px 34px; }
.ph-promo h3 { font-size: 2.25rem; font-weight: 400; }
.ph-promo__t small, .ph-promo__t span { font-size: 0.8125rem; }
.ph-tabs button { font-size: 1rem; }
.ph-review p { font-size: 1rem; line-height: 1.75; }

/* ── Umino slideshow (index.html bls__slideshow): light image with no tint, dark copy
   centred in the left half, round white arrows, small grey dots. ── */
.ph-hero { height: min(calc(100vh - 150px), 900px); min-height: 520px; background: #f5f5f5; }
.ph-slide::after { display: none; }
.ph-slide__copy.container { max-width: none; width: 50%; left: 0; right: auto; margin: 0; padding: 0 40px; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--dark); }
.ph-slide__copy .eyebrow { color: var(--mid); letter-spacing: 0.1em; }
.ph-slide__copy h1, .ph-slide__copy h2 { color: var(--dark); max-width: 560px; margin: 0 0 18px; }
.ph-slide__copy em { color: inherit; }
.ph-slide__desc { color: var(--mid); margin-bottom: 40px; }
.ph-slide .hero-countdown { color: var(--dark); }
.ph-slide .hero-countdown b { color: var(--dark); }
.ph-slide .ph-btn { min-width: 200px; width: auto; padding: 0 30px; white-space: nowrap; text-align: center; background: var(--dark); border-color: var(--dark); color: #fff; }
.ph-slide .ph-btn:hover { background: var(--accent); border-color: var(--accent); }
.ph-arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 58px; height: 58px; border-radius: 50%; background: #fff; color: var(--dark); display: grid; place-items: center; box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: background 0.2s, color 0.2s; }
.ph-arrow:hover { background: var(--dark); color: #fff; }
.ph-arrow svg { width: 18px; height: 18px; }
.ph-arrow--prev { left: 20px; }
.ph-arrow--next { right: 20px; }
.ph-hero:not(:has(.ph-slide + .ph-slide)) .ph-arrow { display: none; }
.ph-dots { bottom: 18px; gap: 8px; }
.ph-dots button { width: 8px; height: 8px; border: 0; background: #c8c8c8; }
.ph-dots button.active { background: var(--dark); }
/* Phones: Umino keeps the copy on the left over the photo, left-aligned, no fade; the
   photo is anchored right so the model stays in view beside the text. */
@media (max-width: 900px) {
  .ph-hero { height: 560px; min-height: 0; }
  .ph-slide { background-position: 62% center; background-size: auto 100%; }
  .ph-slide__copy.container { width: 62%; padding: 0 0 0 18px; align-items: flex-start; text-align: left; }
  .ph-slide__copy h1, .ph-slide__copy h2 { font-size: clamp(1.9rem, 8vw, 2.4rem); line-height: 1.2; margin-bottom: 14px; }
  .ph-slide__copy .eyebrow { font-size: 0.75rem; }
  .ph-slide__desc { font-size: 0.95rem; line-height: 1.6; margin-bottom: 26px; }
  .ph-slide .ph-btn { width: auto; min-width: 150px; height: 44px; line-height: 42px; padding: 0 26px; font-size: 0.8125rem; white-space: nowrap; }
  .ph-arrow { display: none; }
}
/* The site-wide "headings #111" rule would otherwise darken text sitting on photos. */
.ph-promo h3, .ph-promo__t { color: #fff; }

/* Light text for dark hero photos (CMS: Hero slide > Text colour = Light). A soft dark
   fade behind the copy keeps it readable over busy parts of the image too. */
.ph-slide--light::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,0) 65%); }
.ph-slide--light .ph-slide__copy, .ph-slide--light .ph-slide__copy.container { color: #fff; }
.ph-slide--light .ph-slide__copy .eyebrow { color: rgba(255,255,255,.85); }
.ph-slide--light .ph-slide__copy h1, .ph-slide--light .ph-slide__copy h2 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.ph-slide--light .ph-slide__desc { color: rgba(255,255,255,.9); }
.ph-slide--light .ph-btn { background: #fff; color: #111; border-color: #fff; }
.ph-slide--light .ph-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.ph-slide--light .hero-countdown { color: #fff; }
@media (max-width: 767px) {
    .ph-slide--light::before { background: linear-gradient(0deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,0) 70%); }
}

/* Featured-collection pill on phones (Umino: inline pill, .8rem 3rem padding, 2-line clamp):
   shrinks to its text, wraps to at most two lines and never runs outside the tile. */
@media (max-width: 767px) {
  .ph-pill { bottom: 15px; width: max-content; max-width: calc(100% - 20px); white-space: normal; text-align: center;
             padding: 8px 18px; font-size: 0.875rem; line-height: 1.3;
             display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}

/* ── Banner trio, matched to Umino (index.html .bls__banner-image) ──
   Desktop ≥992: three portrait banners (926×1200) with 30px gaps.
   ≤991: a swipeable row (each banner 60% wide, 80% on phones) so the next one peeks in.
   Copy sits bottom-left with 10% padding; "Shop the look" is a text link with a 2px
   underline. Declared last so it overrides the earlier .ph-promo rules. */
.ph-promos { grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ph-promo { aspect-ratio: 926 / 1200; }
.ph-promo::after { inset: 40% 0 0 0; background: linear-gradient(0deg, rgba(0,0,0,.5), transparent); }
.ph-promo__t { left: 10%; right: 10%; bottom: 10%; }
.ph-promo__t small { display: block; font-size: 0.75rem; letter-spacing: 0.12em; font-weight: 500; margin-bottom: 2px; }
.ph-promo h3 { font-size: clamp(1.875rem, 2.6vw, 2.25rem); line-height: 1.2; margin: 0 0 10px; }
.ph-promo__t span { display: inline-block; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; border-bottom: 2px solid currentColor; padding-bottom: 4px; }
@media (max-width: 991px) {
  .ph-promos { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 60%;
               gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
               scrollbar-width: none; margin: 0 -16px; padding: 0 16px; scroll-padding: 0 16px; }
  .ph-promos::-webkit-scrollbar { display: none; }
  .ph-promo { scroll-snap-align: start; }
}
@media (max-width: 575px) {
  .ph-promos { grid-auto-columns: 80%; gap: 15px; }
  .ph-promo h3 { font-size: 1.75rem; }
}