/* =====================================================================
   Milwaukee REIA Mentoring, extra styles for the core pages
   (how it works, your investment, about us, testimonials, success
   stories, monthly masterminds, meetups, privacy, bryan, mentoring
   application).

   Everything here is what site.css does not already cover. Same phone
   first order as site.css: the plain rules are the phone, the block at
   the bottom of the file is tablet and desktop (>= 768px).
   ===================================================================== */

/* ---------------------------------------- full-bleed photo band with copy */

/* The dark photograph at the top of /how-it-works and /your-investment. */
.photo-hero {
  position: relative;
  padding-block: 100px;
  background: #333 center / cover no-repeat;
  color: var(--white);
  isolation: isolate;
}
.photo-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(0, 0, 0, .59);
}
.photo-hero__title { color: var(--white); font-size: 48px; line-height: 1; }
.photo-hero__text { max-width: 237px; margin: 10px 0 0; }

/* The same idea with a single heading, used on /testimonials. */
.photo-title {
  position: relative;
  padding-block: 70px;
  background: #333 center / cover no-repeat;
  color: var(--white);
  isolation: isolate;
}
.photo-title::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(0, 0, 0, .4);
}
.photo-title__heading { color: var(--white); font-size: 28px; line-height: 1.5; }

/* A photograph on its own, no words: the top of /meetups and
   /mentoring-masterminds. */
.photo-band {
  height: 186px;
  background: #333 center / cover no-repeat;
}

/* ------------------------------------------------- centred section heading */

/* Blue heading plus a black standfirst, centred: /meetups,
   /mentoring-masterminds and /mentoring-application. */
.lede { text-align: center; }
.lede__title { color: var(--blue); font-size: 28px; line-height: 1.5; }
.lede__sub {
  margin: 10px 0 0;
  font: 300 18px/1.5 var(--font-head);
  color: var(--ink-strong);
}
.lede__text { margin: 14px 0 0; }

/* ------------------------------------------------------- plain document page */

/* /privacy: the policy text, full width of the content column. */
.doc > * { margin-block: 8px; }
.doc__title { color: var(--blue); font-size: 28px; line-height: 1.2; }
.doc h2 { font-size: 20px; line-height: 1.5; margin-block: 16px 8px; }
.doc h3 { font-size: 16px; line-height: 1.5; font-style: italic; margin-block: 16px 8px; }
.doc p { margin: 0; }
.doc a { color: var(--blue-link); }

/* ----------------------------------------------------- booking page (/bryan) */

/* The live page sets this heading to white on a white background, so it is
   invisible. It is rebuilt in the brand blue so the page has a readable
   title; see the notes in README if the old behaviour is ever wanted back. */
.booking { padding-block: 8px 10px; text-align: center; }
.booking__title { color: var(--blue); font-size: 45px; line-height: 1.5; }
.booking__frame {
  display: block;
  width: 100%;
  height: 600px;
  margin-top: 10px;
  border: 0;
}

/* ----------------------------------------------------------- about us */

.about { padding-block: 30px 0; }
.about__h { color: var(--blue); font-size: 28px; line-height: 1.5; margin: 10px 0; }
.about__rule { margin: 30px 0 0; border: 0; border-top: 2px solid grey; }
.about__h--tight { margin: 30px 0 10px; }
.about-copy p { line-height: 1.75; margin: 0 0 22px; }
.about-copy p:last-child { margin-bottom: 0; }

