/* ============================================================================
   PAGE BACKGROUND
   ============================================================================ */

body.single-cpt_portfolio .page_content_wrap {
  background-image: radial-gradient(
    ellipse 60% 50% at 0% 100%,
    rgba(255, 81, 33, .16) 0%,
    rgba(255, 81, 33, .05) 40%,
    transparent 72%
  ) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}


/* ============================================================================
   LABEL AND TITLE
   ============================================================================ */

/* Small uppercase label above the title (real text, printed by PHP) */
body.single-cpt_portfolio .m15-pf-eyebrow {
  display: block;
  margin: 0 0 14px;
  color: #ff5233;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 18px;
  text-transform: uppercase;
}

body.single-cpt_portfolio .portfolio_page_title {
  grid-column: 1 / -1;
  margin: 0 0 40px !important;
  color: #fff;
  font-size: clamp(34px, 4.6vw, 56px) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  line-height: 1.08 !important;
}


/* ============================================================================
   LAYOUT
   ============================================================================ */

body.single-cpt_portfolio .portfolio_page {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  column-gap: 56px;
  row-gap: 0;
}

/* The theme's clearfix must not become grid cells */
body.single-cpt_portfolio .portfolio_page::before,
body.single-cpt_portfolio .portfolio_page::after {
  content: none !important;
  display: none !important;
}


/* ============================================================================
   MEDIA: MAIN PHOTO AND GALLERY
   ============================================================================ */

body.single-cpt_portfolio .portfolio_page_meta {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.single-cpt_portfolio .portfolio_page_meta > * {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 22px;
  background: #1a1a1a;
  overflow: hidden;
}

body.single-cpt_portfolio .portfolio_page_meta img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Main photo: full width, fixed 16:10 ratio, orange shadow only underneath */
body.single-cpt_portfolio .portfolio_page_meta > *:first-child {
  grid-column: 1 / -1;
  box-shadow: 0 28px 36px -22px rgba(255, 81, 33, .42);
}

body.single-cpt_portfolio .portfolio_page_meta > *:first-child img,
body.single-cpt_portfolio .portfolio_page_meta > img:first-child {
  aspect-ratio: 16 / 10;
}

/* Last gallery photo when the count is odd: full width */
body.single-cpt_portfolio .portfolio_page_meta > *:last-child:nth-child(even) {
  grid-column: 1 / -1;
}

body.single-cpt_portfolio .portfolio_page_meta > *:last-child:nth-child(even) img,
body.single-cpt_portfolio .portfolio_page_meta > img:last-child:nth-child(even) {
  aspect-ratio: 16 / 9;
}


/* ============================================================================
   STORY
   ============================================================================ */

body.single-cpt_portfolio .portfolio_page_content_wrap {
  grid-column: 1;
  grid-row: 3;
  float: none !important;
  width: auto !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
}

/* Headings with an orange bar on the left */
body.single-cpt_portfolio .portfolio_page_content_wrap :is(h2, h3) {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 20px !important;
  color: #fff;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.25;
}

body.single-cpt_portfolio .portfolio_page_content_wrap :is(h2, h3)::before {
  content: "";
  flex: none;
  align-self: stretch;
  width: 5px;
  border-radius: 3px;
  background: #ff5233;
}

body.single-cpt_portfolio .portfolio_page_content_wrap p {
  max-width: 72ch;
  margin: 0 0 22px;
  color: #b5b5b5;
  font-size: 16.5px;
  line-height: 1.9;
}


/* ============================================================================
   INFO CARD (RIGHT)
   ============================================================================ */

body.single-cpt_portfolio .portfolio_page_details_wrap {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: start;
  position: sticky !important;
  top: 110px !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 28px !important;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 20px;
  background: #121212;
  transform: none !important;
}

body.single-cpt_portfolio .portfolio_page_description {
  margin: 0 0 20px !important;
  padding: 0 !important;
}

body.single-cpt_portfolio .portfolio_page_description p {
  margin: 0 !important;
  color: #d4d4d4;
  font-size: 15.5px;
  line-height: 1.75;
}

body.single-cpt_portfolio .portfolio_page_details {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}

/* Info row: small label with an orange dot, value underneath */
body.single-cpt_portfolio .portfolio_page_details_item {
  display: block !important;
  margin: 0 !important;
  padding: 14px 0 !important;
  border-top: 1px solid #262626;
}

body.single-cpt_portfolio .portfolio_page_details_item_title {
  display: flex !important;
  align-items: center;
  gap: 9px;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #8a8a8a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  line-height: 1.4 !important;
  text-transform: uppercase;
}

body.single-cpt_portfolio .portfolio_page_details_item_title::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff5233;
}

