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

.blog-hero{

  min-height:70vh;

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

  text-align:center;

  padding:
  180px 5vw 120px;

  background:
  linear-gradient(
    135deg,
    #181818,
    #242424
  );

  color:white;

  position:relative;

  overflow:hidden;
}

.blog-hero::before{

  content:"";

  position:absolute;

  width:700px;
  height:700px;

  border-radius:50%;

  background:
  rgba(184,134,70,0.12);

  filter:blur(80px);

  top:-250px;
  right:-200px;
}

.blog-hero-content{

  max-width:1200px;

  position:relative;

  z-index:2;
}

.blog-hero h1{

  font-size:
  clamp(52px,7vw,100px);

  line-height:0.95;

  margin-bottom:30px;

  font-family:
  'Playfair Display',serif;
}

.blog-hero .hero-description{

  max-width:700px;

  margin:auto;

  color:
  rgba(255,255,255,0.72);

  line-height:1.9;

  font-size:
  clamp(18px,2vw,22px);
}

/* ================= BLOG ================= */

.blog-section{

  padding:100px 2vw;
}

.blog-grid{

  max-width:1400px;

  margin:auto;

  display:grid;

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

  gap:24px;
}

/* CARD */

.blog-card{

  background:white;

  border-radius:34px;

  overflow:hidden;

  transition:0.4s;

  box-shadow:
  0 15px 50px
  rgba(0,0,0,0.06);
}

.blog-card:hover{

  transform:translateY(-10px);

  box-shadow:
  0 30px 80px
  rgba(0,0,0,0.12);
}

.blog-card img{

  width:100%;
   aspect-ratio:16/10;

  object-fit:cover;

  transition:0.5s;
}

.blog-card:hover img{

  transform:scale(1.04);
}

/* CONTENT */

.blog-content{

  padding:22px;
}

.blog-date{

  display:inline-block;

  margin-bottom:18px;

  color:var(--accent);

  font-size:14px;

  font-weight:600;

  letter-spacing:1px;

  text-transform:uppercase;
}

.blog-content h3{

  font-size:
  clamp(22px,2vw,30px);

  line-height:1.2;

  margin-bottom:14px;

  font-family:
  'Playfair Display',serif;
}

.blog-content p{

  color:var(--text-light);

  line-height:1.7;

  margin-bottom:20px;

  font-size:
  clamp(15px,2vw,17px);
}

/* BUTTON */

.blog-btn{

  display:inline-flex;

  align-items:center;

  gap:12px;

  padding:12px 20px;

  border-radius:14px;

  background:
  rgba(184,134,70,0.12);

  color:var(--accent);

  text-decoration:none;

  font-weight:600;

  transition:0.35s;
}

.blog-btn:hover{

  background:var(--accent);

  color:white;

  transform:translateY(-4px);
}

.blog-btn::after{

  content:"→";

  transition:0.3s;
}

.blog-btn:hover::after{

  transform:translateX(5px);
}

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

@media(max-width:1100px){

  .blog-grid{

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

}

@media(max-width:700px){

  .blog-grid{

    grid-template-columns:1fr;
  }

}

@media(max-width:700px){

  .blog-content{

    padding:30px;
  }

  .blog-card img{

    height:240px;
  }

}

/* ================= BLOG SECTION TITLE ================= */

.blog-section .section-heading{

  margin-bottom:80px;
}

/* ================= ANIMATION ================= */

.blog-card{

  opacity:0;

  transform:
  translateY(40px);

  animation:
  fadeBlog 0.8s ease forwards;
}

.blog-card:nth-child(2){

  animation-delay:0.15s;
}

.blog-card:nth-child(3){

  animation-delay:0.3s;
}

.blog-card:nth-child(4){

  animation-delay:0.45s;
}

@keyframes fadeBlog{

  to{

    opacity:1;

    transform:
    translateY(0);
  }

}

/* ================= IMAGE OVERLAY ================= */

.blog-card{

  position:relative;
}

.blog-card::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    180deg,
    transparent 60%,
    rgba(0,0,0,0.05)
  );

  z-index:1;

  pointer-events:none;
}

/* ================= HOVER EFFECT ================= */

.blog-content,
.blog-card img{

  position:relative;

  z-index:2;
}

/* ================= BLOG TAG ================= */

.blog-tag{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:10px 16px;

  border-radius:999px;

  background:
  rgba(184,134,70,0.12);

  color:var(--accent);

  font-size:13px;

  font-weight:600;

  letter-spacing:1px;

  text-transform:uppercase;

  margin-bottom:18px;
}

