/* ==================================================
   3HERMANAS CONCEPTS
   PREMIUM CONTACT PAGE
   Load after styles.css and site-polish.css
================================================== */

/* ---------- Hero ---------- */

.contact-hero{
    position:relative;
    overflow:hidden;
    padding:88px 0 74px;
    color:#fff;
    background:
        radial-gradient(circle at 82% 18%,rgba(212,168,61,.22),transparent 30%),
        radial-gradient(circle at 12% 85%,rgba(196,54,46,.16),transparent 28%),
        linear-gradient(145deg,#0b1a33 0%,#132c50 58%,#0b1a33 100%);
}

.contact-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);
    background-size:24px 24px;
    mask-image:linear-gradient(180deg,#000,transparent 88%);
    pointer-events:none;
}

.contact-hero-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:64px;
    align-items:center;
}

.contact-hero-copy .eyebrow{
    color:#d4a83d;
}

.contact-hero-copy h1{
    margin-top:14px;
    max-width:760px;
    font-size:clamp(3rem,5.6vw,5.2rem);
    line-height:1.03;
    letter-spacing:-.03em;
    color:#fff;
}

.contact-hero-copy p:last-child{
    max-width:650px;
    margin-top:24px;
    font-size:1.18rem;
    line-height:1.85;
    color:rgba(255,255,255,.82);
}

.contact-hero-art{
    display:flex;
    align-items:center;
    justify-content:center;
}

.contact-hero-art img{
    width:100%;
    max-width:560px;
    height:auto;
    display:block;
    border-radius:30px;
    box-shadow:0 34px 80px rgba(0,0,0,.34);
    transform:rotate(1.5deg);
}

/* ---------- Contact and map cards ---------- */

.contact-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:30px;
    align-items:stretch;
}

.contact-card,
.map-card,
.form-card,
.premium-info-card{
    background:#fff;
    border:1px solid rgba(11,26,51,.08);
    border-radius:30px;
    box-shadow:0 24px 70px rgba(11,26,51,.10);
}

.contact-card{
    padding:42px;
}

.contact-card h2,
.form-card h2,
.premium-info-card h2{
    margin-top:12px;
    color:var(--navy-900);
    font-size:clamp(2rem,3vw,2.8rem);
}

.contact-list{
    margin-top:30px;
    display:grid;
    gap:18px;
}

.contact-list p{
    padding:18px 20px;
    border:1px solid rgba(11,26,51,.08);
    border-radius:18px;
    background:#fbfaf7;
    color:var(--ink-soft);
}

.contact-list strong{
    display:inline-block;
    margin-bottom:4px;
    color:var(--navy-900);
}

.contact-list a{
    color:var(--navy-700);
    text-decoration:none;
    font-weight:700;
}

.contact-list a:hover{
    color:var(--red);
}

.social-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
}

.social-row a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 18px;
    border-radius:999px;
    background:var(--navy-900);
    color:#fff;
    font-size:.9rem;
    font-weight:700;
    text-decoration:none;
}

.social-row a:hover{
    background:var(--red);
}

.hidden-social{
    display:none !important;
}

.map-card{
    min-height:520px;
    overflow:hidden;
}

.map-card iframe{
    width:100%;
    height:100%;
    min-height:520px;
    border:0;
    display:block;
}

/* ---------- Why contact us / FAQ ---------- */

.premium-info-card{
    padding:46px 50px;
}

.premium-info-card .feature-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 20px;
    margin-top:30px;
}

.premium-info-card .feature-list div{
    padding:16px 18px;
    border-radius:16px;
    background:#fbf8f2;
    border:1px solid rgba(11,26,51,.07);
    color:var(--navy-700);
    font-weight:700;
}

.premium-info-card h3{
    margin-top:28px;
    color:var(--navy-900);
    font-size:1.25rem;
}

.premium-info-card > p:not(.eyebrow){
    margin-top:8px;
    color:var(--ink-soft);
}

/* ---------- Contact form ---------- */

.contact-form-section{
    padding-top:0 !important;
}

.form-card{
    max-width:900px;
    margin:0 auto;
    padding:46px;
}

