/*==================================================
 ALPEN BEAUTY
 Luxury Barbershop & Hairdresser
 Refactored CSS
==================================================*/

/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700;800&display=swap');


/*==================================================
ROOT
==================================================*/

:root{

--black:#0f0f0f;
--black-light:#181818;

--brown:#2f2218;
--brown-light:#5d4433;

--gold:#c9a66b;
--gold-light:#e2c48b;

--paper:#faf8f5;
--cream:#f1ece5;

--text:#1a1a1a;
--text-light:#777;

--line:rgba(201,166,107,.18);

--radius:22px;

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

transition:.3s ease;

}


/*==================================================
RESET
==================================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'DM Sans',sans-serif;
background:var(--paper);
color:var(--text);
line-height:1.7;
font-size:16px;
overflow-x:hidden;
}

img{
display:block;
width:100%;
max-width:100%;
}

a{
text-decoration:none;
color:inherit;
}

button,
input,
textarea,
select{
font:inherit;
outline:none;
}

ul{
list-style:none;
}

.container{
width:min(1180px,calc(100% - 50px));
margin:auto;
}


/*==================================================
TYPOGRAPHY
==================================================*/

h1,
h2,
h3{
font-family:'Playfair Display',serif;
font-weight:700;
line-height:1.08;
}

h1{
font-size:clamp(3rem,7vw,6rem);
}

h2{
font-size:clamp(2.3rem,4vw,4rem);
margin-bottom:18px;
}

h3{
font-size:1.45rem;
margin-bottom:10px;
}

p{
color:var(--text-light);
}

.lead{
font-size:1.08rem;
max-width:700px;
margin:auto;
}

.eyebrow{
display:inline-block;
margin-bottom:12px;
color:var(--gold);
font-size:.75rem;
letter-spacing:4px;
font-weight:700;
text-transform:uppercase;
}

.section-heading{
margin-bottom:70px;
text-align:center;
}

.section-heading::after{
content:"";
display:block;
width:80px;
height:3px;
background:var(--gold);
margin:25px auto 0;
}


/*==================================================
BUTTONS
==================================================*/

.button{
display:inline-flex;
align-items:center;
justify-content:center;
height:52px;
padding:0 28px;
background:var(--gold);
color:#111;
font-size:.8rem;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
border:1px solid var(--gold);
transition:.3s;
cursor:pointer;
}

.button:hover{
background:var(--gold-light);
transform:translateY(-3px);
}

.button.ghost{
background:transparent;
color:white;
border:1px solid rgba(255,255,255,.5);
}

.button.ghost:hover{
background:white;
color:#111;
}


/*==================================================
HEADER
==================================================*/

.site-header{
position:absolute;
top:0;
left:0;
width:100%;
z-index:999;
border-bottom:1px solid rgba(255,255,255,.12);
}

.site-header.inner{
position:relative;
background:#111;
}

.header-row{
height:90px;
display:flex;
justify-content:space-between;
align-items:center;
}

.brand{
display:flex;
align-items:center;
gap:14px;
font-family:'Playfair Display',serif;
font-size:1.5rem;
font-weight:700;
color:white;
}

.brand-mark{
width:28px;
height:28px;
border:2px solid var(--gold);
transform:rotate(45deg);
position:relative;
}

.brand-mark::after{
content:"";
position:absolute;
inset:5px;
background:var(--gold);
}

.main-nav{
display:flex;
gap:34px;
align-items:center;
}

.main-nav a{
color:white;
font-size:.8rem;
font-weight:600;
letter-spacing:2px;
text-transform:uppercase;
position:relative;
padding:35px 0;
}

.main-nav a::after{
content:"";
position:absolute;
left:0;
bottom:24px;
width:0;
height:2px;
background:var(--gold);
transition:.3s;
}

.main-nav a:hover::after,
.main-nav .active::after{
width:100%;
}

.nav-book{
padding:12px 18px!important;
border:1px solid var(--gold);
}

.nav-book::after{
display:none;
}


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

