/* ============================================================
   SKINTACITY — inner pages (Treatments, Team & Membership, Love Letters, Contact)
   Element styles live on each Elementor element (Custom CSS, copied from the original).
   This file mirrors the original pages' base styles and ports their responsive rules.
   Page ids: 10 Treatments & Services · 11 Our Team & Membership · 12 Love Letters · 13 Contact Us
   ============================================================ */

@keyframes kenburnsSoft{0%{transform:scale(1.05) translate3d(1%,-0.6%,0)}50%{transform:scale(1.11) translate3d(-1%,0.7%,0)}100%{transform:scale(1.05) translate3d(1%,-0.6%,0)}}

/* layout: spacing comes only from the copied margins/gaps, never from Elementor defaults */
body.sk-inner [data-elementor-type="wp-page"]{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px}
body.sk-inner [data-elementor-type="wp-page"] > .e-con > .e-con-inner{padding-top:0!important;padding-bottom:0!important}
/* flex rows never wrap unless the original says so (Elementor wraps every container below 767px) */
:where(body.sk-inner [data-elementor-type="wp-page"]) .e-con{flex-wrap:nowrap;--flex-wrap-mobile:nowrap}
/* flex/grid items keep the browser's content-based minimum, as the original elements did
   (Elementor's min-width:0 lets nowrap rows such as the category rail collapse onto each other) */
:where(body.sk-inner [data-elementor-type="wp-page"]) .e-con,
:where(body.sk-inner [data-elementor-type="wp-page"]) .e-con .elementor-widget{min-width:auto}
/* the original page wrapper clips horizontal overflow */
body.sk-inner [data-elementor-type="wp-page"]{overflow-x:clip}
body.sk-inner [data-elementor-type="wp-page"] .elementor-button{white-space:normal}

