/*
Theme Name: JP Mobile Media Hybrid Approved
Theme URI: https://jpmobilemedia.com/
Author: JP Mobile Media
Description: Custom JP Mobile Media theme built from the approved hybrid HTML preview.
Version: 1.5.0
Text Domain: jpmm-hybrid
*/

:root{
 --bg:#070707; --panel:#111; --panel2:#151515; --text:#f6f1e9; --muted:#aaa39b;
 --red:#e12626; --red2:#ff3939; --line:rgba(255,255,255,.12);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,sans-serif}
a{text-decoration:none;color:inherit}.shell{width:min(1460px,92vw);margin:auto}
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(5,5,5,.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav{height:110px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:16px}.brand img{height:86px;width:auto;object-fit:contain}.brand-copy b{letter-spacing:.18em;font-size:15px}.brand-copy span{display:block;color:#8f8f8f;font-size:10px;letter-spacing:.18em;margin-top:5px}
.links{display:flex;gap:25px;align-items:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase}.links a:last-child{border:1px solid #4b4b4b;padding:13px 18px;border-radius:999px}
.hero{min-height:100vh;position:relative;display:flex;align-items:end;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:
linear-gradient(90deg,rgba(0,0,0,.93),rgba(0,0,0,.55) 44%,rgba(0,0,0,.12) 74%,rgba(0,0,0,.45)),
url("assets/hero-local.jpg") center/cover}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(transparent,var(--bg))}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;gap:8vw;align-items:end;padding:180px 0 85px}
.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#ddd;margin-bottom:20px}
.hero h1{font:400 clamp(66px,8vw,126px)/.87 Georgia,serif;margin:0}.hero h1 em{font-style:normal;color:var(--red2)}
.hero p{font-size:19px;line-height:1.75;color:#ddd;max-width:700px}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;padding:16px 22px;border-radius:999px;border:1px solid #444;text-transform:uppercase;letter-spacing:.12em;font-size:12px}.btn.red{background:var(--red);border-color:var(--red)}
.hero-card{border:1px solid var(--line);border-radius:28px;background:rgba(15,15,15,.72);backdrop-filter:blur(16px);padding:30px}
.hero-card h3{font:400 34px Georgia;margin:0 0 14px}.hero-card p{font-size:14px;color:#bbb;margin:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}.stat{padding:16px;border-radius:15px;background:rgba(255,255,255,.04)}.stat strong{display:block;font:400 27px Georgia}.stat span{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#999}
section{padding:112px 0}.section-head{display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:end;margin-bottom:56px}
.section-head h2,.contact-copy h2{font:400 clamp(48px,6vw,86px)/.96 Georgia;margin:0}.section-head p,.contact-copy p{font-size:18px;line-height:1.8;color:var(--muted)}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}.flow:before{content:"";position:absolute;top:52px;left:3%;right:3%;height:1px;background:linear-gradient(90deg,var(--red),#333,var(--red))}
.phase{position:relative;padding:90px 28px 32px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(#121212,#0c0c0c);min-height:315px}
.phase:before{content:"";position:absolute;top:43px;left:28px;width:18px;height:18px;border-radius:50%;background:var(--red);box-shadow:0 0 0 8px rgba(225,38,38,.12)}
.phase small{color:#888;text-transform:uppercase;letter-spacing:.15em}.phase h3{font:400 30px Georgia;margin:14px 0}.phase p{color:#aaa;line-height:1.7}
.gallery{padding-top:20px}.gallery-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:18px;min-height:720px}
.g-big,.g-top,.g-bottom{position:relative;overflow:hidden;border-radius:28px}.g-big img,.g-top img,.g-bottom img{width:100%;height:100%;object-fit:cover}
.g-stack{display:grid;grid-template-rows:1fr 1fr;gap:18px}.g-label{position:absolute;left:22px;bottom:20px;background:rgba(0,0,0,.62);padding:10px 13px;border-radius:999px;font-size:10px;text-transform:uppercase;letter-spacing:.14em}
.enhance{background:#0b0b0b}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{border:1px solid var(--line);background:#111;border-radius:24px;overflow:hidden}
.card-img{height:255px;position:relative;overflow:hidden}.card-img img{width:100%;height:100%;object-fit:cover}.card-img:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 48%,rgba(0,0,0,.78))}
.tag{position:absolute;z-index:2;left:16px;bottom:14px;background:rgba(0,0,0,.68);border:1px solid rgba(255,255,255,.18);padding:9px 11px;border-radius:999px;font-size:9px;text-transform:uppercase;letter-spacing:.12em}
.card-body{padding:24px}.card-body h3{font:400 28px Georgia;margin:0 0 10px}.card-body p{color:#aaa;line-height:1.65;margin:0}
.reviews{background:radial-gradient(circle at 10% 10%,rgba(225,38,38,.13),transparent 28%),#070707}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.review{padding:27px;border:1px solid var(--line);border-radius:24px;background:#101010}.google{font-weight:700;margin-bottom:12px}.stars{color:#f5b400;letter-spacing:.08em}.review p{color:#d1cbc3;line-height:1.75}.review b{font-size:13px}
.contact{background:#0d0d0d}.contact-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:7vw}.contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-card{border:1px solid var(--line);border-radius:22px;background:#121212;padding:27px;min-height:210px;display:flex;flex-direction:column;justify-content:space-between}
.contact-card small{color:var(--red2);text-transform:uppercase;letter-spacing:.14em}.contact-card h3{font:400 26px Georgia;margin:12px 0}.contact-card p{color:#999;line-height:1.6}.contact-card a{display:inline-block;margin-top:12px;border-bottom:1px solid var(--red);width:max-content}
.form-wrap{margin-top:76px;border-top:1px solid var(--line);padding-top:76px;display:grid;grid-template-columns:.72fr 1.28fr;gap:7vw}
.form-card{border:1px solid var(--line);border-radius:28px;background:#111;padding:30px}.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{margin-bottom:14px}
.field label{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#aaa;margin-bottom:8px}.field input,.field select,.field textarea{width:100%;padding:14px;background:#090909;border:1px solid #292929;border-radius:12px;color:white}
.field textarea{min-height:120px}.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px}.check{padding:12px;border:1px solid #2c2c2c;background:#090909;border-radius:12px;color:#ccc;font-size:13px}
footer{border-top:1px solid var(--line);padding:38px 0;color:#999}.footer{display:flex;justify-content:space-between;align-items:center}.footer img{height:64px;width:auto}
@media(max-width:1000px){.links{display:none}.hero-grid,.section-head,.contact-layout,.form-wrap,.gallery-grid{grid-template-columns:1fr}.flow,.cards{grid-template-columns:1fr 1fr}.review-grid{grid-template-columns:1fr}.gallery-grid{min-height:auto}.g-big{height:520px}.g-stack{height:720px}}
@media(max-width:650px){.brand img{height:72px}.brand-copy span{display:none}.hero h1{font-size:58px}.flow,.cards,.contact-cards,.row,.checks{grid-template-columns:1fr}.footer{flex-direction:column;align-items:flex-start;gap:20px}}


/* WordPress integration */
body.admin-bar nav{top:32px}
@media(max-width:782px){body.admin-bar nav{top:46px}}
.forminator-ui{font-family:Arial,sans-serif!important}
.forminator-ui .forminator-button-submit{
  background:var(--red)!important;color:#fff!important;border:1px solid var(--red)!important;
  border-radius:999px!important;padding:16px 22px!important;text-transform:uppercase!important;
  letter-spacing:.12em!important;font-size:12px!important;
}
.forminator-ui input,.forminator-ui textarea,.forminator-ui select{
  background:#090909!important;color:#fff!important;border:1px solid #292929!important;
  border-radius:12px!important;
}
.forminator-ui label{color:#aaa!important}
.jpmm-plugin-note{padding:22px;border:1px dashed #444;border-radius:18px;color:#aaa;background:#0d0d0d}
.jpmm-reviews-wrap .grw-slider,.jpmm-reviews-wrap .wp-google-reviews,.jpmm-reviews-wrap .rplg-grid{
  background:transparent!important;
}


/* ==========================================================
   JP MOBILE MEDIA — MOBILE EXPERIENCE v1.1
   Desktop rules above remain unchanged.
   ========================================================== */

.mobile-menu-toggle,
.mobile-sticky-cta { display:none; }

@media (max-width: 782px) {
  html { scroll-padding-top: 82px; }
  body { overflow-x:hidden; padding-bottom:72px; }

  /* Header / navigation */
  .nav {
    height:82px;
    width:min(94vw,1460px);
  }
  .brand { gap:10px; min-width:0; }
  .brand img {
    height:66px;
    max-width:92px;
    object-fit:contain;
  }
  .brand-copy b { font-size:12px; letter-spacing:.12em; }
  .brand-copy span { display:none; }

  .mobile-menu-toggle {
    display:flex;
    width:46px;
    height:46px;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    background:#111;
    color:#fff;
    font-size:22px;
    cursor:pointer;
  }

  .links {
    display:none;
    position:absolute;
    top:82px;
    left:3vw;
    right:3vw;
    padding:18px;
    background:rgba(8,8,8,.98);
    border:1px solid rgba(255,255,255,.12);
    border-radius:20px;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    box-shadow:0 20px 50px rgba(0,0,0,.45);
  }
  .links.mobile-open { display:flex; }
  .links a {
    padding:15px 12px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .links a:last-child {
    margin-top:10px;
    text-align:center;
    background:var(--red);
    border-color:var(--red);
  }

  /* Hero — preserve image and make mobile composition intentional */
  .hero {
    min-height:auto;
    padding-top:82px;
    display:block;
  }
  .hero:before {
    height:560px;
    bottom:auto;
    background:
      linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.25) 48%,#070707 98%),
      url("assets/hero-local.jpg") center 35%/cover no-repeat;
  }
  .hero:after { display:none; }
  .hero-grid {
    grid-template-columns:1fr;
    gap:26px;
    padding:390px 0 58px;
    align-items:start;
  }
  .eyebrow {
    font-size:9px;
    line-height:1.6;
    letter-spacing:.2em;
    margin-bottom:14px;
  }
  .hero h1 {
    font-size:clamp(48px,14vw,68px);
    line-height:.92;
    letter-spacing:-.03em;
  }
  .hero p {
    font-size:16px;
    line-height:1.7;
    margin-top:20px;
  }
  .actions {
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:22px;
  }
  .btn {
    width:100%;
    justify-content:center;
    text-align:center;
    padding:16px 18px;
  }
  .hero-card {
    padding:23px;
    border-radius:22px;
  }
  .hero-card h3 { font-size:28px; }
  .stats { gap:7px; }
  .stat { padding:13px 8px; }
  .stat strong { font-size:22px; }
  .stat span { font-size:7px; line-height:1.4; }

  /* General section rhythm */
  section { padding:72px 0; }
  .section-head,
  .contact-layout,
  .form-wrap {
    grid-template-columns:1fr;
    gap:24px;
    margin-bottom:38px;
  }
  .section-head h2,
  .contact-copy h2 {
    font-size:clamp(42px,12vw,60px);
    line-height:.98;
  }
  .section-head p,
  .contact-copy p {
    font-size:16px;
    line-height:1.7;
  }

  /* Wedding flow becomes a true vertical timeline */
  .flow {
    grid-template-columns:1fr;
    gap:14px;
    padding-left:26px;
  }
  .flow:before {
    top:16px;
    bottom:16px;
    left:8px;
    right:auto;
    width:1px;
    height:auto;
    background:linear-gradient(var(--red),#333,var(--red));
  }
  .phase {
    min-height:0;
    padding:25px 22px 25px 25px;
    border-radius:20px;
  }
  .phase:before {
    top:28px;
    left:-27px;
    width:14px;
    height:14px;
    box-shadow:0 0 0 6px rgba(225,38,38,.12);
  }
  .phase h3 { font-size:27px; margin:10px 0; }
  .phase p { margin-bottom:0; font-size:15px; }

  /* Gallery */
  .gallery-grid {
    grid-template-columns:1fr;
    min-height:0;
    gap:12px;
  }
  .g-big { height:420px; border-radius:22px; }
  .g-stack {
    height:auto;
    grid-template-rows:none;
    grid-template-columns:1fr;
    gap:12px;
  }
  .g-top,.g-bottom { height:280px; border-radius:22px; }

  /* Enhancements */
  .cards {
    grid-template-columns:1fr;
    gap:16px;
  }
  .card { border-radius:22px; }
  .card-img { height:230px; }
  .card-body { padding:22px; }
  .card-body h3 { font-size:28px; }

  /* Reviews */
  .review-grid {
    grid-template-columns:1fr;
    gap:14px;
  }
  .review { padding:23px; border-radius:20px; }

  /* Contact cards: one large tap-friendly card per row */
  .contact-cards {
    grid-template-columns:1fr;
    gap:12px;
  }
  .contact-card {
    min-height:0;
    padding:23px;
    border-radius:20px;
  }
  .contact-card h3 { font-size:25px; overflow-wrap:anywhere; }
  .contact-card a { padding:7px 0; }

  /* Forminator / Check Your Date */
  .form-wrap {
    margin-top:54px;
    padding-top:54px;
  }
  .form-card {
    padding:18px;
    border-radius:22px;
  }
  .forminator-ui .forminator-row {
    display:block !important;
    margin-bottom:0 !important;
  }
  .forminator-ui .forminator-col,
  .forminator-ui [class*="forminator-col-"] {
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
    margin-bottom:14px !important;
  }
  .forminator-ui input:not([type="checkbox"]):not([type="radio"]),
  .forminator-ui select,
  .forminator-ui textarea {
    min-height:52px !important;
    font-size:16px !important; /* prevents iOS zoom */
  }
  .forminator-ui textarea { min-height:140px !important; }
  .forminator-ui .forminator-checkbox,
  .forminator-ui .forminator-radio {
    display:flex !important;
    align-items:flex-start;
    min-height:48px;
    padding:12px !important;
    margin:7px 0 !important;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    background:#0b0b0b;
  }
  .forminator-ui .forminator-button-submit {
    width:100% !important;
    min-height:54px;
    justify-content:center;
    margin-top:8px !important;
  }

  /* Footer */
  .footer {
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    font-size:13px;
    line-height:1.6;
  }

  /* Persistent conversion bar */
  .mobile-sticky-cta {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    position:fixed;
    z-index:9999;
    left:0; right:0; bottom:0;
    padding:9px 12px max(9px,env(safe-area-inset-bottom));
    gap:8px;
    background:rgba(7,7,7,.96);
    border-top:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(16px);
  }
  .mobile-sticky-cta a {
    display:flex;
    min-height:48px;
    align-items:center;
    justify-content:center;
    border:1px solid #3a3a3a;
    border-radius:999px;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:700;
  }
  .mobile-sticky-cta a:last-child {
    background:var(--red);
    border-color:var(--red);
  }
}


/* v1.4 editable hero image override */
.hero.jpmm-custom-hero:before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.93),rgba(0,0,0,.55) 44%,rgba(0,0,0,.12) 74%,rgba(0,0,0,.45)),
    var(--jpmm-custom-hero-image) center/cover no-repeat !important;
}
@media(max-width:782px){
  .hero.jpmm-custom-hero:before{
    background:
      linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.25) 48%,#070707 98%),
      var(--jpmm-custom-hero-image) center 35%/cover no-repeat !important;
  }
}