/* Youngcraft Ltd — final responsive hero override
   Loaded last by includes/head.php.

   Goal:
   - A 16:9 master remains visually 16:9.
   - No CSS zoom.
   - No object-fit cropping of the hero artwork.
   - Mobile/tablet keep a true 16:9 image region with the copy below it.
*/

/* Desktop: the HERO ITSELF is 16:9.
   1920 wide => 1080 high
   1600 wide => 900 high
   1366 wide => ~768 high
*/
@media (min-width: 821px) {
  .home-v5 .ycl-hero {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
  }

  .home-v5 .ycl-hero__stage,
  .home-v5 .ycl-hero__slide,
  .home-v5 .ycl-hero__picture {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .home-v5 .ycl-hero__picture img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;

    /* contain guarantees that the uploaded composition is not cropped.
       With a true 16:9 master inside a 16:9 hero there will be no bars. */
    object-fit: contain !important;

    transform: none !important;
    transition: none !important;
    max-width: none !important;
  }

  .home-v5 .ycl-hero__slide.is-active .ycl-hero__picture img {
    transform: none !important;
  }
}

/* Tablet + phone:
   The image itself stays 16:9 at the top.
   Hero copy/controls use the region beneath it instead of forcing the image
   into a tall portrait container.
*/
@media (max-width: 820px) {
  .home-v5 .ycl-hero {
    width: 100% !important;
    height: calc(56.25vw + 390px) !important;
    min-height: 590px !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    background: #0b0f14 !important;
    overflow: hidden !important;
  }

  .home-v5 .ycl-hero__picture {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: 56.25vw !important;
    aspect-ratio: 16 / 9 !important;
    background: #111 !important;
    overflow: hidden !important;
  }

  .home-v5 .ycl-hero__picture img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
    transition: none !important;
    max-width: none !important;
  }

  .home-v5 .ycl-hero__slide.is-active .ycl-hero__picture img {
    transform: none !important;
  }

  .home-v5 .ycl-hero__shade {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    height: 56.25vw !important;
    background: linear-gradient(
      180deg,
      rgba(5, 8, 11, 0.02) 0%,
      rgba(5, 8, 11, 0.12) 100%
    ) !important;
  }

  .home-v5 .ycl-hero__content {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: calc(56.25vw + 14px) 18px 76px !important;
  }

  .home-v5 .ycl-hero__panel,
  .home-v5 .ycl-hero__panel--overview {
    width: min(100%, 520px) !important;
    max-height: none !important;
    overflow: visible !important;
    background: rgba(8, 11, 15, 0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .home-v5 .ycl-hero__controls {
    left: 18px !important;
    right: 18px !important;
    bottom: 16px !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 560px) {
  .home-v5 .ycl-hero {
    height: calc(56.25vw + 390px) !important;
    min-height: 590px !important;
  }

  .home-v5 .ycl-hero__content {
    padding: calc(56.25vw + 14px) 15px 70px !important;
  }

  .home-v5 .ycl-hero__controls {
    left: 15px !important;
    right: 15px !important;
    bottom: 14px !important;
  }
}

/* -----------------------------------------------------------
   Hero content-safe positioning
   Each slide can choose:
   - left-center
   - right-center
   - center-lower

   The selected position affects only the information panel and directional
   shade. The 16:9 image remains untouched.
----------------------------------------------------------- */
@media (min-width: 821px) {
  .home-v5 .ycl-hero__content {
    width: min(calc(100% - 220px), 1680px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-top: 64px !important;
    padding-bottom: 110px !important;
  }

  .home-v5 .ycl-hero__content--left-center {
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .home-v5 .ycl-hero__content--right-center {
    align-items: center !important;
    justify-content: flex-end !important;
  }

  .home-v5 .ycl-hero__content--center-lower {
    align-items: flex-end !important;
    justify-content: center !important;
    padding-bottom: clamp(135px, 12vh, 175px) !important;
  }

  .home-v5 .ycl-hero__panel {
    width: min(440px, 34vw) !important;
    max-width: 440px !important;
  }

  .home-v5 .ycl-hero__panel--overview {
    width: min(485px, 38vw) !important;
    max-width: 485px !important;
  }

  /* Keep the visual subject clearer on the opposite side of the panel. */
  .home-v5 .ycl-panel--left-center .ycl-hero__shade {
    background: linear-gradient(
      90deg,
      rgba(4, 7, 10, .64) 0%,
      rgba(4, 7, 10, .36) 26%,
      rgba(4, 7, 10, .10) 48%,
      rgba(4, 7, 10, .03) 68%,
      rgba(4, 7, 10, .08) 100%
    ) !important;
  }

  .home-v5 .ycl-panel--right-center .ycl-hero__shade {
    background: linear-gradient(
      90deg,
      rgba(4, 7, 10, .05) 0%,
      rgba(4, 7, 10, .05) 42%,
      rgba(4, 7, 10, .30) 68%,
      rgba(4, 7, 10, .68) 100%
    ) !important;
  }

  .home-v5 .ycl-panel--center-lower .ycl-hero__shade {
    background: linear-gradient(
      180deg,
      rgba(4, 7, 10, .02) 0%,
      rgba(4, 7, 10, .04) 50%,
      rgba(4, 7, 10, .38) 76%,
      rgba(4, 7, 10, .72) 100%
    ) !important;
  }
}

@media (min-width: 821px) and (max-width: 1099px) {
  .home-v5 .ycl-hero__content {
    width: calc(100% - 64px) !important;
    padding-bottom: 92px !important;
  }

  .home-v5 .ycl-hero__content--center-lower {
    padding-bottom: 120px !important;
  }

  .home-v5 .ycl-hero__panel,
  .home-v5 .ycl-hero__panel--overview {
    width: min(430px, 48vw) !important;
  }
}

/* Website Studio catalogue fallback: readable tile when a published item has no product image yet. */
.catalogue-card__placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(120px,46%);
  aspect-ratio:1;
  border:1px solid rgba(11,15,20,.12);
  border-radius:50%;
  background:#fff;
  color:#9a7418;
  font-size:clamp(2rem,5vw,4rem);
  font-weight:800;
  letter-spacing:-.04em;
  box-shadow:0 12px 30px rgba(11,15,20,.05);
}

/* -----------------------------------------------------------
   Project experience readability + footer polish — Oct 2026
   Keeps the editorial structure, removes cramped nested grids,
   and gives the project/footer actions a more deliberate rhythm.
----------------------------------------------------------- */

/* Project record: one clear label, three readable editorial columns. */
.project-experience-page .project-experience-summary{
  padding:64px 0 !important;
}
.project-experience-page .project-experience-summary__inner{
  display:block !important;
  max-width:1240px !important;
  margin-inline:auto !important;
}
.project-experience-page .project-experience-summary__inner>.flow-label{
  display:block !important;
  margin-bottom:22px !important;
}
.project-experience-page .project-experience-summary__story{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:0 !important;
  margin-top:0 !important;
  border-top:1px solid var(--line) !important;
  border-left:0 !important;
}
.project-experience-page .project-experience-summary__story>div{
  display:block !important;
  grid-template-columns:none !important;
  min-width:0 !important;
  padding:24px 28px 4px !important;
  border-right:1px solid var(--line) !important;
  border-bottom:0 !important;
}
.project-experience-page .project-experience-summary__story>div:first-child{
  padding-left:0 !important;
}
.project-experience-page .project-experience-summary__story>div:last-child{
  padding-right:0 !important;
  border-right:0 !important;
}
.project-experience-page .project-experience-summary h2{
  margin:0 0 10px !important;
  font-size:.72rem !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
.project-experience-page .project-experience-summary p{
  max-width:none !important;
  margin:0 !important;
  font-size:.82rem !important;
  line-height:1.68 !important;
  color:var(--ink-soft) !important;
}

/* Related services + project return become one full-width navigation strip. */
.project-experience-page .project-related-services{
  padding:30px 0 !important;
  background:#fff !important;
  border-top:1px solid var(--line) !important;
  border-bottom:1px solid var(--line) !important;
}
.project-experience-page .project-related-services__inner{
  display:grid !important;
  grid-template-columns:145px minmax(0,1fr) auto !important;
  gap:30px !important;
  align-items:center !important;
}
.project-experience-page .project-related-services__inner>span{
  font-size:.58rem !important;
  line-height:1.3 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  font-weight:800 !important;
}
.project-experience-page .project-related-services__links{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:12px 28px !important;
  min-width:0 !important;
}
.project-experience-page .project-related-services__links a{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  margin:0 !important;
  font-size:.78rem !important;
  font-weight:650 !important;
  text-decoration:none !important;
}
.project-experience-page .project-related-services__links a:hover{
  text-decoration:underline !important;
  text-underline-offset:4px !important;
}
.project-experience-page .project-related-services__back{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  margin:0 !important;
  font-size:.72rem !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  color:var(--ink) !important;
  text-decoration:none !important;
}
.project-experience-page .project-related-services__back:hover{
  text-decoration:underline !important;
  text-underline-offset:4px !important;
}

/* Footer CTA: tighter, calmer, and properly aligned. */
.site-footer.site-footer--unified.site-footer--premium{
  padding-bottom:10px !important;
}
.site-footer .footer-contact-row{
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:52px !important;
  padding:36px 0 32px !important;
}
.site-footer .footer-contact-row__copy h2{
  font-size:clamp(1.45rem,1.8vw,1.72rem) !important;
}
.site-footer .footer-contact-row__copy p{
  max-width:680px !important;
  font-size:.78rem !important;
}
.site-footer .footer-contact-row__actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
}
.site-footer .footer-contact-row__actions .btn{
  min-height:44px !important;
  padding-inline:18px !important;
}
.site-footer .footer-divider{
  margin-bottom:30px !important;
}
.site-footer .footer-grid.footer-grid--compact{
  grid-template-columns:1.32fr 1.12fr .9fr 1fr !important;
  gap:46px !important;
  padding-bottom:30px !important;
}
.site-footer .footer-brand p{
  max-width:330px !important;
  font-size:.72rem !important;
  line-height:1.62 !important;
}
.site-footer .footer-grid--compact>div:not(.footer-brand) a{
  line-height:1.45 !important;
  margin-bottom:9px !important;
}
.site-footer .footer-bottom{
  align-items:center !important;
  min-height:42px !important;
  padding:13px 0 4px !important;
  margin-top:0 !important;
}
.site-footer .footer-bottom__legal{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  white-space:nowrap !important;
}
.site-footer .footer-bottom__legal a{
  display:inline !important;
  margin:0 !important;
  font-size:inherit !important;
  color:inherit !important;
}
.site-footer .footer-bottom__legal i{
  font-style:normal !important;
  opacity:.42 !important;
}

@media (max-width:900px){
  .project-experience-page .project-experience-summary__story{
    grid-template-columns:1fr !important;
  }
  .project-experience-page .project-experience-summary__story>div,
  .project-experience-page .project-experience-summary__story>div:first-child,
  .project-experience-page .project-experience-summary__story>div:last-child{
    padding:18px 0 !important;
    border-right:0 !important;
    border-bottom:1px solid var(--line) !important;
  }
  .project-experience-page .project-experience-summary__story>div:last-child{
    border-bottom:0 !important;
  }
  .project-experience-page .project-related-services__inner{
    grid-template-columns:130px minmax(0,1fr) !important;
  }
  .project-experience-page .project-related-services__back{
    grid-column:2 !important;
    justify-content:flex-start !important;
    margin-top:4px !important;
  }
  .site-footer .footer-grid.footer-grid--compact{
    gap:34px 30px !important;
  }
}

@media (max-width:640px){
  .project-experience-page .project-experience-summary{
    padding:46px 0 !important;
  }
  .project-experience-page .project-related-services__inner{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .project-experience-page .project-related-services__back{
    grid-column:auto !important;
    margin-top:8px !important;
  }
  .site-footer .footer-contact-row{
    gap:20px !important;
    padding:30px 0 27px !important;
  }
  .site-footer .footer-contact-row__actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
  }
  .site-footer .footer-grid.footer-grid--compact{
    gap:30px 20px !important;
    padding-bottom:24px !important;
  }
  .site-footer .footer-bottom{
    align-items:flex-start !important;
    gap:8px !important;
  }
  .site-footer .footer-bottom__legal{
    justify-content:flex-start !important;
  }
}

/* -----------------------------------------------------------
   Footer CTA hierarchy refinement — Oct 2026
   Quotation is the primary commercial action; callback is secondary.
   Equal button geometry, inline icons, no decorative arrow.
----------------------------------------------------------- */
.site-footer.site-footer--unified.site-footer--premium{
  background:#f4f2ec !important;
}
.site-footer .footer-contact-row{
  grid-template-columns:minmax(0,1fr) minmax(388px,420px) !important;
  gap:56px !important;
  padding:30px 0 28px !important;
}
.site-footer .footer-contact-row__copy{
  align-self:center !important;
}
.site-footer .footer-contact-row__copy h2{
  margin-bottom:7px !important;
  font-size:clamp(1.42rem,1.7vw,1.68rem) !important;
  line-height:1.1 !important;
}
.site-footer .footer-contact-row__copy p{
  max-width:620px !important;
  line-height:1.58 !important;
}
.site-footer .footer-contact-row__actions{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  gap:9px !important;
  width:100% !important;
}
.site-footer .footer-contact-row__actions .btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  width:100% !important;
  min-width:0 !important;
  min-height:46px !important;
  padding:0 15px !important;
  margin:0 !important;
  border-radius:0 !important;
  font-size:.7rem !important;
  line-height:1.1 !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  text-decoration:none !important;
}
.site-footer .footer-contact-row__actions .btn__icon{
  width:17px !important;
  height:17px !important;
  flex:0 0 17px !important;
}
.site-footer .footer-contact-row__actions .btn--footer-primary{
  background:var(--ink) !important;
  color:#fff !important;
  border:1px solid var(--ink) !important;
}
.site-footer .footer-contact-row__actions .btn--footer-primary .btn__icon{
  color:var(--gold) !important;
}
.site-footer .footer-contact-row__actions .btn--footer-primary:hover{
  background:#1a1f25 !important;
  border-color:#1a1f25 !important;
  color:#fff !important;
  transform:translateY(-1px) !important;
  text-decoration:none !important;
}
.site-footer .footer-contact-row__actions .btn--footer-secondary{
  background:rgba(255,255,255,.25) !important;
  color:var(--ink) !important;
  border:1px solid #9f9a90 !important;
}
.site-footer .footer-contact-row__actions .btn--footer-secondary .btn__icon{
  color:#b98708 !important;
}
.site-footer .footer-contact-row__actions .btn--footer-secondary:hover{
  background:#fff !important;
  border-color:var(--ink) !important;
  color:var(--ink) !important;
  transform:translateY(-1px) !important;
  text-decoration:none !important;
}
.site-footer .footer-divider{
  margin-bottom:28px !important;
  background:rgba(11,15,20,.13) !important;
}
.site-footer .footer-grid.footer-grid--compact{
  grid-template-columns:1.18fr 1.08fr .82fr .84fr !important;
  gap:48px !important;
  padding-bottom:28px !important;
}
.site-footer .footer-brand p{
  max-width:300px !important;
}
.site-footer .footer-grid--compact>div:not(.footer-brand) a{
  margin-bottom:8px !important;
  line-height:1.42 !important;
}
.site-footer .footer-bottom{
  min-height:40px !important;
  padding:12px 0 2px !important;
}

@media (max-width:1050px){
  .site-footer .footer-contact-row{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
  .site-footer .footer-contact-row__actions{
    width:min(100%,420px) !important;
  }
  .site-footer .footer-grid.footer-grid--compact{
    grid-template-columns:1.15fr 1fr 1fr !important;
    gap:34px 30px !important;
  }
}
@media (max-width:640px){
  .site-footer .footer-contact-row{
    padding:27px 0 25px !important;
  }
  .site-footer .footer-contact-row__actions{
    grid-template-columns:1fr !important;
    width:100% !important;
  }
  .site-footer .footer-contact-row__actions .btn{
    min-height:45px !important;
  }
}