/* ================= READ TIME ================= */

.blog-meta{

  display:flex;

  align-items:center;

  gap:16px;

  margin-bottom:14px;

  flex-wrap:wrap;
}

.blog-time{

  color:var(--text-light);

  font-size:14px;
}

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

@media(max-width:768px){

  .blog-section{

    padding:90px 5vw;
  }

  .blog-hero{

    min-height:60vh;

    padding:
    160px 5vw 90px;
  }

}

.featured-post{

  padding:5rem 5vw 120px;
}

.featured-content{

  max-width:1400px;

  margin:auto;

  padding:80px;

  border-radius:40px;

  background:
  linear-gradient(
    135deg,
    #181818,
    #242424
  );

  color:white;

  position:relative;

  overflow:hidden;
}

.featured-content::before{

  content:"";

  position:absolute;

  width:500px;
  height:500px;

  border-radius:50%;

  background:
  rgba(184,134,70,0.14);

  filter:blur(80px);

  top:-250px;
  right:-150px;
}

.featured-content h2{

  font-size:
  clamp(40px,5vw,70px);

  line-height:1.05;

  margin:
  20px 0 30px;

  font-family:
  'Playfair Display',serif;

  position:relative;

  z-index:2;
}

.featured-content p{

  max-width:700px;

  line-height:1.9;

  color:
  rgba(255,255,255,0.72);

  margin-bottom:40px;

  position:relative;

  z-index:2;
}

.featured-tag{

  color:var(--accent);

  letter-spacing:2px;

  font-weight:600;

  position:relative;

  z-index:2;
}

.blog-categories{

  display:flex;

  justify-content:center;

  gap:16px;

  flex-wrap:wrap;

  margin-bottom:60px;
}

.blog-categories button{

  padding:14px 22px;

  border:none;

  border-radius:999px;

  background:white;

  color:var(--text);

  font-weight:600;

  cursor:pointer;

  transition:0.3s;

  box-shadow:
  0 10px 30px
  rgba(0,0,0,0.04);
}

.blog-categories button:hover,
.blog-categories button.active{

  background:var(--accent);

  color:white;

  transform:translateY(-3px);
}


/* ================= NEWSLETTER ================= */

.newsletter-section{

  padding:40px 5vw 120px;
}

.newsletter-box{

  max-width:1200px;

  margin:auto;

  padding:80px 60px;

  border-radius:40px;

  text-align:center;

  background:
  linear-gradient(
    135deg,
    #181818,
    #242424
  );

  color:white;

  position:relative;

  overflow:hidden;

  box-shadow:
  0 25px 80px
  rgba(0,0,0,0.12);
}

.newsletter-box::before{

  content:"";

  position:absolute;

  width:500px;
  height:500px;

  border-radius:50%;

  background:
  rgba(184,134,70,0.14);

  filter:blur(90px);

  top:-250px;
  right:-180px;
}

.newsletter-box h2{

  font-size:
  clamp(40px,5vw,72px);

  line-height:1.05;

  margin:
  20px 0 24px;

  font-family:
  'Playfair Display',serif;

  position:relative;

  z-index:2;
}

.newsletter-box p{

  max-width:700px;

  margin:auto;

  line-height:1.9;

  color:
  rgba(255,255,255,0.72);

  position:relative;

  z-index:2;

  font-size:
  clamp(16px,2vw,18px);
}

.newsletter-form{

  display:flex;

  justify-content:center;

  gap:18px;

  margin-top:45px;

  flex-wrap:wrap;

  position:relative;

  z-index:2;
}

.newsletter-form input{

  width:360px;

  max-width:100%;

  padding:20px 24px;

  border:none;

  border-radius:18px;

  outline:none;

  font-size:16px;

  font-family:inherit;

  background:white;

  color:var(--text);

  transition:0.3s;
}

.newsletter-form input:focus{

  box-shadow:
  0 0 0 4px
  rgba(184,134,70,0.18);
}

.newsletter-form button{

  padding:20px 34px;

  border:none;

  border-radius:18px;

  background:var(--accent);

  color:white;

  font-weight:600;

  font-size:16px;

  cursor:pointer;

  transition:0.3s;
}

.newsletter-form button:hover{

  transform:
  translateY(-4px);

  box-shadow:
  0 15px 35px
  rgba(184,134,70,0.3);
}

/* ================= AUTHOR ================= */

.blog-author-section{

  padding:0 5vw 120px;
}

