/* ==========================================================================
   pages/ministries.css: men, women, children, music, outreach, wellness.
   ========================================================================== */

/* Photo crop for this page's header. */
.page-hero .bg-photo img { object-position: 60% 35%; }

/* ---------- A ministry: photo beside its text ---------- */
.ministry { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ministry + .ministry { margin-top: clamp(3rem, 6vw, 5rem); }
.ministry-media { position: relative; }
.ministry-media .main { width: 100%; aspect-ratio: 5/4; object-fit: cover; }
/* Photos on the cream sections are framed as prints, like the Men's and
   Women's bands: a white border, a fine edge, a soft shadow and a slight
   turn that straightens on hover. */
.ministry-media .main, .album figure {
  padding: clamp(6px, 0.8vw, 10px);
  background: #fffdf9;
  box-shadow: 0 0 0 1px rgba(36, 22, 27, 0.08), 0 2px 4px rgba(36, 22, 27, 0.12), 0 26px 46px -18px rgba(36, 22, 27, 0.4);
  transition: rotate 0.5s var(--ease-out), box-shadow 0.4s ease;
}
.ministry-media .main { rotate: -1.2deg; }
@media (hover: hover) and (pointer: fine) {
  .ministry-media .main:hover, .album figure:hover { rotate: 0deg; }
}
@media (max-width: 860px) {
  .ministry { grid-template-columns: 1fr; }
}

/* ---------- Men's Ministry band ----------
   A dark crimson band with warm light from above. The heading and theme sit
   centered over the group photo, which is shown whole in a cream print frame;
   the words and button follow beneath it. */
.men-band {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  text-align: center;
  color: #f6efe4;
  /* A brass rule marks where it begins under the dark page header. */
  border-top: 3px solid var(--brass);
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(232, 200, 115, 0.16), rgba(232, 200, 115, 0) 72%),
    linear-gradient(180deg, #3a0a1d 0%, var(--crimson-night) 60%, #1c040c 100%);
}
.men-head h2 { color: #fbf6ee; font-size: clamp(2.6rem, 1.4rem + 4vw, 4.8rem); margin-bottom: 0.4em; }
.men-theme {
  display: inline-flex; align-items: center; gap: 0.9em;
  margin: 0; padding: 0.7em 0.2em;
  border-block: 1px solid rgba(232, 200, 115, 0.4);
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; font-size: 0.92rem;
  color: var(--brass-light);
}
.men-theme::before, .men-theme::after { content: ""; width: 9px; height: 12px; flex: none; background: var(--cross-brass) center / contain no-repeat; }
.men-print {
  margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 1060px;
  padding: clamp(6px, 1vw, 12px);
  background: #fbf6ee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 40px 70px -20px rgba(0, 0, 0, 0.7);
}
.men-print img { display: block; width: 100%; height: auto; }
.men-foot { max-width: 42rem; margin: clamp(2rem, 4vw, 2.75rem) auto 0; }
.men-foot .lede { color: rgba(246, 239, 228, 0.9); }
.men-foot p:not(.lede) { color: rgba(246, 239, 228, 0.74); margin-bottom: 1.6rem; }

/* ---------- Women's Ministries band ----------
   The same shape as the men's band, in deep plum. Two prints side by side
   (the group, then the clothing closet), sized to the same height, and the
   four ministries in a row beneath with brass rules between them. */
.women-band {
  border-top-color: #b98ad6;
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(232, 200, 115, 0.14), rgba(232, 200, 115, 0) 72%),
    linear-gradient(180deg, #3a1747 0%, #261033 60%, #170a1f 100%);
}
.women-prints {
  display: flex; justify-content: center; align-items: flex-start; gap: clamp(1rem, 2.5vw, 1.75rem);
  max-width: 980px; margin: clamp(2rem, 4vw, 3rem) auto 0;
}
.women-prints .men-print { margin: 0; }
.women-print--group { flex: 600 1 0; rotate: -1.2deg; }
.women-print--closet { flex: 255 1 0; rotate: 1.8deg; }
.women-prints img { object-fit: cover; }
.women-print--group img { aspect-ratio: 600 / 457; }
/* Cropped to the group photo's height, so the two prints line up. */
.women-print--closet img { aspect-ratio: 255 / 457; object-position: 50% 40%; }
.women-list {
  list-style: none; margin: clamp(2.25rem, 4vw, 3rem) auto 0; padding: 0; max-width: 1100px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  text-align: left;
}
.women-list li { padding: 0.2rem clamp(1rem, 2vw, 1.6rem); border-left: 1px solid rgba(232, 200, 115, 0.3); }
.women-list li:first-child { border-left: 0; padding-left: 0; }
.women-list b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; line-height: 1.2; color: #fbf6ee; margin-bottom: 0.4rem; }
.women-list span { font-size: 0.98rem; line-height: 1.6; color: rgba(246, 239, 228, 0.76); }
.women-contact { margin: clamp(2rem, 3.5vw, 2.5rem) 0 0; font-size: 0.95rem; color: rgba(246, 239, 228, 0.7); }
.women-contact a { color: var(--brass-light); }
@media (max-width: 900px) {
  .women-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; }
  .women-list li:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .women-contact { text-align: left; }
  .women-prints { flex-direction: column; align-items: center; }
  .women-print--group, .women-print--closet { flex: none; width: 100%; }
  .women-print--closet { width: 62%; margin-top: -2.5rem !important; rotate: 3deg; }
  .women-print--closet img { aspect-ratio: 4 / 3; }
  .women-list { grid-template-columns: minmax(0, 1fr); }
  .women-list li { border-left: 0; padding: 1rem 0 0; border-top: 1px solid rgba(232, 200, 115, 0.3); }
}

/* A ruled list of items, each with a heading and a short note. */
.ticks { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.ticks li { padding: 0.9rem 0; border-top: 1px solid var(--line); }
.ticks li b { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; display: block; line-height: 1.2; margin-bottom: 0.35rem; }
.ticks li span { color: var(--ink-soft); font-size: 1rem; }

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.tag { font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 600; padding: 0.35em 0.8em; border: 1px solid var(--ink); border-radius: 999px; }
.tag.soon { border-style: dashed; color: var(--ink-soft); border-color: var(--ink-soft); }

/* ---------- Outreach photo collage ---------- */
.album { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 215px; gap: clamp(1rem, 2vw, 1.5rem); }
.album figure { margin: 0; overflow: hidden; position: relative; }
.album figure:nth-child(odd) { rotate: -1.5deg; }
.album figure:nth-child(even) { rotate: 1.5deg; translate: 0 0.8rem; }
.album img { width: 100%; height: 100%; object-fit: cover; }
.album .w3 { grid-column: span 3; }
.album .h2 { grid-row: span 2; }
@media (max-width: 860px) {
  .album { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .album .w3 { grid-column: span 1; }
  .album .h2 { grid-row: span 2; }
}

/* ---------- Wellness: health cards ----------
   Each card wears its awareness-ribbon color. */
.health-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.health-card {
  --ribbon: var(--crimson);
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 1.3rem;
  background: #fffdf9; border: 1px solid var(--line); border-top: 5px solid var(--ribbon);
  padding: 1.4rem;
  box-shadow: 0 12px 28px rgba(36, 22, 27, 0.06);
}
.health-card--colorectal { --ribbon: #1f5fae; }
.health-card--kidney { --ribbon: #e8732a; }
.health-card--myeloma { --ribbon: #7d1a35; }
.health-card--diabetes { --ribbon: #24515c; }
.health-img { width: 132px; height: 132px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); }
.health-body { display: flex; flex-direction: column; min-width: 0; }
.health-tag {
  display: inline-flex; align-items: center; gap: 0.5em; width: max-content; max-width: 100%;
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; font-size: 0.78rem;
  color: var(--ribbon);
}
.health-tag::before {
  /* little awareness ribbon */
  content: ""; width: 10px; height: 14px; flex: none; background: var(--ribbon);
  clip-path: polygon(50% 0, 100% 35%, 70% 100%, 50% 72%, 30% 100%, 0 35%);
}
.health-card h3 { font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.7rem); margin: 0.4rem 0 0.5rem; }
.health-card p { font-size: 1rem; color: var(--ink-soft); margin-bottom: 0.9rem; }
.health-facts { margin: 0 0 1.1rem; display: grid; gap: 0.6rem; }
.health-facts div { padding-left: 0.85rem; border-left: 2px solid color-mix(in srgb, var(--ribbon) 35%, transparent); }
.health-facts dt { font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; font-size: 0.76rem; color: var(--ink); }
.health-facts dd { margin: 0.1rem 0 0; font-size: 0.96rem; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
.health-link {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.7rem; min-height: 44px;
  padding: 0.55rem 1rem; border-radius: var(--radius);
  background: var(--ribbon); color: #fff; text-decoration: none;
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; font-size: 0.86rem;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.health-link:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.1); }
.health-link span { font-size: 0.78rem; letter-spacing: 0.1em; opacity: 0.85; padding-left: 0.7rem; border-left: 1px solid rgba(255, 255, 255, 0.4); }
.health-note { margin: 1.4rem 0 0; font-size: 0.95rem; font-style: italic; color: var(--ink-soft); }
@media (max-width: 960px) { .health-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .health-card { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.1rem; }
  /* Show the whole flyer rather than cropping it into a strip. */
  .health-img { width: 100%; height: 220px; object-fit: contain; background: var(--paper-2); padding: 0.6rem; }
}