.hero{
position:relative;
min-height:100vh;
display:flex;
align-items:center;
color:white;
background:
linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),
url("images/001.jpeg") center/cover no-repeat;
}

.hero::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(0,0,0,.85),
rgba(0,0,0,.45),
rgba(0,0,0,.15)
);
}

.hero .container{
position:relative;
z-index:2;
}

.hero-content{
max-width:700px;
}

.hero h1{
margin:18px 0 25px;
}

.hero h1 em{
font-style:normal;
color:var(--gold-light);
padding-top: 180px
}

.hero p{
color:rgba(255,255,255,.85);
margin-bottom:35px;
max-width:520px;
}

.hero-actions{
display:flex;
gap:15px;
flex-wrap:wrap;
}


/*==================================================
INTRO
==================================================*/

.intro{
padding:120px 0;
overflow:hidden;
}

.intro-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:90px;
align-items:center;
}

.intro-picture{
position:relative;
}

.intro-picture img{
height:700px;
object-fit:cover;
border-radius:var(--radius);
box-shadow:var(--shadow);
}

.intro-picture::after{
content:"";
position:absolute;
right:-35px;
bottom:-35px;
width:80%;
height:80%;
border:2px solid var(--gold);
border-radius:var(--radius);
z-index:-1;
}

.intro-badge{
position:absolute;
top:5px;
right:-25px;
width:135px;
height:135px;
border-radius:50%;
background:var(--brown);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:white;
box-shadow:var(--shadow);
}

.intro-badge strong{
font-size:2rem;
font-family:'Playfair Display',serif;
color:var(--gold-light);
}

.intro-badge small{
font-size:.72rem;
text-transform:uppercase;
letter-spacing:2px;
text-align:center;
}

.intro-copy h2{
margin:18px 0 22px;
}

.intro-copy p{
margin-bottom:20px;
}

.signature{
margin-top:35px;
font-family:'Playfair Display',serif;
font-size:2rem;
font-style:italic;
color:var(--brown-light);
}


/*==================================================
SERVICES
==================================================*/

.services-preview{
padding:120px 0;
background:var(--black);
color:white;
}

.services-preview .lead{
color:#b5b5b5;
}

.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
margin: 0 auto;
gap: 30px;
margin-top: 60px;
}

.service-card{
background:#161616;
border:1px solid rgba(201,166,107,.18);
border-radius:22px;
overflow:hidden;
transition:.35s;
box-shadow:0 15px 35px rgba(0,0,0,.18);
padding:35px 40px;
}

.service-card:hover{
transform:translateY(-10px);
border-color:var(--gold);
box-shadow:0 30px 70px rgba(0,0,0,.30);
}

.services-container {
display: flex;
justify-content: center;
align-items: center;
}

.service-card img{
height:320px;
object-fit:cover;
transition:.6s;
}

.service-card:hover img{
transform:scale(1.08);
}

.service-card-content{
padding:34px;
}

.service-number{
display:inline-block;
margin-bottom:18px;
font-size:.75rem;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
color:var(--gold);
}

.service-card h3{
color:white;
margin-bottom:14px;
}

.service-card p{
color:#cfcfcf;
margin-bottom:22px;
line-height:1.8;
}

.text-link{
display:inline-flex;
align-items:center;
gap:10px;
font-size:.78rem;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
color:var(--gold-light);
transition:.3s;
}

.text-link::after{
content:"→";
font-size:1.2rem;
transition:.3s;
}

.text-link:hover::after{
transform:translateX(8px);
}


/*==================================================
FEATURE BAND
==================================================*/

