/* DIVSA canonical listing cards — Phase 6 premium UI.
 * This file owns card geometry only. App-shell gutters live in tap-shell.css;
 * no root padding, negative breakout or host-theme compensation belongs here. */

.tap-root .tap-pcard,
.tap-home-root .tap-pcard,
.tap-root .tap-fcard,
.tap-root .tap-fav-card{
  box-sizing:border-box;
  min-inline-size:0;
  display:flex;
  flex-direction:column;
  gap:0;
  overflow:hidden;
  border:1px solid var(--tap-line);
  border-radius:var(--tap-radius);
  background:var(--tap-card);
  color:var(--tap-ink);
  box-shadow:var(--tap-shadow-sm);
  cursor:pointer;
  transition:transform var(--dur-std) var(--ease-out),box-shadow var(--dur-std) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.tap-root .tap-pcard:hover,
.tap-home-root .tap-pcard:hover{
  border-color:color-mix(in srgb,var(--tap-primary) 34%,var(--tap-line));
  box-shadow:var(--tap-shadow-md);
  transform:translateY(-3px);
}
.tap-root .tap-pcard:focus-within,
.tap-home-root .tap-pcard:focus-within{
  border-color:var(--tap-primary);
  box-shadow:var(--tap-glow),var(--tap-shadow-md);
}
.tap-root .tap-pcard :is(img,.tap-thumb,.tap-pcard-thumb),
.tap-home-root .tap-pcard :is(img,.tap-thumb,.tap-pcard-thumb){
  max-inline-size:100%;
}
.tap-root .tap-pcard img,
.tap-home-root .tap-pcard img,
.tap-root .tap-pcard .tap-hero-img,
.tap-home-root .tap-pcard .tap-hero-img{
  transition:transform var(--dur-slow) var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
  .tap-root .tap-pcard:hover img,
  .tap-home-root .tap-pcard:hover img,
  .tap-root .tap-pcard:hover .tap-hero-img,
  .tap-home-root .tap-pcard:hover .tap-hero-img{transform:scale(1.025)}
}

.tap-root .tap-pcard .tap-body,
.tap-home-root .tap-pcard .tap-body{
  min-inline-size:0;
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  gap:var(--tap-space-2);
  padding:var(--tap-space-3);
}
.tap-root .tap-pcard h3,
.tap-home-root .tap-pcard h3,
.tap-root .tap-pcard-title,
.tap-root .tap-fcard-title{
  margin:0;
  color:var(--tap-ink);
  font-size:calc(1 * var(--tap-fs));
  font-weight:750;
  line-height:1.35;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
}
.tap-root .tap-card-benefit,
.tap-home-root .tap-card-benefit{
  min-block-size:2.9em;
  color:var(--tap-muted);
  font-size:calc(.75 * var(--tap-fs));
  line-height:1.45;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
}
.tap-root .tap-card-date,
.tap-home-root .tap-card-date{
  display:inline-flex;
  align-items:center;
  gap:var(--tap-space-1);
  inline-size:max-content;
  max-inline-size:100%;
  padding:4px 8px;
  border-radius:var(--tap-radius-full);
  background:var(--tap-primary-soft);
  color:var(--tap-brand-ink-safe);
  font-size:calc(.6875 * var(--tap-fs));
  font-weight:700;
}

/* Rails: the track owns spacing and the card fills the track. */
.tap-root .tap-section-scroller,
.tap-home-root .tap-section-scroller{
  box-sizing:border-box;
  min-inline-size:0;
  display:flex;
  gap:var(--tap-space-3);
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:inline mandatory;
  scroll-padding-inline:0;
  padding-block-end:var(--tap-space-2);
  scrollbar-width:none;
}
.tap-root .tap-section-scroller::-webkit-scrollbar,
.tap-home-root .tap-section-scroller::-webkit-scrollbar{display:none}
.tap-root .tap-section-scroller > .tap-pcard,
.tap-home-root .tap-section-scroller > .tap-pcard{
  flex:0 0 auto;
  scroll-snap-align:start;
  inline-size:var(--tap-card-minw,268px);
  min-inline-size:var(--tap-card-minw,268px);
  max-inline-size:var(--tap-card-minw,268px);
}

/* Home phone rail: exactly one dominant card with a small next-card preview.
 * The shell already contributes the 16px left/right page gutter, so this rail
 * never adds another hidden gutter or negative margin. */
@media(max-width:767.98px){
  .tap-home-root .tap-section-scroller > .tap-pcard{
    inline-size:min(86vw,340px);
    min-inline-size:min(86vw,340px);
    max-inline-size:min(86vw,340px);
  }
  .tap-root.tap-root.tap-view-catalogue .tap-section-scroller > .tap-pcard{
    inline-size:100%;
    min-inline-size:0;
    max-inline-size:none;
  }
  .tap-root .tap-tabs{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--tap-space-2);
    overflow:visible;
    padding:0;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .tap-root .tap-tabs > .tap-tab{
    min-inline-size:0;
    min-block-size:64px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--tap-space-1);
    padding:10px 8px;
    white-space:normal;
    text-align:center;
    border:1px solid var(--tap-line);
    border-radius:var(--tap-radius-sm);
    background:var(--tap-card);
    color:var(--tap-ink);
  }
  .tap-root .tap-tabs > .tap-tab.active{
    border-color:var(--tap-primary);
    background:var(--tap-primary-soft);
    color:var(--tap-brand-ink-safe);
  }
}