.blog-author{

  max-width:1100px;

  margin:auto;

  background:white;

  padding:45px;

  border-radius:36px;

  display:flex;

  align-items:center;

  gap:34px;

  box-shadow:
  0 15px 50px
  rgba(0,0,0,0.06);

  transition:0.35s;
}

.blog-author:hover{

  transform:translateY(-6px);

  box-shadow:
  0 30px 80px
  rgba(0,0,0,0.1);
}

.blog-author img{

  width:130px;
  height:130px;

  border-radius:50%;

  object-fit:cover;

  border:
  4px solid rgba(184,134,70,0.14);
}

.blog-author h3{

  font-size:
  clamp(30px,4vw,44px);

  margin-bottom:16px;

  font-family:
  'Playfair Display',serif;
}

.blog-author p{

  color:var(--text-light);

  line-height:1.9;

  font-size:
  clamp(15px,2vw,17px);

  max-width:700px;
}

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

@media(max-width:768px){

  .newsletter-box{

    padding:60px 30px;
  }

  .blog-author{

    flex-direction:column;

    text-align:center;

    padding:35px 28px;
  }

}

/* ================= BLOG POST ================= */

.blog-post-hero{

min-height:70vh;

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

text-align:center;

padding:180px 5vw 120px;

background:
linear-gradient(
135deg,
#181818,
#242424
);

color:white;

position:relative;

overflow:hidden;
}

.blog-post-overlay{

position:absolute;

inset:0;

background:
radial-gradient(
circle at top right,
rgba(184,134,70,0.15),
transparent 40%
);
}

.blog-post-content{

max-width:1100px;

position:relative;

z-index:2;
}

.blog-post-meta{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:30px;

flex-wrap:wrap;
}

.blog-post-meta span{

padding:10px 18px;

border-radius:999px;

background:
rgba(255,255,255,0.08);

font-size:14px;

letter-spacing:1px;

text-transform:uppercase;
}

.blog-post-hero h1{

font-size:
clamp(48px,7vw,90px);

line-height:1;

margin-bottom:30px;

font-family:
'Playfair Display',serif;
}

.blog-post-hero p{

font-size:
clamp(18px,2vw,22px);

line-height:1.9;

color:
rgba(255,255,255,0.72);
}

/* CONTENT */

.blog-post-section{

padding:80px 2vw;
}

.blog-post-container{

max-width:1200px;

margin:auto;
}

.blog-post-container h2{

font-size:
clamp(34px,4vw,56px);
text-align: center;
margin:
50px 0 30px;

line-height:1.15;

font-family:
'Playfair Display',serif;
}

.blog-post-container p{

font-size:
clamp(15px,2vw,19px);
text-indent: 1rem;
line-height:2;

color:var(--text-light);

margin-bottom:20px;
}

.blog-post-container ul{

padding-left:24px;

margin-bottom:35px;
}