.feature-band{
padding:90px 0;
background:linear-gradient(135deg,#111,#1b1b1b);
}

.feature-list{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

.feature{
background:#181818;
border-radius:20px;
padding:35px;
text-align:center;
border:1px solid rgba(201,166,107,.15);
transition:.35s;
}

.feature:hover{
transform:translateY(-8px);
border-color:var(--gold);
}

.feature-icon{
width:70px;
height:70px;
margin:0 auto 25px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:2rem;
background:rgba(201,166,107,.12);
color:var(--gold);
}

.feature strong{
display:block;
font-family:'Playfair Display',serif;
font-size:1.5rem;
margin-bottom:10px;
color:white;
}

.feature span{
color:#d0d0d0;
font-size:.95rem;
line-height:1.7;
}


/*==================================================
GALLERY
==================================================*/

.gallery-preview{
padding:120px 0;
background:var(--paper);
}

.mosaic{
display:grid;
grid-template-columns:1.2fr 1fr 1fr;
grid-template-rows:repeat(2,260px);
gap:18px;
}

.mosaic-item{
position:relative;
overflow:hidden;
border-radius:22px;
cursor:pointer;
box-shadow:var(--shadow);
}

.mosaic-item:first-child{
grid-row:span 2;
}

.mosaic-item img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .7s ease;
}

.mosaic-item:hover img{
transform:scale(1.08);
}

.mosaic-item::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(transparent,rgba(0,0,0,.55),rgba(0,0,0,.85));
opacity:0;
transition:.4s;
}

.mosaic-item:hover::before{
opacity:1;
}

.mosaic-label{
position:absolute;
left:30px;
bottom:25px;
color:white;
font-family:'Playfair Display',serif;
font-size:1.35rem;
opacity:0;
transform:translateY(20px);
transition:.4s;
}

.mosaic-item:hover .mosaic-label{
opacity:1;
transform:translateY(0);
}


/*==================================================
FULL GALLERY PAGE
==================================================*/

.filter-row{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:14px;
margin-bottom:55px;
}

.filter-button{
padding:12px 20px;
background:transparent;
border:1px solid rgba(0,0,0,.12);
cursor:pointer;
font-size:.75rem;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
transition:.3s;
}

.filter-button:hover,
.filter-button.active{
background:var(--gold);
border-color:var(--gold);
color:#111;
}

.gallery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
}

.gallery-card{
position:relative;
overflow:hidden;
border-radius:25px;
aspect-ratio:1/1;
cursor:pointer;
background:#222;
box-shadow:var(--shadow);
}

.gallery-card img{
height:100%;
object-fit:cover;
transition:.6s;
}

.gallery-card:hover img{
transform:scale(1.1);
}

.gallery-card figcaption{
position:absolute;
left:0;
right:0;
bottom:0;
padding:45px 25px 22px;
background:linear-gradient(transparent,rgba(0,0,0,.9));
color:white;
font-family:'Playfair Display',serif;
font-size:1.15rem;
opacity:0;
transform:translateY(20px);
transition:.35s;
}

.gallery-card:hover figcaption{
opacity:1;
transform:translateY(0);
}

.gallery-card.wide{
grid-column:span 2;
aspect-ratio:2.1/1;
}


/*==================================================
TESTIMONIALS
==================================================*/

.testimonials{
padding:120px 0;
background:var(--cream);
}

.quote-card{
max-width:920px;
margin:auto;
padding:70px;
background:white;
border-radius:24px;
box-shadow:var(--shadow);
position:relative;
text-align:center;
}

.quote-card::before{
content:"“";
position:absolute;
left:40px;
top:15px;
font-size:7rem;
font-family:'Playfair Display',serif;
color:var(--gold);
opacity:.25;
}

.quote{
font-family:'Playfair Display',serif;
font-size:2rem;
line-height:1.6;
color:#222;
margin-bottom:35px;
}

.quote-author{
font-size:.8rem;
letter-spacing:3px;
text-transform:uppercase;
font-weight:700;
color:var(--gold);
}


/*==================================================
CALL TO ACTION
==================================================*/

.cta{
padding:130px 0;
text-align:center;
color:white;
background:
linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.72)),
url("images/cta.jpg") center/cover no-repeat;
}

.cta h2{
font-size:3rem;
margin:20px 0;
}

.cta p{
max-width:700px;
margin:0 auto 35px;
color:rgba(255,255,255,.82);
}