@media(min-width:768px) and (max-width:1023.98px){
  .tap-root .tap-section-scroller > .tap-pcard,
  .tap-home-root .tap-section-scroller > .tap-pcard{
    inline-size:min(var(--tap-card-minw,248px),248px);
    min-inline-size:min(var(--tap-card-minw,248px),248px);
    max-inline-size:min(var(--tap-card-minw,248px),248px);
  }
}

@media(min-width:1024px){
  .tap-root .tap-section-scroller,
  .tap-home-root .tap-section-scroller,
  .tap-root .tap-hscroll,
  .tap-home-root .tap-hscroll{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(min(var(--tap-card-gridmin,252px),100%),1fr));
    gap:var(--tap-space-5);
    overflow:visible;
    scroll-snap-type:none;
    padding-block-end:0;
  }
  .tap-root .tap-section-scroller > .tap-pcard,
  .tap-home-root .tap-section-scroller > .tap-pcard,
  .tap-root .tap-hscroll > .tap-pcard,
  .tap-home-root .tap-hscroll > .tap-pcard{
    inline-size:auto;
    min-inline-size:0;
    max-inline-size:none;
  }
}


/* Phase 4 — Smart Responsive 2.0. Card shelves query the width they actually
 * receive, so the same DIVSA component behaves correctly in a full native
 * canvas, a sidebar, or Compatibility/Embed mode. */
.tap-root,.tap-home-root{container:tapCards / inline-size}
/*
 * Container thresholds are gutter-adjusted, not copies of the viewport ones.
 * The container is .tap-root, which sits inside .tap-shell-container with
 * padding-inline:var(--tap-shell-gutter) — 16px below 768, 24px to 1024, 28px
 * above. The container is therefore 32–56px narrower than the viewport, so
 * reusing 768/1024 here made every band fire late: at a 768px viewport the
 * container measured ~720px and still got mobile geometry; at 1024px it
 * measured ~968px and still got tablet. Subtracting the gutter puts the
 * switch back on the viewport width it was written for.
 *   viewport 768  - 2*24 = 720      viewport 1024 - 2*28 = 968
 */
