/* =========================================================
Rainbow Bridge / Rainbow Remembrance
========================================================= */

.rainbow-remembrance,
.rainbow-submit {
width: 100%;
box-sizing: border-box;
}

/* ---------------------------------------------------------
Shared Rainbow buttons
--------------------------------------------------------- */


.donate-button {
display: inline-block;
padding: 13px 22px;
background: #333333;
color: #ffffff;
text-decoration: none;
border-radius: 3px;
font-weight: 700;
}

.donate-button:hover {
background: #de8c29;
}

/* ---------------------------------------------------------
Memorials hero
--------------------------------------------------------- */

.remembrance-hero {
position: relative;
width: 100%;
min-height: 430px;

display: flex;
align-items: center;

box-sizing: border-box;

background:
    linear-gradient(
        90deg,
        rgba(20, 31, 48, .72),
        rgba(20, 31, 48, .34),
        rgba(20, 31, 48, .08)
    ),
    url("/as/rainbow/hero-rainbow.jpg")
    center center / cover no-repeat;


}

.remembrance-hero-content {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 70px 40px;
box-sizing: border-box;
}

.page-title {
max-width: 800px;
margin: 0;
color: #ffffff;
font-size: clamp(2.8rem, 7vw, 5.5rem);
line-height: .98;
letter-spacing: -.045em;
}

.hero-message {
max-width: 650px;
margin: 25px 0 30px;
color: #ffffff;
font-size: clamp(1.05rem, 2vw, 1.3rem);
line-height: 1.65;
}

/* ---------------------------------------------------------
Memorial support note
--------------------------------------------------------- */

.remembrance-note {
width: 100%;
box-sizing: border-box;
padding: 22px 30px;
background: #f7f3ed;
border-bottom: 1px solid #e5e0da;
text-align: center;
}

.remembrance-note p {
max-width: 900px;
margin: 0 auto;
color: #555c63;
}




/* ---------------------------------------------------------
Memorial wall
--------------------------------------------------------- */

.memorial-wall {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 55px 30px 90px;
box-sizing: border-box;
}

.memorial-wall-header {
display: flex;
align-items: end;
justify-content: space-between;
gap: 30px;
margin-bottom: 30px;
}

.memorial-wall h2 {
margin: 0;
color: #333333;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.1;
}

.memorial-search {
display: flex;
width: 100%;
max-width: 430px;
gap: 8px;
}

.memorial-search label{
	display:none;
}

.memorial-search input {
min-width: 0;
flex: 1;
padding: 12px 14px;
border: 1px solid #cfd1d4;
background: #ffffff;
color: #30343b;
font: inherit;
}

.memorial-search button {
flex: 0 0 auto;
padding: 12px 18px;
border: 0;
border-radius: 3px;
background: #333333;
color: #ffffff;
font: inherit;
font-weight: 700;
cursor: pointer;
}

.memorial-search button:hover {
background: #de8c29;
}

.search-result {
margin: -12px 0 25px;
color: #69717a;
font-size: .95rem;
}

/* ---------------------------------------------------------
Memorial grid
--------------------------------------------------------- */

