/* =========================================================================
   Porta 6 minisite
   Built to 21360_new_minisite_Desktop_v11.psd (1920 × 4365)
             21360_new_minisite_Mobile_v11.psd  (1080 × 6059)
   All sizes are expressed as a fraction of the artboard width, so the page
   scales proportionally the way the comp does.
   ========================================================================= */

/* ---- Type -----------------------------------------------------------------
   The comps use Afek 1.5 AAA (a licensed Hebrew family). Drop the licensed
   web files into assets/fonts/ and un-comment the block below; the page will
   pick them up automatically. Until then it falls back to Assistant, the
   closest freely-licensed Hebrew geometric sans.

@font-face { font-family:"Afek"; src:url("assets/fonts/Afek1.5AAA-Regular.woff2")  format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Afek"; src:url("assets/fonts/Afek1.5AAA-DemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Afek"; src:url("assets/fonts/Afek1.5AAA-Bold.woff2")     format("woff2"); font-weight:700; font-display:swap; }
--------------------------------------------------------------------------- */

@font-face{
  font-family:"Assistant";
  src:url("assets/Assistant.woff2") format("woff2-variations"),
      url("assets/Assistant.woff2") format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --yellow:      #FFCC33;   /* header + footer band                    */
  --wall:        #F7BD69;   /* stucco wall base (PSD "Color Fill 1")   */
  --ink:         #000;
  --font: "Afek", "Assistant", "Heebo", "Arial Hebrew", system-ui, sans-serif;

  /* desktop scale — reference artboard 1920px */
  --fs-h1:         clamp(28px, 4.44vw, 85px);
  --fs-lead:       clamp(16px, 2.05vw, 39px);
  --fs-card-title: clamp(17px, 1.82vw, 35px);
  --fs-card:       clamp(15px, 1.56vw, 30px);
  --bottle-h:      21.5vw;              /* tallest bottle, ×1 of --bh   */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--wall);
  line-height:1.2;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }

a:focus-visible,
:focus-visible{ outline:3px solid #000; outline-offset:3px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative;
  overflow:hidden;
  background:#1c1c1c;
}

.hero__media{
  display:block;
  width:100%;
  aspect-ratio:1920/1067;
  object-fit:cover;
  object-position:center;
  background:#1c1c1c;
}

/* =========================================================================
   INTRO — yellow band
   ========================================================================= */
.intro{
  background:var(--yellow);
  padding:1.6vw 0 3.2vw;
  text-align:center;
}

.wrap{
  width:71%;
  max-width:1363px;
  margin-inline:auto;
}

.intro__title{
  margin:0 0 .3em;
  font-size:var(--fs-h1);
  font-weight:600;
  line-height:1.05;
}

.brand-inline{
  display:inline-block;
  height:1.28em;
  width:auto;
  vertical-align:-.3em;
  margin-inline:.12em;
}

.intro__lead{
  margin:0 0 1.2em;
  font-size:var(--fs-lead);
  font-weight:400;
  line-height:1.22;
}

.intro__lead:last-child{ margin-bottom:0; }
.intro__lead--bold{ font-weight:700; }

/* =========================================================================
   WINES — painted wall
   ========================================================================= */
.wines{
  position:relative;
  isolation:isolate;
  background-color:var(--wall);
  background-image:url("assets/wall.webp");
  background-size:cover;
  background-position:center;
  padding:3.4vw 0 13vw;
}

/* agency mark, rotated against the left edge of the wall */
.wines__happy{
  position:absolute;
  top:4.6vw;
  left:2.4vw;
  width:5.7vw;
  height:auto;
  transform:rotate(-90deg);
  transform-origin:center;
  opacity:.92;
  z-index:1;
}

/* --- decorative brick / plant cut-outs ---------------------------------- */
.deco{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.deco--mobile{ display:none; }
.d{ position:absolute; height:auto; }

/* desktop placement (PSD coordinates ÷ 1920, measured from the wall top) */
.d1{ width:16.5%;  left:-9.7%;  top:24.2vw;    }
.d2{ width:19.9%;  right:-14.3%; top:-2vw;     }
.d3{ width:13%;    left:61.8%;  top:31.5vw;    }
.d4{ width:15.1%;  left:20%;    bottom:-6.9vw; }
.d5{ width:15.1%;  left:61.9%;  bottom:-13.3vw;}
.d6{ width:7.1%;   left:74%;    bottom:3vw;    }

/* --- social ------------------------------------------------------------- */
.social{
  position:relative;
  z-index:2;
  direction:ltr;
  display:flex;
  justify-content:center;
  gap:2.1%;
  width:12vw;
  max-width:230px;
  margin:0 auto 4.9vw;
}
.social a{ display:block; flex:1 1 0; border-radius:50%; }
.social img{ width:100%; height:auto; }

/* --- grid --------------------------------------------------------------- */
.wines__grid{
  position:relative;
  z-index:2;
  list-style:none;
  margin:0 auto;
  padding:0;
  width:93%;
  max-width:1784px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:0;
  row-gap:9vw;
}

.card{
  display:flex;
  align-items:flex-start;
  gap:6.5%;
}

/* bottle sits at the start of the row, i.e. the right in RTL */
.card__bottle{
  flex:0 0 auto;
  position:relative;
  align-self:flex-start;
  margin-top:-1.4vw;
}

/* soft contact shadow, matching the "shadow" layers in the PSD */
.card__bottle::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-.85vw;
  transform:translateX(-50%);
  width:210%;
  height:1.8vw;
  background:radial-gradient(ellipse at center,
              rgba(58,28,0,.46) 0%, rgba(58,28,0,.22) 46%, rgba(58,28,0,0) 74%);
  z-index:0;
}