.cta .button{
margin-top:10px;
}


/*==================================================
HOVER ANIMATIONS
==================================================*/

.button,
.service-card,
.gallery-card,
.feature,
.mosaic-item{
transition:all .35s ease;
}

.button:hover{
box-shadow:0 18px 35px rgba(201,166,107,.30);
}

.service-card:hover,
.gallery-card:hover,
.feature:hover{
transform:translateY(-8px);
}


/*==================================================
PAGE HERO (jedna spoločná verzia)
==================================================*/

.page-hero{
position:relative;
padding:130px 0 100px;
text-align:center;
color:white;
background:
linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.72)),
url("images/page-hero.jpg") center/cover no-repeat;
}

.page-hero h1{
margin:20px auto;
max-width:900px;
font-size:clamp(3rem,6vw,5rem);
}

.page-hero .lead{
max-width:760px;
margin:auto;
color:rgba(255,255,255,.82);
}

.breadcrumb{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:20px;
font-size:.75rem;
letter-spacing:2px;
text-transform:uppercase;
color:var(--gold);
}


/*==================================================
SERVICES PAGE
==================================================*/

.page-section{
padding:120px 0;
}

.page-section.tinted{
background:var(--cream);
}

.service-detail-list{
display:grid;
gap:25px;
margin-top:60px;
}

.service-detail{
display:grid;
grid-template-columns:80px 1fr auto;
gap:35px;
align-items:center;
padding:30px;
background:white;
border-radius:20px;
box-shadow:0 12px 35px rgba(0,0,0,.08);
transition:.35s;
}

.service-detail:hover{
transform:translateY(-6px);
box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.service-detail-number{
font-size:.8rem;
font-weight:700;
letter-spacing:2px;
color:var(--gold);
}

.service-detail h3{
margin-bottom:10px;
}

.service-detail p{
margin:0;
}

.duration{
font-weight:700;
color:var(--brown);
white-space:nowrap;
}


/*==================================================
SPLIT FEATURE
==================================================*/

.split-feature{
display:grid;
grid-template-columns:1fr 1fr;
overflow:hidden;
background:#111;
color:white;
border-radius:24px;
}

.split-feature img{
height:100%;
min-height:500px;
object-fit:cover;
}

.split-feature-copy{
padding:80px;
display:flex;
justify-content:center;
flex-direction:column;
}

.split-feature-copy p{
color:#cfcfcf;
margin:25px 0;
}

.check-list{
display:grid;
gap:14px;
margin:30px 0;
}

.check-list li{
position:relative;
padding-left:28px;
color:#ddd;
}

.check-list li::before{
content:"✓";
position:absolute;
left:0;
color:var(--gold);
font-weight:bold;
}


/*==================================================
PRICING
==================================================*/

.price-columns{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:50px;
margin-top:60px;
}

.price-group{
background:white;
border-radius:22px;
padding:40px;
box-shadow:var(--shadow);
}

.price-group h2{
margin-bottom:12px;
}

.price-group>p{
margin-bottom:30px;
}

.price-list{
display:grid;
gap:18px;
}

.price-row{
display:grid;
grid-template-columns:1fr auto;
align-items:center;
padding:16px 0;
border-bottom:1px solid rgba(0,0,0,.08);
}

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

.price-row strong{
display:block;
font-size:1.05rem;
margin-bottom:4px;
}

.price-row span{
font-size:.9rem;
color:#777;
}

.price-row b{
font-size:1.1rem;
color:var(--gold);
}

.price-note{
margin-top:35px;
padding:30px;
background:#111;
border-radius:20px;
color:white;
}

.price-note strong{
display:block;
font-size:1.4rem;
margin-bottom:12px;
color:var(--gold);
}


/*==================================================
CONTACT
==================================================*/

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

.contact-list{
display:grid;
gap:28px;
margin-top:35px;
}

.contact-item{
display:grid;
grid-template-columns:55px 1fr;
gap:18px;
align-items:start;
}

.contact-icon{
width:48px;
height:48px;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
background:rgba(201,166,107,.12);
color:var(--gold);
font-size:1.2rem;
}

.contact-item strong{
display:block;
margin-bottom:6px;
font-family:'Playfair Display',serif;
font-size:1.15rem;
}

.hours{
margin-top:45px;
padding:28px;
background:white;
border-radius:20px;
box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.hours strong{
display:block;
margin-bottom:18px;
font-size:1.2rem;
}

.hours-row{
display:flex;
justify-content:space-between;
padding:10px 0;
border-bottom:1px solid rgba(0,0,0,.08);
}

.hours-row:last-child{
border:none;
}


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

.contact-form{
background:#111;
padding:50px;
border-radius:24px;
color:white;
}

.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:30px;
}

.form-field{
display:flex;
flex-direction:column;
}

.form-field.full{
grid-column:span 2;
}

.form-field label{
margin-bottom:8px;
font-size:.75rem;
letter-spacing:2px;
text-transform:uppercase;
color:var(--gold);
}

.form-field input,
.form-field textarea,
.form-field select{
background:transparent;
border:none;
border-bottom:1px solid rgba(255,255,255,.2);
padding:14px 0;
color:white;
}

.form-field textarea{
min-height:120px;
resize:vertical;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
border-color:var(--gold);
}

.map-wrap{
margin-top:60px;
border-radius:22px;
overflow:hidden;
height:420px;
box-shadow:var(--shadow);
}

.map-wrap iframe{
width:100%;
height:100%;
border:none;
filter:grayscale(1);
}


/*==================================================
TEAM PAGE
==================================================*/

.team-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:35px;
margin-top:70px;
}

