/* ===========================================================================
   PODSTRÁNKY - inner hero + sekce specifické pro about/services/contact/blog/projekty
   =========================================================================== */

/* ============================================================
   INNER HERO (společné pro about/services/projects/blog/contact)
   .dat: radial gradient #ffffff → rgba(255,255,255,0)
         overlays_image = on (gradient PŘES image)
         background_image = post_featured_image (rozhodnutí: dp-builder-15.webp)
         h1 70px center, tablet 60px, phone 50px
   ============================================================ */
.inner-hero {
  position: relative;
  padding-block: 120px;
  text-align: center;
  background-image:
    radial-gradient(ellipse at center, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 100%),
    url('../img/dp-builder-15.webp');
  background-size: cover;
  background-position: center;
}

.inner-hero h1 {
  font-family: var(--f-heading);
  font-size: 70px;
  font-weight: 700;
  line-height: 1.3em;
  color: var(--c-primary);
}

@media (max-width: 1024px) {
  .inner-hero h1 { font-size: 60px; }
  .inner-hero { padding-block: 80px; }
}
@media (max-width: 768px) {
  .inner-hero h1 { font-size: 50px; }
  .inner-hero { padding-block: 60px; }
}

/* ============================================================
   ABOUT INTRO (sekce 1, bg #FFFFFF)
   .dat: ROW 1_2,1_2
         COL 1: image src /dp-builder-16.webp, max_width 90%
                box_shadow preset4: H+80, V+80, spread -47, color #2d3b44
         COL 2: H2 40px + 2× popisek
   ============================================================ */
.about-intro {
  padding-block: 100px;
  background: var(--c-white);
}
.about-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 1_2, 1_2 */
  gap: 60px;
  align-items: center;
}
.about-intro__img {
  position: relative;
  max-width: 90%;                  /* max_width = 90% */
  /* preset4: posunutý stín H+V, spread negativní */
  filter: drop-shadow(80px 80px 33px rgba(45,59,68,0.45));
  z-index: 9;
}
.about-intro__img img {
  width: 100%;
  height: auto;
  display: block;
}
.about-intro h2 {
  font-size: 40px;
  margin-bottom: 24px;
}
.about-intro p {
  margin-bottom: 20px;
  line-height: 1.7;
}
@media (max-width: 1024px) {
  .about-intro__grid { grid-template-columns: 1fr; gap: 40px; }
  .about-intro h2 { font-size: 35px; }
  .about-intro__img { filter: drop-shadow(40px 40px 20px rgba(45,59,68,0.35)); }
}
@media (max-width: 768px) {
  .about-intro h2 { font-size: 28px; }
}

/* ============================================================
   SKILLS (sekce 2, bg #f8f8f8)
   .dat: ROW 1_2,1_2, make_equal, align-items center
         COL 1: H2 40px + popisek + button "View All Projects" left
         COL 2: 4× bar_counter 77/89/70/67
           title 20px, filled bg #2d3b44, stripe rgba(0,0,0,0.08), animated
   ============================================================ */
.skills {
  background: var(--c-bg-section);
  padding-block: 90px;
}
.skills__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.skills h2 {
  font-size: 40px;
  margin-bottom: 24px;
}
.skills__text p {
  margin-bottom: 32px;
  line-height: 1.7;
}
.skills__bars {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bar__label {
  font-family: var(--f-body);
  font-size: 20px;                /* title_font_size = 20px */
  font-weight: 500;
  color: var(--c-text);
  line-height: 1.4em;
}
.bar__track {
  height: 28px;
  background: rgba(45,59,68,0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.bar__fill {
  height: 100%;
  background-color: var(--c-dark);  /* filled_bar_bg_color = #2d3b44 */
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0,0,0,0.08) 0,            /* stripe_color */
    rgba(0,0,0,0.08) 10px,
    transparent 10px,
    transparent 20px
  );
  background-size: 28px 28px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 12px;
  color: var(--c-white);            /* percent_text_color = #FFFFFF */
  font-size: 14px;                  /* percent_font_size = 14px */
  font-weight: 500;
  width: 0%;
  transition: width 1.5s cubic-bezier(0.4,0,0.2,1);
  animation: barStripes 2s linear infinite;
}
@keyframes barStripes {
  from { background-position: 0 0; }
  to { background-position: 28px 0; }
}
@media (max-width: 1024px) {
  .skills__grid { grid-template-columns: 1fr; gap: 40px; }
  .skills h2 { font-size: 35px; }
  .bar__label { font-size: 18px; }
}
@media (max-width: 768px) {
  .skills h2 { font-size: 28px; }
}

/* ============================================================
   WHERE WE WORK + FAQ (sekce 3)
   .dat: SECTION bez bg, padding ||8%||false|false
         ROW 1_2,1_2
         COL 1: H2 + hotspot (image /dp-builder-22.webp + 7 pinů)
         COL 2: H2 + FAQ (4× toggle)
   ============================================================ */
.map-faq {
  padding-block: 90px;
  padding-bottom: calc(90px + 8%);  /* custom_padding = ||8%|| */
  background: var(--c-white);
}
.map-faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.map-faq h2 {
  font-size: 40px;
  text-align: center;
  margin-bottom: 30px;
}

/* Hotspot - mapa s 7 piny */
.hotspot {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1080;
}
.hotspot__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hotspot__pin {
  position: absolute;
  width: 28px; height: 28px;
  background: var(--c-primary);   /* single_marker_shape_color = #7e5f41 */
  color: var(--c-white);          /* marker_icon_color = #FFFFFF */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;                 /* marker_icon_font_size = 18px */
  transform: translate(-50%, -50%);
}
.hotspot__pin::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-primary);
  opacity: 0.5;
  z-index: -1;
  animation: pinPulse 2s ease-in-out infinite;
}
@keyframes pinPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.8); opacity: 0; }
}
.hotspot__pin svg {
  width: 18px; height: 18px;
  fill: currentColor;
  position: relative;
  z-index: 1;
}

