/* Dy Filxhanë - Paneli. One bento of live widgets; a crema spotlight follows the pointer. */

:root {
  --roast: #120E0B;   /* page: roasted bean, warm rather than neutral black */
  --tile: #1C1612;    /* tile surface */
  --edge: #30261F;    /* hairline border */
  --foam: #F4EDE4;    /* text */
  --steam: #A99A8C;   /* quiet text */
  --crema: #E8B366;   /* accent: the one warm light on the panel */

  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --r: 22px;
  --gap: 12px;
  --gutter: clamp(16px, 3vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--roast); color: var(--foam);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  font-feature-settings: 'ss01'; -webkit-font-smoothing: antialiased;
}
body::before {
  /* a faint warm light from above the panel */
  content: ''; position: fixed; inset: -20% -10% auto; height: 70vh; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 0%, rgba(232, 179, 102, .10), transparent 70%);
}
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--crema); outline-offset: 3px; border-radius: 8px; }

.label {
  margin: 0; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .06em;
  text-transform: uppercase; color: var(--steam);
}

/* ---------- nav ---------- */
.nav {
  max-width: 1320px; margin: 0 auto; padding: 22px var(--gutter) 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.nav-mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: -.01em; text-decoration: none; }
.nav-dot { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--crema) 0 calc(var(--p, .62) * 100%), var(--edge) 0 100%); box-shadow: 0 0 0 3px var(--tile); }
.nav-links { display: flex; gap: 4px; }
.nav-links a { padding: 7px 12px; border-radius: 999px; font-size: 14px; color: var(--steam); text-decoration: none; transition: color .2s, background-color .2s; }
.nav-links a:hover { color: var(--foam); background: var(--tile); }
.lang { display: flex; padding: 3px; border-radius: 999px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--edge); }
.lang button { font: 500 12px/1 var(--mono); color: var(--steam); background: none; border: 0; border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--foam); color: var(--roast); }

/* ---------- bento ---------- */
.bento {
  max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(196px, auto) minmax(196px, auto) 200px 200px auto;
  grid-template-areas:
    "name name name name name name name status status status status status"
    "name name name name name name name clock clock rating rating rating"
    "photo photo photo photo photo hours hours hours map map map map"
    "photo photo photo photo photo hours hours hours map map map map"
    "amen amen amen amen amen amen call call wa wa dir dir";
}
.t-name { grid-area: name; } .t-status { grid-area: status; } .t-clock { grid-area: clock; }
.t-rating { grid-area: rating; } .t-photo { grid-area: photo; } .t-hours { grid-area: hours; }
.t-map { grid-area: map; } .t-amen { grid-area: amen; } .t-call { grid-area: call; }
.t-wa { grid-area: wa; } .t-dir { grid-area: dir; }

.tile {
  position: relative; isolation: isolate; min-width: 0; margin: 0;
  background: var(--tile); border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--edge);
  padding: 24px;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
/* the spotlight: a border ring and a faint surface wash, both centred on the pointer */
.tile::before, .tile::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: var(--glow, 0); transition: opacity .4s;
}
.tile::before {
  z-index: 3; padding: 1px;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(232, 179, 102, .95), rgba(232, 179, 102, .2) 45%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.tile::after {
  z-index: 2;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(232, 179, 102, .085), transparent 48%);
}
.tile > * { position: relative; z-index: 1; }

/* name */
.t-name { display: flex; flex-direction: column; padding: 32px; }
.name {
  margin: auto 0 18px; font-weight: 600; font-size: clamp(52px, 7.4vw, 112px); line-height: .92; letter-spacing: -.05em;
  text-wrap: balance;
}
.tagline { margin: 0 0 14px; max-width: 34ch; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.35; letter-spacing: -.01em; text-wrap: pretty; }
.about { margin: 0; max-width: 52ch; color: var(--steam); font-size: 15px; text-wrap: pretty; }
.t-name .label { margin-bottom: 40px; }

