/* PORCH — the mobile walk, second pass.
   Loaded AFTER porch-walk.css. Everything lives inside the walk breakpoint,
   so the desktop build is untouched. Adds four things:

     A  the Sacramento skyline on the horizon of every walk screen
     B  the beam rising out of the city, breathing slowly
     C  a readable scripture reference + the station rail
     D  the constellation station: Christ at the centre, light ringing out

   plus the closing column ("Why PORCH?") on the home walk. */

@media (max-width: 820px){

  /* only the page you're on is lit. The desktop sheets style .cta as a filled
     amber button; inside the walk menu it is just another rung on the railing. */
  .riverlight [data-page] .pwalk-menu a.cta,
  .pwalk-menu a.cta{
    background: none;
    color: #F4EFE3;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.32rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    border: 0;
    border-bottom: 1px solid rgba(244,239,227,.09);
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    min-height: 52px;
  }
  .riverlight [data-page] .pwalk-menu a[aria-current="page"],
  .pwalk-menu a[aria-current="page"]{ color: #F4C97A; }

  /* ---- A + B: the city and the beam -------------------------------- */

  .pwalk-city{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 1;
    height: min(29svh, 230px);
    pointer-events: none;
  }
  .pwalk-city img{
    position: absolute;
    left: -6%; bottom: 0;
    width: 112%; height: auto;
    opacity: .5;
    -webkit-mask-image: linear-gradient(#000 56%, transparent);
            mask-image: linear-gradient(#000 56%, transparent);
  }
  .pwalk-city s{
    position: absolute;
    left: 50%; bottom: 36%;
    transform: translateX(-50%);
    display: block;
  }
  .pwalk-city s.beam{
    width: 150px; height: 330px;
    background: linear-gradient(0deg, rgba(241,212,160,.30), rgba(241,212,160,.06) 46%, transparent 78%);
    filter: blur(16px);
    animation: pwalk-rise 7s ease-in-out infinite;
  }
  .pwalk-city s.core{
    width: 14px; height: 312px;
    background: linear-gradient(0deg, rgba(247,228,188,.42), transparent 72%);
    filter: blur(5px);
  }
  @keyframes pwalk-rise{
    0%, 100%{ opacity: .42; transform: translateX(-50%) translateY(6%) scaleY(.94); }
    50%     { opacity: .9;  transform: translateX(-50%) translateY(0) scaleY(1); }
  }
  /* the city is brightest where the walk begins */
  .pwalk-s.center ~ .pwalk-city img{ opacity: .62; }

  /* the horizon needs room: nothing sits in the skyline */
  .pwalk-s{ padding-bottom: 128px; }

  /* ---- the acronym reads as the station's name --------------------- */

  .pwalk-s .pwalk-kicker{
    margin-bottom: 8px;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: #F4C97A;
  }
  /* the letter mark gives up the height the name needs */
  .pwalk-s img.mark{ height: 34px; margin-bottom: 10px; }
  .pwalk-s h2{ font-size: 1.95rem; }

  /* ---- C: reference + rail ----------------------------------------- */

  .pwalk-ref{
    font-size: .69rem;
    letter-spacing: .12em;
    color: rgba(244,239,227,.62);
    text-transform: uppercase;
  }
  .pwalk-rail s.on{ box-shadow: 0 0 10px rgba(232,162,59,.6); }

  /* the reference becomes a pill you can tap for the words themselves */
  .pwalk-ref-row{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
  }
  .pwalk-s.center .pwalk-ref-row{ justify-content: center; }
  .pwalk-ref-pill{
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    min-height: 44px;
    border: 1px solid rgba(230,187,121,.34);
    border-radius: 2px;
    background: rgba(232,162,59,.07);
    color: #F4C97A;
    font-family: 'Karla', system-ui, sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    transition: background .18s ease, border-color .18s ease, transform .12s ease;
  }
  /* A reference we can actually show reads as an open book you can tap;
     one we can only link out to keeps the plain arrow. */
  .pwalk-ref-pill.has-verse::before{
    content: '';
    width: 13px; height: 11px;
    flex: 0 0 auto;
    background: currentColor;
    opacity: .85;
    -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Cpath d='M13 4.6C10.8 2.4 7.6 1.6 1.2 1.6v17c6.4 0 9.6.8 11.8 3 2.2-2.2 5.4-3 11.8-3v-17c-6.4 0-9.6.8-11.8 3zm0 0v17' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22'%3E%3Cpath d='M13 4.6C10.8 2.4 7.6 1.6 1.2 1.6v17c6.4 0 9.6.8 11.8 3 2.2-2.2 5.4-3 11.8-3v-17c-6.4 0-9.6.8-11.8 3zm0 0v17' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .pwalk-ref-pill.has-verse::after{
    content: 'Read';
    font-size: .58rem;
    letter-spacing: .16em;
    opacity: .6;
  }
  .pwalk-ref-pill:not(.has-verse)::after{
    content: ' \2197';
    opacity: .7;
  }
  .pwalk-ref-pill:active{ background: rgba(232,162,59,.2); transform: scale(.97); }
  .pwalk-ref-pill.is-open{
    background: rgba(232,162,59,.22);
    border-color: rgba(244,201,122,.8);
  }

  /* ---- a photograph that carries a whole screen -------------------- */
  .pwalk-s.pwalk-photo{
    position: relative;
    padding: 0;
    justify-content: flex-end;
    overflow: hidden;
  }
  .pwalk-s.pwalk-photo > img{
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 45%;
  }
  .pwalk-s.pwalk-photo .cap{
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 80px 26px calc(46px + env(safe-area-inset-bottom));
    background: linear-gradient(0deg, rgba(6,11,16,.95) 30%, rgba(6,11,16,.72) 62%, rgba(6,11,16,0));
  }
  .pwalk-s.pwalk-photo .cap h2{ margin: 6px 0 8px; }
  .pwalk-s.pwalk-photo .cap .body{ margin: 0; }

  .pwalk-verse-backdrop{
    position: fixed; inset: 0;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    background: rgba(5,9,14,.72);
    backdrop-filter: blur(2px);
    transition: opacity .28s ease, visibility .28s;
  }
  .pwalk-verse-backdrop.open{ opacity: 1; visibility: visible; }
  .pwalk-verse{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 21;
    max-height: 76svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 26px 22px calc(26px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(230,187,121,.4);
    border-radius: 14px 14px 0 0;
    background: linear-gradient(180deg, #102028, #0A151C);
    box-shadow: 0 -18px 50px rgba(0,0,0,.5);
    transform: translateY(101%);
    visibility: hidden;
    transition: transform .34s cubic-bezier(.22,.9,.3,1), visibility .34s;
  }
  /* The grab handle is what tells a thumb this panel came up from the bottom. */
  .pwalk-verse::before{
    content: '';
    position: absolute;
    top: 9px; left: 50%;
    width: 38px; height: 4px;
    transform: translateX(-50%);
    border-radius: 3px;
    background: rgba(244,239,227,.22);
  }
  .pwalk-verse.open{ transform: translateY(0); visibility: visible; }
  @media (prefers-reduced-motion: reduce){
    .pwalk-verse, .pwalk-verse-backdrop{ transition-duration: .01ms; }
  }
  .pwalk-verse-close{
    float: right;
    min-height: 44px; min-width: 62px;
    padding: 8px 12px;
    border: 1px solid rgba(230,187,121,.4);
    border-radius: 2px;
    background: rgba(232,162,59,.06);
    color: #F4C97A;
    font-family: inherit;
    font-size: .66rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
  }
  .pwalk-verse-ref{
    margin: 10px 0 12px;
    color: #E8A23B;
    font-size: .66rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
  }
  .pwalk-verse-body{
    font-size: 1rem;
    line-height: 1.68;
    color: #EFE9DC;
    text-wrap: pretty;
  }
  .pwalk-verse-body.is-quote{
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.16rem;
    line-height: 1.6;
  }
  .pwalk-verse-foot{
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(230,187,121,.18);
    color: rgba(244,239,227,.6);
    font-size: .74rem;
    letter-spacing: .04em;
  }
  .pwalk-verse-link{ color: #F4C97A; text-decoration: underline; text-underline-offset: 3px; }

  /* ---- D: the constellation station -------------------------------- */

  .pwalk-const{
    position: relative;
    width: min(304px, 82vw);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    flex: 0 0 auto;
  }
  .pwalk-const .wires{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
  }
  .pwalk-const .wires path{
    fill: none;
    stroke: #decca7;
    stroke-width: .35;
    stroke-linecap: round;
    opacity: .4;
  }
  .pwalk-const .ripples{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .pwalk-const .ripples s{
    position: absolute;
    left: 50%; top: 50%;
    width: 78%; height: 78%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(.12);
    background: radial-gradient(circle, transparent 54%, rgba(244,201,122,.34) 73%, rgba(244,201,122,.05) 86%, transparent 94%);
    filter: blur(2.5px);
    opacity: 0;
    animation: pwalk-ripple 7s cubic-bezier(.2,.6,.3,1) infinite;
  }
  .pwalk-const .ripples s:nth-child(2){ animation-delay: 2.3s; }
  .pwalk-const .ripples s:nth-child(3){ animation-delay: 4.6s; }
  @keyframes pwalk-ripple{
    0%  { transform: translate(-50%,-50%) scale(.12); opacity: 0; }
    12% { opacity: .5; }
    100%{ transform: translate(-50%,-50%) scale(1); opacity: 0; }
  }

  .pwalk-star{
    position: absolute;
    width: 0; height: 0;
    color: inherit;
    text-decoration: none;
  }
  .pwalk-star > s{
    position: absolute;
    left: -3px; top: -3px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #F4EFE3;
    box-shadow: 0 0 10px 2px rgba(244,239,227,.5);
    animation: pwalk-twinkle 6s ease-in-out infinite;
  }
  .pwalk-star > span{
    position: absolute;
    left: 0; top: 13px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }
  .pwalk-star b{
    font-family: 'EB Garamond', Georgia, serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1;
    color: rgba(244,239,227,.94);
  }
  .pwalk-star i{
    font-style: normal;
    font-size: .63rem;
    letter-spacing: .12em;
    color: rgba(244,239,227,.62);
  }
  @keyframes pwalk-twinkle{
    0%, 100%{ opacity: .45; }
    50%     { opacity: 1; }
  }

  .pwalk-star.centre > s{
    left: -5px; top: -5px;
    width: 10px; height: 10px;
    background: #FFF6E4;
    box-shadow: 0 0 18px 5px rgba(244,201,122,.8), 0 0 46px 16px rgba(232,162,59,.28);
    animation: none;
  }
  .pwalk-star.centre > span{ top: 17px; gap: 7px; }
  .pwalk-star.centre b{
    font-size: 1.62rem;
    color: #FFF0D4;
    text-shadow: 0 0 26px rgba(244,201,122,.6);
  }
  .pwalk-star.centre i{ color: rgba(244,239,227,.74); }

  /* the five bearings — no two spokes collinear, so the light reads as radiating */
  .pwalk-star.centre  { left: 50%;   top: 50%; }
  .pwalk-star.overcome{ left: 62.4%; top: 12%; }
  .pwalk-star.proclaim{ left: 12.4%; top: 36.3%; }
  .pwalk-star.rejoice { left: 17.2%; top: 72.9%; }
  .pwalk-star.hope    { left: 69.5%; top: 77.9%; }

  /* the journey map, brought over from the desktop story */
  .pwalk-map{ width: 100%; margin: 16px 0 0; overflow: hidden; }
  .pwalk-map svg{ display: block; width: 100%; height: auto; }

  /* ---- the closing column ------------------------------------------ */

  .pwalk-col{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    text-decoration: none;
  }
  .pwalk-col::before{
    content: '';
    position: absolute;
    left: 50%; bottom: 6px;
    width: 280px; height: 300px;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(ellipse 52% 46% at 50% 72%, rgba(232,162,59,.24) 0%, rgba(232,162,59,.06) 48%, transparent 76%);
  }
  /* the closing screen carries the invitation card AND the column, so it
     gets its own budget: no horizon padding, smaller art. */
  .pwalk-s.pwalk-end{ padding-bottom: 22px; }
  .pwalk-end .pwalk-col{ margin-top: 14px; }
  .pwalk-end .pwalk-col::before{ bottom: 22px; width: 220px; height: 220px; }

  .pwalk-col img{
    position: relative;
    width: 92px; height: auto;
    filter: drop-shadow(0 0 16px rgba(230,187,121,.4));
  }
  .pwalk-col span{
    position: relative;
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    color: rgba(244,201,122,.95);
    text-shadow: 0 2px 10px rgba(8,15,22,.95);
  }
}

/* short phones: the column shrinks before the words do */
@media (max-width: 820px) and (max-height: 730px){
  .pwalk-s .pwalk-kicker{ font-size: .84rem; }
  .pwalk-s img.mark{ height: 28px; }
  .pwalk-s h2{ font-size: 1.72rem; }
  .pwalk-end .pwalk-col{ margin-top: 8px; gap: 8px; }
  .pwalk-end .pwalk-col img{ width: 62px; }
  .pwalk-end .pwalk-col span{ font-size: .95rem; }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce){
  .pwalk-city s.beam,
  .pwalk-const .ripples s,
  .pwalk-star > s{ animation: none; }
  .pwalk-const .ripples s{ opacity: .18; transform: translate(-50%,-50%) scale(.8); }
}