/* =========================================================
   Origins — single-origin sourcing showcase (home page)

   A wide cover photo introduces the section, then a grid of
   country cards, each with the country name over the photo.

   Markup: Pages/Index.cshtml   (.origins)
   Data:   Models/RommOrigins.cs
========================================================= */

.origins {
  padding-block: var(--section-padding-md);
  background: var(--color-background);
}

.origins-inner {
  width: min(var(--container-xl), calc(100% - 3rem));
  margin-inline: auto;
}

/* ---------- Header over cover photo ---------- */

.origins-cover {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.origins-cover img {
  width: 100%;
  height: clamp(14rem, 32vw, 24rem);
  object-fit: cover;
  display: block;
}

.origins-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Dark teal wash, heavier at the bottom, so text stays legible. */
  background:
    linear-gradient(
      to top,
      rgba(5, 50, 58, 0.85) 0%,
      rgba(5, 50, 58, 0.35) 45%,
      rgba(5, 50, 58, 0.1) 100%);
}

.origins-cover-copy {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: clamp(1.5rem, 4vw, 3rem);
  color: var(--color-text-light);
}

.origins-eyebrow {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary-light);
}

.origins-title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4vw, var(--text-4xl));
  line-height: var(--line-tight);
  color: var(--color-text-light);
  text-wrap: balance;
}

.origins-text {
  margin: var(--space-4) 0 0;
  max-width: 52ch;
  font-size: var(--text-md);
  line-height: var(--line-relaxed);
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- Country grid ---------- */

.origins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.origin-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--color-primary-light);
}

.origin-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.origin-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(5, 50, 58, 0.8) 0%,
      rgba(5, 50, 58, 0.15) 55%,
      rgba(5, 50, 58, 0) 100%);
}

.origin-card-label {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: var(--space-4);
  color: var(--color-text-light);
}

.origin-card-country {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--line-tight);
}

.origin-card:hover img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .origin-card img {
    transition: none;
  }

  .origin-card:hover img {
    transform: none;
  }
}

/* =========================================================
   CTA over a coffee-garden panorama

   Reuses the origins photo family: the final call-to-action
   sits on the Jinotega panorama instead of a flat surface.
   Background image comes in via --cta-scene-image on the element.

   Markup: Pages/Index.cshtml  (.cta-scene)
========================================================= */

.cta-scene {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-padding-lg);
  background-image:
    linear-gradient(rgba(5, 50, 58, 0.72), rgba(5, 50, 58, 0.82)),
    var(--cta-scene-image);
  background-size: cover;
  background-position: center;
}

.cta-scene-inner {
  /* container-narrow already centres; this just lifts the text. */
  color: var(--color-text-light);
}

.cta-scene .section-eyebrow {
  color: var(--color-secondary-light);
}

.cta-scene .section-title {
  color: var(--color-text-light);
  text-wrap: balance;
}

.cta-scene .section-description {
  color: rgba(255, 255, 255, 0.85);
}

/* Outline button's default ink is dark teal — invisible on this
   dark scene, so recolour it to read on the photo. */
.cta-scene .btn-outline-custom {
  color: var(--color-text-light);
  border-color: rgba(255, 255, 255, 0.6);
}

.cta-scene .btn-outline-custom:hover {
  color: var(--color-primary);
  background: #fff;
  border-color: #fff;
}

/* ---------- Closing harvest strip ---------- */

.origins-harvest {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.origins-harvest img {
  width: 100%;
  height: clamp(11rem, 24vw, 18rem);
  object-fit: cover;
  display: block;
}

.origins-harvest-note {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  max-width: 34ch;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2.25rem);

  font-family: var(--font-tagline);
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  font-style: italic;
  line-height: var(--line-snug);
  color: var(--color-text-light);
  text-shadow: 0 1px 12px rgba(5, 50, 58, 0.7);
}

.origins-harvest::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      to right,
      rgba(5, 50, 58, 0.7) 0%,
      rgba(5, 50, 58, 0.25) 40%,
      rgba(5, 50, 58, 0) 70%);
}