/* status */
.t-status { display: flex; flex-direction: column; }
.status-big { display: flex; align-items: center; gap: 14px; margin: auto 0 6px; font-weight: 600; font-size: clamp(40px, 3.6vw, 56px); line-height: 1; letter-spacing: -.035em; }
.status-dot { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--crema); flex: none; }
.is-open .status-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--crema); animation: ping 2s cubic-bezier(0, 0, .2, 1) infinite; }
.is-closed .status-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--steam); }
@keyframes ping { 75%, 100% { scale: 2.6; opacity: 0; } }
.status-line { margin: 0 0 22px; color: var(--steam); font-size: 16px; font-variant-numeric: tabular-nums; }
.status-line b { color: var(--foam); font-weight: 500; }
.span-bar { position: relative; height: 6px; border-radius: 99px; background: var(--edge); }
.span-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, rgba(232, 179, 102, .35), var(--crema)); }
.span-now { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%; background: var(--foam); box-shadow: 0 0 0 4px var(--tile), 0 0 18px rgba(232, 179, 102, .8); }
html:not(.js) .span { display: none; }
.is-closed .span-fill { background: var(--edge); }
.is-closed .span-now { background: var(--steam); box-shadow: 0 0 0 4px var(--tile); }
.span-ends { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--steam); }

