/* ═══════════════════════════════════════════════════════════════
   contact.css — Butcher's Burger & Steak House
   Σελίδα-specific styles — HTML & CSS από τον πελάτη
   DynaWasp © 2026
═══════════════════════════════════════════════════════════════ */

.contact-hero{
    background:var(--color-primary);
    color:var(--color-white);
    min-height:clamp(520px,58vw,760px);
    padding:clamp(130px,12vw,190px) var(--container-pad) clamp(70px,8vw,110px);
    text-align:center;
}

.contact-hero h1{
    margin:0 0 clamp(60px,7vw,95px);
    font-family:var(--font-display);
    font-size:clamp(64px,7vw,118px);
    line-height:.88;
    font-weight:400;
}

.contact-stores{
    max-width:920px;
    margin:0 auto;
}

.contact-stores p{
    margin:0;
    font-family:var(--font-mono);
    font-size:clamp(18px,1.75vw,28px);
    line-height:1.35;
    color:var(--color-white);
}

.contact-stores a:hover strong,
.contact-stores a:hover span{
    text-decoration:underline;
    text-underline-offset:6px;
    text-decoration-thickness:2px;
}

.contact-stores strong{
    font-weight: 700;
}

.contact-social{
    background:#AEACAC;
    color:var(--color-white);
    padding:clamp(64px,7vw,100px) var(--container-pad) clamp(70px,8vw,120px);
    text-align:center;
}

.contact-social h2{
    margin:0 0 clamp(60px,7vw,100px);
    font-family:var(--font-display);
    font-size:clamp(54px,7vw,112px);
    line-height:.88;
    font-weight:400;
}

.contact-social-layout{
    max-width:var(--container-max);
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr clamp(220px,22vw,296px) 1fr;
    gap:clamp(50px,8vw,130px);
    align-items:center;
}

.contact-social-link{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(20px,3vw,36px);
    font-family:var(--font-display);
    font-size:clamp(38px,4vw,66px);
    line-height:.9;
    color:var(--color-white);
    text-decoration:none;
}

.contact-social-link:hover span{
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 3px;
}

.contact-social-link img{
    width:clamp(70px,7vw,120px);
    height:auto;
}

.contact-social-photo img{
    display:block;
    width:100%;
    height:clamp(360px,38vw,560px);
    object-fit:cover;
}

.contact-tiktok{
    margin-top:clamp(24px,3vw,46px);
}

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

    .contact-social-photo{
        order:-1;
        max-width:260px;
        margin:0 auto;
    }
}