@layer components {

/* What We Offer Section */
.offer {
  border-top: 1px solid var(--color-border);
}

.offer h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--brand-primary);
  font-size: 2rem;
  margin: 0.5rem 0 2.5rem;
  font-weight: 500;
}

/* Decorative hand-drawn arrow to the right of the section title — testing on
   "What We Offer" only for now. Purely ornamental, so it's a background on an
   ::after (no markup, no aria needed). Easy to animate later via
   transform/opacity on this pseudo-element. Arrow art is 53×85 (portrait). */
.offer h2::after {
  content: "";
  flex: 0 0 auto;
  width: 1.4rem;   /* ≈ height × (53/85) keeps the art's aspect ratio */
  height: 2.25rem;
  background: url("/assets/icons/arrow.svg") center / contain no-repeat;
  /* Drop it half its own height so the top of the arrow lines up with the
     vertical middle of the title (asymmetric, hangs below). Percentage is
     relative to the arrow's height, so it tracks any size change. */
  transform: translateY(50%) translateX(-25%);
}

/* ── Offering groups (label + rule to the right; no enclosing box) ──
   Self-contained header treatment: swap this block to try other looks
   without touching markup/data. The label <h3> is itself the flex line —
   the "Category" text and the ::after rule are its two flex children. */
.offer-group {
  margin-bottom: 3rem;
}

.offer-group:last-child {
  margin-bottom: 0;
}

.offer-group__label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 1.5rem;
  color: var(--brand-primary);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
}

.offer-group__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--brand-primary-light);
  opacity: 0.5;
}

.offer__grid {
  display: grid;
  /* auto-fill (not auto-fit) keeps empty column tracks, so groups with
     fewer than a full row of cards leave blank space instead of stretching
     the cards. Every group's cards stay the same size as a full 3-up row. */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

.card {
  background: var(--color-bg);
  border-radius: 12px;
  border: 1px solid #d7d7d7;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.12);
  }
}

.card__media {
  min-height: 160px;
  margin-bottom: 1.25rem;
  overflow: hidden;
  border-radius: 12px;
}

.card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  transform: scale(1.25);
  transition: transform 0.3s ease;
}

@media (hover: hover) {
  .card:hover .card__media img {
    transform: scale(1.5);
  }

  .card:hover .card__media img[src*="products-sourdough-sandwich-bread"] {
    transform: scale(1.25);
  }

  .card:hover .card__media img[src*="products-seasonal-produce"] {
    transform: scale(1.25);
  }

  .card:hover .card__media img[src*="products-granola-"]{
    transform: scale(1.25);
  }

}

.card__media img[src*="products-sourdough-sandwich-bread"]{
  transform: scale(1.0);
}

.card__media img[src*="products-classic-sourdough"] {
  object-position: 30% 100%;
  transform-origin: center 15%;
}

.card__media img[src*="products-cinnamon-swirl"] {
  transform-origin: 50% 30%;
}

.card__media img[src*="products-cinnamon-bun-focaccia"] {
  object-position: 40% center;
}

.card__media img[src*="products-garlic-rosemary-focaccia"] {
  object-position: 35% center;
}

.card__media img[src*="products-granola-chocolate-cherry"] {
  transform: scale(1.0);
}

.card__media img[src*="products-granola-honey-nut"] {
  transform: scale(1.0);
  object-position: 35% center;
}

.card__media img[src*="products-granola-maple-pecan"] {
  transform: scale(1.0);
  object-position: 35% center;
}

.card__media img[src*="products-granola-apple-crumble"] {
  transform: scale(1.10);
  object-position: 35% center;
}

.card__media img[src*="products-granola-pumpkin-pie"] {
  transform: scale(1.05);
  object-position: 40% center;
}

.card__media img[src*="products-granola-pecan-pie"] {
  transform: scale(1.10);
}

.card__media img[src*="products-seasonal-produce"] {
  transform: scale(1.0);
}

.card h3 {
  color: var(--brand-primary);
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.card__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0.75rem 0;
}

.pill {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.pill--vegan {
  background: var(--brand-primary);
}

.pill--organic {
  background: var(--brand-secondary);
}

/* #6e6b4a clears 4.5:1 on its background (~5.1:1); the original #97936e
   only hit ~2.93:1. */
.pill--allergen {
  color: #6e6b4a;
  border: 1px solid #6e6b4a;
  background: var(--color-bg-alt);
}

.card__ingredients {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.card__allergens {
  margin-top: 0.5rem;
}

.card--interactive {
  cursor: pointer;
}

/* Unlike a real <button>, this div has no built-in "no ring unless
   keyboard" behavior of its own — without this reset, Safari's default
   blue focus ring shows through whenever the rule below doesn't match. */
.card--interactive:focus {
  outline: none;
}

body.using-keyboard .card--interactive:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.card__nutrition-cta {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-primary);
}

}