/* ahen26 - the projects area at the bottom of the home page (section#bottom): heading, project cards, "about" cards, donate band.
   The cards come from the stock article-category module (ul > li > .img-intro + h4); html/mod_articles_category/default_items.php
   marks each li as .is-project (it has a description in the language file) or .is-about, and adds .proj-* parts to the projects.
   Scoped to #bottom, loaded after top.css. To go back to the previous look, remove its <link> in index.php. */

section#bottom {
  display: block;
  background: var(--surface);
  padding-block: clamp(40px, 5.5vw, 80px);
  margin-top: 0;
}

/* ---- heading ---- */
section#bottom .projects-head {
  max-width: 720px;
  margin: 0 auto clamp(26px, 3.5vw, 46px);
  text-align: center;
}
section#bottom .projects-head h2 {
  margin: 0 0 10px;
  color: var(--brand-deep);
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
}
section#bottom .projects-head h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 4px;
  background: var(--green);
}
section#bottom .projects-head p { margin: 0; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.15rem); }

/* ---- the grid: 4 project cards per row, 2 wide "about" cards below ---- */
#bottom .moduletable_latestNews { float: none; width: 100%; margin: 0; }

/* two lists (html/mod_articles_category/default.php): ul.cards-projects first, then ul.cards-about, each with its own grid */
#bottom ul.category-module_latestNews {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
#bottom ul.cards-projects { grid-template-columns: repeat(4, 1fr); }
#bottom ul.cards-about    { grid-template-columns: repeat(2, 1fr); margin-top: clamp(16px, 2vw, 24px); }
@media (max-width: 1099px) {
  #bottom ul.cards-projects { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  #bottom ul.cards-projects,
  #bottom ul.cards-about { grid-template-columns: 1fr; }
}

/* keep the visual order of the old float:left layout on the Hebrew pages (first module item on the left, as before);
   the cards themselves still read right-to-left */
html[dir="rtl"] #bottom ul.category-module_latestNews { direction: ltr; }
html[dir="rtl"] #bottom ul.category-module_latestNews > li { direction: rtl; }

/* ---- the card: undo the old float / height:0 / padding-bottom tricks ---- */
#bottom ul.category-module_latestNews > li {
  position: relative;
  float: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
#bottom ul.category-module_latestNews > li:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
#bottom ul.category-module_latestNews > li:focus-within { outline: 3px solid var(--brand); outline-offset: 3px; }

/* photo: fixed ratio, cropped to fill, slow zoom on hover */
#bottom .img-intro {
  position: relative;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  border: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface);
}
#bottom .img-intro a { display: block; width: 100%; height: 100%; }
#bottom .img-intro img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
#bottom ul.category-module_latestNews > li:hover .img-intro img { transform: scale(1.06); }

/* figure on the photo ("16,000 participants") */
#bottom .proj-stat {
  position: absolute;
  inset-block-end: 12px;   /* bottom corner: some photos carry a logo in the top corners */
  inset-inline-start: 12px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(7,31,43,.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.3;
  pointer-events: none;
}

/* title; its link is stretched over the whole card, so the card is one big click target */
#bottom ul.category-module_latestNews h4 {
  display: flex;
  align-items: center;
  width: auto;
  margin: 0;
  padding: 16px 18px 18px;
  background: transparent;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: start;
}
#bottom h4 a.mod-articles-category-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  color: var(--brand-deep);
  text-decoration: none;
}
#bottom h4 a.mod-articles-category-title::before { content: ''; position: absolute; inset: 0; z-index: 1; }
#bottom h4 a.mod-articles-category-title:focus-visible { outline: 0; }
#bottom ul.category-module_latestNews > li:hover h4 a.mod-articles-category-title { color: var(--brand); }

/* round arrow after the title of the "about" cards (the project cards have their own "more" line) */
#bottom h4 a.mod-articles-category-title::after {
  content: '\2192';
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
html[dir="rtl"] #bottom h4 a.mod-articles-category-title::after { content: '\2190'; }
#bottom ul.category-module_latestNews > li:hover h4 a.mod-articles-category-title::after { background: var(--brand); color: #fff; }
#bottom li.is-project h4 a.mod-articles-category-title::after { display: none; }

