/* Combined Vegan + Agriculture Themes for Passionfruit */
:root{
  --leaf:#0d7e63; --leaf-2:#1c9e7f; --palm:#b7e4c7;
  --dark:#0a3d31; --sand:#f3f6f4; --cream:#fff8e8;
  --sun:#ffb703; --sun-2:#ffd166; --ink:#1d2126; --muted:#60646c;
  --radius:18px; --radius-lg:26px; --shadow:0 14px 36px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
 body{margin:0;font-family:'Poppins',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);line-height:1.75;background:linear-gradient(180deg,#fff,var(--cream))}
 /* Base typography */
 p{font-weight:400}
img{max-width:100%;display:block}
.container{max-width:1200px;margin-inline:auto;padding: clamp(16px,2vw,28px);}
.row{display:flex;gap:16px}.between{justify-content:space-between}.center{align-items:center}
.narrow{max-width:900px;margin-inline:auto}

/* Buttons */
.btn{display:inline-block;text-decoration:none;font-weight:800;padding:12px 18px;border-radius:999px;box-shadow:var(--shadow);transition:.15s transform}
.btn:hover{transform:translateY(-2px)}
.btn--sun{background:linear-gradient(90deg,var(--sun),var(--sun-2));color:#4b3200}
.btn--leaf{background:linear-gradient(90deg,var(--leaf),var(--leaf-2));color:#fff}

/* Infobar & Header */
.infobar{background:var(--dark);color:#d9fff2;font-size:.88rem}
.infobar a{color:#fff;text-decoration:none}
.header{background:#ffffffd9;backdrop-filter:blur(8px);position:sticky;top:0;z-index:50;border-bottom:1px solid #e6efe9}
.brand{font-weight:800;color:var(--leaf);text-decoration:none;font-size:1.1rem}
.nav a{color:var(--muted);text-decoration:none;margin-left:16px;padding:10px 12px;border-radius:999px}
.nav a:hover{background:var(--leaf);color:#fff}

/* Hero (agri background + vegan rounded card vibes) */
.combined-hero{position:relative;min-height:56vh;display:flex;align-items:center;background:url('img/hero-terrace.jpg') center/cover no-repeat}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(120deg, rgba(13,126,99,.74), rgba(28,158,127,.55))}
.hero-inner{position:relative;color:#fff;z-index:1}
.hero-badge{display:inline-block;background:#fff;color:var(--leaf);font-weight:800;padding:6px 12px;border-radius:999px;margin-bottom:10px}
.hero h1{font-family:'Playfair Display',serif;font-size: clamp(2.1rem, 5vw, 3.4rem);margin:0 0 8px}
.hero .script{font-family:'Pacifico', cursive;color:var(--sun-2)}
.hero .thin{font-weight:300}
.lead{opacity:.98;margin:0 0 16px}
.hero-actions .btn{margin-right:8px}

/* Welcome card over texture (vegan style) */
.welcome{padding:60px 0;background:#fff}
.welcome-wrap{position:relative;border-radius:var(--radius-lg);overflow:hidden}
.texture{background:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 800 200%22 opacity=%220.15%22><g fill=%22%230d7e63%22><circle cx=%2270%22 cy=%2270%22 r=%2245%22/><circle cx=%2250%22 cy=%22130%22 r=%2232%22/><circle cx=%2210%22 cy=%2290%22 r=%2240%22/></g></svg>') center/cover no-repeat;height:220px}
.card{background:#1f7e64;color:#fff;margin:-120px 24px 0;border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow)}
.card h3{margin-top:0}
.checks{margin:12px 0 0 18px}
.checks li{margin:6px 0}

/* Future / About grid (agri) */
.future{padding:70px 0;background:#fff}
.grid-about{display:grid;gap:24px;grid-template-columns: .9fr 1.1fr .8fr;align-items:center}
@media (max-width:1080px){.grid-about{grid-template-columns:1fr}}
.circle-media img{width:100%;aspect-ratio:1/1;border-radius:50%;object-fit:cover;box-shadow:var(--shadow)}
.about h2{margin:0 0 10px;font-family:'Playfair Display',serif;color:var(--dark)}
.dots{margin:12px 0 0 18px}
.dots li{margin:6px 0}
.side-cards{display:grid;gap:14px}
.mini-card{background:#f6fbf8;border:1px solid #e4efe8;border-radius:14px;padding:14px}
.mini-card .icon{font-size:20px;margin-bottom:6px}

/* Categories (vegan cards) */
.categories{padding:64px 0;background:#f6fbf8}
.categories h2{text-align:center;margin:0 0 18px;color:var(--dark);font-family:'Playfair Display',serif}
.grid-3{display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-3{grid-template-columns:1fr}}
.cat{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.cat img{height:220px;width:100%;object-fit:cover}
.cat-body{padding:16px}
.link{color:var(--leaf);text-decoration:none;font-weight:700}

/* Script banner */
.script-banner{padding:60px 0;background:linear-gradient(180deg,#eaf7f1,#dff6ef)}
.script-banner h2{text-align:center;font-size: clamp(1.8rem, 4.4vw, 3rem);margin:0}
.script{font-family:'Pacifico',cursive;color:var(--sun)}
.sun{color:var(--leaf)}

/* Why choose us */
.why{padding:70px 0;background:#fff}
.grid-why{display:grid;gap:22px;grid-template-columns: .9fr 1.1fr;align-items:center}
@media (max-width:980px){.grid-why{grid-template-columns:1fr}}
.why-gallery{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.why-gallery img{border-radius:14px;height:150px;object-fit:cover;box-shadow:var(--shadow)}
.bar{background:#eaf4ef;border-radius:999px;overflow:hidden;margin:12px 0}
.bar span{display:block;background:linear-gradient(90deg,var(--leaf),var(--leaf-2));color:#fff;padding:8px 14px}
.muted{color:var(--muted)}

/* Services */
.services{padding:70px 0;background:#f4faf6}
.services h2{text-align:center;margin:0 0 16px;color:var(--dark);font-family:'Playfair Display',serif}
.grid-4{display:grid;gap:18px;grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-4{grid-template-columns:1fr}}
.svc{text-align:center;background:#fff;border:1px solid #e5efe9;border-radius:14px;padding:16px}
.svc-ico{font-size:28px;margin-bottom:6px}

/* Author 
.author{padding:10px 0;background:#fff}
.author-wrap{display:grid;gap:22px;grid-template-columns:.8fr 1.2fr;align-items:center}
@media (max-width:980px){.author-wrap{grid-template-columns:1fr}}
.author-media img{border-radius:18px;object-fit:cover;box-shadow:var(--shadow)}
.author-body h2{font-family:'Playfair Display',serif;color:var(--dark);margin:0 0 8px}
*/

/* CTA */
.cta{padding:80px 0;background:linear-gradient(180deg,#fff,#e9fff7);text-align:center}
.cta-title{font-family:'Playfair Display',serif;margin:0 0 12px;color:var(--dark)}

/* Story */
.story{padding:60px 0;background:#fff}
.story h2{font-family:'Playfair Display',serif;color:var(--dark)}

/* Footer */
.footer{padding:28px 0;border-top:1px solid #e6efe9;background:#a5d880}
.footer .social{list-style:none;display:flex;gap:14px;margin:0;padding:0}
.footer .social a{text-decoration:none;color:var(--leaf);padding:6px 10px;border-radius:999px}
.footer .social a:hover{background:var(--leaf);color:#64a06c}






/* Stronger contrast + clean typography for the Story hero */




/* Bigger, high-impact media on the left of the About grid */
.grid-about{
  display: grid;
  gap: 24px;
  /* make the media column larger than text + side cards */
  grid-template-columns: 1.3fr 1fr .9fr;
  grid-auto-rows: auto;
  align-items: stretch;
}

.feature-media{
  grid-column: 1;           /* left column */
  grid-row: 1 / span 2;     /* span both text and side-cards rows */
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: clamp(380px, 46vw, 560px);  /* tall & responsive */
}

.feature-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* decorative seed pattern corner */
.feature-media::after{
  content: "";
  position: absolute;
  right: -14px; bottom: -14px;
  width: 130px; height: 130px;
  background:
    radial-gradient(3px 2px at 8px 8px, rgba(255,183,3,.75) 60%, transparent 61%) repeat;
  background-size: 20px 20px;
  opacity: .65;
  border-radius: 16px;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.05));
}

/* Mobile/tablet: stack nicely and reset row spanning */
@media (max-width: 1080px){
  .grid-about{
    grid-template-columns: 1fr;
  }
  .feature-media{
    grid-row: auto;
    min-height: clamp(260px, 48vw, 420px);
  }
}

/* Even-size image tiles in the "Why" gallery */
.why-gallery{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  align-content: start;
}

/* Make every image the same size */
.why-gallery img{
  width: 100%;
  aspect-ratio: 4 / 3;      /* change to 1 / 1 for perfect squares, or 16 / 9 */
  object-fit: cover;        /* crop to fill the frame */
  border-radius: 14px;
  box-shadow: var(--shadow);
}

/* Fallback for very old browsers without aspect-ratio support */
@supports not (aspect-ratio: 1){
  .why-gallery img{ height: 180px; }
}

/* Optional: tweak for small screens */
@media (max-width: 680px){
  .why-gallery{
    grid-template-columns: 1fr 1fr;  /* 2 across on mobile */
  }
}
/* Even-size tiles that show the WHOLE image (no cropping) */
.why-gallery{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  align-content: start;
}

.why-gallery img{
  display: block;
  width: 100%;
  height: clamp(160px, 24vw, 220px); /* same height for all tiles */
  object-fit: contain;               /* <-- show entire image */
  object-position: center;           /* center it in the tile */
  background: #fff;                  /* subtle “letterbox” background */
  border: 1px solid #e6efe9;
  border-radius: 14px;
  padding: 8px;                      /* small frame so edges don't touch */
  box-shadow: var(--shadow);
}

/* Mobile: still two across, same behavior */
@media (max-width: 680px){
  .why-gallery{
    grid-template-columns: 1fr 1fr;
  }
}

/* Two-column hero layout with large media */
.hero .grid-hero{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
}

/* Never crop the hero image */
:root{
  --hero-media-max-h: 520px;   /* tweak if you want it taller/shorter */
}

.hero-media{
  position: relative;
  isolation: isolate;
  padding: 8px;                             /* subtle frame so edges never touch */
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.hero-media img{
  display: block;
  width: min(100%, 560px);                  /* scales down but never stretches */
  height: auto;                             /* keep natural aspect ratio */
  max-height: var(--hero-media-max-h);      /* cap height to fit the hero */
  object-fit: contain;                      /* <-- show the entire glass */
  object-position: center;                  /* center inside the tile */
  border-radius: 16px;
}

/* Mobile: slightly lower max height, still no crop */
@media (max-width: 980px){
  :root{ --hero-media-max-h: 420px; }
}

/* Remove any old background image from the section */
.combined-hero{ background: none; position: relative; overflow: hidden; }

/* The real image that carries the ALT text */
.hero-bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;          /* use contain if you never want cropping */
  object-position: center;
  z-index: 0;
}

/* Keep overlay and text on top of the image */
.hero-overlay{ position: absolute; inset: 0; z-index: 1; }
.hero-inner{ position: relative; z-index: 2; }


/* Split layout for the welcome card (image + text) */
.card--split{
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.2fr;
  gap: 0;
  padding: 0;                 /* image will sit edge-to-edge */
  overflow: hidden;
}

/* Image pane */
.welcome-media{
  position: relative;
  min-height: 260px;          /* ensures a nice height on small screens */
}
.welcome-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fills the pane with a cinematic crop */
  display: block;
}

/* Optional: subtle gradient at the image edge to blend with text side */
.welcome-media::after{
  content:"";
  position:absolute; inset:0 0 0 auto; width:40%;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.12));
  pointer-events:none;
}

/* Text pane */
.card--split .card-body{
  padding: clamp(20px, 3vw, 32px);
  color: #fff;                 /* your card background is already green */
}
.card--split h2{ margin-top: 0; }

/* Stack on narrow screens */
@media (max-width: 800px){
  .card--split{
    grid-template-columns: 1fr;
  }
  .welcome-media{ min-height: 220px; }
  .welcome-media::after{ display:none; }  /* not needed when stacked */
}

/* Script banner with full-bleed image + overlay */
.script-banner{
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 10vw, 120px) 0;
  text-align: center;
}

.script-banner .script-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fills the banner (may crop edges) */
  object-position: center;
  z-index: 0;
  filter: saturate(1.05) contrast(1.05);
}

/* subtle overlay for text contrast */
.script-banner::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25));
  z-index: 1;
}

/* keep heading above the image/overlay */
.script-banner .container{
  position: relative;
  z-index: 2;
}

.script-banner h2{
  color: #fff;
  text-shadow: 0 3px 16px rgba(0,0,0,.45);
}
.script-banner .script{ color: #ffd166; }
.script-banner .sun{ color: #dff6ef; }

/* If you NEVER want the image cropped (shows full photo with letterboxing) */
@media (min-width: 0){
  .script-banner.no-crop .script-bg{
    object-fit: contain;
    background: #0b3a30;   /* letterbox backdrop color */
  }
}

.side-cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* Base card styling */
.mini-card {
  position: relative;
  color: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  min-height: 200px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.mini-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

/* Shared text & layering */
.mini-card * {
  position: relative;
  z-index: 1;
}
.mini-card .icon {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}
.mini-card h4 {
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.mini-card p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Individual backgrounds */
.garden-card {
  background-image: url("img/solo-passionfruit-hanging.jpg");
}
.fruit-card {
  background-image: url("img/passionfruit-gutbenefits.jpg");
}

/* Overlay tint per card */
.garden-card::before,
.fruit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  z-index: 0;
  opacity: 0.65;
  transition: opacity 0.4s ease;
}

/* Green overlay for gardening */
.garden-card::before {
  background: linear-gradient(
    rgba(26, 83, 46, 0.75),
    rgba(22, 63, 38, 0.75)
  );
}

/* Golden overlay for fruit */
.fruit-card::before {
  background: linear-gradient(
    rgba(145, 94, 21, 0.75),
    rgba(179, 124, 32, 0.75)
  );
}

/* Hover – slightly reduce tint for more vibrancy */
.mini-card:hover::before {
  opacity: 0.45;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .mini-card,
  .mini-card:hover {
    transition: none;
    transform: none;
  }
  .mini-card::before {
    transition: none;
  }
}

.btn-recipes {
  display: inline-block;
  margin-top: 0.8rem;
  padding: 0.8rem 1.6rem;
  border-radius: 50px;
  background: linear-gradient(90deg, #f2b705, #f28f3b);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-recipes:hover {
  background: linear-gradient(90deg, #ffb347, #ffcc33);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.btn-recipes::after {
  content: " →";
  transition: margin-left 0.3s ease;
}

.btn-recipes:hover::after {
  margin-left: 6px;
}


.author-name {
  margin-bottom: 0.8rem;
  font-size: 1.2rem;
  color: #146b4d;
  text-align: left;
}

.author-tagline {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: #16a085;
  letter-spacing: 0.5px;
  margin-top: 0.2rem;
}



/* Author Section Base */
.author {
  background: #f6faf8;
  padding: 3rem 1rem;
  position: relative;
  overflow: hidden;
}

.author-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

/* Vine background with gradient overlay */
.author-media {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
}

.author-bg {
  position: absolute;
  inset: 0;
  background: url("img/passionfruit-hanging-vines.jpg") center/cover no-repeat;
  opacity: 0.25;
  z-index: 1;
}

.author-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 122, 101, 0.35), rgba(246, 250, 248, 0.6));
  z-index: 2;
}

.author-media img {
  position: relative;
  width: 100%;
  border-radius: 1.5rem;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  z-index: 3;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.author-media img:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Author Text */
.author-body {
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
  padding: 2rem;
}

.author-body h2 {
  color: #146b4d;
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

.author-name {
  margin-bottom: 1rem;
  text-align: center;
}

.author-name strong {
  font-size: 1.25rem;
  color: #117a65;
  display: block;
}

.author-tagline {
  color: #16a085;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.author-body p {
  color: #374c42;
  line-height: 1.7;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.author-body strong {
  color: #117a65;
  font-weight: 600;
}

/* Responsive for mobile */
@media (max-width: 820px) {
  .author-wrap {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .author-body {
    padding: 2rem 1.5rem;
  }

  .author-media img {
    border-radius: 1rem;
  }
}


/* --- HERO SPLIT: lock equal heights, crisp text, matching cards --- */
.calm-hero .hero-grid{
  align-items: stretch;               /* same height columns */
}

.calm-hero .hero-image,
.calm-hero .hero-text{
  border-radius: 1.6rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
  overflow: hidden;
  height: 100%;
}

.calm-hero .hero-image{
  display:flex;
}

.calm-hero .hero-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* bright, full-bleed image */
}

.calm-hero .hero-text{
  background: linear-gradient(135deg, rgba(222,248,238,.95) 0%, rgba(255,255,255,.98) 70%);
  padding: 3rem 2.5rem;
  display:flex; flex-direction:column; justify-content:center;
  color: #234d3b;
  position: relative;
  z-index: 1;                         /* stay above any stray overlays */
}

.calm-hero .hero-text h1{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 700;
  color: #146b4d;
  line-height: 1.25;
  letter-spacing: .3px;
  margin: 0 0 1rem;
}

.calm-hero .hero-text h1 span{
  display:block;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 500;
  color: #16a085;
  margin-top: .35rem;
}

.calm-hero .hero-text .lead{
  color:#2f5142;
  line-height:1.8;
  font-size:1.08rem;
  margin-bottom:1.25rem;
}

.calm-hero .hero-text p{
  color:#355b4b;
}

/* Ensure no accidental opacity or overlays dim the text */
.calm-hero .hero-text, .calm-hero .hero-text *{ opacity:1; color:inherit; }

/* Mobile: stack neatly, keep image tall but not overwhelming */
@media (max-width: 950px){
  .calm-hero .hero-grid{ grid-template-columns:1fr; }
  .calm-hero .hero-image img{ max-height: 380px; object-position:center; }
}


/* --- Passionfruit History Section (compact + seamless) --- */
.history-section{
  background: linear-gradient(180deg, #fff, var(--cream));
  padding: clamp(28px, 4vw, 48px) 0; /* tighter vertical space */
  color: var(--ink);
}

.section-title{
  text-align:center;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  color: var(--dark);
  margin: 0 0 clamp(16px, 2vw, 20px);
  font-weight: 600;
  letter-spacing: .2px;
}

.history-wrap{
  display: grid;
  grid-template-columns: 1.3fr .9fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
}

.history-copy{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
  padding: clamp(16px, 2.6vw, 24px);
  line-height: 1.75;
}

.history-copy p{ margin: 0 0 .9rem; }
.history-copy strong{ color: var(--leaf-2); font-weight: 600; }
.history-copy em{ color: var(--muted); }

.history-media{
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand);
  box-shadow: var(--shadow);
}

.history-media img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;       /* consistent card feel */
  object-fit: cover;
}

.history-media figcaption{
  padding: .6rem .8rem .8rem;
  font-size: .9rem;
  color: var(--muted);
}

/* Responsive: stack cleanly without big gaps */
@media (max-width: 900px){
  .history-wrap{
    grid-template-columns: 1fr;
  }
  .history-media{ order: -1; }  /* image first on mobile for visual hook */
}

/* --- Balanced layout fix for Passionfruit History section --- */
.history-wrap {
  display: grid;
  grid-template-columns: 1.3fr .9fr;
  align-items: stretch; /* 🔥 makes both columns equal height */
  gap: clamp(16px, 3vw, 28px);
}

/* Left content box */
.history-copy {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
  padding: clamp(16px, 2.6vw, 24px);
  line-height: 1.75;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertically center text */
}

/* Right image box now same height */
.history-media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  height: 100%; /* 👌 ensures it matches text box height */
}

.history-media img {
  width: 100%;
  height: 100%; /* fills the full column height */
  object-fit: cover; /* keeps the crop natural */
  display: block;
}

.history-media figcaption {
  padding: .6rem .8rem .8rem;
  font-size: .9rem;
  color: var(--muted);
  background: #fff;
  text-align: center;
}

/* Mobile stack view */
@media (max-width: 900px) {
  .history-wrap {
    grid-template-columns: 1fr;
  }
  .history-media {
    order: -1; /* Image first on mobile */
    height: auto; /* Let it resize naturally on small screens */
  }
}


/* --- Footer --- */
.footer{
  background: linear-gradient(180deg, var(--cream), #fff);
  padding: clamp(16px, 3vw, 24px) 0;
  color: var(--ink);
  border-top: 1px solid rgba(0,0,0,.06);
}

.footer-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 24px);
  flex-wrap: wrap; /* allows items to wrap on narrow screens */
}

/* text blocks */
.footer-note,
.footer-contact{
  margin: 0;
  font-size: .975rem;
  line-height: 1.6;
}

/* social list */
.social{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.6vw, 16px);
  margin: 0;
  padding: 0;
}

.social a{
  text-decoration: none;
  font-weight: 600;
  color: var(--leaf-2);
}
.social a:hover,
.social a:focus{
  text-decoration: underline;
}

/* --- Mobile layout --- */
@media (max-width: 720px){
  .footer-row{
    flex-direction: column;          /* stack */
    align-items: flex-start;         /* left align for cleaner read */
  }
  .social{
    width: 100%;
    padding-top: 8px;
    border-top: 1px dashed rgba(0,0,0,.08);
  }
}


.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2rem;
  align-items: center;
}

.hero-image img {
  width: 85%;
  max-width: 420px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: block;
  margin: 0 auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-image img:hover {
  transform: scale(1.03);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);
}

/* Mobile update */
@media (max-width: 820px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-image img {
    width: 70%;
    max-width: 300px;
    margin-bottom: 1.5rem;
  }
}


.author-inline {
  background:#76c7bf;
  padding: clamp(2rem, 5vw, 4rem) 1rem;
}

.author-flex {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}




.author-text {
  color: var(--ink);
  line-height: 1.7;
}

.author-text h2 {
  color: var(--dark);
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  margin-bottom: 0.5rem;
}

.author-role {
  color: var(--leaf);
  font-weight: 600;
}

.author-text p {
  margin-bottom: 1rem;
}

.author-links a {
  color: var(--leaf);
  text-decoration: none;
  font-weight: 600;
}

.author-links a:hover {
  text-decoration: underline;
}

/* 📱 Mobile View */
@media (max-width: 768px) {
  .author-photo img {
    width: 180px;
    height: 180px;
    margin-bottom: 1rem;
  }
}

/* Passionfruit Banner Styles */
.banner-section {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 10px 0; /* balanced space between banners */
}

.banner-clicks img {
  width: 728px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  transition: 0.3s ease;
  cursor: pointer;
}

.banner-clicks img:hover {
  filter: brightness(1.05);
  transform: scale(1.01);
}

/* Tighten space before welcome section */
#welcome {
  margin-top: 0;
  padding-top: 10px;
}


/* Full-Width Passionfruit Recipes Banner Section */
.banner-recipes {
  width: 100%;
  background: linear-gradient(135deg, #ebec9fce, #cce85d48); /* soft cream → light green */
  padding: 40px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #e0e0d8;
  border-bottom: 1px solid #e0e0d8;
  box-sizing: border-box;
}

/* Banner image styling */
.banner-click img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  transition: 0.3s ease;
  cursor: pointer;
}

/* Hover animation */
.banner-click img:hover {
  transform: scale(1.04);
  filter: brightness(1.05);
}

/* Partner Exchange Section */
.partner-exchange {
  background: linear-gradient(135deg, #9aece3, #e8f8e2); /* cream → mint green gradient */
  border-top: 1px solid #e2e2d8;
  border-bottom: 1px solid #e2e2d8;
  padding: 5px 0;
  text-align: center;
  color: #333;
}

.partner-exchange h2 {
  font-size: 1.8rem;
  color: #3c4a29; /* soft olive green to match tropical tone */
  margin-bottom: 5px;
  font-weight: 600;
}

.partner-exchange p {
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
  font-size: 1rem;
  color: #444;
}

.partner-exchange a {
  color: #6a8c42; /* gentle green accent for links */
  text-decoration: none;
  font-weight: 600;
}

.partner-exchange a:hover {
  color: #4a6b2c;
  text-decoration: underline;
}


.author-photo {
  max-width: 40%;      /* or 900px if you want a limit */
  margin: 0 auto;
}

.author-photo-img {
  display: block;
  width: 40%;          /* scales image to container width */
  height: auto;         /* keeps full image, no cropping */
  border: none;         /* remove border */
  border-radius: 0;     /* no rounded edges */
  object-fit: contain;  /* make sure the whole image is visible */
}

.picnic-spot-section {
  background: linear-gradient(135deg, #ffe8d9, #fff7e0); /* peach + soft summer yellow */
  border-radius: 16px;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 800px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(255, 153, 128, 0.35); /* subtle coral border */
}

.picnic-spot-section h2 {
  color: #b7423b; /* passionfruit/coral tone */
  margin-bottom: 1rem;
  text-align: center;
}

.picnic-spot-section p {
  color: #4a3b33;
  line-height: 1.7;
}

.picnic-spot-section a {
  color: #d2645b;       /* link in coral tone */
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.picnic-spot-section a:hover {
  text-decoration: none;
}

@media (max-width: 600px) {
  .picnic-spot-section {
    padding: 1.5rem;
    margin: 1.5rem 1rem;
  }
}


/* What's New & Exciting – Gardening themed section */
.whats-new-section {
  background: linear-gradient(135deg, #e5f5e1, #f7ffe9); /* soft garden greens */
  border-radius: 18px;
  padding: 2.5rem 2rem;
  margin: 3rem auto;
  max-width: 1000px;
  border: 1px solid rgba(120, 190, 130, 0.4); /* leaf green border */
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}

/* subtle “leafy” overlay using gradients */
.whats-new-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(178, 227, 185, 0.35), transparent 60%),
    radial-gradient(circle at bottom right, rgba(255, 204, 170, 0.35), transparent 60%);
  opacity: 0.9;
  pointer-events: none;
}

.whats-new-section h2 {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #b7423b; /* matches passionfruit/coral heading */
  margin-bottom: 2rem;
}

/* grid for the three gardening images */
.whats-new-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.whats-new-item {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  padding: 1rem 1rem 1.25rem;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 200, 170, 0.4); /* soft passionfruit accent */
}

.whats-new-item h3 {
  font-size: 1rem;
  margin-bottom: 0.75rem;
  color: #4a7b3f; /* garden green for subheadings */
  text-align: center;
}

.whats-new-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}

/* Mobile-friendly layout */
@media (max-width: 800px) {
  .whats-new-grid {
    grid-template-columns: 1fr;
  }
}

/* Passionfruit story section background */
.passionfruit-bg {
  /* Soft passionfruit-inspired gradient */
  background: radial-gradient(circle at top left, #ffe8c9 0%, #ffd2e0 35%, #fbe4ff 70%, #ffffff 100%);
  position: relative;
  padding: 4rem 0;
}

/* Optional subtle overlay to mimic vines/leaves */
.passionfruit-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(144, 190, 109, 0.15) 0, transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(255, 179, 71, 0.15) 0, transparent 55%);
  opacity: 0.9;
  pointer-events: none;
}

/* Ensure content sits above the overlay */
.passionfruit-bg .container {
  position: relative;
  z-index: 1;
}

/* Optional: adjust text for readability */
.passionfruit-bg h2 {
  color: #872258; /* deep passionfruit purple */
}

.passionfruit-bg p {
  color: #3aaf48;
}

.map-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
}

.map-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}