/* =============================================================
   Home Dining template — new sections + hpv2 extensions.
   Loads AFTER homepage-v2.css; reuses the .hpv2-* primitives.
   Headings scoped under .hpv2 to beat the theme heading resets.
   No image is rounded (per design).
   ============================================================= */

/* ---- Hero (Home Dining specific) ---- */
.hd .hpv2-hero__body,
.hd .hpv2-hero__body p { color: #004766; font-size: 20px; line-height: 30px; }

/* ---- media + text (shared: intro / funding / why) ---- */
.hd-media-text__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 30px;
}

.hd-media-text .hpv2-director__grid { align-items: stretch; }
.hd-mt--green .hpv2-director__media,
.hd-mt--grey .hpv2-director__media { position: relative; }
.hd-media-text .hpv2-director__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hd-mt--green .hpv2-director__media img,
.hd-mt--grey .hpv2-director__media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hd-media-text .hpv2-director__body { align-self: center; }

/* Lighter weight (400) for headings + body in these blocks */
.hd-media-text .hpv2-director__text {
  font-size: 20px;

}
.hd-media-text .hpv2-director__text p { font-size: 20px; }

/* ---- Coloured 50/50 bands: Funding (green) + Why (grey) ---- */
.hd-mt--green .hd-media-text__box,
.hd-mt--grey .hd-media-text__box { overflow: hidden; }
.hd-mt--green .hd-media-text__box { background: var(--tcf-green); }
.hd-mt--grey .hd-media-text__box { background: #434953; }
.hd-mt--green .hpv2-director__grid,
.hd-mt--grey .hpv2-director__grid { gap: 0; }
.hd-mt--green .hpv2-director__body,
.hd-mt--grey .hpv2-director__body { padding: 60px; }
.hd-mt--green .hpv2-director__text,
.hd-mt--green .hpv2-director__text p,
.hd-mt--green .hpv2-director__text li,
.hd-mt--grey .hpv2-director__text,
.hd-mt--grey .hpv2-director__text p,
.hd-mt--grey .hpv2-director__text li {
  color: #fff;
}
.hpv2 .hd-mt--green .hpv2-director__heading { color: #fff; }
.hpv2 .hd-mt--grey .hpv2-director__heading { color: #A3B760; }

/* =============================================================
   USP feature bar — icon + title + subtitle, 4 across, mint box
   ============================================================= */
.hd-usp__container {
  background: #EAF0E6;
  padding: 60px 40px;
}
.hd-usp__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.hd-usp__item {
  display: flex;
  align-items: center;
  gap: 20px;
  font-weight: 400;
}
.hd-usp__icon { flex: 0 0 auto; }
.hd-usp__icon img {
  display: block;
  height: 105px;
  width: auto;
}
.hpv2 .hd-usp__title {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: #709B59;
  margin: 0 0 6px;
}
.hd-usp__subtitle {
  font-size: 16px;
  line-height: 22px;
  color: #000;
  margin: 0;
}

/* =============================================================
   How it works — numbered steps
   ============================================================= */
.hpv2 .hd-steps__heading {
  font-size: 35px;
  line-height: 40px;
  color: var(--tcf-blue);
  text-align: center;
  margin: 0 0 50px;
}
.hd-steps__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.hd-steps__item {
  padding: 0 24px;
  text-align: center;
}
.hd-steps__item + .hd-steps__item {
  border-left: 1px solid #d9dde0;
}
.hd-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tcf-blue);
  color: #fff;
  font-weight: 700;
  margin-bottom: 24px;
}
.hd-steps__icon {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.hd-steps__icon img {
  max-height: 130px;
  width: auto;
}
.hpv2 .hd-steps__title {
  font-size: 20px;
  line-height: 24px;
  color: var(--tcf-blue);
  margin: 0 0 12px;
}
.hd-steps__desc {
  font-size: 16px;
  line-height: 22px;
  color: #000;
  margin: 0;
  font-weight: 400;
}

/* =============================================================
   Meals designed — 2-column info panels
   ============================================================= */
.hd-needs__container {
  background: #EDEEEE;
  padding: 60px 40px;
}
.hpv2 .hd-needs__heading {
  font-family: 'Visby Round CF', sans-serif;
  font-weight: 700;
  font-size: 45px;
  line-height: 55px;
  color: var(--tcf-blue);
  text-align: center;
  margin: 0 0 60px;
}
.hd-needs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 21px;
}
.hd-needs__col {
  background: #fff;
}
.hd-needs__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.hd-needs__images img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.hd-needs__panel {
  padding: 30px;
}
.hpv2 .hd-needs__title {
  font-family: 'Visby Round CF', sans-serif;
  font-weight: 700;
  font-size: 35px;
  line-height: 40px;
  color: var(--tcf-blue);
  margin: 0 0 20px;
}
.hd-needs__text,
.hd-needs__text p,
.hd-needs__text ol,
.hd-needs__text ul,
.hd-needs__text li {
  font-size: 16px;
  line-height: 24px;
  color: #000;
  font-weight: 400;
}
/* Lists + paragraphs share the same bottom spacing so they don't touch */
.hd-needs__text p,
.hd-needs__text ul,
.hd-needs__text ol {
  margin: 0 0 16px;
}
.hd-needs__text ul,
.hd-needs__text ol {
  padding-left: 20px;
}
.hd-needs__text li { margin: 0.2em 0; }
.hd-needs__text > *:last-child {
  margin-bottom: 0;
}

/* =============================================================
   Responsive
   ============================================================= */
/* USP breaks to 2 columns early so it isn't cramped on tablets */
@media (max-width: 1200px) {
  .hd-usp__grid { grid-template-columns: repeat(2, 1fr); }
}


@media (max-width: 991px) {
  /* --- USP --- */
  .hd-usp__container { padding: 30px; }
  .hd-usp__item { gap: 16px; }
  .hpv2 .hd-usp__title { font-size: 18px; line-height: 22px; }
  .hd-usp__subtitle { font-size: 15px; line-height: 20px; }
  .hd-usp__icon img { height: 85px; }

  /* --- Steps --- */
  .hd-steps__grid { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
  .hd-steps__item { padding: 0 16px; }
  .hd-steps__item:nth-child(odd) { border-left: 0; }
  .hpv2 .hd-steps__heading { font-size: 32px; line-height: 38px; margin-bottom: 40px; }
  .hpv2 .hd-steps__title { font-size: 18px; line-height: 22px; }
  .hd-steps__desc { font-size: 16px; line-height: 22px; }

  /* --- Needs --- */
  .hd-needs__container { padding: 40px 20px; }
  .hd-needs__grid { grid-template-columns: 1fr; gap: 16px; }
  .hpv2 .hd-needs__heading { font-size: 36px; line-height: 40px; margin-bottom: 40px; }
  .hpv2 .hd-needs__title { font-size: 32px; line-height: 38px; margin-bottom: 20px; }
  .hd-needs__text,
  .hd-needs__text p,
  .hd-needs__text li { font-size: 16px; line-height: 24px; }
  .hd-needs__panel { padding: 24px; }

  /* --- Media-text --- */
  .hpv2 .hd-media-text .hpv2-director__heading { font-size: 32px; line-height: 38px; }
  .hd-media-text .hpv2-director__text,
  .hd-media-text .hpv2-director__text p { font-size: 16px; }
  .hd-media-text .hpv2-director__grid { flex-direction: column; }
  .hd-media-text .hpv2-director__media img,
  .hd-mt--green .hpv2-director__media img,
  .hd-mt--grey .hpv2-director__media img { position: static; aspect-ratio: 4 / 3; height: auto; }

  /* --- Hero --- */
  .hd .hpv2-hero__body,
  .hd .hpv2-hero__body p { font-size: 18px; }
  .hd-media-text .hpv2-director__body { align-self: stretch; padding: 0; }
  .hd-mt--green .hpv2-director__body,
  .hd-mt--grey .hpv2-director__body { padding: 40px; }
}

@media (max-width: 767px) {
  .hd-media-text .hpv2-director__media { position: static; }
  .hd-usp__grid { grid-template-columns: 1fr; gap: 20px; }
  .hd-media-text .hpv2-director__media img { aspect-ratio: 4 / 3; height: auto; }
  .hd-needs__heading br { display: none; }
  .hd-media-text .hpv2-director__text { margin-bottom: 0; }
}

@media (max-width: 480px) {
  /* --- USP --- */
  .hd-usp__grid { grid-template-columns: 1fr; gap: 20px; }
  .hd-usp__item { gap: 14px; }
  .hd-usp__icon img { height: 70px; }

  /* --- Steps --- */
  .hd-steps__grid { grid-template-columns: 1fr; gap: 24px 0; }
  .hd-steps__item { padding: 0 12px; }
  .hd-steps__item + .hd-steps__item { border-left: 0; }
  .hd-steps__icon { height: 100px; margin-bottom: 18px; }
  .hd-steps__icon img { max-height: 100px; }

  /* --- Needs --- */
  .hd-needs__container { padding: 20px 30px 30px; }
  .hpv2 .hd-needs__heading { margin-bottom: 20px; }
  .hd-needs__panel { padding: 20px; }

  /* --- Media-text --- */
  .hd-mt--green .hpv2-director__body,
  .hd-mt--grey .hpv2-director__body { padding: 20px 30px 30px; }
}