.card__bottle img{
  position:relative;
  z-index:1;
  height:calc(var(--bottle-h) * var(--bh, 1));
  width:auto;
  max-width:none;
}

.card__text{
  flex:1 1 auto;
  min-width:0;
  text-align:right;
  font-size:var(--fs-card);
  line-height:1.2;
}

.card__text p{ margin:0; }
.card__text b{ font-weight:700; }

/* brush-stroke title */
.card__title{
  display:inline-block;
  margin:0 0 .75em;
  padding:.5em .85em .52em;
  font-size:var(--fs-card-title);
  font-weight:700;
  line-height:1.1;
  background:url("assets/brush.webp") center/100% 100% no-repeat;
}

/* =========================================================================
   GALLERY
   ========================================================================= */
.gallery{
  direction:ltr;               /* keep the comp's left-to-right photo order */
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:minmax(0,1fr);
  aspect-ratio:1920/820;
  overflow:hidden;
}
.gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{
  direction:ltr;
  background:var(--yellow);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:.75%;
  padding:3.75vw 0 4.7vw;
}
.footer__logo{
  width:36.2%;
  max-width:695px;
  height:auto;
}
.footer__cat{
  width:19.8%;
  max-width:380px;
  height:auto;
  transform:translateY(2.6%);
  /* contact shadow, matching the "shadow" layer under the cat in the PSD */
  background:radial-gradient(ellipse at center,
              rgba(150,95,0,.5) 0%, rgba(150,95,0,.22) 46%, rgba(150,95,0,0) 72%)
             center bottom -4% / 86% 14% no-repeat;
}

/* =========================================================================
   MOBILE — reference artboard 1080px
   ========================================================================= */
@media (max-width:900px){
  :root{
    --fs-h1:         clamp(21px, 5.28vw, 44px);
    --fs-lead:       clamp(14px, 3.42vw, 28px);
    --fs-card-title: clamp(17px, 4.27vw, 35px);
    --fs-card:       clamp(14px, 3.43vw, 28px);
    --bottle-h:      52vw;
  }

  .hero__media{ aspect-ratio:1080/601; }

  .intro{ padding:2.8vw 0 4.6vw; }
  .wrap{ width:80%; max-width:none; }
  .intro__title{ margin-bottom:.6em; }
  .intro__lead{ line-height:1.3; }

  .wines{ padding:4.7vw 0 12vw; }

  .wines__happy{
    top:6.4vw;
    left:2.6vw;
    width:8.8vw;
  }

  .social{
    width:25.5vw;
    max-width:275px;
    gap:2.4%;
    margin-bottom:6.7vw;
  }

  .wines__grid{
    width:100%;
    max-width:none;
    padding:0 14% 0 7.6%;
    grid-template-columns:1fr;
    row-gap:8vw;
  }

  .card{ gap:11%; }
  .card__bottle{ margin-top:-1vw; }
  .card__bottle::after{ height:5.2vw; bottom:-2.6vw; }
  .card__title{ margin-bottom:.85em; }
  .card__text{ line-height:1.35; }

  .gallery{ aspect-ratio:1080/478; }

  .footer{
    gap:2.2%;
    padding:5.4vw 0 6.6vw;
  }
  .footer__logo{ width:46.9%; }
  .footer__cat{ width:25.6%; }

  /* decorations follow the mobile comp's placement */
  .deco--desktop{ display:none; }
  .deco--mobile { display:block; }

  .m1{ width:24.5%; left:-16.1%; top:6%;    }
  .m2{ width:18.3%; left:88.8%;  top:1.2%;  }
  .m3{ width:18.3%; left:-6.3%;  top:15.2%; }
  .m4{ width:24.5%; left:-12.3%; top:32.2%; }
  .m5{ width:24.1%; left:88.4%;  top:34.3%; }
  .m6{ width:15.8%; left:-.2%;   top:48.3%; }
  .m7{ width:29.3%; left:-13.7%; top:49.9%; }
  .m8{ width:24.5%; left:88.1%;  top:67.5%; }
  .m9{ width:24.5%; left:-11.9%; top:79.4%; }
}

@media (max-width:420px){
  .wines__grid{ padding:0 11% 0 6%; }
  .card{ gap:8%; }
}

/* =========================================================================
   Print / motion / high-contrast niceties
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}