/* FAQ - 4× toggle, bg #f8f8f8, closed 18px, open 21px */
.faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq__item {
  background: var(--c-bg-section);
  border-radius: 4px;
  overflow: hidden;
}
.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  text-align: left;
  font-family: var(--f-body);
  font-size: 18px;                 /* faq_question_closed_font_size = 18px */
  font-weight: 500;
  color: var(--c-text);
  cursor: pointer;
  transition: font-size var(--transition);
}
.faq__item.is-open .faq__question {
  font-size: 21px;                 /* faq_question_open_font_size = 21px */
}
.faq__icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  color: var(--c-dark);            /* closed_icon_color = #2d3b44 */
  font-size: 28px;                 /* closed_icon_font_size = 28px */
  line-height: 1;
  font-weight: 300;
  transition: transform var(--transition);
}
.faq__item.is-open .faq__icon {
  transform: rotate(45deg);
  color: #000000;                  /* open_icon_color = #000000 */
}
.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow), padding var(--transition-slow);
  padding: 0 24px;
}
.faq__item.is-open .faq__answer {
  max-height: 400px;
  padding: 0 24px 24px;
}
.faq__answer p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text);
}

@media (max-width: 1024px) {
  .map-faq__grid { grid-template-columns: 1fr; gap: 50px; }
  .map-faq h2 { font-size: 35px; }
}
@media (max-width: 768px) {
  .map-faq h2 { font-size: 28px; }
  .faq__question { font-size: 16px; }
  .faq__item.is-open .faq__question { font-size: 18px; }
  .hotspot__pin { width: 18px; height: 18px; }
  .hotspot__pin svg { width: 8px; height: 8px; }
}

/* ============================================================
   SERVICES - 4 řádky s 280px outline čísly
   .dat: každý řádek bg #f8f8f8, column_structure 1_3,1_3,1_3
         gutter 1, margin ||60px|| (60px mezi řádky)
         čísla: weight 800, 280px, color rgba(201,201,201,0.15) FILL
         text h2 50px / h3 40px center
   ============================================================ */
.services-list {
  padding-block: 90px 50px;
}
.service {
  background: var(--c-bg-section);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 1_3,1_3,1_3 */
  gap: 0;
  margin-bottom: 60px;
  border-radius: 4px;
  overflow: hidden;
  align-items: center;
}
/* Layout - 1+3: [číslo][text][image], 2+4: [image][text][číslo] */
.service--1 .service__num,
.service--3 .service__num { order: 1; }
.service--1 .service__text,
.service--3 .service__text { order: 2; }
.service--1 .service__img,
.service--3 .service__img { order: 3; }

.service--2 .service__img,
.service--4 .service__img { order: 1; }
.service--2 .service__text,
.service--4 .service__text { order: 2; }
.service--2 .service__num,
.service--4 .service__num { order: 3; }

/* Outline číslo */
.service__num {
  padding: 30px;
  font-family: var(--f-heading);
  font-weight: 800;
  font-size: 280px;                /* text_font_size = 280px */
  line-height: 280px;              /* text_line_height = 280px */
  color: var(--c-service-number);  /* rgba(201,201,201,0.15) FILL */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.service__text {
  padding: 60px 30px;
  text-align: center;
}
.service__text h2 {
  font-size: 50px;                 /* header_2_font_size = 50px */
  margin-bottom: 20px;
  line-height: 1.2;
  color: var(--c-primary);
}
.service__text p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-text);
}

