/* ============================================================
   ELIA EVENTS
   Rebuild of the Canva design DAHS20ffyBg as a responsive site.

   Desktop reproduces the Canva canvas exactly. Every element keeps
   its original design coordinates on a 1371 x 771 page:

     .el     --x --y --w (--h)      absolutely placed layer
     .frame  --x --y --w --h        the visible crop window
       > img --ix --iy --iw --ih    the photo inside that window

   CSS turns those into percentages, so the whole composition scales
   fluidly instead of being locked to one width. Type scales with
   container query units (cqw) for the same reason.

   Below 900px the absolute layer is switched off and each section
   reflows into a real stacked mobile layout — the crops survive,
   because the inner offsets are percentages of their own frame.
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{font-family:"New Icon Serif";src:url("../fonts/newiconserif-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Alta";src:url("../fonts/alta-light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Alta";src:url("../fonts/alta-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Perandory";src:url("../fonts/perandory-semicondensed.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Lora";src:url("../fonts/lora-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url("../fonts/lora-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Lora";src:url("../fonts/lora-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"TT Hoves";src:url("../fonts/tthoves-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TT Hoves";src:url("../fonts/tthoves-bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Elia Script";src:url("../fonts/script-display.woff2") format("woff2");font-weight:400;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --W:1371;              /* Canva page width  */
  --H:771;               /* Canva page height */
  --blue:#425286;        /* the one brand colour, used for all type */
  --cream:#F1F1F1;
  --tagline:#D9D9D9;

  --f-display:"New Icon Serif","Cormorant Garamond",Georgia,serif;
  --f-alta:"Alta","Cormorant Garamond",Georgia,serif;
  --f-tagline:"Perandory","Cormorant Garamond",Georgia,serif;
  --f-body:"Lora",Georgia,serif;
  --f-label:"TT Hoves","Helvetica Neue",Arial,sans-serif;
  --f-script:"Elia Script","Snell Roundhand",cursive;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--blue);
  font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,dl,dd,figure,h1,h2,h3,p{margin:0;padding:0}
ul{list-style:none}

/* ============================================================
   DESKTOP — faithful reproduction of the Canva canvas
   ============================================================ */