.memorial-grid {
display: grid;
  /* 1. Limit the layout to exactly 4 equal columns */
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/*

When a search produces only one or a few results,

don't let the card become enormous.
*/
.memorial-grid .memorial-card:only-child {
max-width: 650px;
}

/* ---------------------------------------------------------
Memorial card
--------------------------------------------------------- */

.memorial-card {
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;

background: #ffffff;

border: 1px solid #e5e0da;

box-shadow:
    0 8px 25px rgba(24, 43, 73, .07);


}

.memorial-photo {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #eeeae5;
}

.memorial-photo img {
width: 100%;
height: 100%;
display: block;

object-fit: cover;
object-position: center center;


}

.memorial-content {
display: flex;
flex-direction: column;
flex: 1;
padding: 24px;
}

.memorial-content h3 {
margin: 0;
color: #333333;
font-size: 2.2rem;
line-height: 1.15;
}

.memorial-dates {
margin: 8px 0 0;
color: #69717a;
font-size: 1.2rem;
}

.memorial-family {
margin: 12px 0 0;
color: #555c63;
font-size: 1.3rem;
}

/* ---------------------------------------------------------
Memorial tribute
--------------------------------------------------------- */

.memorial-tribute {
max-height: 0;
margin-top: 0;
overflow: hidden;
opacity: 0;

transition:
    max-height .3s ease,
    opacity .25s ease,
    margin-top .3s ease;


}

.memorial-tribute.is-open {
max-height: 1000px;
margin-top: 20px;
opacity: 1;
}

.tribute-toggle {
align-self: flex-start;
margin-top: auto;
padding: 18px 0 0;

border: 0;
background: transparent;

color: #333333;
font: inherit;

cursor: pointer;


}

.tribute-toggle:hover,
.tribute-toggle:focus {
color: #de8c29;
}

/* ---------------------------------------------------------
Empty memorial state
--------------------------------------------------------- */

.remembrance-empty {
max-width: 850px;
margin: 0 auto;
padding: 80px 25px 100px;
box-sizing: border-box;
text-align: center;
}

.remembrance-empty h2 {
margin: 0 0 18px;
color: #333333;
font-size: 2.5rem;
}

.remembrance-empty p {
max-width: 600px;
margin: 0 auto 28px;
color: #69717a;
font-size: 1.3rem;
line-height: 1.7;
}

/* =========================================================
Submit Memorial
========================================================= */

.rainbow-submit .submit-hero {
background:
linear-gradient(
135deg,
#eef5f7,
#f7eef5 55%,
#fbf7ed
);
padding: 70px 20px 60px;
}

.rainbow-submit .submit-hero-inner {
max-width: 980px;
margin: 0 auto;
}

.rainbow-submit .eyebrow,
.rainbow-submit .section-label {
margin: 0 0 12px;
color: #de8c29;
font-size: 1.4rem;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase;
}

.rainbow-submit .submit-hero h1 {
max-width: 800px;
margin: 0;
color: #333333;
font-size: clamp(2.6rem, 7vw, 5rem);
line-height: .98;
letter-spacing: -.045em;
}

.rainbow-submit .hero-copy {
max-width: 680px;
margin: 25px 0 0;
color: #505861;
}

.form-wrap {
max-width: 820px;
margin: 0 auto;
padding: 55px 20px 90px;
}

.form-card {
background: #ffffff;
border: 1px solid #e5e0da;
padding: 42px;
box-shadow: 0 10px 30px rgba(24, 43, 73, .08);
}

.form-section {
padding-bottom: 38px;
margin-bottom: 38px;
border-bottom: 1px solid #e5e0da;
}

.form-section:last-of-type {
margin-bottom: 0;
border-bottom: 0;
}

.form-section h2 {
margin: 0 0 22px;
color: #333333;
line-height: 1.2;
}

.field {
margin-bottom: 22px;
}

.field:last-child {
margin-bottom: 0;
}

.rainbow-submit label {
display: block;
margin-bottom: 8px;
color: #333333;
font-size: 1.2rem;
font-weight: 700;
}

.optional {
color: #69717a;
font-weight: 400;
}

.rainbow-submit input,
.rainbow-submit textarea {
width: 100%;
padding: 13px 14px;
border: 1px solid #cfd1d4;
border-radius: 2px;
background: #ffffff;
color: #30343b;
font: inherit;
}

.rainbow-submit input:focus,
.rainbow-submit textarea:focus {
outline: 2px solid rgba(118, 85, 143, .2);
border-color: #de8c29;
}

.rainbow-submit textarea {
min-height: 190px;
resize: vertical;
}

.help {
margin: 7px 0 0;
color: #69717a;
font-size: 1.2rem;
}

/* ---------------------------------------------------------
Photo crop preview
--------------------------------------------------------- */

.photo-preview-container {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #e5e0da;
}

.photo-preview-label {
margin: 0 0 10px;
color: #333333;
font-weight: 700;
}

.photo-crop-area {
position: relative;
width: 100%;
max-width: 420px;
aspect-ratio: 4 / 3;

overflow: hidden;

background: #eeeae5;
border: 1px solid #e5e0da;

cursor: grab;
touch-action: none;


}

.photo-crop-area.dragging {
cursor: grabbing;
}

.photo-crop-area img {
position: absolute;
display: block;
max-width: none;

user-select: none;
-webkit-user-drag: none;
pointer-events: none;


}

.photo-crop-overlay {
position: absolute;
inset: 0;

pointer-events: none;

border: 2px solid rgba(255, 255, 255, .9);

box-shadow:
    inset 0 0 0 9999px rgba(0, 0, 0, .08);


}

.photo-preview-help {
max-width: 600px;
margin: 10px 0 0;
color: #69717a;
font-size: 1rem;
}

/* ---------------------------------------------------------
Submit warning
--------------------------------------------------------- */

.warning {
margin: 35px 0 25px;
padding: 22px;
background: #f5eff5;
border-left: 4px solid #de8c29;
}

.warning strong {
display: block;
margin-bottom: 6px;
color: #333333;
}

/* ---------------------------------------------------------
Submit errors
--------------------------------------------------------- */

.errors {
margin-bottom: 30px;
padding: 20px 22px;
background: #fff1f1;
color: #8a2929;
border-left: 4px solid #b43b3b;
}

.errors p {
margin: 0 0 6px;
}

.errors p:last-child {
margin-bottom: 0;
}

/* ---------------------------------------------------------
Submit button area
--------------------------------------------------------- */

.submit-area {
text-align: center;
}

.payment-note {
max-width: 650px;
margin: 18px auto 0;
color: #69717a;
line-height: 1.6;
}

/* =========================================================
PayPal continuation page
========================================================= */

.payment-page {
max-width: 820px;
margin: 0 auto;
padding: 70px 20px 90px;
}

.payment-card {
background: #ffffff;
border: 1px solid #e5e0da;
padding: 45px;
box-shadow: 0 10px 30px rgba(24, 43, 73, .08);
}

.payment-card .eyebrow {
margin: 0 0 12px;
color: #de8c29;
font-size: .8rem;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase;
}

.payment-card h1 {
margin: 0 0 22px;
color: #333333;
font-size: clamp(2.2rem, 7vw, 4rem);
line-height: 1;
letter-spacing: -.035em;
}

.payment-card .section-label,
.payment-return-card .section-label{
	color: #de8c29;
}

.payment-card p {
max-width: 680px;
line-height: 1.7;
}

.payment-card .payment-action {
margin-top: 28px;
}

/* =========================================================
Mobile
========================================================= */

@media (max-width: 750px) {

.remembrance-hero {
    min-height: 380px;
}

.remembrance-hero-content {
    padding: 55px 22px;
}

.memorial-wall {
    padding: 40px 18px 65px;
}

.memorial-wall-header {
    display: block;
}

.memorial-search {
    max-width: none;
    margin-top: 22px;
}

.rainbow-submit .submit-hero {
    padding: 55px 20px 45px;
}

.form-wrap {
    padding: 30px 14px 60px;
}

.form-card {
    padding: 28px 20px;
}

.payment-page {
    padding: 35px 15px 60px;
}

.payment-card {
    padding: 28px 22px;
}


}

/* ---------------------------------------------------------
   Payment handoff
   --------------------------------------------------------- */

.payment-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 65px 20px 90px;
}