@container tapCards (max-width:719.98px){
  /* The card layer owns rail geometry in Native and Compatibility/Embed mode. */
  .tap-root .tap-section-scroller,.tap-home-root .tap-section-scroller{gap:16px;padding-inline:16px;scroll-padding-inline:16px}
  .tap-home-root .tap-section-scroller > .tap-pcard{inline-size:min(86cqi,340px);min-inline-size:min(86cqi,340px);max-inline-size:min(86cqi,340px)}
  .tap-root:not(.tap-view-catalogue) .tap-section-scroller > .tap-pcard{inline-size:max(240px,calc(100cqi - 72px));min-inline-size:max(240px,calc(100cqi - 72px));max-inline-size:min(340px,calc(100cqi - 72px))}
  .tap-root.tap-view-catalogue .tap-grid,.tap-vertical-grid{grid-template-columns:1fr}
  .tap-root.tap-view-catalogue .tap-section-scroller > .tap-pcard{inline-size:100%;min-inline-size:0;max-inline-size:none}
}
@container tapCards (min-width:720px) and (max-width:967.98px){
  .tap-root .tap-section-scroller > .tap-pcard,.tap-home-root .tap-section-scroller > .tap-pcard{inline-size:min(var(--tap-card-minw,248px),248px);min-inline-size:min(var(--tap-card-minw,248px),248px);max-inline-size:min(var(--tap-card-minw,248px),248px)}
}
@container tapCards (min-width:968px){
  .tap-root .tap-section-scroller,.tap-home-root .tap-section-scroller,.tap-root .tap-hscroll,.tap-home-root .tap-hscroll{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--tap-card-gridmin,252px),100%),1fr));gap:var(--tap-space-5);overflow:visible;scroll-snap-type:none;padding-block-end:0}
  .tap-root .tap-section-scroller > .tap-pcard,.tap-home-root .tap-section-scroller > .tap-pcard,.tap-root .tap-hscroll > .tap-pcard,.tap-home-root .tap-hscroll > .tap-pcard{inline-size:auto;min-inline-size:0;max-inline-size:none}
}

/* Explicit list and banner modes stay component-local. */
body.tap-listview-list .tap-root .tap-pcard{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:var(--tap-space-3);
  align-items:center;
}
body.tap-listview-list .tap-root .tap-pcard :is(.tap-pcard-thumb,.tap-thumb){
  inline-size:112px;
  max-inline-size:112px;
  aspect-ratio:1;
}
.tap-listview-banner .tap-root .tap-pcard-banner{display:block}
.tap-listview-banner .tap-root .tap-pcard-banner .tap-thumb{aspect-ratio:16/9;height:auto}
@media(min-width:1024px){
  .tap-listview-banner .tap-root .tap-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tap-listview-banner .tap-root .tap-pcard-banner .tap-thumb{aspect-ratio:16/10}
}

.tap-root .tap-pcard[role="group"]{cursor:pointer}
.tap-pcard h3,.tap-cst-name,.tap-bkcard-name,.tap-il-card__title{
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
}

/* Vertical catalogue cards are one column on phones. */
@media(max-width:767.98px){
  .tap-root.tap-view-catalogue .tap-grid,
  .tap-vertical-grid{grid-template-columns:1fr}
  .tap-root.tap-view-catalogue .tap-pcard{display:grid;grid-template-columns:minmax(0,1fr);min-block-size:0}
  .tap-root.tap-view-catalogue .tap-pcard .tap-thumb{inline-size:100%;block-size:auto;aspect-ratio:4/3}
  .tap-root.tap-view-catalogue .tap-pcard .tap-body{padding:var(--tap-space-3);min-inline-size:0}
  .tap-root.tap-view-catalogue .tap-pcard .tap-book-btn-sm{min-block-size:44px;margin-block-start:var(--tap-space-2)}
}