.form-card form{
    margin-top:30px;
    display:grid;
    gap:16px;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.form-card input,
.form-card textarea{
    width:100%;
    padding:16px 18px;
    border:1px solid rgba(11,26,51,.12);
    border-radius:16px;
    background:#fbfaf7;
    color:var(--ink);
    font:inherit;
    outline:none;
    transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}

.form-card input:focus,
.form-card textarea:focus{
    border-color:rgba(196,54,46,.62);
    background:#fff;
    box-shadow:0 0 0 4px rgba(196,54,46,.09);
}

.form-card textarea{
    resize:vertical;
    min-height:170px;
}

.form-card button{
    width:max-content;
    border:0;
    cursor:pointer;
    padding:14px 28px;
}

/* ---------- Social cards ---------- */

.contact-hero + .block,
.contact-form-section + .block{
    background:#f7f3ec;
}

.contact-form-section + .block .paths-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px;
    margin-top:42px;
}

.contact-form-section + .block .path-card{
    min-height:210px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:30px;
    border-radius:24px;
    text-align:center;
}

.contact-form-section + .block .path-card h3{
    color:var(--navy-900);
    font-size:1.45rem;
}

.contact-form-section + .block .path-card p{
    margin-top:12px;
    color:var(--ink-soft);
}

/* ---------- CTA ---------- */

main > .store-banner{
    width:min(92vw,1500px);
    margin:30px auto 90px;
    padding:72px 36px;
    border-radius:30px;
    background:
        radial-gradient(circle at 85% 20%,rgba(212,168,61,.20),transparent 30%),
        linear-gradient(135deg,#0d223f,#1d4373);
    text-align:center;
    color:#fff;
    box-shadow:0 28px 70px rgba(11,26,51,.20);
}

main > .store-banner h2{
    color:#fff;
    font-size:clamp(2.2rem,4vw,3.4rem);
}

main > .store-banner p{
    max-width:660px;
    margin:18px auto 30px;
    color:rgba(255,255,255,.82);
    font-size:1.08rem;
}

/* ---------- Responsive ---------- */

@media(max-width:980px){
    .contact-hero-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .contact-hero-grid{
        gap:42px;
        text-align:center;
    }

    .contact-hero-copy h1,
    .contact-hero-copy p:last-child{
        margin-left:auto;
        margin-right:auto;
    }

    .contact-hero-art img{
        max-width:620px;
        transform:none;
    }

    .contact-form-section + .block .paths-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:700px){
    .contact-hero{
        padding:70px 0 54px;
    }

    .contact-hero-copy h1{
        font-size:clamp(2.5rem,12vw,3.7rem);
    }

    .contact-card,
    .form-card,
    .premium-info-card{
        padding:28px 22px;
        border-radius:24px;
    }

    .form-grid,
    .premium-info-card .feature-list,
    .contact-form-section + .block .paths-grid{
        grid-template-columns:1fr;
    }

    .map-card,
    .map-card iframe{
        min-height:380px;
    }

    main > .store-banner{
        width:min(92vw,680px);
        padding:54px 24px;
        margin-bottom:60px;
    }
}

/* ======================================================
   SOCIAL SECTION
====================================================== */

.social-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
    margin-top:60px;
}

.social-card{
    background:#fff;
    border:1px solid rgba(15,35,65,.08);
    border-radius:26px;
    padding:36px 28px;
    text-align:center;
    text-decoration:none;
    color:inherit;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.social-card:hover{
    transform:translateY(-8px);
    border-color:rgba(212,168,61,.35);
    box-shadow:0 28px 60px rgba(15,35,65,.12);
}

.social-icon{
    width:72px;
    height:72px;
    margin:0 auto 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f7f2e6;
    transition:.35s;
}

.social-card:hover .social-icon{
    background:#d4a83d;
}

.social-icon img{
    width:34px;
    height:34px;
    object-fit:contain;

    transition:.35s;
}

.social-card:hover .social-icon img{
    filter:brightness(0) invert(1);
}

.social-card h3{
    margin-bottom:14px;
    color:#10213e;
}

.social-card p{
    color:#58667c;
    line-height:1.75;
    font-size:.98rem;
}

@media(max-width:1000px){
.social-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:650px){
.social-grid{
    grid-template-columns:1fr;
}

}