.payment-card {
    background: #fff;
    border: 1px solid #e5e0da;
    padding: 45px;
    box-shadow: 0 10px 30px rgba(24, 43, 73, .08);
}

.payment-card h1 {
    max-width: 800px;
    margin: 10px 0 22px;
    color: #333333;
    font-size: clamp(2.6rem, 7vw, 4.5rem);
    line-height: .98;
    letter-spacing: -.045em;
}

.payment-card p {
    max-width: 680px;
    color: #505861;
    line-height: 1.7;
}

.payment-card .payment-intro {
    margin-top: 0;
    font-size: 1.15rem;
}

.payment-card form {
    margin-top: 30px;
}

.payment-card .payment-note {
    margin: 22px 0 0;
    color: #69717a;
    font-size: .95rem;
}


/* ---------------------------------------------------------
   Payment return
   --------------------------------------------------------- */

.payment-return {
    width: 100%;
    box-sizing: border-box;

    padding: 70px 20px 90px;
}

.payment-return-card {
    max-width: 760px;
    margin: 0 auto;

    padding: 50px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e5e0da;

    box-shadow:
        0 10px 30px rgba(24, 43, 73, .08);

    text-align: center;
}

.payment-return-card .section-label {
    margin-bottom: 12px;
}

.payment-return-card h1 {
    margin: 0 0 24px;

    color: #333333;

    font-size: clamp(
        2.5rem,
        7vw,
        4.5rem
    );

    line-height: 1;
}

.payment-return-lead {
    max-width: 620px;

    margin: 0 auto 22px;

    color: #333333;

    font-size: 1.25rem;

    line-height: 1.6;
}

.payment-return-card p:not(.section-label):not(.payment-return-lead) {
    max-width: 620px;

    margin-left: auto;
    margin-right: auto;

    color: #555c63;

    line-height: 1.7;
}

.payment-return-actions {
    margin-top: 32px;
}



/* =========================================================
   Payment Return / Thank You
   ========================================================= */

.payment-return-page {
    width: 100%;
    box-sizing: border-box;

    padding: 70px 20px 90px;
}

.payment-return-card {
    width: 100%;
    max-width: 700px;

    margin: 0 auto;
    padding: 45px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e5e0da;

    box-shadow:
        0 10px 30px rgba(24, 43, 73, .08);
}

.payment-return-eyebrow {
    margin: 0 0 12px;

    color: #de8c29;

    font-size: .8rem;
    font-weight: 700;

    letter-spacing: .15em;
    text-transform: uppercase;
}

.payment-return-card h1 {
    margin: 0 0 25px;

    color: #333333;

    font-size: clamp(2.5rem, 7vw, 4.5rem);
    line-height: .98;
    letter-spacing: -.045em;
}

.payment-return-card p {
    margin: 0 0 20px;

    color: #555c63;

    line-height: 1.7;
}


@media (max-width: 650px) {

    .payment-return-page {
        padding: 40px 14px 60px;
    }

    .payment-return-card {
        padding: 30px 22px;
    }

}



@media (max-width: 650px) {

.memorial-grid {
    grid-template-columns: 1fr;
    gap: 22px;
}

.memorial-content {
    padding: 21px;
}

.rainbow-submit .help {
    font-size: 1.05rem;
}

    .payment-page {
        padding: 35px 14px 60px;
    }

    .payment-card {
        padding: 30px 22px;
    }

    .payment-return {
        padding: 40px 14px 60px;
    }

    .payment-return-card {
        padding: 35px 22px;
    }


}

@media (max-width: 480px) {

.page-title {
    font-size: 2.8rem;
}

.hero-message {
    font-size: 90%;
}

.memorial-grid {
    grid-template-columns: 1fr;
    gap: 22px;
}


}