body.single-cpt_portfolio .portfolio_page_details_item_value {
  display: block;
  margin: 3px 0 0 !important;
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
}

body.single-cpt_portfolio .portfolio_page_details_item_value a {
  color: #fff;
}

/* Share: "Share" label on the left, round buttons on the right */
body.single-cpt_portfolio .portfolio_page_details_share {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 0 0 !important;
}

body.single-cpt_portfolio .portfolio_page_details_share .portfolio_page_details_item_title::before {
  display: none;
}

body.single-cpt_portfolio .portfolio_page_details_share .portfolio_page_details_item_value {
  margin: 0 !important;
}

body.single-cpt_portfolio .portfolio_page_details_share .socials_share {
  margin: 0 !important;
}

body.single-cpt_portfolio .portfolio_page_details_share .social_item {
  display: inline-grid !important;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 0 0 10px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 50%;
  transition: background .2s, border-color .2s;
}

body.single-cpt_portfolio .portfolio_page_details_share .social_item:first-child {
  margin-left: 0 !important;
}

body.single-cpt_portfolio .portfolio_page_details_share .social_item:hover {
  border-color: #ff5233;
  background: #ff5233;
}


/* ============================================================================
   NEXT PROJECT
   ============================================================================ */

body.single-cpt_portfolio .post-navigation {
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid #1f1f1f;
}

body.single-cpt_portfolio .post-navigation .nav-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

body.single-cpt_portfolio .post-navigation a {
  color: #fff;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  text-decoration: none;
  transition: color .2s;
}

body.single-cpt_portfolio .post-navigation a:hover {
  color: #ff5233;
}


/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes m15pf-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes m15pf-reveal {
  from { filter: brightness(.12); transform: scale(1.08); }
  to   { filter: brightness(1); transform: scale(1); }
}

/* 8.1 Page open: label, title and main photo */
body.single-cpt_portfolio .m15-pf-eyebrow {
  animation: m15pf-fade .9s ease-out .1s backwards;
}

body.single-cpt_portfolio .portfolio_page_title {
  animation: m15pf-fade .9s ease-out .3s backwards;
}

body.single-cpt_portfolio .portfolio_page_meta > *:first-child img,
body.single-cpt_portfolio .portfolio_page_meta > img:first-child {
  animation: m15pf-reveal 1.8s cubic-bezier(.2, .7, .2, 1) .15s backwards;
}

/* 8.2 Scroll reveal: gallery, info card and Next Project.
   :where() keeps the html.m15pf-js part at zero specificity. */
:where(html.m15pf-js body.single-cpt_portfolio) .portfolio_page_meta > *:not(:first-child),
:where(html.m15pf-js body.single-cpt_portfolio) .portfolio_page_details_wrap,
:where(html.m15pf-js body.single-cpt_portfolio) .post-navigation {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}

html.m15pf-js body.single-cpt_portfolio .is-in {
  opacity: 1;
  transform: none;
}

/* The sticky info card must not keep a transform after it appears */
html.m15pf-js body.single-cpt_portfolio .portfolio_page_details_wrap.is-in {
  transform: none !important;
}

/* 8.3 Text (title, description, story): words appear one by one, starting
   when the text block enters the viewport.
   Words are split by the footer script. The original text in the HTML is not
   changed, so it stays selectable and readable by search engines. */

/* Wrapper created by the script. It must flex because the story headings are
   flex containers (they have an orange bar before the text). */
body.single-cpt_portfolio .m15-t {
  flex: 1 1 auto;
  min-width: 0;
}

:where(html.m15pf-js body.single-cpt_portfolio) .m15w {
  opacity: 0;
  transition: opacity .7s ease;
  transition-delay: calc(var(--i, 0) * var(--step, 40ms) + var(--base, 0ms));
}

html.m15pf-js body.single-cpt_portfolio .is-in .m15w {
  opacity: 1;
}

/* Title: hidden until its words are ready, then animated word by word
   (replaces the single-block fade from 8.1) */
html.m15pf-js body.single-cpt_portfolio .portfolio_page_title {
  animation: none;
}

