/* ============================
   GLOBAL RESPONSIVE UTILITIES
   ============================ */

/* Base: better sizing & images */
*,
*::before,
*::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }

/* Fluid type scale */
h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }
h2 { font-size: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
h3 { font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem); }

/* Containers */
.container {
  width: min(1200px, 92%);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
/* Newsletter background override */
.newsletter {
  background: #0b1220; /* your blue/cyan */
  color: #fff;         /* make text white for contrast */
  padding: 40px 0;     /* spacing top/bottom */
}

/* Zoom out video on larger screens */
.video-wrapper {
  transform: scale(0.98);      /* Zoomed out by default */
  margin-left: auto;
  margin-right: auto;
  max-width: 100vw;
  width: 100%;
}
.video-wrapper video {
  width: 100%;
  height: auto;
  border-radius: 100px;        /* Keep your desired radius */
}

/* On small screens, remove zoom-out for better fit */
@media (max-width: 640px) {
  .video-wrapper {
    transform: none;           /* No zoom-out on mobile */
  }
  .video-wrapper video {
    border-radius: 12px;       /* Softer corners on mobile (optional) */
  }
}
/* ===== Transformations section ===== */
.transformations .t-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:16px;
}
.transformations .t-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.transformations .pair{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.transformations figure{ margin:0; }
.transformations figure img{
  width:100%; height:200px; object-fit:cover; border-radius:10px; border:1px solid #e5e7eb;
}
.transformations figure figcaption{
  margin-top:6px; font-size:12px; color:#6b7280; text-align:center;
}
.transformations .quote{ margin:10px 4px 2px; font-size:14px; }
/* ====== REVIEWS CAROUSEL (with arrows) ====== */
.reviews-wrapper{
  position: relative;
  overflow: hidden;
}

.r-viewport{
  overflow: hidden;           /* mask sliding content */
  width: 100%;
}

.r-track{
  display: flex;
  transition: transform .5s ease;
  will-change: transform;
}

.r-card{
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  flex: 0 0 33.333%;          /* 3 per view default (desktop) */
}

.r-card > img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  border: 1px solid #e5e7eb;
}

.r-card .quote{
  font-size: 14px;
  color: #374151;
  margin: 0;
}

/* Arrows */
.reviews-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15, 23, 42, .7);
  color: #fff;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  cursor: pointer;
  z-index: 2;
  display: grid;
  place-items: center;
}
.reviews-arrow.left  { left: 8px; }
.reviews-arrow.right { right: 8px; }
.reviews-arrow:disabled{ opacity: .35; cursor: not-allowed; }

/* Tablet: 2 per view */
@media (max-width: 1024px){
  .r-card{ flex-basis: 50%; }
}

/* Mobile: 1 per view + allow swipe */
@media (max-width: 640px){
  .r-card{ flex-basis: 100%; }
  .r-viewport{ scroll-snap-type: x mandatory; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .r-track{ gap: 0; }
  .r-card{ scroll-snap-align: start; }
  /* hide arrows on small screens if you prefer */
  .reviews-arrow{ display: none; }
}


/* Phone: horizontal scroll carousel */
@media (max-width:640px){
  .transformations .t-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:12px;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
  }
  .transformations .t-grid::-webkit-scrollbar{ display:none; }
  .transformations .t-card{
    flex:0 0 84vw;
    scroll-snap-align:center;
  }
  .transformations figure img{ height:180px; }
}


/* === Hero zoom-out === */
.hero-fullwidth {
  position: relative;
  overflow: hidden;
  transform: scale(1.15);
  opacity: 0;
  animation: heroZoomOut 1.8s ease forwards;
}
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.85);z-index:1000;padding:20px}
.lightbox.show{display:flex}
.lightbox img{max-width:min(100%,1000px);max-height:80vh;border-radius:12px}
.lb-close{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.15);
  color:#fff;border:0;padding:8px 12px;border-radius:10px;cursor:pointer;font-size:20px}
.lb-cap{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:#eee;text-align:center}
body.no-scroll{overflow:hidden}

@keyframes heroZoomOut {
  0% { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* === Text fade/slide in === */
.hero-fullwidth .hero-copy > * {
  opacity: 0;
  transform: translateY(25px);
  animation: fadeUp 1s ease forwards;
}

/* Staggered delays */
.hero-fullwidth .hero-copy small { animation-delay: 0.8s; }
.hero-fullwidth .hero-copy h1    { animation-delay: 1.2s; }
.hero-fullwidth .hero-copy p     { animation-delay: 1.6s; }
.hero-fullwidth .hero-copy .cta  { animation-delay: 2s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.newsletter input,
.newsletter button {
  color: #111827; /* dark text for inputs/buttons */
}

/* Mobile tap targets */
.btn { min-height: 44px; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Avoid horizontal scroll on small screens */
html, body { overflow-x: hidden; }

/* ============================
   HERO (LANDING) + FULLWIDTH
   ============================ */

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: center;
}
.hero h1 { line-height: 1.15; }

/* if you have a CTA row */
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-visual .leaf,
.hero-visual .fruit-ring { will-change: transform; }

/* Full-bleed hero: safer on mobile */
.hero-fullwidth {
  min-height: 80vh; /* desktop */
  height: auto;
}

@media (max-width: 992px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero .cta { justify-content: center; }
  .hero-visual { order: -1; }
  .hero-fullwidth { min-height: 70svh; }
}
@media (max-width: 560px) {
  .hero { gap: 16px; padding-top: 36px; }
  .hero p { margin-bottom: 18px; }
  .hero-visual .leaf,
  .hero-visual .fruit-ring { display: none; }
}

/* ============================
   NEWSLETTER
   ============================ */

/* Ensure layout actually grids */
.newsletter .wrap {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 18px;
  align-items: center;
}

/* The generic .form block is a grid on desktop… */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
}

/* …and stacks on mobile */
@media (max-width: 992px) {
  .newsletter .wrap { grid-template-columns: 1fr; text-align: center; }
  .form { grid-template-columns: 1fr; }
  .form input, .form button { width: 100%; }
}

/* Keep email+password responsive */
.form input[type="email"],
.form input[type="password"] { width: 100%; }

/* ============================
   FEATURES
   ============================ */

.features .cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) {
  .features .cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .features .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .features .cards { grid-template-columns: 1fr; }
}

/* ============================
   PRODUCTS (generic grid)
   ============================ */

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
}

/* Ensure product thumbs are safe */
.product .thumb { aspect-ratio: 4 / 3; }
.product .thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ============================
   TESTIMONIALS
   ============================ */

.testimonials .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 992px) {
  .testimonials .cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .testimonials .cards { grid-template-columns: 1fr; }
}

