/* The inner pages. They are built out of the bench's own parts - the same cups,
   paper tags, ladders, fine print and tables - so this file only adds the four
   things the homepage has no use for. Nothing here touches a class
   dopatti.css already owns, except to give the big cup a size when it holds a
   plain disc instead of a photograph. */

/* ---------------------------------------------------- the trail back up */
.dpt-crumb{border-bottom:1px solid var(--line);background:rgba(255,255,255,.5)}
.dpt-crumb .dpt-wrap{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding-top:9px;padding-bottom:9px;
  font:500 12.5px/1.4 var(--f2);letter-spacing:.04em;color:var(--wood-lt);
}
.dpt-crumb a{color:var(--liq-3);text-decoration:none;border-bottom:1px solid transparent}
.dpt-crumb a:hover,.dpt-crumb a:focus-visible{border-bottom-color:var(--liq-3)}
.dpt-crumb i{font-style:normal;color:var(--brass)}
.dpt-crumb span[aria-current]{color:var(--wood)}

/* ------------------------------------------- a disc in the widest cup */
/* dopatti.css sizes .dpt-cbig .dpt-inf but not .dpt-cbig .dpt-disc, because on
   the homepage the big cup always holds the hero photograph. Pages with no one
   girl to lead on - prices, areas, types, contact, 404 - stand a plain disc
   there instead, so it needs the photograph's measurements at both widths. */
.dpt-cbig .dpt-disc{width:min(85vw,45vh);height:min(85vw,45vh)}
@media (min-width:861px){
  .dpt-cbig .dpt-disc{width:min(33vw,338px);height:min(33vw,338px)}
}

/* ------------------------------------------------- the level matrix */
/* The price page prints the three levels against the three lengths in a
   .dpt-hours table. That table has no shade column, so the dot is added here -
   .dpt-gdot cannot be reused because it is deliberately invisible until a
   catalogue row is touched. */
.dpt-pdot{
  display:inline-block;width:13px;height:13px;border-radius:50%;vertical-align:-1px;margin-right:8px;
  box-shadow:0 0 0 2px var(--panel),0 0 0 3px var(--line);
}

/* --------------------------------------------------- two cards abreast */
/* Used where a page has exactly two blocks of equal weight: the number and the
   hours on the contact page, the ranges and the journey on the price page. */
.dpt-pair{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:861px){.dpt-pair{grid-template-columns:1fr 1fr;align-items:start}}
.dpt-pair > .dpt-fine{margin-top:0}

/* ------------------------------------------------------ her other cups */
/* The missing half of a part the design set only half-shipped. d6.html carries
   the script for a photograph viewer - block 4, [data-dpt-viewer], with
   .dpt-view, .dpt-slide, .dpt-dot, .dpt-vprev and .dpt-vnext - but its homepage
   never used one, so the stylesheet it came with has no rule for any of those
   names. Dropped in as it stood, the markup rendered as a column of full-size
   photographs running down the page. These rules are that missing half, so the
   viewer is a row of cups like everything else on the bench: one circle to a
   screen, scroll-snapped, with a brass arrow either side.

   The track has to be exactly one slide wide, because the script scrolls by
   track.clientWidth and reads the current slide back out of scrollLeft. */
.dpt-viewer{background:var(--panel);border:1px solid var(--line);padding:18px 14px 12px}
.dpt-view{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.dpt-view::-webkit-scrollbar{display:none}
/* The two porcelain rings are box-shadows, so they stand 20px outside the
   circle and need that much clear room, or the bar below slices the outer one
   the way it did on the first pass. */
.dpt-slide{
  flex:0 0 100%;scroll-snap-align:center;display:flex;justify-content:center;align-items:flex-start;
  padding:24px 0 30px;
}
.dpt-slide .dpt-inf{
  width:min(72vw,300px);height:min(72vw,300px);margin:0;
  box-shadow:0 0 0 7px var(--panel),0 0 0 8px var(--line),0 0 0 19px var(--panel),
    0 0 0 20px var(--line),0 12px 22px -14px rgba(74,56,40,.34);
}
@media (min-width:861px){.dpt-slide .dpt-inf{width:300px;height:300px}}

/* the bar under the cups: arrow, count, dots, arrow */
.dpt-vbar{
  display:flex;align-items:center;justify-content:center;gap:12px;
  border-top:1px solid var(--line);margin-top:14px;padding-top:11px;
}
.dpt-vprev,.dpt-vnext{
  width:44px;height:44px;flex:none;border-radius:50%;cursor:pointer;
  border:1px solid rgba(74,56,40,.34);background:var(--brass);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
}
.dpt-vprev svg,.dpt-vnext svg{width:17px;height:17px}
.dpt-vprev svg{transform:rotate(180deg)}
.dpt-vprev:hover,.dpt-vnext:hover{filter:brightness(.92)}
.dpt-vcount{
  font:600 11.5px/1 var(--f2);letter-spacing:.17em;text-transform:uppercase;color:var(--wood-lt);
  min-width:52px;text-align:center;
}
.dpt-vdots{display:flex;align-items:center;gap:7px}
/* the tap target stays 44px; only the dot inside it is small */
.dpt-vdots .dpt-dot{
  width:26px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.dpt-vdots .dpt-dot::after{
  content:"";width:11px;height:11px;border-radius:50%;background:var(--line);
  box-shadow:0 0 0 1px var(--line);transition:background .16s ease;
}
.dpt-vdots .dpt-dot[aria-current="true"]::after{background:var(--liq-2)}
.dpt-vdots .dpt-dot:hover::after{background:var(--liq-1)}
@media (prefers-reduced-motion: reduce){
  .dpt-view{scroll-behavior:auto}
  .dpt-vdots .dpt-dot::after{transition:none}
}