/* ==========================================================================
   templates.css: storefront template gallery (/templates/, /de/templates/)
   Scoped under .tpl-*. Depends on tokens + .cmock chrome from enterprise.css
   and cart.css. Loaded third: enterprise.css -> cart.css -> templates.css
   ========================================================================== */

/* ---------- grid ---------------------------------------------------------- */
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px 30px;
  margin-top: 46px;
}

/* ---------- card ---------------------------------------------------------- */
.tpl-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* new .ic container must set its own box (no base .ic rule exists) */
.tpl-card .ic {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  flex: none;
}
.tpl-card .ic .lucide { width: 19px; height: 19px; }

/* ---------- browser frame ------------------------------------------------- */
/* .cmock and .cmock-top come from cart.css; .tpl-frame only sizes them */
.tpl-frame { position: relative; width: 100%; min-width: 0; border-radius: 12px; }
/* the frame is focusable so the arrow keys work, so it needs a visible focus ring */
.tpl-frame:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tpl-frame .cmock { border-radius: 12px; }
.tpl-frame .cmock-top { position: relative; z-index: 3; }

.tpl-stage {
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
  aspect-ratio: 16 / 11;
}

/* a horizontal rail of panes: sliding sideways swaps between the home page,
   the catalogue and a product. Each pane clips one full-page screenshot, which
   scrolls vertically on its own while the pointer is over the card, so only the
   screenshot currently on show ever moves */
.tpl-rail {
  display: flex;
  height: 100%;
  transform: translateX(0);
  transition: transform 520ms var(--ease);
  will-change: transform;
}

.tpl-pane {
  flex: 0 0 100%;
  width: 100%; height: 100%;
  overflow: hidden;
}

.tpl-shot {
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(0);
  will-change: transform;
}

/* enlarge affordance sits over the shot */
.tpl-zoom {
  position: absolute; right: 10px; bottom: 10px; z-index: 4;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--border-strong);
  color: var(--navy-700);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tpl-zoom .lucide { width: 16px; height: 16px; }