/* the original's document base: Avenir 16px/normal, espresso links, 1em paragraph margins */
body.sk-inner [data-elementor-type="wp-page"]{line-height:normal}
body.sk-inner [data-elementor-type="wp-page"] .elementor-widget-text-editor{font-family:'Avenir Next',sans-serif;font-size:16px;line-height:normal;font-weight:400;color:#2D2A28}
body.sk-inner [data-elementor-type="wp-page"] a{color:#2D2A28;text-decoration:none}
body.sk-inner [data-elementor-type="wp-page"] a:hover{color:#C7A66B}
body.sk-inner [data-elementor-type="wp-page"] p{margin-block:1em}
body.sk-inner [id]{scroll-margin-top:var(--anchor-offset,150px)}

/* tables render exactly as authored: neutralize theme borders, zebra and hover fills */
body.sk-inner [data-elementor-type="wp-page"] table{margin:0;background:none;border-spacing:0;font-size:inherit}
body.sk-inner [data-elementor-type="wp-page"] table th,
body.sk-inner [data-elementor-type="wp-page"] table td{border:0;vertical-align:middle;line-height:normal;background-color:transparent}
body.sk-inner [data-elementor-type="wp-page"] table tbody > tr:nth-child(odd) > td,
body.sk-inner [data-elementor-type="wp-page"] table tbody > tr:nth-child(odd) > th,
body.sk-inner [data-elementor-type="wp-page"] table tbody tr:hover > td,
body.sk-inner [data-elementor-type="wp-page"] table tbody tr:hover > th{background-color:transparent}

/* inner-page footer uses the deeper espresso, as the original */
body.sk-inner .e-con.sk-footer{background:#2D2A28!important}
body.sk-inner .e-con.sk-footer > .e-con-inner{padding-top:clamp(56px,6vw,84px)!important}

/* ---------- responsive rules ported from the original pages ----------
   Page scoping sits inside :where() so every rule keeps its original specificity: the original's bare
   p / h1 / h2 rules must still lose to its [data-t] rules (e.g. the founder letter stays 21px, not 17px). */
@media (max-width:1024px){
  :where(.elementor-10) [data-cols="3"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  /* minmax(0,…) rather than 1fr: a plain 1fr column grows to its widest content, so the hours table
     would push its card off-screen instead of scrolling inside it */
  :where(.elementor-10,.elementor-11,.elementor-13) [data-t="split"]{grid-template-columns:minmax(0,1fr)!important}
  :where(.elementor-10,.elementor-11) [data-t="split-art"]{height:clamp(300px,42vw,440px)!important;min-height:0!important;order:-1}
  :where(.elementor-10) [data-t="split-art"]{margin:0 20px 20px 0}
  :where(.elementor-10,.elementor-11) [data-t="split-art"] img{min-height:0!important;height:100%!important}
  :where(.elementor-10,.elementor-11) [data-t="split-art"] > .elementor-widget-image,
  :where(.elementor-10,.elementor-11) [data-t="split-art"] > .elementor-widget-image > .elementor-widget-container{height:100%}
  :where(.elementor-11) [data-t="tiers"]{grid-template-columns:1fr!important}
  :where(.elementor-11) [data-t="tier-mid"]{transform:none!important}
}
@media (max-width:768px){
  :where(body.sk-inner) [data-t="banner-shade"]{background:linear-gradient(180deg,rgba(45,42,40,.82),rgba(45,42,40,.92))!important}
  :where(body.sk-inner [data-elementor-type="wp-page"]) h1{font-size:44px!important}
  :where(.elementor-10,.elementor-11) h2{font-size:38px!important;line-height:1.16!important}
  :where(.elementor-12) h2{font-size:36px!important;line-height:1.16!important}
  :where(.elementor-13) h2{font-size:34px!important;line-height:1.16!important}
  :where(body.sk-inner [data-elementor-type="wp-page"]) p{font-size:17px!important}
  :where(.elementor-10,.elementor-11) [data-t="split-art"]::before{display:none}
  :where(body.sk-inner [data-elementor-type="wp-page"]) [data-t="eyebrow"]{font-size:11px!important}
  :where(body.sk-inner [data-elementor-type="wp-page"]) [data-t="btn"] .elementor-button{font-size:12px!important}
  :where(.elementor-10,.elementor-11,.elementor-12) [data-t="cta-row"]{flex-direction:column!important;align-items:stretch!important}
  :where(.elementor-10,.elementor-11,.elementor-12) [data-t="cta-row"] .elementor-button{display:block!important;width:100%!important;box-sizing:border-box;text-align:center!important}
  :where(.elementor-12) [data-t="await"]{font-size:26px!important}
  :where(.elementor-11) [data-t="letter"]{font-size:21px!important}
  :where(.elementor-11) [data-t="compare"]{font-size:15px!important}
  :where(.elementor-10) [data-t="glow-band"]{grid-template-columns:minmax(0,1fr)!important}
  :where(.elementor-10) [data-t="band-art"]{min-height:240px!important;order:-1}
  /* contact form rows stack from 768 down (Elementor's own mobile breakpoint starts at 767) */
  .elementor-13 .sk-cform .elementor-field-group.elementor-col-50{width:100%!important}
  /* client request: paired cards (Lumen Restore add-on / full ritual) stack full width on mobile */
  :where(.elementor-10) [data-t="split cardgrid"]{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
  /* client request: wide tables slide sideways inside their card; the short hours rows stay on one line */
  :where(body.sk-inner [data-elementor-type="wp-page"]) [style*="overflow-x:auto"]{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  :where(.elementor-13) [style*="overflow-x:auto"] :is(th,td){white-space:nowrap}
}
/* client request: chips in a centred row keep their own text centred when a long label wraps */
:where(body.sk-inner [data-elementor-type="wp-page"]) [style*="justify-content:center"] > span{text-align:center}
@media (max-width:640px){
  :where(.elementor-10) [data-cols]{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:480px){
  :where(body.sk-inner [data-elementor-type="wp-page"]) h1{font-size:36px!important}
  :where(.elementor-12,.elementor-13) h2{font-size:30px!important}
  :where(.elementor-10,.elementor-11) h2{font-size:32px!important}
}