/* Beds Furniture Modern - Homepage styles (enqueued only on the front page) */

/* =========================================================
   HERO SLIDER
   .hero-slider / .hero-slide / .hero-dots / .hero-arrow keep
   their exact names - assets/js/theme.js drives the fade/slide
   logic by querying them directly.

   Asymmetric editorial split: a deep violet-ink panel carries the
   large serif headline + copy + CTA on the left, photography
   bleeds across the right side past the panel edge (not a centred
   headline over a dimmed full-bleed photo). This is the one place
   in the theme that spends real boldness.
========================================================= */
.hero-slider{position:relative;overflow:hidden;color:#fff;min-height:480px;background:var(--ink);}
.hero-slide{
    position:absolute;inset:0;opacity:0;visibility:hidden;
    transition:opacity .7s ease,visibility 0s linear .7s;
    overflow:hidden;background:linear-gradient(165deg,var(--ink) 0%,var(--ink-soft) 100%);
}
/* True crossfade: the incoming slide becomes visible instantly (0s
   delay) while its opacity animates in, so it is stacked on top of
   the outgoing slide (z-index) and both are visible together for the
   full .7s - the outgoing slide's own visibility:hidden is delayed
   until its opacity has finished animating to 0, instead of snapping
   invisible the instant .is-active is removed. */
.hero-slide.is-active{opacity:1;visibility:visible;position:relative;z-index:1;transition:opacity .7s ease,visibility 0s linear 0s;}
.hero-slide:not(.is-active){position:absolute;z-index:0;}
/* The photograph bleeds across the right ~70% of the panel on an
   angled seam - the ink ground stays solid behind the headline. */
.hero-slide::after{
    content:"";position:absolute;inset:0;left:32%;z-index:1;
    background:var(--slide-img) center/cover no-repeat;
    clip-path:polygon(7% 0,100% 0,100% 100%,0 100%);
}
.hero-slider .hero-slide__inner{
    position:relative;z-index:2;max-width:460px;margin:0;
    padding:70px 48px 70px 20px;min-height:480px;display:flex;align-items:center;
}
@media(min-width:1361px){.hero-slider .hero-slide__inner{padding-left:calc((100vw - var(--wrap)) / 2 + 20px);}}
.hero-slide__copy{max-width:420px;text-align:center;margin:0 auto;}
.hero-slide__copy .eyebrow{color:var(--on-dark-tint);}
.hero-slide__copy h1,.hero-slide__copy h2{color:#fff;font-size:clamp(32px,4.4vw,50px);font-style:italic;font-weight:500;text-shadow:0 2px 18px rgba(0,0,0,.18);}
.hero-slide__copy p{color:var(--on-dark-muted);font-size:16px;line-height:1.65;}
.hero-slide__actions{display:flex;justify-content:center;gap:12px;margin-top:26px;flex-wrap:wrap;}
/* A touch more presence than the flat site-wide .btn - a deeper
   resting shadow plus a lift on hover, since this is "the one place
   in the theme that spends real boldness" per the brief above. */
.hero-slide__actions .btn{box-shadow:0 10px 26px rgba(var(--ink-rgb),.28);transition:background .15s ease,transform .18s ease,box-shadow .18s ease;}
.hero-slide__actions .btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(var(--ink-rgb),.34);}
.bf-btn-outline--light{border-color:rgba(255,255,255,.65);color:#fff;box-shadow:none;}
.bf-btn-outline--light:hover{background:#fff;color:var(--ink);}
/* A quiet fade/rise for the copy block each time a slide becomes
   active - skipped entirely under prefers-reduced-motion, same as
   the .js-reveal system elsewhere in the theme. */
@keyframes heroCopyIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.hero-slide.is-active .hero-slide__copy{animation:heroCopyIn .6s ease both;}
@media(prefers-reduced-motion:reduce){
    .hero-slide.is-active .hero-slide__copy{animation:none;}
}
.hero-dots{position:absolute;left:28px;bottom:26px;display:flex;justify-content:flex-start;gap:7px;z-index:5;}
.hero-dots button{width:8px;height:8px;border-radius:50px;border:none;background:rgba(255,255,255,.4);cursor:pointer;padding:0;transition:width .22s ease,background .22s ease;}
.hero-dots button.is-active{width:22px;background:#fff;}
/* Soft white circles sitting on the ink panel, per the brief - a
   light glass/blur finish instead of a flat translucent fill. */
/* Parked over the photograph on the right, vertically centred -
   that side never holds copy, so the arrows can never collide with
   a long wrapped headline in the ink panel regardless of title
   length or viewport width. */
.hero-arrow{
    position:absolute;top:50%;transform:translateY(-50%);right:24px;z-index:5;width:42px;height:42px;border-radius:50%;
    background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff;font-size:15px;cursor:pointer;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(var(--ink-rgb),.18);
    transition:background .15s ease,color .15s ease,transform .15s ease;
}
.hero-arrow:hover{background:#fff;border-color:#fff;color:var(--ink);transform:translateY(-50%) scale(1.06);}
.hero-arrow.prev{right:78px;}
.hero-arrow.next{right:24px;}
@media(max-width:860px){
    .hero-slider{min-height:0;}
    .hero-slide{position:static;opacity:1;visibility:visible;}
    .hero-slide:not(.is-active){display:none;position:static;}
    .hero-slide::after{position:relative;inset:auto;left:auto;clip-path:none;display:block;height:220px;width:100%;order:2;}
    .hero-slider .hero-slide__inner{max-width:100%;padding:36px 20px 30px;min-height:0;order:1;justify-content:center;}
    .hero-slide.is-active{display:flex;flex-direction:column;}
    .hero-slide__copy{max-width:100%;}
    .hero-arrow{display:none;}
    .hero-dots{position:static;justify-content:center;padding:14px 0 0;}
}
@media(max-width:480px){
    /* Smallest phones (375px, 340px): keep copy from overflowing and
       let the two CTA buttons stack full-width rather than wrapping
       and possibly clipping/overlapping on a 340px-wide viewport. */
    .hero-slider .hero-slide__inner{padding:28px 16px 24px;}
    .hero-slide::after{height:170px;}
    .hero-slide__copy h1,.hero-slide__copy h2{font-size:clamp(24px,7vw,32px);}
    .hero-slide__copy p{font-size:14px;}
    .hero-slide__actions{flex-direction:column;align-items:stretch;gap:10px;}
    .hero-slide__actions .btn{width:100%;padding:13px 18px;white-space:normal;text-align:center;}
}

/* =========================================================
   CATEGORY GRID (homepage layout only - the .bf-cat-card
   component itself is defined in the shared style.css, since the
   shop archive's category showcase re-uses it too)

   Asymmetric editorial mosaic, not four identical square tiles:
   the first tile spans two rows and (on wider screens) two
   columns to read as a featured category, the rest sit smaller
   alongside it.
========================================================= */
.bf-cat-grid{
    display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:14px;
}
.bf-cat-grid > a:first-child{grid-column:span 2;grid-row:span 2;}
@media(max-width:860px){
    .bf-cat-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px;}
    .bf-cat-grid > a:first-child{grid-column:span 2;grid-row:span 1;}
}
@media(max-width:480px){
    .bf-cat-grid{grid-template-columns:1fr;grid-auto-rows:190px;}
    .bf-cat-grid > a:first-child{grid-column:span 1;}
}

/* =========================================================
   PROMO BANNER (per-category + mattress spotlight)
========================================================= */
.bf-promo{position:relative;border-radius:0;border-left:4px solid var(--rust);overflow:hidden;min-height:230px;display:flex;align-items:center;color:#fff;}
.bf-promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.bf-promo::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(var(--ink-rgb),.88),rgba(var(--ink-rgb),.2));z-index:1;}
.bf-promo__copy{position:relative;z-index:2;padding:36px 42px;max-width:440px;}
.bf-promo__copy h2{color:#fff;margin-bottom:6px;font-family:var(--f-head);font-style:italic;font-weight:500;}
.bf-promo__copy p{color:var(--on-dark-muted);margin-bottom:18px;}
.bf-promo__copy .eyebrow{display:block;margin-bottom:6px;color:var(--on-dark-tint);text-transform:none;letter-spacing:0;font-size:15px;}

.bf-mattress-spotlight{position:relative;}
.bf-promo--mattress{min-height:290px;}
.bf-promo--mattress::before{background:linear-gradient(100deg,rgba(var(--rust-rgb),.82),rgba(var(--ink-rgb),.62));}
.bf-promo--mattress .bf-promo__copy{max-width:500px;}
.bf-promo--mattress .bf-promo__copy h2{font-size:clamp(25px,3vw,36px);}
@media(max-width:640px){
    .bf-promo{min-height:0;}
    .bf-promo__copy{padding:26px 22px;max-width:100%;}
}

/* .carousel / .carousel-track / .bf-carousel-nav: the shared component
   itself now lives in the base style.css (the single-product page's
   related-products carousel reuses it too), so it is not repeated here. */

.bf-blog-teaser-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px;}

/* =========================================================
   TESTIMONIALS
========================================================= */
.bf-testimonial{
    background:#fff;border:1px solid var(--line);border-radius:0;padding:26px;
    display:flex;flex-direction:column;gap:12px;height:100%;border-top:3px solid var(--rust);
}
.bf-testimonial__quote{color:var(--ink-text);font-size:15px;flex:1;font-family:var(--f-head);font-style:italic;line-height:1.55;}
.bf-testimonial__person{display:flex;align-items:center;gap:12px;}
.bf-testimonial__avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--cream);}
.bf-testimonial__name{font-weight:700;color:var(--ink);font-size:14px;font-family:var(--f-body);font-style:normal;}
.bf-testimonial__role{color:var(--muted);font-size:12px;}

/* =========================================================
   NEWSLETTER / FINANCE BANDS
   (.bf-trust-band moved to the shared style.css - page-about.php
   uses it too, and that template loads pages.css, not this file.)
========================================================= */
.bf-newsletter-band{background:#fff;padding:48px 20px;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.bf-newsletter-band h2{margin-bottom:6px;font-family:var(--f-head);font-style:italic;font-weight:500;}
.bf-newsletter-band p{color:var(--muted);max-width:480px;margin:0 auto 20px;}
.newsletter-form{display:flex;max-width:420px;margin:0 auto;gap:0;border-radius:0;overflow:hidden;border:none;border-bottom:1.5px solid var(--ink);background:transparent;}
.newsletter-form input{flex:1;border:none;padding:13px 2px;font-family:inherit;font-size:14px;outline:none;background:transparent;}
.newsletter-form button{border:none;background:transparent;color:var(--ink);padding:0 10px;font-weight:700;cursor:pointer;}
.newsletter-form button:hover{color:var(--rust);}

.bf-finance-strip{padding:36px 20px;text-align:center;}
.bf-finance-strip__logos{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;align-items:center;margin-top:16px;}
.bf-finance-strip__logos img{max-height:34px;width:auto;}