/* ============================================================
   Foody — Inner content pages (Private Label, Certifications, …)
   From design reference css/styles.css "FORM / CONTENT PAGES"
   Loaded via inherited view: website.foody_header_style -> website.layout
   Scoped to #wrap. Renames vs design (Bootstrap collisions):
   .card -> .f-card, .form -> .f-form, .btn -> .f-btn (defined in foody_home.css)
   Depends on tokens + .f-wrap/.f-btn/.eyebrow/.sec from foody_home.css.
   ============================================================ */

/* ---------- Display headings (Unbounded) ---------- */
#wrap .display {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.01em;
}

#wrap h1.display {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
}

#wrap h2.display {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
}

/* ---------- Page hero ---------- */
#wrap .page-hero {
  background: linear-gradient(120deg, var(--mint), var(--pink-soft));
  padding: 3.6rem 0;
  border-radius: 0 0 32px 32px;
}

#wrap .page-hero p {
  max-width: 56ch;
  color: var(--muted);
  margin-top: .8rem;
}

@media(max-width:760px) {
  #wrap .page-hero {
    padding: 2.4rem 0;
  }
}

@media(max-width:480px) {
  #wrap .page-hero {
    padding: 1.9rem 0;
  }
}

/* ---------- Split (two-column) ---------- */
#wrap .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

#wrap .split.narrowl {
  grid-template-columns: .85fr 1.15fr;
}

@media(max-width:900px) {

  #wrap .split,
  #wrap .split.narrowl {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}

/* ---------- Icon grid ---------- */
#wrap .icongrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.2rem;
}

#wrap .icongrid .g {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.8rem;
  text-align: center;
}

#wrap .icongrid .g .ic {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
  border-radius: 20px;
  background: var(--mint);
  display: grid;
  place-items: center;
  color: var(--green);
}

#wrap .icongrid .g b {
  display: block;
  margin-bottom: .35rem;
  font-weight: 700;
}

#wrap .icongrid .g p {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 0;
}

/* ---------- Card (design .card) ---------- */
#wrap .f-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.6rem;
}

/* ---------- Form (design .form) ---------- */
#wrap .f-form {
  display: grid;
  gap: 1rem;
}

#wrap .f-form .row2c {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

#wrap .f-form label {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: .35rem;
}

#wrap .f-form input,
#wrap .f-form select,
#wrap .f-form textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: .8rem 1rem;
  background: #fff;
  outline: none;
  transition: border .15s;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
}

#wrap .f-form input:focus,
#wrap .f-form select:focus,
#wrap .f-form textarea:focus {
  border-color: var(--green);
  box-shadow: none;
}

#wrap .f-form textarea {
  min-height: 120px;
  resize: vertical;
}

@media(max-width:640px) {
  #wrap .f-form .row2c {
    grid-template-columns: 1fr;
  }
}

/* ---------- Private Label hero image ---------- */
#wrap .pl-hero-img {
  width: 100%;
  aspect-ratio: 1000/1062;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 24px;
  overflow: hidden;
}

/* ---------- Toast (design #toast, renamed to avoid collisions) ---------- */
#foody-toast {
  position: fixed;
  bottom: 1.4rem;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--green-deep);
  color: #fff;
  border-radius: 999px;
  padding: .8rem 1.6rem;
  font-size: .85rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: all .3s;
  z-index: 200;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: .5rem;
}

#foody-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}