/* Home: website types (patterns/home-webtypes.php) — core Tabs, one panel per website type: scope text beside the service's own
   live demo (block sv-demo, the same picture as on the services cards). Behaviour (sliding underline, edge fades, equal panel height): assets/js/sections/hm-types.js. */
.hm-types{
  --hm-types-chk:calc(var(--s-3) + var(--s-1) / 2);
  --hm-types-tick:calc(var(--s-2) + var(--s-1) / 4);
  --hm-types-li-pad:0px;
  --hm-types-ink:2px;
  --hm-types-rule-line:inset 0 -1px 0 var(--rule);
}
.hm-types__page{display:grid;gap:var(--s-6)}
/* the script appends the underline and arrows to the wrapper (a flow group): without this reset WordPress gives them its block-gap margin-top and they sit that far below the tabs */
.hm-types .hm-types__page > *,.hm-types .hm-types__wrap > *,.hm-types .hm-types__vis > *,.hm-types .hm-types__head > *,.hm-types .hm-types__tabs > *,.hm-types .hm-types__text > *,.hm-types .hm-types__title > *,.hm-types .wp-block-tab-panel > *{margin:0}
.hm-types .sec-head{margin-bottom:0}
.hm-types :is(.hm-types__head,.hm-types__title) > .eyebrow{margin-bottom:var(--s-3)}