@media(hover:none){
  .tap-pcard:hover,.tap-fcard:hover,.tap-tier-card:hover,.tap-slot:hover,.tap-addon-card:hover,.tap-plan-card:hover,.tap-deity-item:hover .tap-deity-icon{
    transform:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .tap-root .tap-pcard,.tap-home-root .tap-pcard,.tap-root .tap-pcard img,.tap-home-root .tap-pcard img{transition:none}
}

/* Phase 8 — canonical catalogue header and search geometry. */
.tap-root.tap-view-catalogue .tap-catalogue-head{margin-block-end:var(--tap-space-5)}
.tap-root.tap-view-catalogue .tap-catalogue-subtitle{margin-block-start:var(--tap-space-1);color:var(--tap-muted);font-size:14px;line-height:1.55}
.tap-root.tap-view-catalogue .tap-catalogue-search{margin-block-end:var(--tap-space-4)}
.tap-root.tap-view-catalogue .tap-catalogue-suggestions{justify-content:flex-start;margin-block-end:var(--tap-space-4)}
.tap-root.tap-view-catalogue .tap-catalogue-result-count{margin-block-end:var(--tap-space-3);color:var(--tap-muted);font-size:13px;font-weight:600}


/* Phase 8 — Featured/Service card ownership moved out of tap-core.css.
 * All paint derives from tenant/admin semantic tokens; no brand palette lives here. */
.tap-root .tap-fcard,
.tap-home-root .tap-fcard{
  position:relative;
  inline-size:100%;
  min-inline-size:0;
  max-inline-size:100%;
  padding:0;
  overflow:hidden;
  border:1px solid var(--tap-line);
  border-radius:var(--tap-radius-xl);
  background:var(--tap-card);
  color:var(--tap-ink);
  box-shadow:var(--tap-shadow-sm);
  transition:transform var(--dur-std) var(--ease-out),box-shadow var(--dur-std) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.tap-root .tap-fcard:hover,
.tap-home-root .tap-fcard:hover{transform:translateY(-3px);box-shadow:var(--tap-shadow-md)}
.tap-root .tap-fcard-art,
.tap-home-root .tap-fcard-art{
  position:relative;
  display:grid;
  place-items:center;
  inline-size:100%;
  min-block-size:130px;
  aspect-ratio:4/3;
  background-color:var(--tap-primary-soft);
  background-size:cover;
  background-position:center;
  text-decoration:none;
}
.tap-root .tap-fcard-media,
.tap-home-root .tap-fcard-media{
  position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;display:block;
}
.tap-root .tap-fcard-glyph,
.tap-home-root .tap-fcard-glyph{font-size:calc(2.5 * var(--tap-fs));color:var(--tap-on-primary);opacity:.9}
.tap-root .tap-fcard-badge,
.tap-home-root .tap-fcard-badge{
  position:absolute;inset-block-end:10px;inset-inline-start:10px;
  padding:3px 9px;border-radius:var(--tap-radius-full);
  background:var(--tap-ok-pale);color:var(--tap-ok);
  font-size:calc(.6563 * var(--tap-fs));font-weight:700;
}
.tap-root .tap-fcard-heart,
.tap-home-root .tap-fcard-heart{
  position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:2;
  display:grid;place-items:center;inline-size:44px;block-size:44px;
  border:1px solid var(--tap-line);border-radius:var(--tap-radius-full);
  background:color-mix(in srgb,var(--tap-card) 94%,transparent);color:var(--tap-muted);
  box-shadow:var(--tap-shadow-sm);cursor:pointer;font-size:calc(1.0625 * var(--tap-fs));line-height:1;
  transition:transform var(--dur-fast) var(--ease-spring),color var(--dur-fast) var(--ease-out);
}
.tap-root .tap-fcard-heart:active,
.tap-home-root .tap-fcard-heart:active{transform:scale(1.08)}
.tap-root .tap-fcard-heart.is-on,
.tap-home-root .tap-fcard-heart.is-on{color:var(--tap-accent)}
.tap-root .tap-fcard-body,
.tap-home-root .tap-fcard-body{display:block;min-inline-size:0;padding:var(--tap-space-3);text-decoration:none;color:inherit}
.tap-root .tap-fcard-name,
.tap-home-root .tap-fcard-name{display:block;font-family:var(--tap-font-heading);font-size:calc(1 * var(--tap-fs));font-weight:650;color:var(--tap-ink);line-height:1.25}
.tap-root .tap-fcard-temple,
.tap-home-root .tap-fcard-temple{display:inline-flex;align-items:center;gap:6px;margin-block-start:6px;color:var(--tap-muted);font-size:calc(.75 * var(--tap-fs))}
.tap-root .tap-fcard-foot,
.tap-home-root .tap-fcard-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--tap-space-2);margin-block-start:var(--tap-space-3)}
.tap-root .tap-fcard-price,
.tap-home-root .tap-fcard-price{color:var(--tap-primary);font-size:calc(.7813 * var(--tap-fs));font-weight:700}
.tap-root .tap-fcard-price em,
.tap-home-root .tap-fcard-price em{color:var(--tap-muted);font-size:calc(.6875 * var(--tap-fs));font-style:normal;font-weight:600}
.tap-root .tap-fcard-rating,
.tap-home-root .tap-fcard-rating{color:var(--tap-accent);font-size:calc(.75 * var(--tap-fs));font-weight:700;white-space:nowrap}