/* Alt layout grid */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 992px) {
  .testi-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .testi-grid { grid-template-columns: 1fr; }
}

/* ============================
   BLOGS
   ============================ */

@media (max-width: 560px) {
  .blogs { padding: 40px 0; }
}

/* ============================
   CONTACT PAGE
   ============================ */

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 992px) {
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr !important; } /* keep rows stacking */
}

/* ============================
   ABOUT + SERVICES HEROES
   ============================ */

.about-hero, .services-hero, .contact-hero { min-height: 60vh; }
@media (max-width: 768px) {
  .about-hero, .services-hero, .contact-hero { min-height: 55svh; }
}

/* ============================
   CARDS + SPACING ON XS
   ============================ */

@media (max-width: 560px) {
  .card, .product, .testi-card, .blog-card, .info-card { border-radius: 12px; }
  .products, .blogs, .features, .testimonials { padding: 40px 0; }
  .price { font-size: 0.95rem; }
}

/* ============================
   ACCESSIBILITY & FORMS
   ============================ */

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand, #0ea5e9);
  /* Browser-safe mix: fall back to simple rgba if color-mix unsupported */
  box-shadow:
    0 0 0 4px rgba(14,165,233,0.25);
}

/* Comfortable reading */
p { line-height: 1.7; }
/* Carousel layout (overrides your grid for .features .cards) */
.features .cards.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 18px;
  padding-bottom: 8px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar (non-essential) */
.features .cards.carousel::-webkit-scrollbar { display: none; }
.features .cards.carousel { scrollbar-width: none; }

/* Each card snaps; set page widths per breakpoint */
.features .cards.carousel .card {
  scroll-snap-align: start;
  flex: 0 0 100%;          /* 1 card per view on phones */
  border-radius: 16px;
  padding: 16px;
}

@media (min-width: 768px) {
  .features .cards.carousel .card { flex-basis: 50%; }   /* 2 per view */
}
@media (min-width: 1024px) {
  .features .cards.carousel .card { flex-basis: 33.333%; } /* 3 per view */
}

/* Optional polish */
.features .cards.carousel .card:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
/* Container for signup & login forms */
.auth-forms {
  display: flex;
  flex-wrap: wrap;   /* allows wrapping on small screens */
  gap: 20px;
  margin-top: 20px;
}

.auth-forms .form {
  flex: 1 1 300px;   /* each form takes equal space, min 300px */
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* On mobile stack them */
@media (max-width: 768px) {
  .auth-forms {
    flex-direction: column;
  }
}
/* Desktop/tablet: regular grid */
.testimonials .cards{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap:16px;
}

/* Card styling (adjust to your theme) */
.testimonials .testimonial{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:16px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.testimonials .author{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.testimonials .author img{ width:36px; height:36px; border-radius:50%; object-fit:cover; }

/* Mobile: horizontal carousel with snap */
@media (max-width:640px){
  .testimonials .cards{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:12px;
    padding-bottom:6px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; /* prevent scroll chaining horizontally */
    overscroll-behavior-y: contain; /* reduce page-jump feeling */
    scroll-padding-inline: 12px;
  }
  .testimonials .cards::-webkit-scrollbar{ display:none; }
  .testimonials .testimonial{
    flex:0 0 85vw;
    scroll-snap-align:center;
  }
}
/* Default: grid layout */
.products .grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap:16px;
}

/* Product card style */
.products .product{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  padding:12px;
  flex:0 0 auto;
}
.products .thumb img{
  width:100%;
  border-radius:8px;
  object-fit:cover;
}
.products .meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:8px;
  font-weight:600;
}
.products .price{ color:#0ea5e9; }

/* Mobile: horizontal scroll */
@media (max-width:640px){
  .products .grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:12px;
    -webkit-overflow-scrolling: touch;
    padding-bottom:8px;
  }
  .products .grid::-webkit-scrollbar{ display:none; }
  .products .product{
    flex:0 0 70%;        /* each card ~70% of viewport */
    scroll-snap-align:center;
  }
}