/* =====================================================================
   r61 (2026-09-28) — page 60, PORTFOLIO. Loaded by portfolio.html and
   portfolio-tablet.html only, so nothing else on the site can change.

   1. The eBook row is live: "Coming Soon" is gone and the whole row is a
      download link (a.pfDl covers the button). iPad gets the row back.
   2. The KANYON | FHA unified logo in chrome replaces the ambigram
      (desktop, phone and iPad). Same 534x708 proportion, so nothing moves.
   3. Dry Cut and Meet the Artist share one slot and alternate every six
      seconds - on the phone and iPad in step with the header roll
      (Fairchild Hair Artistry -> Dry Cut, michael KANYON -> Meet the Artist).
   ===================================================================== */

/* 1 ------------------------------------------------------------------ */
.soon .s2slot[data-sid="s5-ebook"] { pointer-events: auto; cursor: pointer; }
.soon .s2slot[data-sid="s5-ebook"] .panel { opacity: 1; cursor: pointer; position: relative; }
.s2slot[data-sid="s5-ebook"] a.pfDl { position: absolute; inset: 0; z-index: 6; border-radius: inherit; }
.s2slot[data-sid="s5-ebook"] a.pfDl:focus-visible { outline: 2px solid #A2E6E8; outline-offset: 2px; }
body.tablet #fhaMobile#fhaMobile#fhaMobile#fhaMobile#fhaMobile#fhaMobile#fhaMobile.pg-portfolio .s5soon { display: block !important; }

/* 2 ------------------------------------------------------------------ */
#fhaMobile#fhaMobile.pg-portfolio .mark.chrome3d { background-image: url("../images/s5/kanyon-unified-chrome.png?v=1") !important; }
#fhaMobile#fhaMobile.pg-portfolio .mark .sheen {
    -webkit-mask-image: url("../images/s5/kanyon-unified-chrome.png?v=1") !important;
            mask-image: url("../images/s5/kanyon-unified-chrome.png?v=1") !important; }
.theme-teal .banner .banner-detail-container .brand-logo .markWrap .mark-sheen {
    -webkit-mask: url("../images/s5/kanyon-unified-chrome.png?v=1") center/contain no-repeat;
            mask: url("../images/s5/kanyon-unified-chrome.png?v=1") center/contain no-repeat; }

/* 3 ------------------------------------------------------------------ */
.s5acts.pfStack.pfRoll { display: grid !important; grid-template-columns: 100%; grid-template-rows: auto; align-items: center; }
.s5acts.pfStack.pfRoll > .s2slot,
.s5acts.pfStack.pfRoll > .pfArtist {
    grid-area: 1 / 1; margin-top: 0 !important; margin-bottom: 0 !important;
    transition: opacity .9s cubic-bezier(.3,.8,.25,1), transform .9s cubic-bezier(.3,.8,.25,1), visibility 0s linear 0s; }
.s5acts.pfStack.pfRoll > .pfArtist { opacity: 0; transform: translateY(-40%); visibility: hidden; pointer-events: none;
    transition-delay: 0s, 0s, .9s; }
.s5acts.pfStack.pfRoll.alt > .s2slot { opacity: 0; transform: translateY(40%); visibility: hidden; pointer-events: none;
    transition-delay: 0s, 0s, .9s; }
.s5acts.pfStack.pfRoll.alt > .pfArtist { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
    .s5acts.pfStack.pfRoll > .s2slot, .s5acts.pfStack.pfRoll > .pfArtist { transition: none; }
}

/* 4 (desktop) — the "Fairchild Hair Artistry" script is gone from the masthead, and Dry Cut / Meet the Artist now share one
   row, so that height goes to the photograph (Steven: "more room to make each slide larger and more prominent").
   The unified logo stands alone and takes a little more width. */
@media (min-width: 992px) {
  .theme-teal .banner .banner-detail-container .brand-logo .markWrap { width: max(8.2vw, 96px); }
  .s5.s5-portfolio .s5mod .s5spot { min-height: clamp(200px, calc(100% - 272px), 560px) !important; }
  .s5.s5-portfolio .s5mod .s5card { max-width: 92% !important; }
}

/* 5 — the alternating row is exactly one button tall (the artist button's .action carried the desktop CTA's own margins) */
.s5acts.pfStack.pfRoll > .pfArtist, .s5acts.pfStack.pfRoll > .pfArtist .action { margin: 0 !important; padding: 0 !important; }

/* 6 (2026-09-29, Steven: "the download eBook CTA should have a swipe to download") — the eBook row is a slider like
   Dry Cut: its gutter (the >>> chevrons) is back, the panel drags right into it and releases the download; a tap
   downloads too. The keyboard link (a.pfDl) stays for Tab + Enter but no longer sits over the panel for touch. */
.s2slot[data-sid="s5-ebook"] a.pfDl { pointer-events: none; }
.s2slot[data-sid="s5-ebook"] .panel { cursor: grab; touch-action: pan-y; }
.s2slot[data-sid="s5-ebook"].dragging .panel { cursor: grabbing; }
.banner .soon .s2slot[data-sid="s5-ebook"] .gutR { display: flex !important; }
.banner .soon .s2slot[data-sid="s5-ebook"] .panel { width: 90.7% !important; }
#fhaMobile#fhaMobile#fhaMobile#fhaMobile#fhaMobile#fhaMobile#fhaMobile .s2slot[data-sid="s5-ebook"] .gutR { display: flex !important; }
#fhaMobile#fhaMobile#fhaMobile#fhaMobile#fhaMobile#fhaMobile#fhaMobile .s2slot[data-sid="s5-ebook"] .panel { width: 87% !important; }
.s2slot[data-sid="s5-ebook"] .panel img { pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.s2slot[data-sid="s5-ebook"] .panel { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* 7 (29 Sep) — the eBook takes the Dry Cut's soft silver foil on its caps (.lv-foil in the markup) and, on desktop,
   sits on the same centre line as the Dry Cut / Meet the Artist row beneath it */
@media (min-width: 992px) { .s5.s5-portfolio .s5mod .s5svc.soon { align-self: center; } }