/* ==================================================
   CSS-HERO-CLAMP-01 – override clamp() from theme
================================================== */

/* Desktop */
@media (min-width: 1024px) {
  #page-header.ph-cap-xxxxlg .ph-caption-title {
    font-size: clamp(48px, 6vw, 150px) !important;
    line-height: 1.05;
  }
}

/* Mobile */
@media (max-width: 1023px) {
  #page-header.ph-cap-xxxxlg .ph-caption-title {
    font-size: clamp(32px, 8vw, 42px) !important;
    line-height: 1.1;
  }
}



/* =========================================
   HOME ONLY – hero image desktop/mobile
========================================= */

/* Desktop */
@media (min-width: 1024px) {
  body.home-page.page-header-on .ph-image img {
    content: url("../img/page-header/ph-1.jpg");
    object-fit: cover;
    object-position: 20% center;
  }
}

/* Mobile */
@media (max-width: 1023px) {
  body.home-page.page-header-on .ph-image img {
    content: url("../img/page-header/ph-mobile.jpg");
    object-fit: cover;
    object-position: center center;
  }
}



/* ==================================================
   CSS-HERO-DESC-10 – force 2 lines (desktop + mobile)
================================================== */

#page-header .ph-caption-description {
  display: block;
}

/* ==================================================
   CSS-HERO-DESC-11 – smaller description font (mobile)
================================================== */

@media (max-width: 1023px) {
  #page-header .ph-caption-description {
    font-size: 14px;
    line-height: 1.4;
  }
}

/* ==================================================
   CSS-HERO-DESC-20 – force vertical layout for hero description
================================================== */

#page-header .ph-caption-description {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* ==================================================
   CSS-HERO-MASK-01 – reset description styles for mask
================================================== */

.ph-mask .ph-caption-description {
  display: block;
  font-size: inherit;
  line-height: inherit;
}

.ph-mask .ph-caption-description {
  max-width: 700px;
}

/* =========================================
   PROJECT 1 – hero image desktop/mobile
========================================= */

/* Desktop */
@media (min-width: 1024px) {
  body.project-1-page .ph-image img {
    content: url("../img/portfolio/1920/projekt1_1PR.webp") !important;
  }
}

/* Mobile */
@media (max-width: 1023px) {
  body.project-1-page .ph-image img {
    content: url("../img/portfolio/1920/projekt1_3PR.webp") !important;
  }
}

/* =========================================
   PROJECT 2 – hero image desktop/mobile
========================================= */

/* Desktop */
@media (min-width: 1024px) {
  body.project-2-page .ph-image img {
    content: url("../img/portfolio/1920/projekt2_11PR.jpg") !important;
  }
}

/* Mobile */
@media (max-width: 1023px) {
  body.project-2-page .ph-image img {
    content: url("../img/portfolio/1920/projekt2_3PR.jpg") !important;
  }
}

/* =========================================
   PROJECT 3 – hero image desktop/mobile
========================================= */

/* Desktop */
@media (min-width: 1024px) {
  body.project-3-page .ph-image img {
    content: url("../img/portfolio/1920/projekt3_1PR.jpg") !important;
  }
}

/* Mobile */
@media (max-width: 1023px) {
  body.project-3-page .ph-image img {
    content: url("../img/portfolio/1920/projekt3_4PR.jpg") !important;
  }
}

/* =========================================
   PROJECT 4 – hero image desktop/mobile
========================================= */

/* Desktop */
@media (min-width: 1024px) {
  body.project-4-page .ph-image img {
    content: url("../img/portfolio/1920/projekt4_2PR.jpg") !important;
  }
}

/* Mobile */
@media (max-width: 1023px) {
  body.project-4-page .ph-image img {
    content: url("../img/portfolio/1920/projekt4_2PR_800.jpg") !important;
  }
}

/* =========================================
   PROJECT 5 – hero image desktop/mobile
========================================= */

/* Desktop */
@media (min-width: 1024px) {
  body.project-5-page .ph-image img {
    content: url("../img/portfolio/1920/projekt5_3PR.jpg") !important;
  }
}

/* Mobile */
@media (max-width: 1023px) {
  body.project-5-page .ph-image img {
    content: url("../img/portfolio/1920/projekt5_7PR.jpg") !important;
  }
}

/* =========================================
   PROJECT 6 – hero image desktop/mobile
========================================= */

/* Desktop */
@media (min-width: 1024px) {
  body.project-6-page .ph-image img {
    content: url("../img/portfolio/1920/projekt6_3PR.jpg") !important;
  }
}

/* Mobile */
@media (max-width: 1023px) {
  body.project-6-page .ph-image img {
    content: url("../img/portfolio/1920/projekt6_5PR.jpg") !important;
  }
}

/* =========================================
   PROJECT 7 – hero image desktop/mobile
========================================= */

/* Desktop */
@media (min-width: 1024px) {
  body.project-7-page .ph-image img {
    content: url("../img/portfolio/1920/projekt7_15PR.jpg") !important;
  }
}

/* Mobile */
@media (max-width: 1023px) {
  body.project-7-page .ph-image img {
    content: url("../img/portfolio/1920/projekt7_16PR.jpg") !important;
  }
}

/* ABOUT – fix line break on mobile */
@media (max-width: 1023px) {
  body.about-page .ph-caption-description span {
    display: block;
  }
}