/*-- -------------------------- -->
<---             Poem            -->
<--- -------------------------- -*/

/* Alternating left/right statement blocks, scrolling down the page --
   structure borrowed from the reference Jacob shared (long-scroll,
   asymmetric statement layout), not its illustration style. Each
   block is one line of Jennifer's own poem, split into a short heading
   (the subject) and a supporting line (what it does), given its own
   moment rather than crammed into one paragraph. */
@media only screen and (min-width: 0rem) {
  #poem {
    --poemPad: clamp(1.5rem, 5vw, 4.5rem);
    padding: var(--sectionPadding);
    padding-left: var(--poemPad);
    padding-right: var(--poemPad);
    background-image: url('../images/OFFERINGSBACKGROUND.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow-x: hidden;
  }
  #poem .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 8vw, 5.5rem);
  }
  #poem .cs-row {
    position: relative;
    width: 100%;
    display: block;
  }
  /* Image sits behind the text, bled flush to the true screen edge
     (negative-offset by --poemPad, same bleed technique as desktop)
     rather than inline in the flow -- a faded background accent, not
     a second column. Alternates sides in step with the desktop
     layout's left/right pattern. */
  #poem .cs-poem-image {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    width: clamp(9rem, 42vw, 14rem);
    height: clamp(9rem, 42vw, 14rem);
    object-fit: contain;
    opacity: 0.3;
    pointer-events: none;
  }
  #poem .cs-row-1 .cs-poem-image,
  #poem .cs-row-3 .cs-poem-image {
    right: calc(var(--poemPad) * -1);
  }
  #poem .cs-row-2 .cs-poem-image,
  #poem .cs-row-4 .cs-poem-image {
    left: calc(var(--poemPad) * -1);
  }
  #poem .cs-poem-connector {
    display: none;
  }
  #poem .cs-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 38rem;
    margin: 0 auto;
    text-align: center;
  }
  #poem .cs-heading {
    font-family: var(--headingFont);
    font-weight: 400;
    line-height: 1.2em;
    font-size: clamp(1.875rem, 4.4vw, 2.75rem);
    color: var(--navy);
    margin: 0 0 0.75rem;
  }
  #poem .cs-text {
    font-family: var(--headingFont);
    font-weight: 400;
    line-height: 1.6em;
    font-size: clamp(1.875rem, 4.4vw, 2.75rem);
    color: var(--navy);
    margin: 0;
    max-width: none;
  }
  #poem .cs-support {
    font-family: var(--headingFont);
    font-weight: 400;
    line-height: 1.6em;
    font-size: clamp(1.0625rem, 1.7vw, 1.1875rem);
    color: var(--bodyTextColor);
    margin: 1.25rem 0 0;
    max-width: 100%;
    width: 100%;
  }
}

/* Tablet/Desktop - alternate sides */
@media only screen and (min-width: 48rem) {
  /* The container's own gap is replaced by margin-bottom on each row so
     a connector can sit in that space between them without adding
     extra flex-gap on top. */
  #poem .cs-container {
    gap: 0;
  }
  #poem .cs-row {
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  }
  #poem .cs-row:last-child {
    margin-bottom: 0;
  }
  /* A dashed doodle line -- same visual language as the dragonfly/
     music-note decorations elsewhere on the page -- trailing diagonally
     from the tail of one verse's text down into the next, as if
     leading the reader's eye across the gap. Runs the full row width
     (rather than sitting centred) so it can travel from the left-hand
     text column to the right-hand one (or back), matching each row's
     alternating side; the small negative margin lets it tuck slightly
     under the text above and into the text below instead of just
     sitting in the empty space between. */
  #poem .cs-poem-connector {
    width: 100%;
    height: clamp(6rem, 11vw, 10rem);
    margin: -0.5rem 0;
    display: block;
    pointer-events: none;
  }
  #poem .cs-poem-connector.cs-flip {
    transform: scaleX(-1);
  }
  #poem .cs-poem-connector svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  #poem .cs-poem-connector path {
    fill: none;
    stroke: var(--navy);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 0 16;
    opacity: 0.7;
    vector-effect: non-scaling-stroke;
  }
  #poem .cs-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
  }
  #poem .cs-row-2 {
    justify-content: flex-end;
  }
  #poem .cs-row-3 {
    justify-content: flex-start;
  }
  #poem .cs-row-4 {
    justify-content: flex-end;
  }
  /* A poem image on each row -- placed opposite the text via DOM order
     (see index.html), then justify-content:space-between spreads the
     two apart. The image gets pulled back out past the section's own
     side padding with a matching negative margin so it sits flush
     against the true edge of the screen instead of the padded
     content area. */
  #poem .cs-row-1,
  #poem .cs-row-2,
  #poem .cs-row-3,
  #poem .cs-row-4 {
    justify-content: space-between;
  }
  #poem .cs-poem-image {
    display: block;
    position: static;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    z-index: auto;
    opacity: 1;
    pointer-events: auto;
    width: clamp(16rem, 26vw, 24rem);
    height: clamp(16rem, 26vw, 24rem);
    object-fit: contain;
    flex: none;
  }
  #poem .cs-row-1 .cs-poem-image,
  #poem .cs-row-3 .cs-poem-image {
    margin-right: calc(var(--poemPad) * -1);
  }
  #poem .cs-row-2 .cs-poem-image,
  #poem .cs-row-4 .cs-poem-image {
    margin-left: calc(var(--poemPad) * -1);
  }
  #poem .cs-content {
    margin: 0;
    text-align: left;
  }
  #poem .cs-row-2 .cs-content,
  #poem .cs-row-4 .cs-content {
    text-align: right;
  }
  #poem .cs-row-2 .cs-support,
  #poem .cs-row-4 .cs-support {
    margin-left: auto;
  }
  /* Row 4's line is long enough to wrap on its own -- flow the heading
     and its supporting text together as one continuous line of text so
     "awaits your call." joins the end of the wrapped heading rather
     than falling to its own line. */
  #poem .cs-row-4 .cs-heading,
  #poem .cs-row-4 .cs-text {
    display: inline;
    margin: 0;
  }
}

/* Desktop - tighten up the section. The poem images run tall
   (clamp up to 24rem) and set each row's height, so combined with the
   row gap and full --sectionPadding the section reads as mostly empty
   space once the screen is wide enough to space everything out. Scale
   both down here without touching mobile/tablet. */
@media only screen and (min-width: 64rem) {
  #poem {
    padding-top: clamp(2rem, 3vw, 2.75rem);
    padding-bottom: clamp(2rem, 3vw, 2.75rem);
  }
  #poem .cs-row {
    margin-bottom: clamp(0.75rem, 1.75vw, 1.5rem);
  }
  #poem .cs-row:last-child {
    margin-bottom: 0;
  }
  #poem .cs-poem-connector {
    margin: 0.125rem auto 0.375rem;
  }
  #poem .cs-poem-image {
    width: clamp(9.5rem, 13vw, 12.5rem);
    height: clamp(9.5rem, 13vw, 12.5rem);
  }
  #poem .cs-row {
    gap: 1rem;
  }
}