/* =========================================================
   RK — Coffee Page (hero + alternating spec cards)
   ========================================================= */

/* Slim hero banner at fixed height (desktop 450px, mobile 320px) */
.coffee-hero{
  position: relative;
  height: 450px;
  min-height: 300px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(28,22,18,.45), rgba(22,16,12,.55)),
    var(--hero-url, url('https://raw.githubusercontent.com/rknaturalexports-ai/RK-Website-Images/refs/heads/main/Coffee%20Banner%20Image.jpeg'))
    center / cover no-repeat;
}
@media (max-width: 640px){
  .coffee-hero{ height: 320px; }
}
.coffee-hero__overlay{
  position:absolute; inset:0;
  background: radial-gradient(1200px 400px at 50% 80%, rgba(0,0,0,.25), transparent 70%);
  pointer-events:none;
}
.coffee-hero__inner{
  position: relative;
  text-align: center;
  color: #fff;
  padding: 84px 20px 48px;
}
.coffee-hero h1{
  margin: 0 0 6px;
  font-family: "Playfair Display", serif;
  font-size: clamp(2.2rem, 4.2vw, 3rem);
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff !important;             /* override any inherited green */
  text-shadow: 0 3px 10px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.35);
}
.coffee-hero p{
  margin: 0 0 14px;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(.98rem, 1.8vw, 1.05rem);
  color: #f7f7f7;
  opacity: .98;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* Content wrap + fixed frame width */
.coffee-wrap { padding: 28px 0 56px; background: #fff7f4; }
.frame { width: 1210px; max-width: 100%; padding: 20px; margin: 0 auto; box-sizing: border-box; }

/* ===== Spec Card ===== */
.spec{
  background: #fff;
  border: 1px solid #f0e2d9;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
  padding: 18px;
  margin: 0 0 26px;
}

/* Title centered like your reference */
.spec__title{
  text-align: center;
  letter-spacing: .06em;
  color: #6f4a31;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  margin: 6px 0 14px;
}

/* Alternating grid: equal columns on desktop */
.spec__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;     /* equal width */
  grid-template-areas: "media body";
  gap: 24px;
  align-items: start;
}
.spec__media{ grid-area: media; }
.spec__body{  grid-area: body;  }

/* flip layout for even specs (still equal widths) */
.spec:nth-of-type(even) .spec__grid{
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "body media";
}

/* Media box — uniform look */
.spec__media{
  border: 1px solid #eadfce;
  border-radius: 12px;
  overflow: hidden;
  background: #faf6f1;
}
.spec__media img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;                /* desktop: consistent height */
  object-fit: cover;
}

/* Body text */
.spec__intro { margin: 0 0 12px; }

/* Subheads */
.spec__h4{
  margin: 14px 0 8px;
  color: #6f4a31;
  font-weight: 700;
  font-family: "Inter", system-ui, sans-serif;
}

/* Tables (Barque-like) */
.spec-table{
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  border: 1px solid #ecdccc;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 12px;
}
.spec-table thead th{
  text-align: left;
  background: #7a5742;
  color: #fff;
  padding: 10px 12px;
  font-weight: 600;
}
.spec-table tbody td{
  padding: 9px 12px;
  border-top: 1px solid #efdfcf;
  background: #fff;
}
.spec-table tbody tr:nth-child(odd) td{ background: #fffaf6; }

/* ===== Mobile-only fixes ===== */
@media (max-width: 980px){
  /* keep the 1-column stack */
  .spec__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "body";
  }

  /* Ensure tiny images don't collapse:
     give the media box a minimum height and let the image fill it */
  .spec__media{
    position: relative;
    min-height: 220px;     /* adjust to 200–260px if desired */
    overflow: hidden;
    border-radius: 12px;
  }
  .spec__media img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;     /* preserves proportions, fills box */
    aspect-ratio: auto;    /* override desktop ratio on mobile */
    display: block;
  }
}
/* =========================
   MOBILE-ONLY FIXES (<=980px)
   Center cards + media and
   neutralize the alternating rules
   ========================= */
@media (max-width: 980px){

  /* 1) Neutralize the left/right alternation on mobile */
  .spec__grid,
  .spec:nth-of-type(even) .spec__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "body";
  }

  /* 2) Center the whole card block */
  .spec{
    max-width: 640px;        /* keep a nice reading width */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* 3) Center the figure/media for all cards */
  .spec__media{
    display: block;          /* remove any flex/grid alignment inherited */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;      /* safe fallback */
  }
  /* In case any even-card overrides were adding side margins, kill them */
  .spec:nth-of-type(even) .spec__media{
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 4) Make the image responsive and centered */
  .spec__media img{
    display: block;
    max-width: 100%;
    width: 92vw;             /* fills but respects side padding */
    max-width: 420px;        /* nice size on phones */
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border-radius: 14px;
  }
}
/* ===== Mobile image crop fix (match desktop) ===== */
@media (max-width: 980px){
  .spec__media img{
    aspect-ratio: 4 / 3 !important;  /* same as desktop */
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: 50% 50%;        /* center the crop */
    display: block;
  }
}