/* the four coaches */
.mentors { padding-block: 0; }
.mentor { display: grid; padding-bottom: 50px; }
.mentor__photo { width: 250px; margin-inline: auto; }
.mentor__name { color: #005f90; font: 700 25px/1.15 var(--font-head); margin: 10px 0 4px; }
.mentor .mentor__role { color: var(--blue); font: 700 16px/1.5 var(--font-head); margin: 0 0 12px; }
.mentor p { font-size: 14px; line-height: 21px; color: var(--ink-strong); margin: 0 0 12px; }
.mentor:last-child { padding-bottom: 150px; }

/* --------------------------------------------------------------- accordion */

/* The five stages on /how-it-works. Plain <details>, no script. */
.accordion { margin-top: 24px; }
.accordion__item { border: 0; margin-bottom: 10px; background: #f2f2f2; }
.accordion__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  font: 700 15px/1.5 var(--font-body);
  color: var(--ink-strong);
  cursor: pointer;
  list-style: none;
}
.accordion__head::-webkit-details-marker { display: none; }
.accordion__head h3 { font: inherit; color: inherit; margin: 0; flex: 1; }
.accordion__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 31px; height: 31px;
  margin-right: 8px;
  border-radius: 50%;
  background: #005f90;
  color: var(--white);
}
.accordion__mark svg { width: 17px; height: 17px; fill: currentColor; }
.accordion__item[open] .accordion__mark { transform: rotate(180deg); }
.accordion__body { padding: 18px 20px; color: var(--ink-strong); }
.accordion__body p { margin: 0 0 1.5em; }
.accordion__body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------- compact resource card grid */

/* /how-it-works: the nine resource cards. Same pill as .card but tighter,
   with a 60px icon and a bigger title. */
.card--compact { padding: 30px; }
.card--compact .card__icon { width: 60px; height: 60px; margin: 10px auto 16px; }
.card--compact .card__title { font-size: 18px; line-height: 1.2; margin-bottom: 20px; }

/* ------------------------------------------- icon list in the grey band */

/* /how-it-works: "Time & Hard Work", "Coaching Fees", "Marketing Budget". */
.icon-list { display: grid; gap: 13px; }
.icon-list__item { display: grid; grid-template-columns: 108px 1fr; gap: 10px; align-items: start; }
.icon-list__badge {
  display: grid;
  place-items: center;
  width: 100px; height: 100px;
  margin: 10px 0;
  border-radius: 50%;
  background: var(--white);
}
.icon-list__badge img { width: 50px; height: 50px; }
.icon-list__title { font-size: 16px; line-height: 1.5; margin-bottom: 2px; }
.icon-list__item p { font-size: 15px; line-height: 1.5; }

/* --------------------------------------------------- video and quote rows */

/* /testimonials: six bands, a video on one side and the quote on the other.
   On a phone the video is always on top. */
