/*
PLT — Contacts Page
Premium UI / Apple-like UX
*/

/* =========================================
BASE
========================================= */

.plt-contacts{
background:var(--white);
}

.plt-department__header{
margin-bottom:20px;
}

.plt-department__header h2{
font-family:var(--font-head);
font-size:28px;
font-weight:700;
letter-spacing:-.4px;
color:var(--ink);
margin-bottom:6px;
}

.plt-department__header p{
font-size:14px;
color:var(--muted);
}


/* =========================================
HERO
========================================= */

.plt-contacts__hero{

padding:clamp(64px,10vw,140px) 0 clamp(40px,7vw,60px);

background:
linear-gradient(
to right,
#f6f5f2 0%,
rgba(246,245,242,.95) 35%,
rgba(246,245,242,.7) 55%,
rgba(246,245,242,0) 75%
),

url('/wp-content/themes/plt-child/images/contacts.webp')
right center / cover no-repeat,

#f6f5f2;

border-bottom:1px solid var(--border);

}

.plt-contacts__hero-inner{

display:flex;
align-items:center;
justify-content:space-between;

gap:60px;

}

.plt-contacts__hero-text{
max-width:520px;
}

.plt-contacts__eyebrow{

font-size:13px;
font-weight:800;
letter-spacing:2px;
text-transform:uppercase;

color:var(--red);

margin-bottom:18px;

}

.plt-contacts__hero h1{

font-family:var(--font-head);

font-size:clamp(34px,5vw,60px);

font-weight:700;

line-height:1.05;

letter-spacing:-1px;

color:var(--ink);

margin-bottom:18px;

}

.plt-contacts__hero p{

font-size:18px;
line-height:1.7;
color:var(--muted);

}


/* =========================================
HERO CARD
========================================= */

.plt-contacts__hero-card .card{

background:#fff;

border:1px solid var(--border);

border-radius:14px;

padding:28px;

width:260px;

box-shadow:
0 20px 50px rgba(0,0,0,.06);

transition:
transform .35s cubic-bezier(.22,.61,.36,1),
box-shadow .35s;

}

.plt-contacts__hero-card .card:hover{

transform:translateY(-6px);

box-shadow:
0 30px 70px rgba(0,0,0,.1);

}

.card-title{

font-size:12px;
font-weight:700;

text-transform:uppercase;

letter-spacing:1px;

color:var(--muted);

margin-bottom:10px;

}

.card-phone{

display:block;

font-size:22px;

font-weight:800;

color:var(--ink);

text-decoration:none;

margin-bottom:6px;

}

.card-phone:hover{
color:var(--red);
}


/* =========================================
MAIN LAYOUT
========================================= */

.plt-contacts__main{

padding:clamp(72px,9vw,120px) 0;

}

.plt-contacts__layout{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:clamp(40px,6vw,80px);

align-items:start;

}

.plt-contacts__left{

display:flex;

flex-direction:column;

gap:32px;

}


/* =========================================
PEOPLE GRID
========================================= */

.plt-people{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

}


/* =========================================
PERSON CARD
========================================= */

.plt-person{

background:#fff;

border:1px solid var(--border);

border-radius:14px;

padding:22px;

transition:
transform .35s cubic-bezier(.22,.61,.36,1),
box-shadow .35s,
border-color .2s;

}

.plt-person:hover{

transform:translateY(-4px);

box-shadow:
0 20px 45px rgba(0,0,0,.07);

border-color:#e4e4e4;

}

.plt-person__name{

font-size:17px;

font-weight:700;

letter-spacing:-.2px;

color:var(--ink);

margin-bottom:4px;

}

.plt-person__role{

font-size:12px;

text-transform:uppercase;

letter-spacing:.8px;

color:var(--muted);

margin-bottom:12px;

}

.plt-person__contacts a{

display:block;

font-size:15px;

font-weight:600;

color:var(--ink);

text-decoration:none;

margin-bottom:4px;

transition:color .15s;

}

.plt-person__contacts a:hover{
color:var(--red);
}

.plt-person__office{

font-size:13px;

color:var(--muted);

margin-top:8px;

}


/* =========================================
RIGHT COLUMN
========================================= */

.plt-contacts__right{

display:flex;

flex-direction:column;

gap:22px;

}


/* =========================================
MAP
========================================= */

.plt-contacts__map{

border-radius:14px;

overflow:hidden;

border:1px solid var(--border);

height:320px;

background:#f6f6f6;

}


/* =========================================
BLOCKS
========================================= */

.plt-contacts__block{

background:#fff;

border:1px solid var(--border);

border-radius:12px;

overflow:hidden;

}

.plt-contacts__block-label{

font-size:11px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:var(--muted);

padding:14px 22px;

border-bottom:1px solid var(--border);

background:#fafafa;

}


/* =========================================
ROWS
========================================= */

