/* ========================================================================
   PatientFocus Elementor Addons – Frontend CSS (v1.1.4)
   ====================================================================== */

/* =========================
   PF SPOTLIGHT TIMELINE
   ========================= */
.pf-timeline{
  --pf-timeline-accent: #7FFFE1;
  --pf-timeline-gap: 36px;
  --pf-timeline-card-surface: linear-gradient(135deg, rgba(32,32,32,.85) 0%, rgba(8,8,8,.78) 100%);
  --pf-timeline-card-border: rgba(255,255,255,.08);
  --pf-timeline-card-text: rgba(235,235,235,.85);
  --pf-timeline-card-radius: 26px;
  --pf-timeline-background: #000;
  --pf-timeline-layer-fill: rgba(15,15,15,.72);
  position: relative;
  background: var(--pf-timeline-background);
  color: #fff;
  padding: clamp(80px, 12vw, 140px) 0 clamp(90px, 12vw, 160px);
  overflow: hidden;
}

.pf-timeline__inner{
  width: min(1080px, 92vw);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.pf-timeline__stage{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 9vw, 90px);
}

.pf-timeline.has-background .pf-timeline__stage{ isolation: isolate; }

.pf-timeline__background-layer{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(70px, 10vw, 160px) clamp(32px, 6vw, 120px);
  border-radius: clamp(26px, 6vw, 56px);
  background-color: var(--pf-timeline-layer-fill);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 38px 120px rgba(0,0,0,.55);
  opacity: .9;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.pf-timeline.has-background .pf-timeline__stage > *:not(.pf-timeline__background-layer){
  position: relative;
  z-index: 1;
}

.pf-timeline__background-text{
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: clamp(3rem, 14vw, 8rem);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: .92;
  color: rgba(255,255,255,.18);
  max-width: min(880px, 92%);
  text-shadow: 0 26px 60px rgba(0,0,0,.45);
}

.pf-timeline--bg-align-flex-start .pf-timeline__background-text{ text-align: left; }
.pf-timeline--bg-align-flex-end .pf-timeline__background-text{ text-align: right; }

.pf-timeline__header{
  margin: 0 auto;
  text-align: left;
}
.pf-timeline__header.pf-align-center{ text-align: center; }
.pf-timeline__header.pf-align-right{ text-align: right; margin-left: auto; }
.pf-timeline__header.pf-align-left{ margin-right: auto; }

.pf-timeline__eyebrow{
  font-size: .78rem;
  letter-spacing: .48em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: clamp(10px, 2vw, 16px);
}

.pf-timeline__title{
  font-size: clamp(2.5rem, 5vw, 3.8rem);
  line-height: 1.05;
  margin: 0;
  color: #fff;
}

.pf-timeline__subheading{
  margin: clamp(18px, 3vw, 24px) 0 0 0;
  font-size: clamp(1rem, 2vw, 1.16rem);
  color: rgba(255,255,255,.7);
}

.pf-timeline__items{
  position: relative;
  padding: 0 0 30px 0;
  z-index: 1;
}

.pf-timeline__line{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  overflow: hidden;
}

.pf-timeline__line::after{
  content: '';
  position: absolute;
  inset: -120px -70px;
  background: radial-gradient(circle at center, rgba(127,255,225,.14) 0%, rgba(127,255,225,0) 70%);
  opacity: .4;
}

.pf-timeline__line-fill{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--pf-timeline-accent) 0%, rgba(127,255,225,.35) 70%, rgba(127,255,225,0) 100%);
  box-shadow: 0 0 28px rgba(127,255,225,.55);
  transition: height .45s cubic-bezier(.25,1,.32,1);
}

