/* =========================================================
ZOOM PHOTO STUDIO
content-page.css
Version 2.0

Shared public stylesheet for:
- Location pages
- Legal pages
- General informational/content pages
========================================================= */


/* =========================================================
START OF PAGE / CONTAINER
========================================================= */

.content_page {
--content-ink:#29241f;
--content-muted:#756b63;
--content-bronze:#9a7459;
--content-line:#8b6953;
--content-cream:#f4eee8;
display:flex;
flex-direction:column;
background:#ffffff;
color:var(--content-ink);
}

.content_container {
width:min(1180px,calc(100% - 64px));
margin:0 auto;
}

.content_kicker {
margin:0 0 14px;
color:var(--content-bronze);
font-size:11px;
font-weight:700;
letter-spacing:.16em;
line-height:1.4;
text-transform:uppercase;
}

.content_gold_rule {
display:block;
width:62px;
height:1px;
margin:22px 0;
background:var(--content-bronze);
}

/* =========================================================
END OF PAGE / CONTAINER
========================================================= */


/* =========================================================
START OF HERO
========================================================= */

.content_hero {
position:relative;
min-height:640px;
overflow:hidden;
background:var(--content-ink);
color:#ffffff;
}

.content_hero_media,
.content_hero_media img,
.content_hero_overlay {
position:absolute;
inset:0;
width:100%;
height:100%;
}

.content_hero_media {
margin:0;
}

.content_hero_media img {
object-fit:cover;
object-position:center 55%;
}

.content_hero_overlay {
background:linear-gradient(90deg,rgba(29,25,22,.72) 0%,rgba(29,25,22,.48) 34%,rgba(29,25,22,.12) 68%,rgba(29,25,22,.04) 100%);
}

.content_hero_content {
position:relative;
z-index:2;
display:flex;
min-height:640px;
padding:70px 0;
flex-direction:column;
justify-content:center;
align-items:flex-start;
}

.content_hero .content_kicker {
color:#e1cbb9;
}

.content_hero h1 {
max-width:720px;
margin:0;
font-family:var(--zoom-serif);
font-size:clamp(58px,6.4vw,92px);
font-weight:400;
letter-spacing:-.025em;
line-height:.95;
}

.content_hero_intro {
max-width:570px;
margin:22px 0 0;
color:rgba(255,255,255,.92);
font-size:15px;
line-height:1.8;
}

/* =========================================================
END OF HERO
========================================================= */


/* =========================================================
START OF MAIN CONTENT
========================================================= */

.content_main {
padding:84px 0 92px;
background:#ffffff;
}

.content_main_inner {
max-width:900px;
}

.content_main h2,
.content_location h2,
.content_cta h2 {
margin:0;
font-family:var(--zoom-serif);
font-size:clamp(42px,4.5vw,62px);
font-weight:400;
letter-spacing:-.02em;
line-height:1.04;
}

.content_richtext {
max-width:820px;
}

.content_richtext p {
margin:22px 0 0;
color:var(--content-muted);
font-size:15px;
line-height:1.9;
}

.content_richtext h2 {
margin:46px 0 0;
font-size:clamp(32px,3.4vw,46px);
}

.content_richtext h3 {
margin:36px 0 0;
font-family:var(--zoom-serif);
font-size:clamp(24px,2.6vw,34px);
font-weight:400;
line-height:1.15;
}

.content_richtext ul,
.content_richtext ol {
margin:22px 0 0;
padding-left:1.4rem;
color:var(--content-muted);
font-size:15px;
line-height:1.9;
}

.content_richtext a {
color:var(--content-ink);
font-weight:600;
text-underline-offset:3px;
}

.content_actions {
display:flex;
margin-top:34px;
gap:12px;
flex-wrap:wrap;
}

/* =========================================================
END OF MAIN CONTENT
========================================================= */


/* =========================================================
START OF LOCATION
========================================================= */

.content_location {
padding:66px 0;
background:var(--content-cream);
text-align:center;
}

.content_location_inner {
max-width:760px;
}

.content_location_text p {
max-width:650px;
margin:18px auto 0;
color:var(--content-muted);
font-size:14px;
line-height:1.8;
}

.content_location_address {
margin:18px auto 0;
color:var(--content-ink);
font-size:14px;
font-weight:600;
line-height:1.8;
}

/* =========================================================
END OF LOCATION
========================================================= */


/* =========================================================
START OF GOOGLE MAP
========================================================= */

.content_map {
width:100%;
height:430px;
overflow:hidden;
border-top:1px solid var(--content-line);
border-bottom:1px solid var(--content-line);
background:var(--content-cream);
}

.content_map iframe {
display:block;
width:100%;
height:100%;
border:0;
}

/* =========================================================
END OF GOOGLE MAP
========================================================= */


/* =========================================================
START OF FINAL CTA
========================================================= */

.content_cta {
padding:58px 0;
background:var(--content-cream);
}

.content_cta_inner {
display:flex;
gap:50px;
align-items:center;
justify-content:space-between;
}

.content_cta h2 {
max-width:760px;
}

.content_cta_text p {
max-width:650px;
margin:15px 0 0;
color:var(--content-muted);
font-size:14px;
line-height:1.75;
}

.content_cta .button {
flex:0 0 auto;
}

/* =========================================================
END OF FINAL CTA
========================================================= */


/* =========================================================
START OF TABLET
========================================================= */

@media(max-width:1000px) {

.content_container {
width:min(900px,calc(100% - 48px));
}

.content_hero,
.content_hero_content {
min-height:580px;
}

.content_cta_inner {
gap:30px;
}

}

/* =========================================================
END OF TABLET
========================================================= */


/* =========================================================
START OF MOBILE
========================================================= */

@media(max-width:700px) {

.content_container {
width:calc(100% - 40px);
}

.content_hero,
.content_hero_content {
min-height:620px;
}

.content_hero_media img {
object-position:62% center;
}

.content_hero_overlay {
background:linear-gradient(0deg,rgba(22,18,15,.78) 0%,rgba(22,18,15,.48) 52%,rgba(22,18,15,.10) 100%);
}

.content_hero_content {
padding:70px 0 48px;
justify-content:flex-end;
}

.content_hero h1 {
font-size:clamp(48px,14vw,64px);
}

.content_hero_intro {
max-width:100%;
font-size:13px;
line-height:1.75;
}

.content_main {
padding:52px 0 60px;
}

.content_main h2,
.content_location h2,
.content_cta h2 {
font-size:38px;
}

.content_richtext p,
.content_richtext ul,
.content_richtext ol {
font-size:14px;
line-height:1.8;
}

.content_actions {
flex-direction:column;
}

.content_actions .button {
width:100%;
}

.content_location {
padding:48px 0;
}

.content_map {
height:360px;
}

.content_cta {
padding:48px 0;
}

.content_cta_inner {
align-items:stretch;
flex-direction:column;
}

.content_cta .button {
width:100%;
}

}

/* =========================================================
END OF MOBILE
========================================================= */