/* ---------- tab list ---------- */
.hm-types__wrap{position:relative;min-width:0}
.hm-types__tabs{display:grid;gap:var(--s-6)}
.hm-types .wp-block-tab-list{position:relative;flex-wrap:nowrap;border-bottom:0;gap:var(--s-1);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;box-shadow:var(--hm-types-rule-line)}
.hm-types .wp-block-tab-list::-webkit-scrollbar{display:none}
.hm-types .wp-block-tab-list button{flex:none;border-radius:0;background:none;padding:var(--s-3) var(--s-4);font:600 var(--t-m)/1.2 var(--font-body);color:var(--ink-2);white-space:nowrap;transition:color var(--dur) var(--ease-press)}
.hm-types .wp-block-tab-list button:hover,.hm-types .wp-block-tab-list button[aria-selected="true"]{background:none;color:var(--ink)}
.hm-types .wp-block-tab-list button[aria-selected="true"]::before{border-bottom-color:var(--accent-fill)}
/* the script draws one underline that slides between tabs; it replaces the per-tab underline */
.hm-types__wrap.has-ink .wp-block-tab-list button::before{display:none}
.hm-types__ink{position:absolute;top:calc(var(--hm-types-list-h) - var(--hm-types-ink));left:0;width:var(--hm-types-ink-w);height:var(--hm-types-ink);background:var(--accent-fill);pointer-events:none;transform:translateX(var(--hm-types-ink-x));transition:transform var(--dur-m) var(--ease-out),width var(--dur-m) var(--ease-out)}
/* edge fades when the tabs overflow (phones) + arrow buttons on mouse devices */
.hm-types__wrap.is-fade-r .wp-block-tab-list{-webkit-mask-image:linear-gradient(to right,currentColor calc(100% - var(--s-7)),transparent);mask-image:linear-gradient(to right,currentColor calc(100% - var(--s-7)),transparent)}
.hm-types__wrap.is-fade-l .wp-block-tab-list{-webkit-mask-image:linear-gradient(to left,currentColor calc(100% - var(--s-7)),transparent);mask-image:linear-gradient(to left,currentColor calc(100% - var(--s-7)),transparent)}
.hm-types__wrap.is-fade-l.is-fade-r .wp-block-tab-list{-webkit-mask-image:linear-gradient(to right,transparent,currentColor var(--s-7),currentColor calc(100% - var(--s-7)),transparent);mask-image:linear-gradient(to right,transparent,currentColor var(--s-7),currentColor calc(100% - var(--s-7)),transparent)}
.hm-types__hs{position:absolute;top:calc(var(--hm-types-list-h) / 2);background:var(--card);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-50%);transition:opacity var(--dur) var(--ease-out),border-color var(--dur) var(--ease-press),visibility 0s linear var(--dur)}
.hm-types__hs::before{content:"";width:var(--icon-m);height:var(--icon-m);background:currentColor;-webkit-mask:var(--hm-types-icon) center / contain no-repeat;mask:var(--hm-types-icon) center / contain no-repeat}
.hm-types__hs--prev{left:0;--hm-types-icon:url(../../../icons/left.svg?ver=f164a732)}
.hm-types__hs--next{right:0;--hm-types-icon:url(../../../icons/right.svg?ver=b4bb1807)}
@media (hover: hover) and (pointer: fine){
  .hm-types__wrap.is-fade-l .hm-types__hs--prev,.hm-types__wrap.is-fade-r .hm-types__hs--next{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
}

/* ---------- panel ---------- */
.hm-types .wp-block-tab-panels{min-height:var(--hm-types-panels-h)}
.hm-types .wp-block-tab-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap-col);align-items:start}
.hm-types__text{display:grid;gap:var(--s-4)}
.hm-types__text h3{font-size:var(--t-xl)}
.hm-types__text p{color:var(--ink-2)}
.hm-types__inc{display:grid;gap:var(--s-2);font-size:var(--t-s)}
/* round ticks (lists styled Checklist + finished lessons) */
.hm-types .wp-block-list.is-style-checklist > li{display:flex;align-items:center;gap:var(--s-2)}
.hm-types .wp-block-list.is-style-checklist > li{position:relative}
.hm-types .wp-block-list.is-style-checklist > li::before{content:"";flex:none;width:var(--hm-types-chk);height:var(--hm-types-chk);border-radius:50%;background:var(--accent-fill)}
.hm-types .wp-block-list.is-style-checklist > li::after{content:"";position:absolute;top:50%;left:calc(var(--hm-types-li-pad) + (var(--hm-types-chk) - var(--hm-types-tick)) / 2);width:var(--hm-types-tick);height:var(--hm-types-tick);background:var(--on-accent);transform:translateY(-50%);-webkit-mask:url(../../../icons/check.svg?ver=4227966a) center / contain no-repeat;mask:url(../../../icons/check.svg?ver=4227966a) center / contain no-repeat}
.hm-types__time{display:inline-flex;align-items:center;gap:var(--s-2);justify-self:start;padding:var(--s-2) calc(var(--s-2) + var(--s-1) / 2);border-radius:var(--r);background:var(--accent-tint);font:500 var(--t-xs)/1 var(--font-mono)}
.hm-types__text .hm-types__time{color:var(--accent)}
.hm-types .hm-types__text .hm-types__time::before{width:calc(var(--s-3) + var(--s-1) / 2);height:calc(var(--s-3) + var(--s-1) / 2)}
.hm-types__vis{display:grid;gap:var(--s-5);padding:var(--gap-card);border:1px solid var(--rule);border-radius:var(--r-card)}

/* icons: a class hm-types__i-<name> draws icons/<name>.svg before the text */
.hm-types [class*="hm-types__i-"]::before{content:"";flex:none;width:var(--s-3);height:var(--s-3);background:currentColor;-webkit-mask:var(--hm-types-icon) center / contain no-repeat;mask:var(--hm-types-icon) center / contain no-repeat}
.hm-types__i-cal{--hm-types-icon:url(../../../icons/cal.svg?ver=cf7541d5)}

/* ---------- motion (skipped entirely for reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference){
  .hm-types .wp-block-tab-panel:not([hidden]){animation:hm-types-in var(--dur-m) var(--ease-out)}
}
@media (prefers-reduced-motion: reduce){
  .hm-types__ink{transition:none}
}
@keyframes hm-types-in{from{opacity:0;transform:translateY(calc(var(--s-1) * 1.5))}}

/* ---------- breakpoints ---------- */
@media (max-width: 991px){
  .hm-types .wp-block-tab-panel{grid-template-columns:minmax(0,1fr)}
}