.vid { display: grid; }
.vid__media { order: -1; padding: 10px 15px; }
.vid__text { padding: 30px 15px; }
.vid__rule {
  width: 80px;
  margin: 10px 0 23px;
  border: 0;
  border-top: 3px solid var(--blue-link);
}
.vid__name { font-size: 25px; line-height: 1.5; margin-bottom: 12px; }
.vid__quote { font-size: 15px; line-height: 2; color: #a09c9c; }
.vid__frame { display: block; width: 100%; height: 360px; border: 0; }

.vid--dark {
  background: linear-gradient(90deg, #427bca 53%, #49aedf 100%);
  color: var(--white);
}
.vid--dark .vid__rule { border-top-color: var(--white); }
.vid--dark .vid__name { color: var(--white); }
.vid--dark .vid__quote { color: var(--white); }

/* ------------------------------------------------------------- galleries */

/* /mentoring-masterminds and /meetups: two columns of pictures. */
.gal { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.gal figure { margin: 0; }
.gal img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gal figcaption {
  padding: 15px 20px;
  background: rgba(255, 255, 255, .9);
  color: #333;
  font-size: 14px;
}

/* the second masterminds gallery: whole pictures, caption centred under.
   From tablet up the cell is square and the caption sits over its foot,
   which is what the live page does. */
.gal--whole { gap: 10px; }
.gal--whole img { aspect-ratio: auto; }
.gal--whole figcaption { padding: 15px 5px; background: none; text-align: center; }

/* /meetups: pictures keep their own shape, and every cell in a row is the
   same height so the captions under them line up */
.gal--fit { gap: 5px; align-items: stretch; }
.gal--fit figure { display: flex; flex-direction: column; }
.gal--fit img { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; object-fit: contain; }
.gal--fit figcaption {
  max-width: 240px;
  margin-inline: auto;
  padding: 20px 5px 25px;
  background: none;
  color: var(--blue-banner);
  font: 700 25px/1.12 var(--font-head);
  text-align: center;
}

/* ------------------------------------------------- success story portraits */

.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}
.story-grid figure {
  position: relative;
  margin: 0 0 10px;
  width: 100%;
  max-width: 340px;
  text-align: center;
}
.story-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
/* the name sits on top of the portrait, as it does on the live site */
.story-grid figcaption {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  padding: 10px;
  border-radius: 50%;
  color: var(--white);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
.story-grid .story-grid__name {
  display: block;
  font: 700 25px/1.12 var(--font-head);
  color: var(--white);
}
.story-grid .story-grid__when { display: block; font-size: 12px; line-height: 18px; }
.story-grid a { color: inherit; text-decoration: none; display: block; }

/* ------------------------------------------------------------- stat cards */

.stat-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.stat {
  padding: 20px 16px 16px;
  background: #f5f5f5;
  border-radius: var(--radius);
  text-align: center;
}
.stat__label { margin: 20px 0 4px; font-weight: 700; }
.stat__value {
  margin: 0;
  font: 800 48px/1.5 var(--font-head);
  color: var(--blue);
}
.stat__note { margin: 9px 0 12px; font-size: 12px; line-height: 18px; }

/* --------------------------------------------------- student deal highlight */

.deal { display: grid; gap: 20px; }
.deal__title { color: var(--white); font-size: 36px; line-height: 1.2; }
.deal__facts { margin: 18px 0 0; }
.deal__facts p { margin: 0; font-size: 15px; line-height: 2; }
.deal__text { margin-top: 20px; font-size: 13px; line-height: 1.5; }
.deal__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.deal__pics figure { position: relative; margin: 0; }
.deal__pics img { width: 100%; aspect-ratio: 256 / 250; object-fit: cover; }
.deal__pics figcaption {
  position: absolute;
  left: 14px; bottom: 12px;
  font: 700 14px/1.15 var(--font-body);
  color: var(--white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* ------------------------------------------- call to action on a flat blue */

/* Same shape as .cta-band in site.css, but a flat deep blue rather than the
   gradient with a dark wash. Used at the foot of /about-us and
   /success-stories. */
.cta-flat {
  padding-block: 15px;
  background: var(--blue-dark);
  color: var(--white);
  text-align: center;
}
.cta-flat__title { color: var(--white); font-size: 28px; line-height: 1.2; margin: 10px 0; }
.cta-flat .btn { margin-top: 20px; }

/* The gradient version, without the dark wash: /how-it-works and
   /your-investment. */
.cta-gradient {
  padding-block: 15px;
  background: linear-gradient(90deg, var(--blue-dark) 20%, var(--blue) 100%);
  color: var(--white);
  text-align: center;
}
.cta-gradient__title { color: var(--white); font-size: 28px; line-height: 1.2; }
.cta-gradient .btn { margin-top: 20px; }

/* ------------------------------------------------------- odds and ends */

/* the eyebrow + big blue heading pair above the three quote cards */
.quote-head { text-align: center; }
.quote-head__eyebrow { margin: 0 0 8px; font-weight: 700; text-transform: uppercase; }
.quote-head__title { color: var(--blue); font-size: 36px; line-height: 1; }

/* a fixed-width pill, the shape the live site uses for APPLY TODAY */
/* .btn--wide now lives in site.css, next to the other button modifiers. */

/* /mentoring-application. The 600px gap under the button on a phone is
   what the live page does; it is kept so the two look the same. */
/* The old phone page left a 600 pixel empty gap under the button, a stray
   margin from the page builder. The owner asked for the phone experience to
   look right, so this section closes with ordinary section padding. */
.apply { padding-block: 15px var(--section-y); }
.apply .lede__title { line-height: 1; }
.apply .lede__text { margin-top: 22px; }
.apply .apply__action { margin: 27px 0 0; }

/* the thin grey line on /about-us is 2px on the live site */
.rule--thick { border-top-width: 2px; border-top-color: grey; }

/* ================================================== tablet and desktop */
@media (min-width: 768px) {
  .photo-hero { padding-block: 129px; }
  .photo-hero--tall { padding-block: 156px; }
  .photo-hero__title { font-size: 72px; line-height: 1; }
  .photo-hero__text { max-width: 535px; margin-top: 8px; }

  .photo-title { padding-block: 100px; }
  .photo-title__heading { font-size: 50px; line-height: 1; }

  .photo-band { height: 386px; }

  .lede__title { font-size: 50px; line-height: 1; }
  .lede__sub { font-size: 25px; margin-top: 8px; }
  .lede__text { margin-top: 25px; }

  .doc__title { font-size: 50px; }
  .doc h2 { font-size: 25px; margin-block: 18px 10px; }
  .doc h3 { font-size: 18px; margin-block: 18px 10px; }

  .booking { padding-block: 50px 150px; }
  .booking__title { font-size: 72px; line-height: 1.15; }

  .about { padding-block: 100px 0; }
  .about__h { font-size: 50px; }
  .about__rule { margin-top: 73px; }
  .about__h--tight { margin: 91px 0 13px; }
  .about-copy p { margin-bottom: 28px; }

  .mentor {
    grid-template-columns: 1fr 2fr;
    padding-block: 50px;
    align-items: start;
  }
  .mentor__photo { width: 300px; max-width: calc(100% - 15px); margin-inline: 0; }
  .mentor__body { padding-left: 20px; }
  .mentor__name { font-size: 35px; }
  .mentor .mentor__role { font-size: 20px; }

  .accordion__head { font-size: 18px; line-height: 1.5; }
  .accordion__mark { width: 36px; height: 36px; }
  .accordion__mark svg { width: 20px; height: 20px; }

  .card--compact .card__icon { margin: 10px auto 16px; }
  .card--compact .card__title { font-size: 25px; line-height: 1.2; }

  .icon-list__item { grid-template-columns: 147px 1fr; }
  .icon-list__title { font-size: 20px; line-height: 1.5; }
  .icon-list__item p { font-size: 16px; }

  .vid { grid-template-columns: 1fr 1fr; }
  .vid--light { padding-block: 42.5px; }
  .vid--dark { padding-block: 24px; }
  .vid__media { order: 0; }
  .vid__text { padding: 100px; }
  /* the first band sits tight to the photograph above it */
  .vid--first { padding-block: 0; }
  .vid--first .vid__text { padding-block: 50px; }
  .vid--first .vid__media { padding-bottom: 110px; }
  .vid__rule { width: 105px; margin-bottom: 23px; }
  .vid__name { font-size: 35px; line-height: 1.5; margin-bottom: 21px; }
  .vid__quote { max-width: 396px; font-size: 16px; line-height: 2; }
  /* the video keeps the exact offsets the live page gives it */
  .vid--light .vid__media { padding: 119px 58px 10px 22px; }
  .vid--dark .vid__media { padding: 154px 22px 26px 87px; }
  .vid--light.vid--first .vid__media { padding-bottom: 110px; }
  .vid--dark .vid__rule { margin-bottom: 65px; }

  .gal--fit figcaption { font-size: 35px; }
  .gal--whole { gap: 10px; }
  .gal--whole figure { position: relative; }
  .gal--whole img { aspect-ratio: 1; object-fit: contain; }
  .gal--whole figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 10px;
    padding: 0 5px;
  }
  .gal--fit { gap: 5px; }

  .story-grid { grid-template-columns: repeat(4, 1fr); }
  .story-grid figure { margin: 0; padding: 10px; max-width: none; }
  .story-grid img { height: 211px; aspect-ratio: auto; }
  .story-grid figcaption { inset: 10px; background: rgba(0, 0, 0, .3); }
  .story-grid .story-grid__name { font-size: 18px; line-height: 1.22; }

  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .stat { padding: 32px; }
  .stat__label { margin-bottom: 4px; }
  .stat__value { font-size: 60px; }

  .deal { grid-template-columns: 400fr 560fr; gap: 40px; align-items: start; }
  .deal__title { font-size: 50px; line-height: 1.2; padding-top: 25px; }
  .deal__facts p { font-size: 16px; }
  .deal__text { font-size: 16px; line-height: 1.5; }
  .deal__pics { gap: 12px; }

  .cta-flat, .cta-gradient { padding-block: 100px; }
  .cta-flat__title, .cta-gradient__title { font-size: 50px; line-height: 1.2; margin: 32px 0 19px; }
  .cta-flat .btn, .cta-gradient .btn { margin-top: 30px; }

  .quote-head__title { font-size: 50px; }

  .apply { padding-block: 113px 180px; }
  .apply .apply__action { margin: 66px 0 0; }

  .about-copy p { margin-bottom: 28px; }
}

/* ------------------------------------------------- phone side padding

   The site gutter is 15 pixels on a phone, which is what the live pages
   use almost everywhere. /your-investment sets its copy 20 pixels in, so
   it says so here rather than moving the gutter for the whole site. */
@media (max-width: 767px) {
  .page-your-investment #main .container { padding-inline: 20px; }
}

/* =====================================================================
   Section wrappers for the individual pages
   ===================================================================== */

/* the 40px blue heading used on /how-it-works and /your-investment */
.head-40 { color: var(--blue); font-size: 32px; line-height: 1.1; }

/* --- /meetups and /mentoring-masterminds ------------------------------ */

.gal-section { padding-block: 30px; }
/* the two gallery pages set their title in the light-bold 600 weight */
.gal-section .lede__title { font-weight: 600; text-align: left; }
.gal-section .gal { margin-top: 20px; }
.gal-section .gal + .gal { margin-top: 20px; }

/* --- /how-it-works ---------------------------------------------------- */

.stages { padding-block: 40px 0; }
.stages__intro { margin: 10px 0 0; line-height: 1.728; }
.resources { padding-block: 40px; }
.resources__intro { margin: 10px 0 0; }
.card-grid--tight { margin-top: 30px; gap: 15px; }

.invest-band { background: var(--gray-100); padding-block: 40px; }
.invest { display: grid; }
.invest__icons { order: 2; }
.invest__body { order: 1; }
.invest__action { order: 3; margin: 20px 0 0; text-align: center; }

/* --- /your-investment ------------------------------------------------- */

.intro-band { padding-block: 40px 15px; }
.commitments { padding-block: 20px 40px; }
.pair { display: grid; gap: 20px; align-items: center; }
.pair--media-first .pair__media { order: -1; }
.pair + .pair { margin-top: 30px; }
.pair__title { color: var(--blue); font-size: 19px; line-height: 1; margin-bottom: 14px; }
.pair__media img { width: 100%; height: auto; margin-inline: auto; }
.pair__body p { margin: 0; }

.offer { background: #f1f1f1; padding-block: 30px 40px; }
.offer__intro { margin: 10px 0 0; }
.card-grid--offer { margin-top: 23px; gap: 20px 10px; }

.quotes { padding-block: 40px; }
.quotes .quote-grid { margin-top: 15px; }
.quotes__action { margin: 30px 0 0; text-align: center; }

/* --- /success-stories -------------------------------------------------- */

.container-wide {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 20px;
}
.stories-top { padding-block: 40px 0; }
.stories-top__title { color: var(--blue); font-size: 36px; line-height: 1; text-align: center; }
.stories-top__intro { max-width: 672px; margin: 15px auto 0; text-align: center; }

.stories { padding-block: 15px; }
.stories .story-grid { margin-top: 10px; }

.impact { padding-block: 40px; }
.impact__intro { margin: 10px 0 0; text-align: center; }
.impact .stat-grid { margin-top: 25px; }

.deal-band { background: var(--blue-dark); color: var(--white); padding-block: 40px; }
.deal__action { margin: 24px 0 0; }

/* =============================================== tablet and desktop */
@media (min-width: 768px) {
  .head-40 { font-size: 40px; line-height: 1.1; }

  .gal-section { padding-block: 70px 30px; }
  .gal-section .lede__title { text-align: center; }
  .gal-section .gal { margin-top: 10px; }
  .gal-section .gal + .gal { margin-top: 20px; }
  .gal-section .gal:last-child { margin-bottom: 50px; }

  .stages { padding-block: 100px 0; }
  .stages__intro { margin-top: 12px; }
  .resources { padding-block: 100px; }
  .resources__intro { margin-top: 12px; }
  .card-grid--tight { margin-top: 50px; }

  .invest-band { padding-block: 100px; }
  .invest {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .invest__icons { order: 0; grid-column: 1; grid-row: 1 / span 2; padding-right: 40px; }
  .invest__body { order: 0; grid-column: 2; grid-row: 1; padding-left: 14px; }
  .invest__action { order: 0; grid-column: 2; grid-row: 2; padding-left: 14px; margin-top: 35px; text-align: left; }

  .intro-band { padding-block: 110px 15px; }
  .intro-band p { margin-top: 12px; }
  .commitments { padding-block: 75px 100px; }
  .pair { grid-template-columns: 1fr 1fr; gap: 0; }
  .pair + .pair { margin-top: 0; }
  /* the live page starts a fresh band before the last pair */
  .commitments .pair:last-child { margin-top: 60px; }
  .pair--media-first .pair__media { order: 0; }
  .pair__body { padding-block: 40px; padding-right: 15px; }
  .pair--media-first .pair__body { padding-left: 40px; padding-right: 0; }
  .pair__media { padding-block: 20px; padding-left: 40px; }
  .pair--media-first .pair__media { padding-left: 0; padding-right: 40px; }
  .pair__title { font-size: 24px; line-height: 1; margin-bottom: 16px; }
  .pair__media img { max-width: 440px; }
  .pair--sm .pair__media img { max-width: 400px; }

  .offer { padding-block: 75px 100px; }
  .offer__intro { margin-top: 12px; }
  .card-grid--offer { margin-top: 23px; gap: 20px 10px; }
  .card-grid--offer .card { padding: 50px 30px 58px; }
  .card-grid--offer .card__icon { width: 60px; height: 60px; margin: 10px auto 16px; }
  .card-grid--offer .card__title { font-size: 22px; line-height: 1.1; margin-bottom: 20px; }

  .quotes { padding-block: 100px; }
  .quotes .quote-grid { margin-top: 15px; }
  .quotes__action { margin-top: 40px; }

  .stories-top { padding-block: 110px 0; }
  .stories-top__title { font-size: 50px; }

  .stories { padding-block: 15px; }
  .stories .story-grid { margin-top: 32px; padding: 10px; }

  .impact { padding-block: 120px 100px; }
  .impact .stat-grid { margin-top: 33px; }

  .deal-band { padding-block: 100px; }
  .deal__action { margin-top: 24px; }
}

/* ============================== desktop only: hover captions (>= 1025px) */
@media (min-width: 1025px) {
  /* the meetup pictures sit in an even square cell and the caption only
     appears when you point at one, the way the live page behaves */
  .gal--fit img { flex: none; aspect-ratio: 473 / 480; object-fit: contain; }
  .gal--fit figure { position: relative; display: block; }
  .gal--fit figcaption {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .45);
    visibility: hidden;
    opacity: 0;
  }
  .gal--fit figure:hover figcaption { visibility: visible; opacity: 1; }

  .story-grid figcaption { visibility: hidden; opacity: 0; }
  .story-grid a:hover figcaption,
  .story-grid a:focus-visible figcaption { visibility: visible; opacity: 1; }
}

/* the heading over the six offer cards is set on a 60px line on the live site */
@media (min-width: 768px) {
  .offer .head-40 { line-height: 1.5; }
}