.team-card{
background:#151515;
border-radius:24px;
overflow:hidden;
border:1px solid rgba(201,166,107,.18);
box-shadow:var(--shadow);
transition:.35s;
text-align:center;
}

.team-card:hover{
transform:translateY(-10px);
border-color:var(--gold);
}

.team-card img{
width:100%;
height:380px;
object-fit:cover;
transition:.6s;
}

.team-card:hover img{
transform:scale(1.08);
}

.team-content{
padding:35px;
}

.team-card h3,
.team-content h3{
color:#ffffff;
margin-bottom:10px;
}

.team-role{
display:block;
margin-bottom:18px;
color:var(--gold);
font-size:.78rem;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
}

.team-content p{
color:#cfcfcf;
line-height:1.8;
}

.team-socials{
display:flex;
justify-content:center;
gap:12px;
margin-top:22px;
}

.team-socials a{
width:42px;
height:42px;
display:flex;
justify-content:center;
align-items:center;
border:1px solid rgba(255,255,255,.15);
border-radius:50%;
transition:.3s;
}

.team-socials a:hover{
background:var(--gold);
color:#111;
border-color:var(--gold);
}


/*==================================================
OLD BASIC FOOTER
==================================================*/

.site-footer{
background:#0d0d0d;
color:#bbb;
padding:90px 0 30px;
}

.footer-top{
display:grid;
grid-template-columns:1.3fr .8fr .8fr;
gap:60px;
padding-bottom:50px;
border-bottom:1px solid rgba(255,255,255,.08);
}

.footer-brand p{
margin-top:18px;
max-width:340px;
}

.footer-heading{
color:var(--gold);
font-size:.78rem;
letter-spacing:2px;
margin-bottom:18px;
text-transform:uppercase;
}

.footer-nav{
display:grid;
gap:12px;
}

.footer-nav a{
transition:.3s;
}

.footer-nav a:hover{
color:white;
padding-left:6px;
}

.socials{
display:flex;
gap:12px;
margin-top:18px;
}

.social{
width:40px;
height:40px;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
border:1px solid rgba(255,255,255,.15);
transition:.3s;
}

.social:hover{
background:var(--gold);
color:#111;
border-color:var(--gold);
}

.footer-bottom{
padding-top:25px;
display:flex;
justify-content:space-between;
align-items:center;
font-size:.85rem;
color:#777;
}


