/*
 * The home page (components/site/HomeView.tsx). Sizes as the page had them: an 800px slide show (580 on tablets, 480
 * on phones) with the donation form overlapping its foot, then About Us, the causes on a light grey band, the mission
 * cards on a pale blue wash, the feeding programme (photo band, card over its edge, rings and photos), the questions
 * (public/zz/faq.css) and the latest posts. Type follows the old page: Roboto Condensed headings scaled with the window.
 */

/* ------------------------------------------------------------------ shared */
.zzh-eyebrow { display: flex; align-items: center; margin: 0 0 20px; font: 400 max(18px, 1.4vw)/1 "Roboto", system-ui, sans-serif; color: #151515; }
.zzh-eyebrow::before { content: ""; flex: none; width: 30px; height: 5px; margin-right: 20px; background: #006db7; }
.zzh-eyebrow--center { justify-content: center; }
.zzh-title { margin: 0 0 40px; font: 600 clamp(32px, 3.4vw, 64px)/1.29 "Roboto Condensed", "Roboto", sans-serif; color: #151515; }
.zzh-title--center { max-width: 780px; margin-left: auto; margin-right: auto; text-align: center; }
.zzh-title--caps { text-transform: uppercase; }
.zzh-title--narrow { max-width: 780px; }
.zzh-outline { display: inline-block; padding: 20px 35px; border: 1px solid #151515; border-radius: 30px; color: #151515; font: 500 18px/18px "Roboto Condensed", "Roboto", sans-serif; text-decoration: none; transition: background-color 0.3s, color 0.3s; }
.zzh-outline:hover, .zzh-outline:focus-visible { background: #151515; color: #fff; }
.zzh-outline:focus-visible { outline: 3px solid rgb(0 109 184 / 0.4); outline-offset: 3px; }

/* ------------------------------------------------------------------ slides */
.zzh-slides { position: relative; height: 800px; overflow: hidden; background: #006db8; color: #ededed; }
.zzh-slides__track { display: flex; height: 100%; transition: transform 0.8s ease; }
.zzh-slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; }
.zzh-slide__bg { position: absolute; inset: 0; background: #006db8 center / cover no-repeat; transform: scale(1); transition: transform 6s linear; }
.zzh-slide.is-on .zzh-slide__bg { transform: scale(1.3); }
.zzh-slide__veil { position: absolute; inset: 0; background: rgb(0 0 0 / 0.5); }
.zzh-slide__inner { position: relative; display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; height: 100%; max-width: 1585px; padding: 15px 80px 285px; }
.zzh-slide__kicker { display: flex; align-items: center; margin: 0 0 30px; font: 400 1.6vw/1.5 "Roboto", system-ui, sans-serif; color: #ededed; }
.zzh-slide__kicker::before { content: ""; flex: none; width: 20px; height: 3px; margin-right: 12px; background: #006db8; }
.zzh-slide__title { margin: 0; font: 600 4vw/1.4 "Roboto Condensed", "Roboto", sans-serif; color: #ededed; }
.zzh-slides__arrow { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 50px; height: 50px; margin-top: -25px; padding: 0; border: 0; border-radius: 4px; background: none; color: #fff; cursor: pointer; }
.zzh-slides__arrow--prev { left: 10px; }
.zzh-slides__arrow--next { right: 10px; }
.zzh-slides__arrow:focus-visible, .zzh-slides__dots button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.zzh-slides__dots { position: absolute; left: 15px; bottom: 140px; z-index: 2; display: none; gap: 8px; }
.zzh-slides__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.5); cursor: pointer; }
.zzh-slides__dots button.is-on { background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .zzh-slides__track, .zzh-slide__bg { transition: none; }
  .zzh-slide.is-on .zzh-slide__bg { transform: none; }
}

/* ------------------------------------------------------------------ the donation form over the slides' foot */
.zzh-donate { position: relative; z-index: 3; padding: 0 20px; }
.zzh-donate__wrap { max-width: 1400px; margin: -105px auto 0; }

/* ------------------------------------------------------------------ about */
.zzh-about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; max-width: 1560px; margin: 0 auto; padding: 65px 0 0; }
.zzh-about__pic { padding: 10px; }
.zzh-about__pic img { display: block; max-width: 100%; height: auto; }
.zzh-about__text { position: relative; padding: 16px 16px 16px 160px; }
.zzh-about__text > * { max-width: 620px; margin-left: auto; }
.zzh-about__text .zzh-title { color: #000; }
.zzh-about__copy { max-width: 465px; margin-left: 0; font: 400 16px/1.67 "Roboto", system-ui, sans-serif; color: #151515; }
.zzh-about__copy p { margin: 0 0 16px; }
.zzh-badge {
  position: absolute; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; width: 260px; margin: 0;
  padding: 50px; border-radius: 300px 300px 300px 30px; background: #151515; color: #fff; text-align: center; transform: translateY(50%);
}
.zzh-badge__icon { display: block; width: 50px; height: 45px; color: #99c156; }
.zzh-badge__icon svg { width: 100%; height: 100%; fill: currentColor; }
.zzh-badge strong { margin-top: 17px; font: 600 60px/1 "Roboto", system-ui, sans-serif; }
.zzh-badge span:last-child { margin-top: 0; font: 500 18px/1.5 "Roboto Condensed", "Roboto", sans-serif; text-transform: uppercase; }

/* ------------------------------------------------------------------ causes */
.zzh-causes { padding: 75px 10px 75px; background: #f5f5f5; }
.zzh-carousel { position: relative; max-width: 1220px; margin: 0 auto; }
/* a scrolling row clips whatever is outside its box: room for the cards' shadow (and their lift on hover) on every side,
   taken back with negative margins so the layout doesn't move */
.zzh-carousel__track {
  position: relative; display: flex; margin: -14px -20px -40px; padding: 14px 20px 40px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px; scrollbar-width: none; list-style: none;
  clip-path: inset(0 10px); /* the shadows reach past the edge cards, the next card (10px further) stays hidden */
}
/* below 1260px the section's 10px side padding is all the room there is: the row reaches only that far */
@media (max-width: 1259px) { .zzh-carousel__track { margin-inline: -10px; padding-inline: 10px; scroll-padding-inline: 10px; clip-path: none; } }
.zzh-carousel__track::-webkit-scrollbar { display: none; }
.zzh-carousel__item { display: flex; flex: 0 0 calc(100% / 3); box-sizing: border-box; padding: 10px; scroll-snap-align: start; }
.zzh-carousel__item > .zzcc { width: 100%; }
.zzh-carousel__nav { position: relative; display: flex; justify-content: center; gap: 14px; margin-top: 14px; }
.zzh-carousel__nav button { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #000; box-shadow: 0 6px 18px -6px rgb(16 24 40 / 0.35); cursor: pointer; }
.zzh-carousel__nav button:hover { color: #006db8; }
.zzh-carousel__nav button:focus-visible { outline: 3px solid rgb(0 109 184 / 0.4); outline-offset: 3px; }
.zzh-causes__more { margin: 50px 0 0; text-align: center; }

/* ------------------------------------------------------------------ mission */
.zzh-mission { padding: 65px 0; background: rgb(185 225 252 / 0.1); }
.zzh-mission__wrap { box-sizing: border-box; max-width: 1560px; margin: 0 auto; padding: 20px 30px; }
.zzh-mission__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; margin: 20px 0 0; padding: 0; list-style: none; }
.zzh-aim { box-sizing: border-box; min-height: 361px; padding: 40px; border: 2px solid #006db8; border-radius: 30px; transition: background-color 0.3s; }
.zzh-aim__icon { display: inline-flex; align-items: center; justify-content: center; width: 110px; height: 110px; border-radius: 200px 200px 200px 30px; background: #006db7; color: #fff; transition: background-color 0.3s, color 0.3s; }
.zzh-aim__icon svg { width: 70px; height: auto; fill: currentColor; }
.zzh-aim__title { margin: 20px 0 8px; font: 600 clamp(20px, 1.6vw, 30px)/1.4 "Roboto Condensed", "Roboto", sans-serif; color: #006db8; }
.zzh-aim__title a { color: inherit; text-decoration: none; }
.zzh-aim__title a::after { content: ""; position: absolute; inset: 0; }
.zzh-aim { position: relative; }
.zzh-aim__text { margin: 0; font: 400 16px/1.67 Arial, "Roboto", sans-serif; color: #151515; }
.zzh-aim:hover, .zzh-aim:focus-within { background: #006db7; }
.zzh-aim:hover .zzh-aim__icon, .zzh-aim:focus-within .zzh-aim__icon { background: #fff; color: #006db7; }
.zzh-aim:hover .zzh-aim__title, .zzh-aim:hover .zzh-aim__text, .zzh-aim:focus-within .zzh-aim__title, .zzh-aim:focus-within .zzh-aim__text { color: #fff; }

/* ------------------------------------------------------------------ feeding programme */
.zzh-feeding { padding: 0 10px 20px; }
.zzh-feeding__photo { min-height: 540px; margin: 0 -10px; background: center / cover no-repeat; }
.zzh-feeding__head { position: relative; box-sizing: border-box; max-width: 850px; margin: -95px auto 0; padding: 40px 40px 25px; border-radius: 30px; background: #fff; }
.zzh-feeding__head .zzh-title { margin-bottom: 0; text-transform: uppercase; }
.zzh-feeding__lead { max-width: 961px; margin: 20px auto 0; padding: 10px; font: 400 18px/1.67 "Roboto", system-ui, sans-serif; color: #151515; text-align: center; }
.zzh-feeding__lead p { margin: 0; }
.zzh-feeding__body { display: grid; grid-template-columns: minmax(0, 687fr) minmax(0, 698fr); gap: 15px; max-width: 1400px; margin: 20px auto 0; }
.zzh-feeding__sub { margin: 0 0 25px; font: 500 clamp(24px, 1.9vw, 36px)/1.5 "Roboto Condensed", "Roboto", sans-serif; color: #151515; text-align: center; }
.zzh-rings { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.zzh-ring { box-sizing: border-box; width: 30%; padding: 15px; text-align: center; }
.zzh-ring__dial { position: relative; width: 100%; aspect-ratio: 1; max-width: 100%; }
.zzh-ring__dial svg { display: block; width: 100%; height: 100%; }
.zzh-ring__value { position: absolute; inset: 0; display: grid; place-items: center; font: 600 clamp(26px, 2.6vw, 48px)/1 "Roboto", system-ui, sans-serif; color: #006db8; }
.zzh-ring__label { display: block; margin-top: 12px; font: 400 18px/1.5 "Roboto Condensed", "Roboto", sans-serif; color: #151515; }
.zzh-feeding__headline { max-width: 590px; margin: 80px auto 0; font: 600 clamp(24px, 3.4vw, 64px)/1.29 "Roboto Condensed", "Roboto", sans-serif; color: #006db8; text-align: center; }
.zzh-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; padding: 10px; }
.zzh-gallery__col { display: flex; flex-direction: column; gap: 30px; }
.zzh-gallery img { display: block; width: 100%; height: auto; border-radius: 30px; }

/* ------------------------------------------------------------------ latest posts */
.zzh-news { padding: 65px 0; background: url("/media/2021/08/ymr-bg-posts-min.png") top right no-repeat; }
.zzh-news__wrap { box-sizing: border-box; max-width: 1560px; margin: 0 auto; padding: 10px; }
.zzh-tabs { display: flex; flex-wrap: wrap; gap: 0 60px; margin: 0 0 60px; border-bottom: 1px solid #e3e3e3; }
.zzh-tabs button { margin-bottom: -1px; padding: 0 0 16px; border: 0; border-bottom: 3px solid transparent; background: none; color: #151515; font: 500 18px/27px "Roboto Condensed", "Roboto", sans-serif; text-transform: uppercase; cursor: pointer; }
.zzh-tabs button.is-on { border-bottom-color: #006db8; color: #006db8; }
.zzh-tabs button:focus-visible { outline: 3px solid rgb(0 109 184 / 0.4); outline-offset: 3px; }
.zzh-posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px 30px; margin: 0; padding: 0; list-style: none; }
.zzh-post { display: flex; align-items: center; gap: 20px; min-height: 152px; background: #fff; }
.zzh-post--text .zzh-post__text { padding-left: 20px; }
.zzh-post__pic { flex: 0 0 40%; height: 180px; overflow: hidden; border-radius: 10px; background: #e7e6e4; }
.zzh-post__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zzh-post__text { flex: 1 1 auto; min-width: 0; max-width: 397px; }
.zzh-post__title { margin: 0 0 8px; font: 500 30px/1.29 "Roboto Condensed", "Roboto", sans-serif; }
.zzh-post__title a { color: #151515; text-decoration: none; }
.zzh-post__title a:hover, .zzh-post__title a:focus-visible { color: #006db8; }
.zzh-post__excerpt { margin: 0 0 8px; font: 400 18px/1.67 "Roboto", system-ui, sans-serif; color: #151515; }
.zzh-post__more { font: 500 18px/1.5 "Roboto", system-ui, sans-serif; color: #006db8; text-decoration: none; }
.zzh-post__more:hover, .zzh-post__more:focus-visible { text-decoration: underline; }

/* ------------------------------------------------------------------ tablet */
@media (max-width: 1024px) {
  .zzh-slides { height: 580px; }
  .zzh-slide__inner { padding: 15px 80px 255px; }
  .zzh-slide__kicker { font-size: 20px; }
  .zzh-slide__title { font-size: 48px; }
  .zzh-about { grid-template-columns: minmax(0, 1fr); padding: 65px 0; }
  .zzh-about__pic { text-align: center; }
  .zzh-about__pic img { margin: 0 auto; }
  .zzh-about__text { padding: 2rem; text-align: center; }
  .zzh-about__text > *, .zzh-about__copy { max-width: none; margin-left: 0; }
  .zzh-about__text .zzh-eyebrow { justify-content: center; }
  .zzh-title { font-size: 42px; }
  .zzh-badge { display: none; }
  .zzh-carousel__item { flex-basis: 50%; }
  .zzh-mission__list { grid-template-columns: minmax(0, 1fr); }
  .zzh-aim { min-height: 0; padding: 15px; }
  .zzh-aim__title { font-size: 23px; }
  .zzh-feeding__photo { min-height: 400px; }
  .zzh-feeding__body { grid-template-columns: minmax(0, 1fr); }
  .zzh-feeding__headline { margin-top: 30px; font-size: 36px; }
  .zzh-ring__value { font-size: 30px; }
  .zzh-news__wrap { max-width: 780px; }
  .zzh-news .zzh-eyebrow { justify-content: center; }
  .zzh-title--narrow { margin-left: auto; margin-right: auto; text-align: center; }
  .zzh-posts { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ phone */
@media (max-width: 767px) {
  .zzh-slides { height: 480px; }
  .zzh-slide__inner { padding: 15px 15px 180px; }
  .zzh-slide__kicker { font-size: 18px; }
  .zzh-slide__title { font-size: 32px; }
  .zzh-slides__arrow { display: none; }
  .zzh-slides__dots { display: flex; }
  .zzh-donate { padding: 0 15px; }
  .zzh-donate__wrap { margin-top: -60px; }
  .zzh-about { max-width: 520px; padding: 45px 0; }
  .zzh-about__text { padding: 30px 15px; }
  .zzh-title { font-size: 32px; }
  .zzh-causes { padding: 45px 10px; }
  .zzh-carousel__item { flex-basis: 100%; }
  .zzh-mission { padding: 45px 0; }
  .zzh-mission__wrap { max-width: 520px; padding: 10px 15px; }
  .zzh-feeding__photo { min-height: 300px; }
  .zzh-feeding__head { margin-top: -30px; padding: 40px 15px 25px; }
  .zzh-feeding__headline { font-size: 24px; }
  .zzh-ring { width: 48%; }
  .zzh-gallery { gap: 15px; }
  .zzh-gallery__col { gap: 15px; }
  .zzh-gallery img { border-radius: 20px; }
  .zzh-news { padding: 45px 0; background-size: 60%; }
  .zzh-tabs { gap: 0 24px; margin-bottom: 30px; overflow-x: auto; flex-wrap: nowrap; }
  .zzh-tabs button { flex: none; font-size: 16px; }
  .zzh-post { flex-direction: column; align-items: stretch; }
  .zzh-post__pic { flex: none; height: 200px; }
  .zzh-post--text .zzh-post__text { padding-left: 0; }
  .zzh-post__title { font-size: 24px; }
  .zzh-post__excerpt { font-size: 16px; }
}