/* charity-guide.css — «دليل مشاريع المبرة» (2026-09-14).
 *
 * The page left the nocturne system (mabarrah-nocturne.css, charity-guide-noct.css)
 * for the site's current identity: the light hero of the home page, the same
 * «أبواب العطاء» and campaign components, the brand tokens in theme.css. Only
 * what those components do not already cover is written here: the hero, the
 * rhythm between sections, and the link under the campaigns. */

/* --------------------------------------------------------------- hero --- */
.cg-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(36px, 6vw, 88px) clamp(44px, 6vw, 96px);
  padding-inline: var(--ds-s5, 24px);
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(201, 162, 39, 0.10), transparent 60%),
    radial-gradient(55% 60% at 0% 100%, rgba(18, 82, 92, 0.08), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--brand-tint, #F4F6F7) 100%);
  color: var(--brand-navy, #0A2A3D);
}
.cg-hero__in {
  max-width: 1240px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.cg-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 18px; padding: 0; list-style: none;
  font-size: 0.875rem; color: var(--brand-grey, #5A6B74);
}
.cg-crumbs a { color: var(--brand-teal, #12525C); text-decoration: underline; text-underline-offset: 4px; }
.cg-crumbs li + li::before { content: "/"; margin-inline-end: 8px; color: rgba(90, 107, 116, 0.6); }

.cg-hero h1.cg-hero__title {
  margin: 0;
  font-family: "Alexandria", "Noto Kufi Arabic", system-ui, sans-serif;
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--brand-navy, #0A2A3D);
  text-wrap: balance;
}
.cg-hero__rule {
  display: block;
  inline-size: 72px; block-size: 4px; border-radius: 4px;
  margin-block: 20px 22px;
  background: var(--brand-gold, #C9A227);
}
.cg-hero__lead {
  margin: 0;
  max-inline-size: 56ch;
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.18rem);
  line-height: 1.95;
  color: #33495A;
}
.cg-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 28px; }
.cg-hero__actions .primary-button,
.cg-hero__actions .ghost-button { min-block-size: 48px; padding-inline: 26px; }
.cg-hero__actions .ghost-button small { font-weight: 500; opacity: 0.75; margin-inline-start: 6px; font-size: 0.8em; }

.cg-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 26px; }
.cg-jump a {
  display: inline-flex; align-items: center; gap: 8px;
  min-block-size: 40px; padding: 8px 16px;
  border: 1px solid rgba(18, 82, 92, 0.18); border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--brand-teal, #12525C); font-size: 0.92rem; font-weight: 600; text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.cg-jump a svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cg-jump a:hover { background: var(--brand-teal, #12525C); border-color: var(--brand-teal, #12525C); color: #fff; }

.cg-hero__licence {
  display: flex; align-items: center; gap: 8px;
  margin: 22px 0 0; font-size: 0.85rem; color: var(--brand-grey, #5A6B74);
}
.cg-hero__licence svg { inline-size: 18px; block-size: 18px; flex: none; fill: none; stroke: var(--brand-teal, #12525C); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cg-hero__licence b { color: var(--brand-navy, #0A2A3D); font-weight: 700; }

/* The picture side: three real campaign photographs, the wide one on top. */
.cg-hero__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
  margin: 0;
}
.cg-hero__shot {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 22px;
  background: #DCE5E8;
  box-shadow: 0 18px 40px -22px rgba(10, 42, 61, 0.45);
}
.cg-hero__shot img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.cg-hero__shot--wide { grid-column: 1 / -1; aspect-ratio: 1200 / 620; }
.cg-hero__shot--sq { aspect-ratio: 4 / 3; }
.cg-hero__shot figcaption {
  position: absolute; inset-inline-start: 12px; inset-block-end: 12px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(10, 42, 61, 0.78); color: #fff;
  font-size: 0.8rem; font-weight: 600;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* The page's one authored moment: the photographs open upward, one after the
   other, from a clip; the text is already in place. */
@media (prefers-reduced-motion: no-preference) {
  .cg-hero__shot { animation: cg-open 900ms cubic-bezier(.16, 1, .3, 1) both; }
  .cg-hero__shot:nth-child(2) { animation-delay: 120ms; }
  .cg-hero__shot:nth-child(3) { animation-delay: 220ms; }
  .cg-hero__shot img { animation: cg-settle 1400ms cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes cg-open { from { clip-path: inset(100% 0 0 0 round 22px); } to { clip-path: inset(0 0 0 0 round 22px); } }
  @keyframes cg-settle { from { transform: scale(1.12); } to { transform: none; } }
}

@media (max-width: 960px) {
  .cg-hero__in { grid-template-columns: 1fr; }
  .cg-hero__media { order: 2; }
}
@media (max-width: 640px) {
  .cg-hero { padding-block: 24px 44px; }
  .cg-hero__rule { margin-block: 16px 18px; }
  .cg-hero__actions .primary-button,
  .cg-hero__actions .ghost-button { flex: 1 1 100%; justify-content: center; }
  .cg-hero__media { gap: 10px; }
  .cg-hero__shot { border-radius: 16px; }
}

/* ---------------------------------------------------------- campaigns --- */
.cg-campaigns {
  padding-block: clamp(56px, 7vw, 96px);
  padding-inline: var(--ds-s5, 24px);
  background: var(--brand-tint, #F4F6F7);
}
.cg-campaigns__in { max-width: 1240px; margin-inline: auto; }
.cg-campaigns .cg-count { margin: -18px 0 26px; text-align: center; color: var(--brand-grey, #5A6B74); font-size: 0.95rem; }
.cg-campaigns .cmp-empty { text-align: center; color: var(--brand-grey, #5A6B74); }
.cg-more { display: flex; justify-content: center; margin-block-start: 30px; }
.cg-more a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--brand-teal, #12525C); font-weight: 700; text-decoration: none;
  border-block-end: 2px solid rgba(201, 162, 39, 0.6); padding-block-end: 2px;
}
.cg-more a:hover { border-color: var(--brand-gold, #C9A227); }

/* Anchored sections clear the sticky header. */
#cg-campaigns, #giving-doors, #zakat-entry { scroll-margin-block-start: 96px; }

/* giving-doors.js writes each card with .reveal, which styles.css holds at
   opacity 0 until the motion script marks it seen. Here the grid is drawn after
   load, so a card could stay hidden; on this page the cards simply show. */
#giving-doors .gdoor.reveal { opacity: 1; transform: none; }

/* The doors are drawn by giving-doors.js; without it, one honest line. */
.cg-doors-fallback { text-align: center; color: var(--brand-grey, #5A6B74); }
.cg-doors-fallback a { color: var(--brand-teal, #12525C); font-weight: 700; }

/* ---------------------------------------------------------- help band --- */
.cg-help {
  padding-block: clamp(48px, 6vw, 80px);
  padding-inline: var(--ds-s5, 24px);
  background: #FFFFFF;
}
.cg-help__in {
  max-width: 1040px; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid #DCE5E8; border-radius: 24px;
  background: linear-gradient(135deg, #FFFFFF 0%, #F7FAFA 100%);
}
.cg-help h2 { margin: 0 0 8px; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); color: var(--brand-navy, #0A2A3D); }
.cg-help p { margin: 0; color: #33495A; line-height: 1.9; max-inline-size: 60ch; }
.cg-help__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cg-help__actions .primary-button,
.cg-help__actions .ghost-button { min-block-size: 46px; padding-inline: 22px; }
@media (max-width: 760px) {
  .cg-help__in { grid-template-columns: 1fr; }
  .cg-help__actions > * { flex: 1 1 100%; justify-content: center; }
}

/* ------------------------------------------------- «كل أوجه التبرع» --- */
.cg-catalogue {
  padding-block: clamp(56px, 7vw, 96px);
  padding-inline: var(--ds-s5, 24px);
  background: var(--brand-tint, #F4F6F7);
  scroll-margin-block-start: 88px;
}
.cg-catalogue__in { max-width: 1240px; margin-inline: auto; }

.cg-filters {
  display: grid; gap: 16px;
  padding: clamp(16px, 2.4vw, 24px);
  margin: 0 0 18px;
  background: #FFFFFF;
  border: 1px solid #DCE5E8; border-radius: 22px;
  box-shadow: 0 16px 36px -28px rgba(10, 42, 61, 0.35);
}

.cg-types { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-types button {
  display: inline-flex; align-items: center; gap: 10px;
  min-block-size: 44px; padding: 8px 18px;
  border: 1px solid #DCE5E8; border-radius: 999px;
  background: #F7FAFA; color: var(--brand-navy, #0A2A3D);
  font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.cg-types button span {
  min-inline-size: 26px; padding: 1px 8px; border-radius: 999px;
  background: #E8EEF0; color: var(--brand-teal, #12525C);
  font-size: 0.8rem; font-variant-numeric: tabular-nums; text-align: center;
}
.cg-types button:hover { border-color: var(--brand-teal, #12525C); }
.cg-types button[aria-pressed="true"] { background: var(--brand-teal, #12525C); border-color: var(--brand-teal, #12525C); color: #FFFFFF; }
.cg-types button[aria-pressed="true"] span { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }
.cg-types button:focus-visible { outline: 3px solid var(--brand-gold, #C9A227); outline-offset: 2px; }

.cg-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px; align-items: end;
}
.cg-field { display: grid; gap: 6px; margin: 0; }
.cg-field > span { font-size: 0.82rem; font-weight: 600; color: var(--brand-grey, #5A6B74); }
.cg-field input,
.cg-field select {
  inline-size: 100%; min-block-size: 46px;
  padding: 0 14px;
  border: 1px solid #CFDADE; border-radius: 12px;
  background-color: #FFFFFF; color: var(--brand-navy, #0A2A3D);
  font: inherit; font-size: 0.95rem;
}
.cg-field select {
  appearance: none; -webkit-appearance: none;
  padding-inline-start: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312525C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 18px; background-position: left 12px center;
}
.cg-field input::placeholder { color: #8A9AA3; }
.cg-field input:focus,
.cg-field select:focus { outline: none; border-color: var(--brand-teal, #12525C); box-shadow: 0 0 0 3px rgba(18, 82, 92, 0.16); }

.cg-switch {
  display: inline-flex; align-items: center; gap: 10px;
  min-block-size: 46px; padding: 0 14px;
  border: 1px solid #CFDADE; border-radius: 12px; background: #FFFFFF;
  font-size: 0.92rem; font-weight: 600; color: var(--brand-navy, #0A2A3D); cursor: pointer; white-space: nowrap;
}
.cg-switch input { inline-size: 18px; block-size: 18px; accent-color: var(--brand-teal, #12525C); margin: 0; }
.cg-switch:has(input:checked) { border-color: var(--brand-gold, #C9A227); background: #FBF6E6; }
.cg-switch:has(input:focus-visible) { outline: 3px solid var(--brand-gold, #C9A227); outline-offset: 2px; }

.cg-resultbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 4px 22px; }
.cg-resultbar__count { margin: 0; font-size: 0.92rem; color: var(--brand-grey, #5A6B74); font-variant-numeric: tabular-nums; }
.cg-clear {
  border: 0; background: none; padding: 6px 2px; cursor: pointer;
  font: inherit; font-size: 0.92rem; font-weight: 700; color: var(--brand-teal, #12525C);
  text-decoration: underline; text-underline-offset: 4px;
}

.cg-group + .cg-group { margin-block-start: clamp(36px, 5vw, 56px); }
.cg-group__title {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 18px;
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); font-weight: 800; color: var(--brand-navy, #0A2A3D);
}
.cg-group__title::before { content: ""; inline-size: 6px; block-size: 1.1em; border-radius: 3px; background: var(--brand-gold, #C9A227); }
.cg-group__n {
  padding: 2px 10px; border-radius: 999px; background: #FFFFFF; border: 1px solid #DCE5E8;
  font-size: 0.85rem; font-weight: 700; color: var(--brand-teal, #12525C); font-variant-numeric: tabular-nums;
}
.cg-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }

.cg-card .cmp-card__title { font-size: 1.06rem; font-weight: 800; }
.cg-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cg-tag {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  background: #EEF4F5; color: var(--brand-teal, #12525C); font-size: 0.78rem; font-weight: 700;
}
.cg-tag--campaign { background: #FBF3D9; color: #6E5412; }
.cg-card__place {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); color: var(--brand-navy, #0A2A3D);
  font-size: 0.78rem; font-weight: 700;
  box-shadow: 0 4px 12px -6px rgba(10, 42, 61, 0.35);
}
.cg-card__place svg { inline-size: 14px; block-size: 14px; fill: none; stroke: var(--brand-teal, #12525C); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cmp-card__badge.cg-badge--zakat { background: var(--brand-gold, #C9A227); color: #33270A; }
.cg-card__media--empty { display: grid; place-items: center; background: linear-gradient(135deg, #EEF4F5, #F7F3E6); }
.cg-card .cmp-card__media > img.cg-card__mark { position: static; inline-size: 34%; block-size: auto; opacity: 0.55; object-fit: contain; }
.cg-card .primary-button { min-block-size: 46px; }

.cg-empty { display: grid; justify-items: center; gap: 12px; padding: 40px 16px; text-align: center; color: var(--brand-grey, #5A6B74); }
.cg-empty p { margin: 0; font-size: 1rem; }
.cg-error { text-align: center; color: var(--brand-grey, #5A6B74); }
.cg-error a { color: var(--brand-teal, #12525C); font-weight: 700; }
.cg-empty .ghost-button {
  background: #FFFFFF !important; color: var(--brand-teal, #12525C) !important;
  border: 1.5px solid var(--brand-teal, #12525C) !important; min-block-size: 44px; padding-inline: 22px;
}

@media (max-width: 1000px) {
  .cg-fields { grid-template-columns: 1fr 1fr; }
  .cg-field--search { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .cg-types { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; }
  .cg-types::-webkit-scrollbar { display: none; }
  .cg-types button { flex: none; }
  .cg-fields { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cg-switch { grid-column: 1 / -1; justify-content: center; }
}

/* ------------------------------------------- measured fixes, 2026-09-14 --- */
/* .ghost-button is drawn for a dark ground (styles.css: white text, a white
   hairline), so on this light page it measured white on white. The home page
   answers the same problem under #home in aegov-dls.css; the same treatment
   here, with the colour !important for the same reason it is there. */
.cg-hero .ghost-button,
.cg-help .ghost-button {
  background: #FFFFFF !important;
  color: var(--brand-teal, #12525C) !important;
  border: 1.5px solid var(--brand-teal, #12525C) !important;
  font-weight: 600;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.cg-hero .ghost-button:hover,
.cg-help .ghost-button:hover {
  background: var(--brand-teal, #12525C) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px -10px rgba(18, 82, 92, 0.55);
}
.cg-hero .ghost-button:focus-visible,
.cg-help .ghost-button:focus-visible { outline: 2px solid var(--brand-gold, #C9A227); outline-offset: 3px; }

/* The licence reads as one sentence: as a flex row its number measured on a
   line of its own beside the text at 390px. */
.cg-hero__licence { display: block; line-height: 1.8; }
.cg-hero__licence svg { display: inline-block; vertical-align: -4px; margin-inline-end: 6px; }

/* On a phone the two small photographs are 170px wide; their two-line captions
   measured covering half of each picture. The wide one keeps its caption. */
@media (max-width: 640px) {
  .cg-hero__shot--sq figcaption { display: none; }
  .cg-hero__shot figcaption { font-size: 0.74rem; padding: 5px 10px; inset-inline-start: 10px; inset-block-end: 10px; }
}