.blog-post-container li{

margin-bottom:4px;

line-height:1.9;

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

/* CTA */

.blog-post-cta{

margin-top:100px;
margin-bottom: 50px;

padding:70px 50px;

border-radius:40px;

background:
linear-gradient(
135deg,
#181818,
#242424
);

text-align:center;

color:white;
}

.blog-post-cta h2{

margin-top:0;
}

.blog-post-cta p{

color:
rgba(255,255,255,0.72);

margin-bottom:35px;
}

/* FAQ */

.blog-faq{

margin-top:20px;
}

.faq-item{

padding:35px;
margin: auto;

border-radius:30px;

background:white;

margin-bottom:25px;

box-shadow:
0 10px 40px
rgba(0,0,0,0.05);
}

/* MOBILE */

@media(max-width:768px){

.blog-post-section{

padding:90px 5vw;
}

.blog-post-hero{

padding:
160px 5vw 100px;
}

.blog-post-cta{

padding:50px 30px;
}

}

/* ================= BLOG LIST ================= */

.blog-post-container ul{

display:grid;

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

gap:18px;

padding-left:0;

margin:
35px 0 45px;

list-style:none;
}

.blog-post-container li{

position:relative;

padding:
18px 22px 18px 58px;

border-radius:22px;

background:
rgba(184,134,70,0.06);

line-height:1.8;

font-size:
clamp(14px,2vw,18px);

color:var(--text);

transition:0.3s;
}

.blog-post-container li::before{

content:"✓";

position:absolute;

left:22px;
top:18px;

width:24px;
height:24px;

display:flex;

align-items:center;
justify-content:center;

border-radius:50%;

background:var(--accent);

color:white;

font-size:13px;

font-weight:700;
}

.blog-post-container li:hover{

transform:
translateY(-4px);

background:
rgba(184,134,70,0.12);

box-shadow:
0 12px 35px
rgba(0,0,0,0.06);
}

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

@media(max-width:768px){

.blog-post-container ul{

grid-template-columns:1fr;
}

.blog-post-container li{

padding:
16px 18px 16px 52px;

border-radius:18px;
}

.blog-post-container li::before{

left:18px;
top:16px;

width:22px;
height:22px;
}

}


.line{

width:min(1200px,100%);

margin:
0 auto 1rem;

padding:1rem;

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

text-align:center;
}

/* ================= BLOG H3 ================= */

.blog-post-container h3{

font-size:
clamp(24px,3vw,36px);

line-height:1.25;

margin:
55px 0 22px;

font-family:
'Playfair Display',serif;

color:var(--text);

position:relative;

padding-left:22px;
}

/* GOLD LINE */

.blog-post-container h3::before{

content:"";

position:absolute;

left:0;
top:8px;

width:4px;
height:70%;

border-radius:20px;

background:var(--accent);
}

/* MOBILE */

@media(max-width:768px){

.blog-post-container h3{

padding-left:18px;

margin:
45px 0 18px;
}

}

/* ================= CONTAINER ================= */

.section-container{

width:min(1200px,100%);

margin:auto;
}


/* ================= ARTICLE COVER ================= */

.article-cover{

margin-top:120px;

padding:
0 5vw 80px;
}

.article-cover img{

width:100%;

max-width:1400px;

margin:auto;

display:block;

border-radius:40px;

box-shadow:
0 30px 80px
rgba(0,0,0,0.12);
}

/* ================= IMAGE TEXT ================= */

.image-text-section{

display:grid;

grid-template-columns:
1fr 1fr;

gap:50px;

align-items:center;

margin:
80px 0;
}

.image-text-image img{

width:100%;

border-radius:32px;

box-shadow:
0 20px 60px
rgba(0,0,0,0.08);
}

.image-text-content h3{

margin-top:0;
}

@media(max-width:900px){

.image-text-section{

grid-template-columns:1fr;
}

}

/* ================= QUOTE ================= */

.article-quote{

margin:
90px 0;

padding:
60px 50px;

border-radius:40px;

background:
linear-gradient(
135deg,
#181818,
#242424
);

color:white;

text-align:center;
}

.article-quote p{

font-size:
clamp(24px,3vw,42px);

line-height:1.5;

font-family:
'Playfair Display',serif;

color:white;
}


/* ================= ARTICLE COVER ================= */

.article-cover{

padding:
40px 5vw 80px;
}

.article-cover img{

width:100%;

max-width:1200px;

height:500px;

object-fit:cover;

display:block;

margin:auto;

border-radius:40px;

box-shadow:
0 25px 70px
rgba(0,0,0,0.12);
}

/* ================= FAQ BANNER ================= */

.faq-banner{

padding:
20px 5vw 70px;
}

.faq-banner img{

width:100%;

max-width:1100px;

height:320px;

object-fit:cover;

display:block;

margin:auto;

border-radius:36px;

box-shadow:
0 20px 60px
rgba(0,0,0,0.08);
}

/* ================= ARTICLE IMAGE ================= */

.article-image{

margin:
40px 0 60px;
}

.article-image img{

width:100%;

height:420px;

object-fit:cover;

border-radius:32px;

box-shadow:
0 20px 60px
rgba(0,0,0,0.08);
}

@media(max-width:768px){

.article-cover img{

height:260px;
}

.faq-banner img{

height:220px;
}

.article-image img{

height:240px;
}

}

/* ================= RELATED ARTICLES ================= */

.related-articles{

margin:
80px 0 40px;

padding:
35px 40px;

border-radius:32px;

background:
rgba(184,134,70,0.06);

border:
1px solid rgba(184,134,70,0.12);

box-shadow:
0 15px 45px
rgba(0,0,0,0.04);
}

.related-articles h4{

font-size:
clamp(22px,3vw,32px);

margin-bottom:24px;

font-family:
'Playfair Display',serif;

color:var(--text);
}

.related-articles a{

display:inline-flex;

align-items:center;
margin-top: 10px;
gap:12px;

padding:
16px 24px;

border-radius:18px;

background:white;

color:var(--accent);

text-decoration:none;

font-weight:600;

font-size:
clamp(14px,2vw,17px);

transition:0.3s;

box-shadow:
0 10px 30px
rgba(0,0,0,0.05);
}

.related-articles a::after{

content:"→";

transition:0.3s;
}

.related-articles a:hover{

transform:
translateY(-4px);

background:var(--accent);

color:white;

box-shadow:
0 18px 40px
rgba(184,134,70,0.22);
}

.related-articles a:hover::after{

transform:
translateX(5px);
}

/* MOBILE */

@media(max-width:768px){  

.related-articles{

padding:
28px 24px;


}

.related-articles a{

width:100%;

justify-content:center;

text-align:center;

margin-top: 10px;
}

}


/* Linki wewnętrzne w artykułach */

.blog-post-section p a{
  color: var(--accent, #c89b5c);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(200,155,92,.35);
  
}

.blog-post-section p a:hover{
  color: #fff;
  border-bottom-color: var(--accent, #c89b5c);
}

.blog-post-section p a:visited{
  color: var(--accent, #c89b5c);
}


/* CONTACT */

.contact-section{ 

  padding:40px 5vw;
}

.contact-grid{

  max-width:1400px;

  margin:auto;

  display:grid;

  grid-template-columns:
  1fr 1fr;

  gap:60px;

  align-items:start;
}

/* LEFT */

.contact-info{

  display:flex;

  flex-direction:column;

  gap:25px;
}

.contact-card{

  background:white;

  padding:35px;

  border-radius:30px;

  display:flex;

  gap:24px;

  align-items:flex-start;

  box-shadow:
  0 10px 40px
  rgba(0,0,0,0.05);
}

.contact-card i{

  font-size:28px;

  color:var(--accent);

  margin-top:5px;
}

.contact-card h3{

  font-size:24px;

  margin-bottom:10px;

  font-family:
  'Playfair Display',serif;
}

.contact-card a,
.contact-card p{

  color:var(--text-light);

  text-decoration:none;

  line-height:1.9;
}

/* FORM */

.contact-form{

  display:flex;

  flex-direction:column;

  gap:24px;
}

.contact-form input,
.contact-form textarea{

  padding:22px;

  border-radius:22px;

  border:
  1px solid rgba(0,0,0,0.08);

  background:white;

  font-size:16px;

  font-family:inherit;

  outline:none;

  transition:0.3s;
}

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

  border-color:var(--accent);

  box-shadow:
  0 0 0 4px
  rgba(195,154,91,0.12);
}

.contact-form textarea{

  resize:none;
}

#form-status{

  margin-top:5px;

  font-weight:500;
}


.mobile-cta{

  display:none;
}

@media(max-width:1000px){

  .mobile-cta{

    display:block;

    position:fixed;

    bottom:0;
    left:0;

    width:100%;

    padding:12px;

    background:white;

    box-shadow:
    0 -5px 20px rgba(0,0,0,.1);

    z-index:9999;
  }

  .mobile-cta a{

    display:block;

    text-align:center;

    background:var(--accent);

    color:white;

    text-decoration:none;

    padding:16px;

    border-radius:14px;

    font-weight:600;
  }

}


.article-tip{

background:#eef8ff;

border-left:5px solid #3fa9f5;

padding:28px;

margin:45px 0;

border-radius:14px;

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

}

.article-tip h3{

margin-bottom:12px;

color:#1877c9;

font-size:1.3rem;

}

.article-tip p{

margin:0;

line-height:1.8;

color:#444;

}

.article-tip.warning{

background:#fff8ea;

border-left:5px solid #f4a300;

}

.article-tip.warning h3{

color:#d18400;

}

@media(max-width:768px){

.article-tip{

padding:20px;

margin:35px 0;

}

.article-tip h3{

font-size:1.15rem;

}

}

.article-tip.success{

background:#eefcf3;

border-left:5px solid #22b573;

}

.article-tip.success h3{

color:#188a57;

}

/* ================= CHECKLIST ================= */

.checklist{

margin:40px 0;

display:grid;

gap:18px;

}

.check-item{

display:flex;

align-items:center;

gap:16px;

padding:18px 22px;

background:#fff;

border-radius:14px;

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

transition:.3s;

}

.check-item:hover{

transform:translateX(8px);

}

.check-item i{

font-size:1.4rem;

color:#22b573;

flex-shrink:0;

}

.check-item span{

font-size:1.05rem;

font-weight:500;

line-height:1.6;

color:#333;

}

@media(max-width:768px){

.check-item{

padding:16px;

gap:14px;

}

.check-item span{

font-size:1rem;

}

}