.page{
  position:relative;
  width:100%;
  aspect-ratio:var(--W)/var(--H);
  overflow:hidden;
  background:var(--bg,#fff);
  container-type:inline-size;
}

/* text and other flat layers */
.el{
  position:absolute;
  left:calc(var(--x) / var(--W) * 100%);
  top:calc(var(--y) / var(--H) * 100%);
  width:calc(var(--w) / var(--W) * 100%);
  z-index:3;               /* type sits above artwork, as in the original */
}

/* photo frames: the frame is the crop window, the img floats inside it */
.frame{
  position:absolute;
  left:calc(var(--x) / var(--W) * 100%);
  top:calc(var(--y) / var(--H) * 100%);
  width:calc(var(--w) / var(--W) * 100%);
  height:calc(var(--h) / var(--H) * 100%);
  overflow:hidden;
  z-index:1;
}
.frame > img{
  position:absolute;
  left:calc(var(--ix) / var(--w) * 100%);
  top:calc(var(--iy) / var(--h) * 100%);
  width:calc(var(--iw) / var(--w) * 100%);
  height:calc(var(--ih) / var(--h) * 100%);
  max-width:none;          /* these carry exact design widths — never clamp */
  object-fit:cover;
  /* Canva's per-image transparency. The backdrops are deliberately knocked
     back so the type and the monogram read over them; the value composites
     against the section's own background colour, so --bg matters too. */
  opacity:var(--op, 1);
}
.frame.bleed{z-index:0}    /* full-page backdrops sit behind everything */

/* hairline rules (SVG lines in the original) */
.rule{
  position:absolute;
  left:calc(var(--x) / var(--W) * 100%);
  top:calc(var(--y) / var(--H) * 100%);
  width:calc(var(--w) / var(--W) * 100%);
  height:1px;
  z-index:2;
}
.rule--svc{background:#fff}
.rule--more{background:#000}

/* translucent copy panels */
.panel{height:calc(var(--h) / var(--H) * 100%);z-index:2}
.panel--intro{background:var(--cream);opacity:.79}
.panel--services{background:#EAE9EC;opacity:.75}

/* ---------- type ---------- */
[class^="t-"],[class*=" t-"]{
  font-size:calc(var(--fs) / var(--W) * 100cqw);
  line-height:calc(var(--lh) / var(--fs));
  letter-spacing:calc(var(--ls, 0) / var(--fs) * 1em);
  color:var(--blue);
  font-weight:400;
}
/* headings and single-line labels keep the original line breaks even if
   font metrics differ by a hair — <br> still breaks inside nowrap */
.t-display,.t-alta,.t-tagline,.t-label,.t-script,.t-contact{white-space:nowrap}

.t-display{
  font-family:var(--f-display);
  /* New Icon Serif is unicase — this keeps the look if it ever falls back */
  text-transform:uppercase;
}
.t-alta{font-family:var(--f-alta);text-align:center;font-weight:400}
.t-tagline{font-family:var(--f-tagline);color:var(--tagline);text-align:center;text-transform:uppercase}
.t-body{font-family:var(--f-body)}
.t-justify{text-align:justify}
.t-label{font-family:var(--f-label);font-weight:700;text-transform:uppercase}
.t-script{font-family:var(--f-script)}
/* price line under a service label — scales with the label it sits in */
.svc-price{display:block;font-size:.6em;line-height:1.7}
.t-contact{font-family:var(--f-label);display:block}
.t-contact:hover{text-decoration:underline;text-underline-offset:.2em}
.t-contact:active{opacity:.7;transition:opacity .1s}
a:focus-visible{outline:2px solid var(--blue);outline-offset:.15em;border-radius:2px}

/* single-line blocks sit slightly lower than Canva because of CSS
   half-leading — pull them back by half the extra leading */
.t-alta,.t-tagline,.t-contact{margin-top:calc((var(--fs) - var(--lh)) / var(--W) * 50cqw)}

/* contact icons */
.ico{
  position:absolute;
  left:calc(var(--x) / var(--W) * 100%);
  top:calc(var(--y) / var(--H) * 100%);
  width:calc(var(--w) / var(--W) * 100%);
  height:calc(var(--h) / var(--H) * 100%);
  color:var(--blue);
  z-index:3;
}
.ico svg{width:100%;height:100%}

/* the watermark's fade is baked into the PNG — measured opacity is 1 */

/* wrappers exist only for the mobile layout — transparent on desktop */
.hero-stack,.intro-copy,.about-copy,.help-copy,.help-gallery,
.svc-list,.svc,.more-card,.contact-list,.contact,.pair{display:contents}

/* ============================================================
   MOBILE — real reflow, not a shrunken canvas
   ============================================================ */
@media (max-width:900px){
  .page{
    aspect-ratio:auto;
    height:auto;
    container-type:normal;
    padding:clamp(3rem,9vw,4.5rem) clamp(1.25rem,6vw,2.5rem);
  }
  .rule,.panel{position:static;left:auto;top:auto;width:auto}
  .el,.ico{position:relative;left:auto;top:auto;width:auto;z-index:3}
  .frame{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:var(--w)/var(--h);z-index:3}
  .hero-stack,.intro-copy,.about-copy,.help-copy,.help-gallery,
  .svc-list,.svc,.more-card,.contact-list,.contact,.pair{display:block;position:relative;z-index:3}

  /* a full-bleed backdrop becomes a cover layer behind its section */
  .frame.bleed{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;z-index:0}
  .frame.bleed > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

  /* type resizes against the viewport instead of the canvas */
  [class^="t-"],[class*=" t-"]{letter-spacing:calc(var(--ls, 0) / var(--fs) * 1em)}
  .t-display,.t-alta,.t-tagline,.t-label,.t-script,.t-contact{white-space:normal}
  .t-display{font-size:clamp(2.5rem,11vw,4rem);line-height:1.02}
  .t-alta{font-size:clamp(1.6rem,7vw,2.2rem);line-height:1.25}
  .t-tagline{font-size:clamp(1.05rem,4.6vw,1.5rem);line-height:1.35}
  .t-body{font-size:clamp(1rem,4.1vw,1.15rem);line-height:1.62}
  .t-label{font-size:clamp(1.05rem,4.3vw,1.25rem);line-height:1.3}
  .t-script{font-size:clamp(2.1rem,9.5vw,3rem);line-height:1.1}
  .t-contact{font-size:clamp(1.15rem,5vw,1.45rem);line-height:1.3}
  .t-alta,.t-tagline,.t-contact{margin-top:0}
  .t-justify{text-align:left}
  .t-body + .t-body{margin-top:1.1em}
  /* headings keep their original line breaks on mobile too — white-space is
     normal here, so an over-long line can still wrap on top of that */

  /* ---- 1 · hero ---- */
  .page--hero{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:0}
  .page--hero .frame.bleed > img{object-position:50% 45%}
  .hero-stack{
    position:relative;display:flex;flex-direction:column;align-items:center;
    gap:clamp(1rem,4vw,2rem);padding:2rem 1.25rem;width:100%;
  }
  .hero-stack .mark{width:min(74vw,340px);aspect-ratio:1}
  .page--hero .t-tagline{max-width:24ch;text-align:center;margin-top:clamp(4rem,15vw,9rem)}

  /* ---- 2 · collage ---- */
  .page--collage{position:relative;display:flex;flex-direction:column;gap:clamp(2.5rem,9vw,3.5rem)}
  /* backdrop keeps its measured 0.18 here too — no mobile-only override */
  .pair{position:relative;display:flex;flex-direction:column;gap:1rem}
  .pair figcaption{text-align:center}

  /* ---- 3 · un eveniment special ---- */
  .page--intro{position:relative;padding:0}
  /* the tablescape backdrop becomes a banner, keeping its own crop */
  .page--intro .frame.bleed{position:relative;inset:auto;height:auto;aspect-ratio:var(--w)/var(--h)}
  .page--intro .frame.bleed > img{opacity:1}
  .page--intro .panel{display:none}
  .intro-copy{
    background:var(--cream);
    padding:clamp(2.25rem,8vw,3.25rem) clamp(1.25rem,6vw,2.5rem);
    display:flex;flex-direction:column;gap:1.25rem;
  }
  .intro-copy .t-display{margin-bottom:.4rem}
  .intro-copy::after{content:'';display:block;width:40%;height:1px;background:var(--blue);align-self:center;margin-top:.75rem}

  /* ---- 4 · the face behind ---- */
  .page--about{display:flex;flex-direction:column;gap:clamp(1.75rem,7vw,2.5rem);padding:0 0 clamp(3rem,9vw,4.5rem)}
  .page--about .portrait{max-width:min(100%,38vh);margin-inline:auto}
  .about-copy{display:flex;flex-direction:column;gap:1.1rem;padding:0 clamp(1.25rem,6vw,2.5rem)}
  .about-copy .t-display{margin-bottom:.3rem}

  /* ---- 5 · cum te pot ajuta ---- */
  .page--help{display:flex;flex-direction:column;gap:clamp(2rem,8vw,3rem)}
  .help-copy{display:flex;flex-direction:column;gap:1.1rem}
  .help-copy .t-display{margin-bottom:.3rem}
  .help-gallery{display:contents}
  .page--help .help-gallery > .frame:first-child{order:-1}

  /* ---- 6 · planning services ---- */
  .page--services{position:relative}
  .page--services .panel--services{
    display:block;position:absolute;inset:0;width:100%;height:100%;
    background:#EAE9EC;opacity:.75;z-index:1;
  }
  .page--services .rule{display:none}
  .page--services > .t-display{text-align:center;margin-bottom:clamp(1.75rem,7vw,2.5rem)}
  .svc-list{display:flex;flex-direction:column;gap:clamp(1.5rem,6vw,2rem)}
  .svc{padding-top:clamp(1.25rem,5vw,1.75rem);border-top:1px solid rgba(255,255,255,.9)}
  .svc dt{margin-bottom:.5rem}

  /* ---- 7 · and a little more ---- */
  .page--more{display:flex;flex-direction:column;gap:clamp(2.25rem,8vw,3rem)}
  .page--more > .t-display{text-align:center}
  .page--more .rule--more{display:none}
  .more-card{display:flex;flex-direction:column;gap:1rem;padding-top:clamp(1.5rem,6vw,2rem);border-top:1px solid rgba(66,82,134,.28)}
  .more-card h3{text-align:center}

  /* ---- 8 · shall we plan ---- */
  .page--contact{
    position:relative;display:flex;flex-direction:column;align-items:center;
    gap:clamp(1.5rem,6vw,2.25rem);text-align:center;
  }
  .page--contact .frame.bleed > img{object-position:50% 40%}
  .page--contact > *{position:relative}
  .page--contact .t-display{line-height:.98;margin-bottom:calc(-1 * clamp(1rem,4.5vw,1.75rem))}
  .page--contact .t-script{margin-top:0}
  .contact-list{display:flex;flex-direction:column;gap:0;align-items:center;margin-top:.5rem}
  .contact{display:flex;align-items:center;gap:.85rem;min-height:2.75rem;padding:.35rem .5rem}
  .contact .ico{width:1.5em;height:1.5em;flex:0 0 auto;font-size:clamp(1.15rem,5vw,1.45rem)}
  .contact .t-contact{padding:.25rem 0}
  .watermark{width:min(45vw,180px);aspect-ratio:1;margin-top:.5rem;order:99}
}

/* tablet — two-up galleries and relaxed portrait */
@media (min-width:601px) and (max-width:900px){
  .page--about .portrait{max-width:min(100%,45vh)}
}

/* very small phones */
@media (max-width:380px){
  .t-display{font-size:clamp(2.1rem,10.5vw,2.6rem)}
  .t-script{font-size:clamp(1.8rem,8vw,2.5rem)}
}

@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease-out,transform .7s ease-out}
  .reveal.visible{opacity:1;transform:translateY(0)}
  @keyframes hero-fade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
  .page--hero .mark{animation:hero-fade .9s ease-out .15s both}
  .page--hero .t-tagline{animation:hero-fade .9s ease-out .5s both}
}