.tap-root .tap-fcard-body,
.tap-home-root .tap-fcard-body{flex:1 1 auto}
.tap-root .tap-fcard-cta,
.tap-home-root .tap-fcard-cta{
  display:flex;align-items:center;justify-content:center;
  min-block-size:44px;margin:10px 14px 14px;text-decoration:none;font-size:calc(.8125 * var(--tap-fs));
}
.tap-lay>.tap-fcard{inline-size:100%;block-size:100%}
.tap-svc-shortcode .tap-fcard{block-size:100%;min-inline-size:0;max-inline-size:100%}

/* Missing artwork is a neutral tenant-derived placeholder, not an inline theme gradient. */
.tap-fcard-art.is-placeholder{
  display:grid;
  place-items:center;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--tap-primary) 9%,var(--tap-card)),
    color-mix(in srgb,var(--tap-accent) 8%,var(--tap-card)));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tap-ink) 8%,transparent);
}
.tap-fcard-art.is-placeholder .tap-fcard-glyph{
  display:grid;place-items:center;
  inline-size:clamp(48px,26%,72px);
  block-size:auto;aspect-ratio:1;
  color:color-mix(in srgb,var(--tap-primary) 62%,var(--tap-ink));
  opacity:.55;
}
.tap-fcard-art.is-placeholder .tap-fcard-glyph svg{inline-size:100%;block-size:100%;stroke-width:1.5}
.tap-fcard-art.is-placeholder .tap-fcard-badge{background:color-mix(in srgb,var(--tap-card) 88%,transparent);color:var(--tap-ink)}

/* Catalogue owns its search/header/rail/card geometry here, not in tap-core.css. */
.tap-root.tap-view-catalogue .tap-search-box{
  position:sticky;
  inset-block-start:calc(var(--tap-header-h,0px) + var(--tap-space-2));
  z-index:var(--tap-layer-sticky);
  padding:6px;
  border:1px solid var(--tap-ui-line);
  border-radius:var(--tap-radius);
  background:color-mix(in srgb,var(--tap-surface) 94%,transparent);
  box-shadow:var(--tap-ui-shadow-sm);
  backdrop-filter:blur(14px);
}
.tap-root.tap-view-catalogue .tap-catalogue-section{margin:28px 0 8px}
.tap-root.tap-view-catalogue .tap-catalogue-section .tap-section-head{display:flex;align-items:center;justify-content:space-between;gap:var(--tap-space-3);margin-block-end:13px}
.tap-root.tap-view-catalogue .tap-section-viewall{
  min-block-size:44px;padding-inline:var(--tap-space-2);border:0;background:transparent;
  color:var(--tap-brand-ink);font-size:calc(.8125 * var(--tap-fs));font-weight:800;
}
.tap-root.tap-view-catalogue .tap-pcard{position:relative;scroll-snap-align:start}
.tap-root.tap-view-catalogue .tap-pcard .tap-thumb{aspect-ratio:4/3}
.tap-root.tap-view-catalogue .tap-pcard .tap-body h3{margin-block-end:7px;font-size:calc(1.0625 * var(--tap-fs));line-height:1.3}
.tap-root.tap-view-catalogue .tap-pcard .tap-book-btn-sm{
  inline-size:100%;min-block-size:44px;margin-block-start:var(--tap-space-3);
  border:0;border-radius:var(--tap-btn-radius);background:var(--tap-cta-bg);color:var(--tap-cta-text);font-weight:800;
}
@media(min-width:768px){
  .tap-root.tap-view-catalogue .tap-grid{gap:var(--tap-smart-gap,14px)}
}
@media(min-width:1024px){
  .tap-root.tap-view-catalogue .tap-section-scroller{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--tap-space-4);overflow:visible}
}