/* =========================================
   PROFESSIONAL FOOTER STYLES
========================================= */

.professional-footer {
background-color: #1a1a1a;
color: #cccccc;
padding: 60px 0 30px 0;
font-size: 0.95rem;
line-height: 1.6;
border-top: 1px solid #2a2a2a;
}

.professional-footer .footer-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr 1fr 1fr;
gap: 40px;
margin-bottom: 50px;
}

.professional-footer .footer-heading {
color: #ffffff;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 20px;
letter-spacing: 0.5px;
text-transform: uppercase;
}

.professional-footer .brand {
color: #ffffff;
font-size: 1.4rem;
font-weight: 700;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}

.professional-footer .footer-bio {
color: #999999;
font-size: 0.9rem;
margin-bottom: 20px;
max-width: 280px;
}

.professional-footer .socials {
display: flex;
gap: 10px;
}

.professional-footer .social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background-color: #2a2a2a;
color: #ffffff;
text-decoration: none;
border-radius: 50%;
font-size: 0.85rem;
font-weight: 600;
transition: background-color 0.2s, transform 0.2s;
}

.professional-footer .social-icon:hover {
background-color: #ffffff;
color: #1a1a1a;
transform: translateY(-2px);
}

.professional-footer ul {
list-style: none;
padding: 0;
margin: 0;
}

.professional-footer .footer-links li {
margin-bottom: 10px;
}

.professional-footer .footer-links a,
.professional-footer .footer-address a {
color: #cccccc;
text-decoration: none;
transition: color 0.2s;
}

.professional-footer .footer-links a:hover,
.professional-footer .footer-address a:hover {
color: #ffffff;
text-decoration: underline;
}

.professional-footer .opening-hours li {
display: flex;
justify-content: space-between;
border-bottom: 1px dashed #333333;
padding: 6px 0;
font-size: 0.9rem;
}

.professional-footer .opening-hours li strong {
color: #ffffff;
}

.professional-footer .opening-hours li .closed {
color: #e57373;
}

.professional-footer .footer-note {
font-size: 0.8rem;
color: #777777;
margin-top: 10px;
font-style: italic;
}

.professional-footer .footer-address {
font-style: normal;
font-size: 0.9rem;
}

.professional-footer .footer-address p {
margin: 0 0 10px 0;
}

.professional-footer .footer-book-btn {
display: inline-block;
padding: 10px 18px;
font-size: 0.85rem;
background-color: #ffffff;
color: #1a1a1a !important;
text-decoration: none !important;
border-radius: 6px;
font-weight: 600;
transition: background-color 0.2s;
}

.professional-footer .footer-book-btn:hover {
background-color: #e0e0e0;
}

.professional-footer .footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
border-top: 1px solid #2a2a2a;
font-size: 0.85rem;
color: #777777;
}

.professional-footer .legal-links {
display: flex;
gap: 20px;
}

.professional-footer .legal-links a {
color: #999999;
text-decoration: none;
transition: color 0.2s;
}

.professional-footer .legal-links a:hover {
color: #ffffff;
}


/*==================================================
BOOKING MODAL
==================================================*/

.booking-modal{
position:fixed;
inset:0;
display:none;
justify-content:center;
align-items:center;
background:rgba(0,0,0,.75);
z-index:9999;
padding:25px;
}

.booking-modal.open{
display:flex;
}

.booking-dialog{
background:var(--paper);
border-radius:24px;
padding:45px;
width:min(650px,100%);
max-height:90vh;
overflow:auto;
position:relative;
}

.modal-close{
position:absolute;
top:18px;
right:18px;
width:42px;
height:42px;
border:none;
background:none;
font-size:2rem;
cursor:pointer;
color:var(--brown);
}


/*==================================================
 RESPONSIVE & MOBILE MENU
==================================================*/

/* Skrytie hamburger tlačidla na veľkých obrazovkách */
.menu-toggle {
    display: none;
}