.plt-contacts__row{

display:grid;

grid-template-columns:100px 1fr;

gap:16px;

padding:14px 22px;

border-bottom:1px solid var(--border);

transition:background .15s;

}

.plt-contacts__row:last-child{
border-bottom:none;
}

.plt-contacts__row:hover{
background:rgba(0,0,0,.015);
}

.plt-contacts__row-key{

font-size:12px;

font-weight:600;

color:#000;

text-transform:uppercase;

letter-spacing:.4px;

}

.plt-contacts__row-val{

font-size:14px;

color:var(--ink);

line-height:1.5;

}


/* =========================================
REQUISITES
========================================= */

.plt-contacts__req-row{

display:grid;

grid-template-columns:120px 1fr;

gap:16px;

padding:12px 22px;

border-bottom:1px solid var(--border);

}

.plt-contacts__req-row:last-child{
border-bottom:none;
}

.plt-contacts__req-key{

font-size:12px;

font-weight:600;

text-transform:uppercase;

color:var(--muted);

}

.plt-contacts__req-val{

font-size:14px;

color:var(--ink);

word-break:break-word;

}


/* =========================================
FORM
========================================= */

.plt-contacts__form{

background:#fff;

border:1px solid var(--border);

border-radius:14px;

padding:28px;

}

.plt-contacts__form-title{

font-family:var(--font-head);

font-size:20px;

font-weight:700;

margin-bottom:4px;

}

.plt-contacts__form-sub{

font-size:14px;

color:var(--muted);

margin-bottom:18px;

}

.plt-contact-form .v4-field{

margin-bottom:14px;

}

/*.plt-contact-form input,
.plt-contact-form textarea{

width:100%;

border:1.5px solid var(--border);

border-radius:6px;

padding:12px 14px;

font-size:15px;

background:#fff;

transition:border .2s, box-shadow .2s;

}*/

.plt-contact-form input:focus,
.plt-contact-form textarea:focus{

border-color:var(--ink);

box-shadow:0 0 0 3px rgba(0,0,0,.05);

outline:none;

}

.plt-contacts__form-privacy{

margin-top:10px;

font-size:12px;

color:var(--muted);

text-align:center;

line-height:1.4;

}

.plt-contacts__form-privacy a{
color:var(--ink);
}


/* =========================================
FOCUS STATES
========================================= */

a:focus-visible,
button:focus-visible{

outline:2px solid var(--red);

outline-offset:2px;

}


/* =========================================
MOBILE
========================================= */

@media (max-width:1024px){

.plt-contacts__layout{
grid-template-columns:1fr;
}

.plt-contacts__hero-inner{
flex-direction:column;
align-items:flex-start;
}

.plt-contacts__hero-card{
width:100%;
}

}

@media (max-width:768px){

.plt-people{
grid-template-columns:1fr;
}

.plt-person{
padding:18px;
}

.plt-person__name{
font-size:16px;
}

.card-phone{
font-size:20px;
}

.plt-contacts__map{
height:240px;
}

}

@media (max-width:480px){

.plt-contacts__hero h1{
font-size:32px;
}

.plt-contacts__hero p{
font-size:16px;
}

.plt-contacts__row{
grid-template-columns:80px 1fr;
}

.plt-contacts__req-row{
grid-template-columns:80px 1fr;
}

}

.plt-sticky-contact{

top:24px;

background:linear-gradient(
180deg,
#ffffff,
#fbfbfb
);

border:1px solid var(--border);

border-radius:16px;

padding:24px;

margin-bottom:22px;

box-shadow:
0 10px 40px rgba(0,0,0,.06);

transition:
transform .35s cubic-bezier(.22,.61,.36,1),
box-shadow .35s;

}

.plt-sticky-contact:hover{

transform:translateY(-3px);

box-shadow:
0 20px 60px rgba(0,0,0,.12);

}

.plt-sticky-contact__title{

font-size:13px;

font-weight:800;

letter-spacing:1px;

text-transform:uppercase;

color:var(--muted);

margin-bottom:10px;

}

.plt-sticky-contact__phone{

display:block;

font-size:24px;

font-weight:800;

color:var(--ink);

text-decoration:none;

margin-bottom:6px;

}

.plt-sticky-contact__mail{

display:block;

font-size:14px;

margin-bottom:14px;

color:var(--muted);

text-decoration:none;

}

.plt-sticky-contact__btn{

display:block;

text-align:center;

background:#0066b3;

color:#fff;

padding:12px 16px;

border-radius:8px;

font-weight:700;

text-decoration:none;

transition:all .2s;

}

.plt-sticky-contact__btn:hover{

background:#017edc;

transform:translateY(-1px);

}

.plt-mobile-call{

display:none;

}

@media (max-width:768px){

.plt-mobile-call{

position:fixed;

bottom:16px;
left:16px;
right:16px;

z-index:1000;

}

.plt-mobile-call__btn{

display:block;

text-align:center;

background:var(--red);

color:#fff;

font-size:16px;

font-weight:800;

padding:16px;

border-radius:12px;

box-shadow:
0 12px 30px rgba(0,0,0,.2);

text-decoration:none;

}

}