/* clock */
.t-clock { display: flex; flex-direction: column; }
.clock { margin: auto 0 4px; font-weight: 300; font-size: clamp(38px, 3.4vw, 52px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock-s { color: var(--steam); font-size: .5em; letter-spacing: -.02em; margin-left: 2px; }
.clock-day { margin: 0; color: var(--steam); font-size: 14px; }

/* rating */
.t-rating { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 24px; }
.t-rating .label { grid-column: 1 / -1; }
.rating { grid-column: 1; align-self: end; margin: 0; display: flex; flex-direction: column; }
.rating b { font-weight: 600; font-size: clamp(48px, 4.2vw, 64px); line-height: 1; letter-spacing: -.04em; }
.stars { color: var(--crema); font-size: 13px; letter-spacing: 2px; margin-top: 6px; }
.rating-count { grid-column: 1; margin: 4px 0 0; color: var(--steam); font-size: 14px; }
.hist { grid-column: 2; grid-row: 2 / 4; align-self: end; list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hist li { display: grid; grid-template-columns: 10px 1fr 30px; gap: 10px; align-items: center; font-family: var(--mono); font-size: 11.5px; color: var(--steam); }
.hist i { height: 5px; border-radius: 99px; background: var(--edge); overflow: hidden; }
.hist i::before { content: ''; display: block; height: 100%; width: calc(var(--n) * 100%); min-width: 3px; background: var(--foam); border-radius: inherit; transform-origin: left; transition: transform 1s cubic-bezier(.2, .8, .2, 1) .6s; }
.js body:not(.is-ready) .hist i::before { transform: scaleX(0); }
.hist b { font-weight: 400; text-align: right; }

/* photo */
.t-photo { padding: 0; overflow: hidden; }
.t-photo img, .shot img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.credit {
  position: absolute; z-index: 4; left: 12px; bottom: 12px; max-width: calc(100% - 24px);
  padding: 5px 10px; border-radius: 10px; background: rgba(18, 14, 11, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--mono); font-size: 11px; color: var(--foam);
}

/* hours */
.t-hours { display: flex; flex-direction: column; }
.week { width: 100%; flex: 1; margin-top: 18px; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.week th, .week td { padding: 6.5px 0; font-weight: 400; }
.week th { text-align: left; color: var(--steam); }
.week td { text-align: right; font-family: var(--mono); font-size: 13px; color: var(--steam); }
.week tr.is-today th, .week tr.is-today td { color: var(--foam); }
.week tr.is-today th span { font-weight: 600; }
.week tr.is-today th span::after {
  content: attr(data-today); margin-left: 8px; padding: 2px 7px; border-radius: 99px; vertical-align: 1px;
  background: var(--crema); color: var(--roast); font-family: var(--mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
}

/* map */
.t-map { padding: 0; overflow: hidden; }
.map { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: invert(.92) hue-rotate(180deg) saturate(.35) brightness(.9) contrast(.95) sepia(.2); }
.map-card {
  position: absolute; left: 14px; top: 14px; padding: 14px 16px; border-radius: 14px;
  background: rgba(28, 22, 18, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.map-card address { margin-top: 4px; font-style: normal; font-weight: 500; font-size: 16px; line-height: 1.35; }

/* amenities */
.amen { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.amen li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--edge); font-size: 14px; }
.amen svg, .t-act svg { width: 18px; height: 18px; fill: none; stroke: var(--crema); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* actions */
.t-act { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; text-decoration: none; padding: 20px 22px; }
.t-act svg { width: 24px; height: 24px; }
.act-k { margin-top: auto; font-weight: 600; font-size: 19px; letter-spacing: -.02em; }
.act-v { margin-top: -14px; color: var(--steam); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.t-call { background: var(--crema); color: var(--roast); box-shadow: none; }
.t-call svg { stroke: var(--roast); }
.t-call .act-v { color: #4A3520; }
.t-act:hover .act-k { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- strip ---------- */
.strip { max-width: 1320px; margin: 0 auto; padding: 72px var(--gutter) 0; }
.strip-h { margin-bottom: 16px; }
.strip-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.shot { padding: 0; overflow: hidden; aspect-ratio: 4 / 3; }

/* ---------- footer ---------- */
.foot { max-width: 1320px; margin: 0 auto; padding: 72px var(--gutter) 56px; color: var(--steam); font-size: 13.5px; }
.foot p { margin: 0 0 6px; }
.foot-mark { color: var(--foam); font-weight: 600; font-size: 15px; margin-bottom: 14px !important; letter-spacing: -.01em; }

.dock { display: none; }

/* ---------- load: the panel assembles ---------- */
.js .tile { opacity: 0; translate: 0 22px; }
.js .is-ready .tile {
  opacity: 1; translate: 0 0;
  transition: opacity .6s ease calc(var(--i, 0) * 55ms), translate .8s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 55ms), transform .5s cubic-bezier(.2, .8, .2, 1);
}
.js .is-ready .strip .tile { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .tile { opacity: 1; translate: none; }
  .js body:not(.is-ready) .hist i::before { transform: none; }
  .tile { transform: none; }
}

/* ---------- 1180 and down: six columns ---------- */
@media (max-width: 1180px) {
  .bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto auto auto 200px 200px auto auto;
    grid-template-areas:
      "name name name status status status"
      "name name name clock clock clock"
      "rating rating rating hours hours hours"
      "photo photo photo hours hours hours"
      "photo photo photo map map map"
      "amen amen amen map map map"
      "call call wa wa dir dir";
  }
  .t-status, .t-clock, .t-rating { min-height: 190px; }
}

/* ---------- 760 and down: phone ---------- */
@media (max-width: 760px) {
  body { padding-bottom: 84px; }
  .nav-links { display: none; }
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none; grid-auto-rows: auto;
    grid-template-areas:
      "name name"
      "status status"
      "clock rating"
      "photo photo"
      "hours hours"
      "map map"
      "amen amen"
      "call wa"
      "dir dir";
  }
  .tile { padding: 20px; }
  .t-photo, .t-map, .shot { padding: 0; }
  .t-name { padding: 24px 22px 26px; }
  .t-name .label { margin-bottom: 64px; }
  .t-status { min-height: 0; }
  .status-big { margin-top: 28px; }
  .t-clock, .t-rating { min-height: 150px; }
  .clock { font-size: 34px; }
  .rating b { font-size: 40px; }
  .t-rating { grid-template-columns: minmax(0, 1fr); }
  .hist { display: none; }
  .t-photo { aspect-ratio: 4 / 3; }
  .t-map { height: 300px; }
  .t-act { min-height: 128px; }
  .strip-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .strip-row::-webkit-scrollbar { display: none; }
  .shot { flex: 0 0 82%; scroll-snap-align: center; }
  .dock {
    position: fixed; z-index: 20; left: 12px; right: 12px; bottom: 12px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 5px; border-radius: 999px;
    background: rgba(28, 22, 18, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px var(--edge), 0 16px 40px rgba(0, 0, 0, .5);
    translate: 0 calc(100% + 24px); transition: translate .4s cubic-bezier(.2, .8, .2, 1);
  }
  .dock.is-shown { translate: 0 0; }
  .dock a { min-height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; }
  .dock a:first-child { background: var(--crema); color: var(--roast); }
}