/*
 * Page-specific styles for the "Life" page (slug: life).
 * Structured top-down and nested under body.page-life.
 */

body.page-life {

  /* ====================================================================== */
  /*  1) TOKENS / VARIABLES                                                 */
  /* ====================================================================== */

  --life-serif: "Times New Roman", serif;
  --life-heading-serif: "Georgia", serif;
  --life-muted: #555;
  --life-body-width: 640px;

  /* ====================================================================== */
  /*  2) LAYOUT WIDTH                                                       */
  /* ====================================================================== */

  main.site-main.container {
    max-width: 900px;
  }

  .ff-section--narrow {
    max-width: 800px;
  }

  /* ====================================================================== */
  /*  3) TYPOGRAPHY                                                         */
  /* ====================================================================== */

  /* Page title */
  h1 {
    font-family: var(--life-heading-serif);
    font-weight: 300;
    letter-spacing: 0.04em;
    font-size: clamp(2.8rem, 6vw, 4rem);
    line-height: 1.1;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 1.8rem;
    text-align: left;
  }

  /* Hero subheading */
  h2 {
    font-family: var(--life-heading-serif);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.02em;
    margin: 0 0 0.1rem;
  }

  /* Section headings */
  h3 {
    font-family: var(--life-heading-serif);
    font-weight: 700;
    font-size: 0.98rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin: 0 0 0.05rem; /* VERY tight */
  }

  /* Paragraphs — ZERO TOP MARGIN NOW */
  p {
    font-family: var(--life-serif);
    font-size: 0.96rem;
    line-height: 1.7;
    max-width: var(--life-body-width);
    margin: 0 0 0.9rem !important; /* bottom-only */
    padding: 0;
    color: #333;
  }

  .wp-block-column p {
    margin-bottom: 0.9rem !important;
  }

  /* any paragraph directly after an h3 spans full content width */
  h3 + p {
    max-width: 100%;
  }

  /* Lists */
  ul {
    font-family: var(--life-serif);
    font-size: 0.96rem;
    line-height: 1.7;
    padding-left: 1.1rem;
    max-width: var(--life-body-width);
  }

  /* ====================================================================== */
  /*  4) MEDIA (IMAGES + CAPTIONS)                                          */
  /* ====================================================================== */

  img {
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }

  /* Default captions */
  .wp-block-image + p {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--life-muted);
    max-width: 460px;
    margin: 0.4rem auto 0;
    text-align: center;
  }

  /* Hero image + caption */
  .life-hero .wp-block-image {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .life-hero .wp-block-image img {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
  }

  .life-hero .wp-block-image + p {
    max-width: 430px;
    text-align: center;
    margin-top: 0.35rem;
  }

  /* Keep splits under control */
  .ff-split > .wp-block-column .wp-block-image {
    max-width: 460px;
  }

  /* ====================================================================== */
  /*  5) GENERIC LAYOUT HELPERS                                             */
  /* ====================================================================== */

  .ff-split > .wp-block-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 0.75rem;
  }

  .life-hero > .wp-block-column {
    justify-content: flex-start;
  }

  .life-hero {
    align-items: flex-start;
    column-gap: 32px;
  }

  .life-hero > .wp-block-column:last-child {
    align-items: flex-end;
  }

  /* align specific split (Retreats...) to top of image */
  .life-align-top > .wp-block-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* ====================================================================== */
  /*  6) SECTION-SPECIFIC TWEAKS                                            */
  /* ====================================================================== */

  /* NEW: center heading only for text-only blocks */
  h3.life-heading-center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .life-text-center {
    text-align: center;

    h3 {
      margin-left: auto;
      margin-right: auto;
    }

    p {
      text-align: center;
    }
  }

  .life-miracle {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  .life-image-only {
    text-align: center;

    .wp-block-image {
      margin-left: auto;
      margin-right: auto;
    }
  }

  /* ====================================================================== */
  /*  7) PAGE-LEVEL SPACING                                                 */
  /* ====================================================================== */

  .ff-section {
    margin: 44px 0;
  }

  .ff-section.ff-section--narrow {
    margin: 36px auto;
  }

  .life-miracle-section {
    margin-top: 36px;
    margin-bottom: 28px;
  }

  /* ====================================================================== */
  /*  8) MOBILE BEHAVIOR                                                    */
  /* ====================================================================== */

  @media (max-width: 782px) {

    .wp-block-column {
      align-items: center !important;
    }

    .wp-block-image {
      margin-left: auto !important;
      margin-right: auto !important;
      text-align: center;
    }

    .wp-block-image img {
      margin-left: auto;
      margin-right: auto;
    }

    .life-hero .wp-block-image + p {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }
  }
}