/* ---- project card: title, description, "more" + donate ---- */
#bottom li.is-project h4 { padding-bottom: 6px; }
#bottom .proj-desc {
  flex: 1;
  margin: 0;
  padding: 0 18px;
  color: var(--muted);
  font-size: .97rem;
  line-height: 1.6;
}
#bottom .proj-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px 18px;
}
#bottom .proj-more { color: var(--brand); font-size: .95rem; font-weight: 700; white-space: nowrap; }
#bottom .proj-more::after { content: ' \2192'; }
html[dir="rtl"] #bottom .proj-more::after { content: ' \2190'; }

/* donate button: above the stretched title link so it stays clickable on its own */
#bottom .proj-donate {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--donate);
  color: #fff;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(224,62,62,.32);
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
#bottom .proj-donate::before { content: '\2665'; font-size: .9em; }
#bottom .proj-donate:hover,
#bottom .proj-donate:focus-visible { background: var(--donate-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 9px 22px rgba(224,62,62,.45); }
#bottom .proj-donate:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ---- "about" cards: photo beside the title ---- */
#bottom ul.category-module_latestNews > li.is-about { flex-direction: row; }
#bottom li.is-about .img-intro { flex: 0 0 38%; width: 38%; aspect-ratio: auto; min-height: 130px; }
#bottom li.is-about h4 { flex: 1; padding: 18px 20px; }

/* ---- donate band ---- */
#bottom .donate-band {
  margin-top: clamp(30px, 4.5vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px 44px;
  padding: clamp(26px, 3.6vw, 46px) clamp(22px, 4vw, 56px);
  border-radius: 22px;
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 100%);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
#bottom .donate-band h3 {
  margin: 0 0 16px;
  color: #fff;
  font-family: var(--font-head);
  font-size: clamp(1.45rem, 2.7vw, 2.1rem);
  font-weight: 800;
  line-height: 1.25;
  text-align: start;
}
#bottom .donate-band h3::after { display: none; }
#bottom .donate-band__trust { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 0; list-style: none; }
#bottom .donate-band__trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.15);
  font-size: .95rem;
  line-height: 1.35;
}
#bottom .donate-band__trust li::before { content: '\2713'; color: #c6ecbb; font-weight: 800; }
#bottom .donate-band__action { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
#bottom .donate-band__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 48px;
  border-radius: var(--r-pill);
  background: var(--donate);
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(224,62,62,.5);
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
#bottom .donate-band__cta::before { content: '\2665'; font-size: .9em; }
#bottom .donate-band__cta:hover,
#bottom .donate-band__cta:focus-visible { background: var(--donate-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 38px rgba(224,62,62,.6); }
#bottom .donate-band__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#bottom .donate-band__tel { color: #fff; font-size: .95rem; text-decoration: none; opacity: .92; }
#bottom .donate-band__tel span { font-weight: 700; }
#bottom .donate-band__tel:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 899px) {
  #bottom .donate-band { flex-direction: column; align-items: stretch; text-align: center; }
  #bottom .donate-band h3 { text-align: center; }
  #bottom .donate-band__trust { justify-content: center; }
  #bottom .donate-band__action { align-items: stretch; }
  #bottom .donate-band__cta { justify-content: center; }
}

/* ---- phone ---- */
@media (max-width: 599px) {
  #bottom ul.category-module_latestNews { gap: 14px; }
  #bottom li.is-project .img-intro { aspect-ratio: 16 / 9; }
  #bottom li.is-about .img-intro { flex-basis: 34%; width: 34%; min-height: 96px; }
  #bottom li.is-about h4 { padding: 12px 14px; font-size: 1.05rem; }
  #bottom .donate-band__cta { padding: 16px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  #bottom ul.category-module_latestNews > li:hover { transform: none; }
  #bottom ul.category-module_latestNews > li:hover .img-intro img { transform: none; }
}