.service__img {
  height: 100%;
}
.service__img img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  .service {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* Na mobile: číslo nahoře menší, image, text */
  .service__num,
  .service--1 .service__num, .service--2 .service__num,
  .service--3 .service__num, .service--4 .service__num {
    order: 1;
    font-size: 120px;
    line-height: 120px;
    padding: 30px;
  }
  .service__img,
  .service--1 .service__img, .service--2 .service__img,
  .service--3 .service__img, .service--4 .service__img {
    order: 2;
  }
  .service__text,
  .service--1 .service__text, .service--2 .service__text,
  .service--3 .service__text, .service--4 .service__text {
    order: 3;
    padding: 40px 24px;
  }
  .service__text h2 { font-size: 35px; }
  .service__img img { min-height: 220px; }
}
@media (max-width: 768px) {
  .service__text h2 { font-size: 28px; }
  .service__num,
  .service--1 .service__num, .service--2 .service__num,
  .service--3 .service__num, .service--4 .service__num {
    font-size: 80px;
    line-height: 80px;
  }
}

/* ============================================================
   PROJECTS PAGE - full masonry galerie
   ============================================================ */
.projects-page {
  background: var(--c-bg-section);
  padding-block: 90px;
}
.projects-page .masonry {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1024px) {
  .projects-page .masonry { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .projects-page .masonry { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   BLOG PAGE - grid karty + paginace
   ============================================================ */
.blog-page {
  padding-block: 90px;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.blog-grid .blog-card {
  border: 1px solid rgba(45,59,68,0.08);
  border-radius: 4px;
}
.pagination {
  margin-top: 60px;
  display: flex;
  justify-content: flex-start;
  gap: 16px;
}
.pagination a {
  color: var(--c-primary);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.pagination a:hover { color: var(--c-dark); }
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CONTACT - 3 karty + formulář
   .dat:
     ROW1 3 karty:
       column_structure 1_3,1_3,1_3
       bg #f8f8f8 NA COLUMN, padding 40px|40px|40px|40px
       PROSTŘEDNÍ (Phone) má transform_scale 90%, hover 100%
       ikony: e010 (envelope), f095 (FA phone), e01d (location)
       icon_color #2d3b44, icon_font_size 25px, image_icon_width 40px
     ROW2 formulář:
       bg #f8f8f8
       form border 1px #7e5f41
       form_field_background #FFFFFF
       button_padding 8px|45px (NE 10|45)
   ============================================================ */
.contact-cards {
  padding-block: 90px 30px;
}
.contact-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 1_3,1_3,1_3 */
  gap: 0;                                  /* gutter_width = 1 */
}
.contact-card {
  background: var(--c-bg-section);         /* #f8f8f8 */
  padding: 40px;                           /* custom_padding 40px|40px|40px|40px */
  text-align: center;
  transition: transform var(--transition);
}
/* Prostřední karta scale 90%, hover 100% */
.contact-card--middle {
  transform: scale(0.9);
}
.contact-card--middle:hover {
  transform: scale(1);
}
.contact-card__icon {
  width: 40px; height: 40px;               /* image_icon_width = 40px */
  margin: 0 auto 20px;
  color: var(--c-dark);                    /* icon_color = #2d3b44 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-card__icon svg {
  width: 25px; height: 25px;               /* icon_font_size = 25px */
  fill: currentColor;
}
.contact-card__title {
  font-family: var(--f-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: 10px;
}
.contact-card__value {
  font-size: 16px;
  color: var(--c-text);
}
.contact-card__value a:hover { color: var(--c-primary); }

@media (max-width: 768px) {
  .contact-cards__grid { grid-template-columns: 1fr; }
  .contact-card--middle { transform: none; }
}

/* Contact form */
.contact-form-wrap {
  padding-block: 30px 90px;
  background: var(--c-bg-section);          /* row bg #f8f8f8 */
}
.contact-form-wrap .container {
  padding: 50px;
}
.contact-form-wrap h2 {
  font-size: 40px;
  text-align: center;
  margin-bottom: 40px;
}
.contact-form {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  border: 1px solid var(--c-primary);        /* border_color_all = #7e5f41, 1px */
  padding: 40px;
  background: transparent;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field--full { grid-column: 1 / -1; }
.form-field input,
.form-field textarea {
  padding: 14px 18px;
  border: 1px solid rgba(45,59,68,0.15);
  background: var(--c-white);                /* form_field_background_color */
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--c-text);
  border-radius: 0;
}
.form-field textarea {
  min-height: 140px;
  resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--c-primary);
}
.form-field.has-error input,
.form-field.has-error textarea {
  border-color: #dc3545;
}
.form-error {
  font-size: 12px;
  color: #dc3545;
  display: none;
}
.form-field.has-error .form-error { display: block; }
.contact-form__submit {
  grid-column: 1 / -1;
  text-align: right;
  margin-top: 12px;
}
.contact-form__submit .btn {
  padding: 8px 45px;                          /* button_custom_padding 8px|45px */
  border: 0;                                   /* button_border_width = 0 */
}
.form-status {
  grid-column: 1 / -1;
  padding: 14px 18px;
  border-radius: 4px;
  font-size: 14px;
  margin-top: 8px;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status--success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.form-status--error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
@media (max-width: 768px) {
  .contact-form-wrap .container { padding: 20px; }
  .contact-form { grid-template-columns: 1fr; padding: 24px; }
}