.pf-timeline__item{
  --pf-side-gap: calc(var(--pf-timeline-gap) * 2);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: var(--pf-timeline-gap);
  margin-bottom: clamp(40px, 6vw, 60px);
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.pf-timeline__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.pf-timeline__item.is-left .pf-timeline__content{ grid-column: 1; }
.pf-timeline__item.is-left .pf-timeline__node-wrap{ grid-column: 2; }
.pf-timeline__item.is-left .pf-timeline__spacer{ grid-column: 3; }

.pf-timeline__item.is-right .pf-timeline__spacer{ grid-column: 1; }
.pf-timeline__item.is-right .pf-timeline__node-wrap{ grid-column: 2; }
.pf-timeline__item.is-right .pf-timeline__content{ grid-column: 3; }

.pf-timeline__node-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pf-timeline__node{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--pf-timeline-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 0 12px rgba(127,255,225,.4);
  transition: transform .3s ease;
}

.pf-timeline__node .pf-timeline__dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

.pf-timeline__node .pf-timeline__halo{
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: rgba(127,255,225,.2);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity .3s ease, transform .3s ease;
}

.pf-timeline__content:hover .pf-timeline__node .pf-timeline__halo{
  opacity: 1;
  transform: scale(1);
}

.pf-timeline__content{
  --pf-card-surface: var(--pf-timeline-card-surface);
  --pf-card-border: var(--pf-timeline-card-border);
  --pf-card-text: var(--pf-timeline-card-text);
  --pf-card-radius: var(--pf-timeline-card-radius);
  --pf-card-background-image: none;
  --pf-card-background-size: cover;
  --pf-card-background-position: center;
  --pf-card-background-repeat: no-repeat;
  padding: clamp(20px, 3vw, 32px) clamp(24px, 4vw, 40px);
  border-radius: var(--pf-card-radius);
  background: var(--pf-card-surface);
  background-image: var(--pf-card-background-image);
  background-size: var(--pf-card-background-size);
  background-position: var(--pf-card-background-position);
  background-repeat: var(--pf-card-background-repeat);
  border: 1px solid var(--pf-card-border);
  color: var(--pf-card-text);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  transition: box-shadow .3s ease, transform .3s ease;
  position: relative;
  overflow: hidden;
}

.pf-timeline__content:hover{
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  transform: translateY(-4px);
}

.pf-timeline__label{
  font-size: .85rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 8px;
}

.pf-timeline__item-title{
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  line-height: 1.15;
  margin: 0 0 12px 0;
  transition: opacity 0.3s ease;
}

.pf-timeline__body{
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.pf-timeline__body p{ margin: 0 0 12px 0; }
.pf-timeline__body p:last-child{ margin-bottom: 0; }

.pf-timeline__body[data-has-detail="true"] .pf-timeline__summary,
.pf-timeline__body[data-has-detail="true"] .pf-timeline__detail{
  transition: opacity 0.3s ease;
}

.pf-timeline__body[data-has-detail="true"] .pf-timeline__detail{
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pf-timeline__content:hover .pf-timeline__body[data-has-detail="true"] .pf-timeline__summary{
  opacity: 0;
}

.pf-timeline__content:hover .pf-timeline__body[data-has-detail="true"] .pf-timeline__detail{
  opacity: 1;
}

.pf-timeline__content[data-reveal="true"] .pf-timeline__body{
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pf-timeline__content[data-reveal="true"]:hover .pf-timeline__body{
  opacity: 1;
}

.pf-timeline__content[data-reveal="true"]:hover .pf-timeline__item-title{
  opacity: 0;
}

.pf-read-more{
  display: inline-block;
  margin-top: 12px;
  color: var(--pf-timeline-accent);
  text-decoration: underline;
  transition: color 0.3s ease;
}

.pf-read-more:hover{
  color: #fff;
}

.pf-timeline__spacer{
  height: 1px;
}

@media (max-width: 1024px){
  .pf-timeline__item{ grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); }
  .pf-timeline__content::after{ width: calc(var(--pf-timeline-gap) + 44px); }
}

@media (max-width: 820px){
  .pf-timeline{ padding-left: 0; padding-right: 0; }
  .pf-timeline__inner{ width: min(96vw, 720px); }
  .pf-timeline__background-layer{ padding: clamp(52px, 14vw, 120px) clamp(24px, 8vw, 80px); border-radius: clamp(20px, 8vw, 44px); }
  .pf-timeline__background-text{ font-size: clamp(2.6rem, 12vw, 5.6rem); letter-spacing: .18em; }
  .pf-timeline__item{ grid-template-columns: minmax(0,1fr) 100px minmax(0,1fr); gap: clamp(24px, 6vw, 30px); }
  .pf-timeline__content{ padding: 24px 26px; }
  .pf-timeline__content::after{ width: calc(var(--pf-timeline-gap) + 28px); }
  .pf-timeline__label{ letter-spacing: .28em; font-size: .82rem; }
}

@media (max-width: 640px){
  .pf-timeline__inner{ width: min(94vw, 640px); }
  .pf-timeline__item{ grid-template-columns: minmax(0,1fr) 88px minmax(0,1fr); gap: clamp(18px, 5vw, 24px); }
  .pf-timeline__content{ padding: 22px 22px; }
  .pf-timeline__content::after{ width: calc(var(--pf-timeline-gap) + 20px); }
  .pf-timeline__line::after{ inset: -90px -40px; }
}

@media (max-width: 520px){
  .pf-timeline{ padding: 70px 0 90px; }
  .pf-timeline__background-layer{ padding: clamp(38px, 16vw, 80px) clamp(18px, 8vw, 40px); border-radius: 18px; }
  .pf-timeline__background-text{ font-size: clamp(2rem, 16vw, 3.8rem); letter-spacing: .12em; }
  .pf-timeline__item{ grid-template-columns: minmax(0,1fr) 72px minmax(0,1fr); gap: clamp(14px, 4vw, 18px); }
  .pf-timeline__content{ border-radius: 20px; padding: 20px 20px 22px; }
  .pf-timeline__content::after{ width: calc(var(--pf-timeline-gap) + 12px); top: clamp(32px, 12vw, 40px); }
  .pf-timeline__item-title{ font-size: clamp(1.25rem, 6.5vw, 1.5rem); }
  .pf-timeline__body{ font-size: .98rem; }
}

@media (hover: none){
  .pf-timeline__body[data-has-detail="true"]{ display: block; }
  .pf-timeline__detail{
    opacity: 1;
    transform: none;
    pointer-events: auto;
    margin-top: 18px;
  }
  .pf-timeline__summary{ opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce){
  .pf-timeline__item,
  .pf-timeline__content,
  .pf-timeline__summary,
  .pf-timeline__detail{
    transition-duration: 0.01ms !important;
  }
}

/* =========================
   PF CARDS SHOWCASE
   ========================= */
.pf-cards-grid{
  --pf-cols:4; --gap:18px; --pf-hover-scale:2.2; --pf-hover-blur:6px;
  display:grid; grid-template-columns:repeat(var(--pf-cols),1fr); gap:var(--gap);
}

/* Card shell */
.pf-cards-grid .pf-card{
  position:relative; overflow:hidden; border-radius:14px; background:#000; isolation:isolate;
}

/* Media */
.pf-cards-grid .pf-card .pf-media,
.pf-cards-grid .pf-card .pf-media img{ width:100%; height:100%; display:block; }
.pf-cards-grid .pf-card .pf-media{ position:absolute; inset:0; }
.pf-cards-grid .pf-card .pf-media img{
  object-fit:cover; transform:scale(1); filter:blur(0);
  transition:transform .7s cubic-bezier(.2,.6,.2,1), filter .7s ease;
}

/* Overlay copy pinned top-left */
.pf-cards-grid .pf-card .pf-overlay{
  position:absolute; inset:0; padding:22px 22px 66px 22px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
  background:transparent; transition:background .35s ease;
}
.pf-cards-grid .pf-card .pf-copy{ max-width:86%; }
.pf-cards-grid .pf-card .pf-eyebrow{ font-weight:700; font-size:.85rem; letter-spacing:.04em; margin:0 0 6px 0; color:#B8B8B8; }
.pf-cards-grid .pf-card .pf-title{ margin:0 0 10px 0; color:#fff; }

/* Hidden by default */
.pf-cards-grid .pf-card .pf-desc{
  margin:0; margin-top:15%; color:#e9e9e9;
  opacity:0 !important; visibility:hidden !important; pointer-events:none;
  transform:translateY(6px); transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.pf-cards-grid .pf-card .pf-btn{
  position:absolute; right:18px; bottom:18px;
  background:#111; color:#fff; text-decoration:none;
  padding:10px 14px; border-radius:999px; font-weight:600;
  opacity:0 !important; visibility:hidden !important; pointer-events:none;
  transform:translateY(6px); transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s, box-shadow .25s ease, background .25s ease;
}
.pf-cards-grid .pf-card .pf-btn:hover{ box-shadow:0 6px 16px rgba(0,0,0,.22); }

/* Hover (desktop) */
.pf-cards-grid .pf-card:hover .pf-media img{ transform:scale(var(--pf-hover-scale)); filter:blur(var(--pf-hover-blur)); }
.pf-cards-grid .pf-card:hover .pf-overlay{ background:rgba(0,0,0,.45); }
.pf-cards-grid .pf-card:hover .pf-desc{
  opacity:1 !important; visibility:visible !important; pointer-events:auto; transform:translateY(0);
}
.pf-cards-grid .pf-card:hover .pf-btn{
  opacity:1 !important; visibility:visible !important; pointer-events:auto; transform:translateY(0);
}

/* Mobile “first tap reveals” class (added by JS) */
.pf-cards-grid .pf-card.is-revealed .pf-media img{
  transform: scale(var(--pf-hover-scale)); filter: blur(var(--pf-hover-blur));
}
.pf-cards-grid .pf-card.is-revealed .pf-overlay{ background: rgba(0,0,0,.45); }
.pf-cards-grid .pf-card.is-revealed .pf-desc,
.pf-cards-grid .pf-card.is-revealed .pf-btn{
  opacity: 1 !important; visibility: visible !important; pointer-events: auto; transform: translateY(0);
}

/* Orientation / aspect */
.pf-cards-grid.pf-orient-portrait .pf-card{ aspect-ratio: var(--pf-ratio, 3/4); }
.pf-cards-grid.pf-orient-landscape .pf-card{ aspect-ratio: var(--pf-ratio, 16/9); }

/* Responsive columns (desktop → tablet) */
@media (max-width:1200px){ .pf-cards-grid{ --pf-cols:3; } }
@media (max-width:900px){ .pf-cards-grid{ --pf-cols:2; } }

/* ---------------- MOBILE STYLE: 1 ROW, HORIZONTAL SCROLLER (FIXED) ---------------- */
@media (max-width:768px){
  .pf-cards-grid{
    /* wipe desktop grid definition completely */
    grid-template-columns: none !important;
    grid-template-rows: none !important;

    /* real horizontal rail */
    display: grid !important;
    grid-auto-flow: column;        /* lay out in columns only */
    grid-auto-columns: 86%;        /* card width (tweak 80–92% if you like) */
    grid-auto-rows: 1fr;
    gap: 16px !important;

    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 0 16px 18px;
    margin: 0 -16px 0 0;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x !important;
    overscroll-behavior-x: contain !important;
    white-space: normal !important;
  }

  /* force every card to sit on the single (first) row, preserve DOM order */
  .pf-cards-grid .pf-card{
    grid-row: 1 !important;
    scroll-snap-align: start;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* neutralize any accidental slider transforms */
  .pf-cards-grid:where(.swiper-wrapper, .slick-track, .elementor-swiper){ transform:none !important; }
  .pf-cards-grid .swiper-slide, .pf-cards-grid .slick-slide{ width:auto !important; }

  /* optional prettier scrollbar */
  .pf-cards-grid::-webkit-scrollbar{ height: 6px; }
  .pf-cards-grid::-webkit-scrollbar-track{ background: rgba(255,255,255,.08); border-radius: 6px; }
  .pf-cards-grid::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.35); border-radius: 6px; }

  /* ---------------- PF Cards: mobile rail controls (buttons + progress) ---------------- */
  .pf-cards-controls{
    display:flex; align-items:center; gap:12px;
    padding:10px 16px 2px; margin:0 -16px; /* align with rail edges */
  }
  .pf-cards-controls .pf-rail-btn{
    width:34px; height:34px; border-radius:999px; border:none; outline:none;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.15); color:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.25);
  }
  .pf-cards-controls .pf-rail-btn:disabled{ opacity:.4; }

  .pf-cards-controls .pf-progress{
    flex:1 1 auto; height:6px; border-radius:6px; overflow:hidden;
    background:rgba(255,255,255,.12);
  }
  .pf-cards-controls .pf-progress > span{
    display:block; height:100%; width:0%;
    background:rgba(255,255,255,.5);
    transform-origin:left center;
    transition:width .2s linear;
  }

  /* simple chevrons using borders to keep it lightweight */
  .pf-cards-controls .pf-rail-btn .chev{
    width:8px; height:8px; border-top:2px solid currentColor; border-right:2px solid currentColor;
  }
  .pf-cards-controls .pf-prev .chev{ transform:rotate(-135deg); margin-left:2px; }
  .pf-cards-controls .pf-next .chev{ transform:rotate(45deg);  margin-right:2px; }
}

/* Page transition layer */
.pf-page-transition{ position:fixed; top:0; left:0; width:0; height:100vh; background:#000; z-index:9999; pointer-events:none; transition:width .5s cubic-bezier(.4,0,.2,1); }
.pf-page-transition.is-active{ width:100vw; }


/* ========== Shrink Image + Content (Full-bleed, sticky) ========== */
.pf-shrink{
  --pf-min:50;               /* fallback; JS overwrites from data-min */
  --pf-gap:28px;
  --pf-content-shift: 32px;  /* how far text slides while appearing */
  position: relative;
  background: transparent;
}

/* The rail makes room to scroll; height ~= distance user scrolls */
.pf-shrink .pf-shrink-rail{ min-height: 150vh; }

/* Pin the inner during the interaction */
.pf-shrink.pf-pin .pf-shrink-inner{ position: sticky; top: 11vh; }

/* Full-bleed grid: start as a single column, JS morphs to 2 columns while scrolling */
.pf-shrink .pf-shrink-inner{
  display: grid;
  align-items: center;
  gap: var(--pf-gap);
  grid-template-columns: 1fr;        /* becomes "img%  (100-img)%" via JS */
  width: 100%;
  max-width: none;                    /* full-bleed */
  padding: 0;
}

/* Order when image is placed on the right */
.pf-shrink.pf-side-right .pf-media{ order:2; }
.pf-shrink.pf-side-right .pf-content{ order:1; }

/* Media */
.pf-shrink .pf-media{ display:flex; justify-content:center; }
.pf-shrink .pf-media img{
  width:100%; height:auto; display:block; max-width:none;
  transition: width .12s linear, transform .12s linear;
  will-change: width, transform;
}

/* Content enters as the image shrinks */
.pf-shrink .pf-content{
  opacity: 0;
  transform: translateX(var(--pf-content-shift));
  transition: opacity .28s ease, transform .28s ease;
  padding: clamp(16px, 3vw, 40px);
  color: var(--pf-content-color, #111);
  background: transparent;
}
.pf-shrink.pf-side-right .pf-content{
  transform: translateX(calc(-1 * var(--pf-content-shift)));
}

/* When JS marks progress, reveal content smoothly */
.pf-shrink.is-active .pf-content{
  opacity: 1;
  transform: translateX(0);
}

.pf-shrink .pf-content h3{ margin: 0 0 12px 0; line-height: 1.2; }

/* Mobile: stack vertically (image then content) */
@media (max-width: 900px){
  .pf-shrink .pf-shrink-inner{ grid-template-columns: 1fr; }
  .pf-shrink .pf-media, .pf-shrink .pf-content{ order: initial; }
  .pf-shrink .pf-media img{ width:100% !important; }
  .pf-shrink .pf-content{ opacity: 1; transform: none; }
}