@media(max-width:1100px){
    /* Opravený preklep: .service-grid -> .services-grid */
    .services-grid,
    .team-grid,
    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .feature-list{
        grid-template-columns:repeat(2,1fr);
    }

    .price-columns,
    .contact-grid,
    .intro-grid,
    .split-feature,
    .footer-top{
        grid-template-columns:1fr;
    }

    .split-feature img{
        min-height:350px;
    }
}

@media(max-width:900px){
    .professional-footer .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:30px;
    }
}

@media(max-width:768px){
    .container{
        width:min(100% - 30px,650px);
    }

    /* --- 1. OPRAVA MOBILNÉHO MENU --- */
    .menu-toggle {
        display: block; 
        background: none;
        border: none;
        width: 35px;
        height: 25px;
        position: relative;
        z-index: 1000;
        cursor: pointer;
    }
    
    .menu-toggle span,
    .menu-toggle::before,
    .menu-toggle::after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--gold);
        transition: 0.3s ease;
    }
    
    .menu-toggle::before { top: 0; }
    .menu-toggle span { top: 50%; transform: translateY(-50%); }
    .menu-toggle::after { bottom: 0; }
    
    /* Animácia krížika pri otvorenom menu */
    .menu-toggle[aria-expanded="true"]::before {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }
    .menu-toggle[aria-expanded="true"] span {
        opacity: 0;
    }
    .menu-toggle[aria-expanded="true"]::after {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
    }

    /* Bočný vysúvací panel s navigáciou */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%; 
        width: 80%;
        max-width: 350px;
        height: 100vh;
        background: var(--black);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        transition: right 0.4s ease;
        z-index: 999;
        box-shadow: -5px 0 20px rgba(0,0,0,0.5);
    }
    
    .main-nav.open {
        right: 0; 
    }

    .main-nav a {
        padding: 10px 0;
        font-size: 1.2rem;
    }

    /* --- 2. ÚPRAVA ROZLOŽENIA ELEMENTOV --- */
    .hero {
        min-height: 600px;
        text-align: center;
        padding-top: 120px; /* Toto potlačí nadpis nižšie, pod hlavičku */
    }

    .hero-content {
        margin: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    /* Správne zarovnanie kariet do jedného stĺpca */
    .services-grid,
    .gallery-grid,
    .team-grid,
    .feature-list {
        grid-template-columns: 1fr;
    }

    /* --- 3. ÚPRAVA PRE PODSTRÁNKU USLUGI --- */
    [data-category] {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }

    .mosaic {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .mosaic-item:first-child {
        grid-row: auto;
    }

    .intro-picture img {
        height: 350px;
    }

    .intro-badge {
        width: 100px;
        height: 100px;
        right: 10px;
        bottom: -30px;
        top: auto;
    }

    .intro-badge strong {
        font-size: 1.5rem;
    }

    .page-hero {
        padding: 100px 0 60px;
    }

    .page-hero h1 {
        font-size: 2.2rem;
    }
    
    h2 {
        font-size: 2rem;
    }

    /* Zmenšenie masívnych okrajov na mobiloch */
    .intro, .services-preview, .feature-band, .gallery-preview, 
    .testimonials, .cta, .page-section {
        padding: 70px 0;
    }
    
    .quote-card {
        padding: 40px 25px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-field.full {
        grid-column: auto;
    }
    
    /* --- 4. CENTROVANIE PÄTIČKY --- */
    .site-footer {
        text-align: center;
    }

    .site-footer .footer-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .site-footer .footer-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .site-footer .socials {
        display: flex;
        justify-content: center;
    }

    .site-footer .footer-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
    }

    /* Úprava aj pre alternatívnu verziu pätičky, ak sa používa */
    .professional-footer .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .professional-footer .socials,
    .professional-footer .footer-bottom {
        justify-content: center;
    }

    .professional-footer .footer-bottom {
        flex-direction: column; 
        gap: 15px;
    }
    
    .professional-footer .legal-links {
        justify-content: center;
        flex-wrap: wrap;
    }
}