html.m15pf-js body.single-cpt_portfolio .portfolio_page_title:not(.m15-split) {
  opacity: 0;
}

/* 8.4 Respect the device's "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
  body.single-cpt_portfolio :is(.m15-pf-eyebrow, .portfolio_page_title) {
    animation: none;
  }

  body.single-cpt_portfolio .portfolio_page_meta > *:first-child img,
  body.single-cpt_portfolio .portfolio_page_meta > img:first-child {
    animation: none;
  }

  html.m15pf-js body.single-cpt_portfolio :is(.portfolio_page_meta > *:not(:first-child), .portfolio_page_details_wrap, .post-navigation) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


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

/* ---- 9.1 Small laptop (max-width 1200px) ---- */
@media (max-width: 1200px) {
  body.single-cpt_portfolio .portfolio_page {
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: 40px;
  }
}

/* ---- 9.2 Tablet (max-width 1024px): single column ----
   Order: title, main photo + gallery, story, info card (just above Prev/Next).
   The layout is a one-column grid with explicit rows:
     1 title, 2 main photo + gallery, 3 story, 4 info card.
   Widths are forced to 100% with more specific selectors, because the theme
   limits the width of each part (about 60% / 40%) on tablet screens. */
@media (max-width: 1024px) {
  html body.single-cpt_portfolio article.portfolio_page.portfolio_page {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: none !important;
  }

  html body.single-cpt_portfolio article.portfolio_page.portfolio_page > :is(.portfolio_page_title, .portfolio_page_meta, .portfolio_page_content_wrap, .portfolio_page_details_wrap) {
    grid-column: 1 !important;
    justify-self: stretch !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  html body.single-cpt_portfolio article.portfolio_page.portfolio_page > .portfolio_page_title {
    grid-row: 1 !important;
    margin-bottom: 16px !important;
  }

  html body.single-cpt_portfolio article.portfolio_page.portfolio_page > .portfolio_page_meta {
    grid-row: 2 !important;
  }

  html body.single-cpt_portfolio article.portfolio_page.portfolio_page > .portfolio_page_content_wrap {
    grid-row: 3 !important;
    margin-top: 8px !important;
  }

  html body.single-cpt_portfolio article.portfolio_page.portfolio_page > .portfolio_page_details_wrap {
    grid-row: 4 !important;
    align-self: stretch;
    position: static !important;
  }

  /* Info card: full-width description, Customer / Year / Author in two columns */
  body.single-cpt_portfolio .portfolio_page_details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
  }

  body.single-cpt_portfolio .portfolio_page_details_share {
    grid-column: 1 / -1;
  }

  body.single-cpt_portfolio .post-navigation {
    margin-top: 56px;
  }
}

/* ---- 9.3 Mobile (max-width 600px): single full-width column ---- */
@media (max-width: 600px) {
  html body.single-cpt_portfolio article.portfolio_page.portfolio_page {
    gap: 16px !important;
  }

  html body.single-cpt_portfolio article.portfolio_page.portfolio_page > .portfolio_page_title {
    margin-bottom: 8px !important;
  }

  body.single-cpt_portfolio .portfolio_page_meta {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body.single-cpt_portfolio .portfolio_page_meta > * {
    border-radius: 16px;
  }

  body.single-cpt_portfolio .portfolio_page_meta img,
  body.single-cpt_portfolio .portfolio_page_meta > *:first-child img,
  body.single-cpt_portfolio .portfolio_page_meta > *:last-child:nth-child(even) img,
  body.single-cpt_portfolio .portfolio_page_meta > img:first-child,
  body.single-cpt_portfolio .portfolio_page_meta > img:last-child:nth-child(even) {
    aspect-ratio: 4 / 3;
  }

  body.single-cpt_portfolio .portfolio_page_meta > *:first-child {
    box-shadow: 0 20px 28px -18px rgba(255, 81, 33, .42);
  }

  body.single-cpt_portfolio .portfolio_page_details_wrap {
    padding: 22px !important;
    border-radius: 16px;
  }

  body.single-cpt_portfolio .portfolio_page_details {
    display: block;
  }

  body.single-cpt_portfolio .portfolio_page_content_wrap p {
    font-size: 15.5px;
    line-height: 1.8;
  }

  body.single-cpt_portfolio .post-navigation {
    margin-top: 44px;
  }
}