a,
button{

transition:
transform .25s cubic-bezier(.22,.61,.36,1),
box-shadow .25s,
background .2s,
color .2s;

}

/* press scale */

a:active,
button:active{

transform:scale(.96);

}

/* hover lift */

.card,
.plt-person,
.plt-contacts__block{

transition:
transform .35s cubic-bezier(.22,.61,.36,1),
box-shadow .35s;

}

.card:hover,
.plt-person:hover,
.plt-contacts__block:hover{

transform:translateY(-4px);

box-shadow:
0 20px 50px rgba(0,0,0,.08);

}

/* =========================================
DIRECTOR CARD
========================================= */

.plt-director{

position:relative;

padding:30px 32px;

border-radius:18px;

background:
linear-gradient(135deg,
#f0f4ff 0%,
#e8eeff 50%,
#eef1ff 100%
);

border:1px solid #c8d2f5;

box-shadow:
0 20px 60px rgba(80,100,200,.1),
0 0 0 1px rgba(255,255,255,.7) inset;

overflow:hidden;

transition:
transform .35s cubic-bezier(.22,.61,.36,1),
box-shadow .35s;

}

.plt-director::before{

content:'';

position:absolute;

top:0; left:0;

width:4px;

height:100%;

background:var(--red);

border-radius:18px 0 0 18px;

}

.plt-director::after{

content:'';

position:absolute;

top:-60px; right:-40px;

width:200px;

height:200px;

background:radial-gradient(
circle,
rgba(200,22,31,.12) 0%,
transparent 70%
);

pointer-events:none;

}

.plt-director:hover{

transform:translateY(-5px);

box-shadow:
0 30px 80px rgba(80,100,200,.18),
0 0 0 1px rgba(255,255,255,.9) inset;

}

.plt-director__badge{

display:inline-flex;

align-items:center;

gap:6px;

font-size:11px;

font-weight:800;

letter-spacing:2px;

text-transform:uppercase;

color:var(--red);

margin-bottom:14px;

}

.plt-director__badge::before{

content:'';

display:inline-block;

width:6px;

height:6px;

border-radius:50%;

background:var(--red);

box-shadow:0 0 8px var(--red);

}

.plt-director__name{

font-size:22px;

font-weight:800;

letter-spacing:-.3px;

color:var(--ink);

margin-bottom:4px;

}

.plt-director__role{

font-size:12px;

text-transform:uppercase;

letter-spacing:1px;

color:var(--muted);

margin-bottom:20px;

}

.plt-director__contacts{

display:flex;

flex-wrap:wrap;

gap:10px;

}

.plt-director__contacts a{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 18px;

border-radius:8px;

font-size:14px;

font-weight:700;

text-decoration:none;

transition:all .2s;

}

.plt-director__contacts a.phone{

background:rgba(255,255,255,.7);

color:var(--ink);

border:1px solid #c8d2f5;

}

.plt-director__contacts a.phone:hover{

background:#fff;

border-color:#a0b0e8;

box-shadow:0 4px 12px rgba(80,100,200,.12);

}

.plt-director__contacts a.mail{

background:var(--red);

color:#fff;

border:1px solid transparent;

}

.plt-director__contacts a.mail:hover{

background:#c8161f;

transform:translateY(-1px);

box-shadow:0 8px 20px rgba(200,22,31,.35);

}


/* =========================================
HEAD OF DEPARTMENT (начальник)
========================================= */

.plt-person--head{

background:linear-gradient(
135deg,
#fff 0%,
#fdf8f8 100%
);

border-color:#e8d0d0;

position:relative;

overflow:hidden;

}

.plt-person--head::before{

content:'';

position:absolute;

top:0; left:0;

width:3px;

height:100%;

background:var(--red);

border-radius:14px 0 0 14px;

}

.plt-person--head .plt-person__role{

color:var(--red);

font-weight:800;

}

.plt-person--head .plt-person__name{

font-size:16px;

}


.plt-department{

padding:24px;

border:1px solid var(--border);

border-radius:16px;

background: linear-gradient(180deg, #ffffff, #f6f5f2);

box-shadow:
0 10px 40px rgba(0,0,0,.03);

}

.plt-department__header{

border-bottom:1px solid var(--border);

padding-bottom:14px;

margin-bottom:20px;

}

.plt-department__header h2{

font-size:24px;

font-weight:800;

letter-spacing:-.3px;

}

.plt-department__header p{

font-size:13px;

color:var(--muted);

}

.plt-contacts__block-label{

font-size:12px;

font-weight:800;

letter-spacing:1px;

text-transform:uppercase;

color:var(--ink);

background:#f6f6f6;

padding:16px 22px;

border-bottom:1px solid var(--border);

}