/* New Day Spirits: design details for pages built with Elementor (free).
   Colours, fonts, sizes and spacing are set in the Elementor panel of each element;
   this file only adds what the free panel cannot do. Panel settings always win. */

/* side padding of a full-width section = the .wrap of the classic design (1280px max, fluid padding) */
:root{--nds-gutter:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)))}
.nds-el-main{display:block}
.nds-el-main .elementor-heading-title{font-family:var(--serif)}
.nds-el-main p.elementor-heading-title{font-family:var(--sans)}

/* hero: same three-layer shading as the classic site (on top of the panel background image) */
.elementor .nds-hero{isolation:isolate;overflow:hidden}
.elementor .nds-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;display:block;background:
  linear-gradient(90deg,rgba(20,8,12,.86) 0%,rgba(52,14,24,.70) 34%,rgba(74,20,32,.22) 62%,rgba(74,20,32,0) 82%),
  linear-gradient(0deg,rgba(20,8,12,.55) 0%,rgba(20,8,12,0) 45%),
  linear-gradient(180deg,rgba(20,8,12,.55) 0%,rgba(20,8,12,0) 22%)}
.elementor .nds-hero-tagline .elementor-heading-title{font-family:var(--serif)}

/* images: fixed proportions, cropped like the classic design */
.elementor .nds-img img{width:100%;height:auto;object-fit:cover;display:block}
.elementor .nds-about-img img{aspect-ratio:2/3;max-height:960px}
.elementor .nds-what-main{background:var(--noir)}
.elementor .nds-what-main img{aspect-ratio:3/4}
.elementor .nds-what-small{background:var(--noir)}
.elementor .nds-what-small img{aspect-ratio:2/3}
.elementor .nds-contact-img img{aspect-ratio:2/3}
.elementor .nds-what-media{position:relative}

/* full-bleed image band */
.elementor .nds-band{aspect-ratio:21/9;min-height:320px;max-height:820px;width:100%}

/* lists in Text Editor widgets: a clean list without bullets */
.elementor .nds-text ul{margin:0;padding-left:1.3rem}

/* brands: the bulleted list of a Text Editor widget shown as a 4-column grid */
.elementor .nds-brand-grid ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 2.6rem;list-style:none;margin:0;padding:0}
.elementor .nds-brand-grid li{margin:0;padding:.85rem 0;border-bottom:1px solid var(--hair);line-height:1.5}
.elementor .nds-brand-grid p{margin:0}
.elementor .nds-brand-intro a,.elementor .nds-text a{color:var(--bx);text-decoration-color:var(--hair-gold);text-underline-offset:3px}
.elementor .nds-brand-disc{opacity:.85}
.elementor .nds-brand-disc,.elementor .nds-brand-disc p{font-size:.8rem!important;font-style:italic;line-height:1.5}

@media (max-width:1024px){
  .elementor .nds-about-img img{aspect-ratio:3/4;max-height:none}
}
@media (max-width:767px){
  .elementor .nds-hero::before{background:linear-gradient(0deg,rgba(20,8,12,.92) 0%,rgba(36,10,18,.80) 40%,rgba(40,12,20,.66) 66%,rgba(40,12,20,.30) 82%,rgba(20,8,12,.62) 100%)}
  .elementor .nds-band{aspect-ratio:4/3;min-height:0}
  .elementor .nds-brand-grid ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.4rem}
  .elementor .nds-btn .elementor-button{width:100%;text-align:center}
}

/* 1.0.3 soft photo edges: a ~1.5 mm feather (1.0.4, was ~3 mm) on all four sides (mask only: no blur, no layout change).
   The feathered edge shows the cream page behind the photo. */
:root{--nds-feather:6px}
@media (max-width:767px){:root{--nds-feather:5px}}
.elementor .nds-about-img,
.elementor .nds-what-main,
.elementor .nds-contact-img{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--nds-feather),#000 calc(100% - var(--nds-feather)),transparent 100%),linear-gradient(to bottom,transparent 0,#000 var(--nds-feather),#000 calc(100% - var(--nds-feather)),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 var(--nds-feather),#000 calc(100% - var(--nds-feather)),transparent 100%),linear-gradient(to bottom,transparent 0,#000 var(--nds-feather),#000 calc(100% - var(--nds-feather)),transparent 100%);
  mask-composite:intersect}
/* small framed photo: the photo feathers into its cream frame (frame = 12px, 8px on mobile) */
.elementor .nds-what-small{background:var(--cr);--nds-frame:12px}
@media (max-width:767px){.elementor .nds-what-small{--nds-frame:8px}}
.elementor .nds-what-small img{
  -webkit-mask-image:linear-gradient(to right,transparent var(--nds-frame),#000 calc(var(--nds-frame) + var(--nds-feather)),#000 calc(100% - var(--nds-frame) - var(--nds-feather)),transparent calc(100% - var(--nds-frame))),linear-gradient(to bottom,transparent var(--nds-frame),#000 calc(var(--nds-frame) + var(--nds-feather)),#000 calc(100% - var(--nds-frame) - var(--nds-feather)),transparent calc(100% - var(--nds-frame)));
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent var(--nds-frame),#000 calc(var(--nds-frame) + var(--nds-feather)),#000 calc(100% - var(--nds-frame) - var(--nds-feather)),transparent calc(100% - var(--nds-frame))),linear-gradient(to bottom,transparent var(--nds-frame),#000 calc(var(--nds-frame) + var(--nds-feather)),#000 calc(100% - var(--nds-frame) - var(--nds-feather)),transparent calc(100% - var(--nds-frame)));
  mask-composite:intersect}
/* hero (full-bleed background with overlay): only the bottom edge softens into the cream About section */
.elementor .nds-hero{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--nds-feather)),transparent 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - var(--nds-feather)),transparent 100%)}
/* full-bleed image band: top edge softens into the cream section above, bottom edge into the bordeaux
   "How we work" section below (an overlay, because a mask would show a cream line there) */
.elementor .nds-band{position:relative}
.elementor .nds-band::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,var(--cr) 0,rgba(245,239,227,0) var(--nds-feather),rgba(107,30,46,0) calc(100% - var(--nds-feather)),var(--bx) 100%)}
/* 1.0.4 soft bordeaux-to-cream transitions: the bottom of a bordeaux section fades into the cream
   section below ("How we work" -> "Contact" on Home, the top band -> brand list on Brands).
   Overlay only: no layout change, no content change. */
:root{--nds-fade:8px}
@media (max-width:767px){:root{--nds-fade:6px}}
.elementor .nds-how,.elementor .nds-page-hero{position:relative}
.elementor .nds-how::after,.elementor .nds-page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--nds-fade);pointer-events:none;z-index:1;background:linear-gradient(to bottom,rgba(107,30,46,0) 0,var(--cr) 100%)}