.tpl-frame:hover .tpl-zoom,
.tpl-zoom:focus-visible { opacity: 1; }
.tpl-zoom:hover { background: #fff; }

/* ---------- carousel controls -------------------------------------------- */
.tpl-arrow {
  position: absolute; top: 50%; z-index: 4;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--navy-700);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tpl-arrow .lucide { width: 17px; height: 17px; }
.tpl-arrow.prev { left: 12px; }
.tpl-arrow.next { right: 12px; }
.tpl-frame:hover .tpl-arrow { opacity: 1; }
.tpl-arrow:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
.tpl-arrow:hover { background: #fff; }

.tpl-dots {
  display: flex; justify-content: center; align-items: center;
  gap: 7px;
  padding: 12px 0 2px;
}
.tpl-dots button {
  width: 7px; height: 7px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tpl-dots button[aria-current="true"] { background: var(--accent); transform: scale(1.35); }
.tpl-dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* one screenshot only: nothing to navigate. The dots row keeps its space so a
   single-shot card still lines up with its multi-shot neighbours */
.tpl-frame[data-single] .tpl-arrow { display: none; }
.tpl-frame[data-single] ~ .tpl-dots { visibility: hidden; }

/* ---------- card meta ----------------------------------------------------- */
.tpl-meta { display: flex; flex-direction: column; gap: 10px; }
.tpl-meta .tpl-vertical {
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 600;
}
.tpl-meta h3 { margin: 0; font-size: var(--fs-h3); }
.tpl-meta p { margin: 0; color: var(--slate-700); }

.tpl-traits { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.tpl-traits span {
  font-size: var(--fs-sm);
  line-height: 1;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--slate-700);
}

/* ---------- lightbox (CSS :target, no JS needed to open) ------------------ */
.tpl-lightbox {
  /* figure carries a UA default margin (1em 40px) which would inset the fixed overlay */
  margin: 0;
  position: fixed; inset: 0; z-index: 200;
  display: none;
  place-items: center;
  padding: 26px;
  background: rgba(16, 39, 63, .82);
}
.tpl-lightbox:target { display: block; overflow-y: auto; overscroll-behavior: contain; }
/* full-page captures are tall, so the overlay scrolls rather than shrinking them
   to fit the viewport height */
.tpl-lightbox img {
  position: relative; z-index: 1;
  display: block;
  width: min(1100px, 100%);
  height: auto;
  margin: 0 auto 44px;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
}
/* backdrop click target: fixed, so it keeps covering the viewport after the
   overlay has been scrolled down a tall capture */
.tpl-lightbox .tpl-lb-close {
  position: fixed; inset: 0; z-index: 0;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  cursor: zoom-out;
}
.tpl-lightbox .tpl-lb-x {
  position: fixed; top: 20px; right: 24px; z-index: 3;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .34);
  color: #fff;
}
.tpl-lightbox .tpl-lb-x .lucide { width: 20px; height: 20px; }
.tpl-lightbox .tpl-lb-x:hover { background: rgba(255, 255, 255, .28); }
.tpl-lightbox .tpl-lb-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tpl-lightbox figcaption {
  position: relative; z-index: 1;
  text-align: center;
  padding-bottom: 26px;
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-sm);
}

/* ---------- two ways to start -------------------------------------------- */
.tpl-paths { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; }
.tpl-path {
  display: flex; flex-direction: column; gap: 14px;
  padding: 30px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
}
.tpl-path h3 { margin: 0; }
.tpl-path p { margin: 0; color: var(--slate-700); }
.tpl-path .feature-list { margin: 4px 0 0; }
.tpl-path .btn { margin-top: auto; align-self: flex-start; }
.tpl-path .ic {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  flex: none;
}
.tpl-path .ic .lucide { width: 19px; height: 19px; }

/* ---------- motion / responsive ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .tpl-rail { transition: none !important; }
  .tpl-shot { transition: none !important; }
  .tpl-arrow, .tpl-zoom { opacity: 1; }
  .tpl-crane * { animation: none !important; }
}

@media (max-width: 900px) {
  .tpl-grid { grid-template-columns: 1fr; gap: 40px; }
  .tpl-paths { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .tpl-stage { aspect-ratio: 4 / 3; }
  .tpl-arrow, .tpl-zoom { opacity: 1; }
  .tpl-path { padding: 24px 20px; }
}

/* ==========================================================================
   Hero graphic: a tower crane assembling a storefront, block by block.
   Pure SVG plus CSS keyframes. Frozen into its finished state when the
   visitor prefers reduced motion (see the media query above).
   ========================================================================== */
.tpl-crane-wrap { position: relative; width: 100%; max-width: 560px; margin-inline: auto; }
.tpl-crane { width: 100%; height: auto; display: block; overflow: visible; }

/* steel */
.tpl-crane .cr-steel { fill: none; stroke: var(--navy-700); stroke-width: 3; stroke-linecap: round; }
.tpl-crane .cr-lattice { fill: none; stroke: var(--navy-700); stroke-width: 1.6; opacity: .5; }
.tpl-crane .cr-solid { fill: var(--navy-700); }
.tpl-crane .cr-cable { stroke: var(--slate-400); stroke-width: 1.4; }

/* the browser being built */
.tpl-crane .cr-win { fill: #fff; stroke: var(--border-strong); stroke-width: 1.6; }
.tpl-crane .cr-bar { fill: var(--bg-alt); }
.tpl-crane .cr-dot { fill: var(--border-strong); }
.tpl-crane .cr-ghost { fill: var(--bg-soft); }

/* blocks the crane sets down */
.tpl-crane .cr-block { transform-box: fill-box; transform-origin: 50% 100%; }
.tpl-crane .cr-b1 { fill: var(--c-teal-bg);   stroke: var(--c-teal-bd);   stroke-width: 1.2; }
.tpl-crane .cr-b2 { fill: var(--c-violet-bg); stroke: var(--c-violet-bd); stroke-width: 1.2; }
.tpl-crane .cr-b3 { fill: var(--c-blue-bg);   stroke: var(--c-blue-bd);   stroke-width: 1.2; }
.tpl-crane .cr-b4 { fill: var(--accent-soft); stroke: #f4ddc6;            stroke-width: 1.2; }

/* the crate riding the hook */
.tpl-crane .cr-crate { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.4; }

/* One 12s cycle delivers four blocks. Each trip runs 18% of the loop: the trolley
   travels out over the slot it is filling, the cable pays out to exactly that depth,
   the crate is released, the block lands, and the empty hook returns. The last 28%
   holds the finished storefront before the loop resets. */
@media (prefers-reduced-motion: no-preference) {
  .tpl-crane .cr-carriage { animation: crTrolley 12s cubic-bezier(.42,0,.58,1) infinite; }
  .tpl-crane .cr-hoist    { animation: crHoist   12s cubic-bezier(.42,0,.58,1) infinite; }
  .tpl-crane .cr-payload  { animation: crDrop    12s cubic-bezier(.42,0,.58,1) infinite; }
  .tpl-crane .cr-crate    { animation: crCrate   12s linear infinite; }
  .tpl-crane .cr-jib      { animation: crFlex    12s ease-in-out infinite; transform-origin: 92px 60px; }
  .tpl-crane .cr-b1 { animation: crLand1 12s cubic-bezier(.2,1.3,.4,1) infinite; opacity: 0; }
  .tpl-crane .cr-b2 { animation: crLand2 12s cubic-bezier(.2,1.3,.4,1) infinite; opacity: 0; }
  .tpl-crane .cr-b3 { animation: crLand3 12s cubic-bezier(.2,1.3,.4,1) infinite; opacity: 0; }
  .tpl-crane .cr-b4 { animation: crLand4 12s cubic-bezier(.2,1.3,.4,1) infinite; opacity: 0; }
}

/* trolley: out to each slot's centre line, then home */
@keyframes crTrolley {
  0%, 2%    { transform: translateX(0); }
  8%, 13%   { transform: translateX(217px); }
  17%, 20%  { transform: translateX(0); }
  26%, 31%  { transform: translateX(135px); }
  35%, 38%  { transform: translateX(0); }
  44%, 49%  { transform: translateX(299px); }
  53%, 56%  { transform: translateX(0); }
  62%, 67%  { transform: translateX(217px); }
  71%, 100% { transform: translateX(0); }
}

/* cable: pays out to exactly the depth the crate is sitting at, never empty */
@keyframes crHoist {
  0%, 4%    { transform: scaleY(0.242); }
  11%, 12%  { transform: scaleY(0.992); }
  17%, 22%  { transform: scaleY(0.242); }
  29%, 30%  { transform: scaleY(1.542); }
  35%, 40%  { transform: scaleY(0.242); }
  47%, 48%  { transform: scaleY(1.542); }
  53%, 58%  { transform: scaleY(0.242); }
  65%, 66%  { transform: scaleY(2.075); }
  71%, 100% { transform: scaleY(0.242); }
}

/* hook and crate descend to the row being built */
@keyframes crDrop {
  0%, 4%    { transform: translateY(-88px); }
  11%, 12%  { transform: translateY(2px); }
  17%, 22%  { transform: translateY(-88px); }
  29%, 30%  { transform: translateY(68px); }
  35%, 40%  { transform: translateY(-88px); }
  47%, 48%  { transform: translateY(68px); }
  53%, 58%  { transform: translateY(-88px); }
  65%, 66%  { transform: translateY(132px); }
  71%, 100% { transform: translateY(-88px); }
}

/* the crate is let go at the bottom of each trip and picked up again at the top */
@keyframes crCrate {
  0%, 11%   { opacity: 1; }
  12%, 15%  { opacity: 0; }
  17%, 29%  { opacity: 1; }
  30%, 33%  { opacity: 0; }
  35%, 47%  { opacity: 1; }
  48%, 51%  { opacity: 0; }
  53%, 65%  { opacity: 1; }
  66%, 69%  { opacity: 0; }
  71%, 100% { opacity: 1; }
}

/* each block lands as its crate is released, then holds until the cycle resets */
@keyframes crLand1 {
  0%, 11%   { opacity: 0; transform: translateY(-7px) scaleY(.7); }
  14%       { opacity: 1; transform: translateY(0) scaleY(1); }
  96%       { opacity: 1; transform: translateY(0) scaleY(1); }
  100%      { opacity: 0; transform: translateY(0) scaleY(1); }
}
@keyframes crLand2 {
  0%, 29%   { opacity: 0; transform: translateY(-7px) scaleY(.7); }
  32%       { opacity: 1; transform: translateY(0) scaleY(1); }
  96%       { opacity: 1; transform: translateY(0) scaleY(1); }
  100%      { opacity: 0; transform: translateY(0) scaleY(1); }
}
@keyframes crLand3 {
  0%, 47%   { opacity: 0; transform: translateY(-7px) scaleY(.7); }
  50%       { opacity: 1; transform: translateY(0) scaleY(1); }
  96%       { opacity: 1; transform: translateY(0) scaleY(1); }
  100%      { opacity: 0; transform: translateY(0) scaleY(1); }
}
@keyframes crLand4 {
  0%, 65%   { opacity: 0; transform: translateY(-7px) scaleY(.7); }
  68%       { opacity: 1; transform: translateY(0) scaleY(1); }
  96%       { opacity: 1; transform: translateY(0) scaleY(1); }
  100%      { opacity: 0; transform: translateY(0) scaleY(1); }
}

@keyframes crFlex {
  0%, 100%  { transform: rotate(0deg); }
  10%, 28%  { transform: rotate(.55deg); }
  46%, 64%  { transform: rotate(.55deg); }
  20%, 38%  { transform: rotate(0deg); }
  75%       { transform: rotate(0deg); }
}

@media (max-width: 640px) {
  .tpl-crane-wrap { max-width: 420px; }
}