/* =========================================================
LANDING CORE
wspólny layout i struktura dla wszystkich templatek
========================================================= */

:root{
--landing-page-bg:#ffffff;
--landing-text:#111111;
--landing-muted:#5f5f5f;
--landing-heading:#111111;
--landing-accent:#111111;

--landing-container-max:1380px;
--landing-content-narrow:900px;
--landing-content-medium:1040px;
--landing-content-wide:1240px;

--landing-section-space-top:34px;
--landing-section-space-bottom:46px;
--landing-section-space-gap:0px;

--landing-shell-bg:transparent;
--landing-shell-border:transparent;
--landing-shell-radius:0px;
--landing-shell-shadow:none;
--landing-shell-padding:0px;

--landing-surface-bg:transparent;
--landing-surface-border:#dddddd;
--landing-surface-radius:16px;
--landing-surface-shadow:none;

--landing-card-bg:transparent;
--landing-card-border:transparent;
--landing-card-radius:14px;
--landing-card-shadow:none;

--landing-btn-bg:transparent;
--landing-btn-color:var(--landing-heading);
--landing-btn-border:var(--landing-heading);
--landing-btn-radius:999px;
--landing-btn-hover-bg:var(--landing-heading);
--landing-btn-hover-color:#ffffff;

--landing-input-bg:rgba(255,255,255,.82);
--landing-input-border:#d8d8d8;
--landing-input-radius:12px;

--landing-faq-border:#d8d8d8;
--landing-faq-open-border:#111111;

--landing-social-border:#d8d8d8;
--landing-social-bg:transparent;
--landing-social-hover-bg:#111111;

--landing-gallery-radius:8px;
--landing-gallery-gap:20px;
}

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

html,
body{
margin:0;
padding:0;
width:100%;
overflow-x:hidden;
}

*,
*::before,
*::after{
box-sizing:border-box;
}

.landing-page{
width:100%;
overflow-x:hidden;
background:var(--landing-page-bg);
color:var(--landing-text);
}

.landing-page,
.landing-page input,
.landing-page textarea,
.landing-page button{
font-family:Inter,system-ui,sans-serif;
}

.landing-main{
display:block;
width:100%;
overflow-x:hidden;
}

/* =========================================================
SECTIONS
========================================================= */

.landing-page .section{
margin:0;
padding-left:0;
padding-right:0;
width:100%;
}

.landing-page .section:not(.section-hero){
padding-top:var(--landing-section-space-top);
padding-bottom:var(--landing-section-space-bottom);
}

.landing-page .section + .section:not(.section-hero){
margin-top:var(--landing-section-space-gap);
}

/* normal sections only */
.landing-page .section > .layout-container,
.landing-page .landing-footer .layout-container{
max-width:var(--landing-container-max);
margin:0 auto;
padding-left:30px;
padding-right:30px;
box-sizing:border-box;
}

/* hero must be edge-to-edge */
.landing-page .section-hero > .layout-container,
.landing-page .section-hero > .layout-container-hero{
max-width:none;
width:100%;
margin:0;
padding:0 !important;
}

.landing-page .section:not(.section-hero) > .layout-container{
background:var(--landing-shell-bg);
border:1px solid var(--landing-shell-border);
border-radius:var(--landing-shell-radius);
box-shadow:var(--landing-shell-shadow);
padding-top:var(--landing-shell-padding);
padding-bottom:var(--landing-shell-padding);
}

.landing-page h1,
.landing-page h2,
.landing-page h3{
margin-top:0;
color:var(--landing-heading);
}

.landing-page h2{
text-align:center;
font-size:clamp(1.7rem,2.6vw,2.5rem);
font-weight:700;
letter-spacing:-0.02em;
margin-bottom:36px;
}

.landing-section-shell,
.ui-box,
.landing-contact-form{
width:100%;
box-sizing:border-box;
background:var(--landing-surface-bg);
border-radius:var(--landing-surface-radius);
box-shadow:var(--landing-surface-shadow);
}

.landing-section-shell--narrow,
.ui-box,
.landing-contact-form,
.landing-faq{
max-width:var(--landing-content-narrow);
margin-left:auto;
margin-right:auto;
}

.landing-section-shell--medium,
.landing-pricing-grid{
max-width:var(--landing-content-medium);
margin-left:auto;
margin-right:auto;
}

.landing-section-shell--wide,
.landing-services-grid,
#upg-gallery{
max-width:var(--landing-content-wide);
margin-left:auto;
margin-right:auto;
}

.ui-box{
padding:28px 30px;
text-align:center;
line-height:1.9;
}

.ui-box p{
margin:0;
}

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

#upg-gallery .photo-link{
display:block;
cursor:zoom-in;
}

#upg-gallery .upg-box,
#upg-gallery .upg-photo,
#upg-gallery .upg-hover{
cursor:zoom-in;
}

#upg-gallery .upg-hover{
pointer-events:none;
}

#upg-gallery{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--landing-gallery-gap);
}

#upg-gallery .upg-box{
position:relative;
overflow:hidden;
border-radius:var(--landing-gallery-radius);
background:#000;
}

#upg-gallery .upg-photo{
width:100%;
height:auto;
display:block;
}

#upg-gallery .upg-hover{
position:absolute;
inset:0;
display:flex;
align-items:flex-end;
justify-content:center;
background:linear-gradient(to top,rgba(0,0,0,.6),transparent);
opacity:0;
transition:opacity .25s ease;
}

#upg-gallery .upg-box:hover .upg-hover{
opacity:1;
}

#upg-gallery .upg-title{
color:#fff;
font-size:14px;
padding:12px;
text-align:center;
}

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

.landing-services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:28px;
align-items:start;
}

.landing-service-card{
display:flex;
flex-direction:column;
align-items:flex-start;
text-align:left;
gap:0;
text-decoration:none;
color:inherit;
}

.landing-service-photo{
width:100%;
aspect-ratio:4 / 3;
overflow:hidden;
position:relative;
border-radius:var(--landing-card-radius);
background:#f1f1f1;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width:900px){
#upg-gallery{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}

@media (max-width:600px){
#upg-gallery{
grid-template-columns:1fr;
}

.landing-page .section > .layout-container,
.landing-page .landing-footer .layout-container{
padding-left:16px;
padding-right:16px;
}
}