/* Northern Performance visit band (hours + location), ported from the theme's
   np-services.css: the np-visit rules and the stepped container it needs.
   Palette tokens come from np-site.css :root; no new token roots here. */
/* ---------- stepped container ---------- */
/* Mirrors the np-home.css container steps so the band lines up with the header. */
.np-container {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 990px) {
  .np-container {
    max-width: 768px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 1000px) {
  .np-container {
    max-width: 1000px;
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (min-width: 1300px) {
  .np-container {
    max-width: 1300px;
  }
}


/* ================= np-visit: hours + location band ================= */
.np-visit {
  background: var(--np-surface);
  border-top: 1px solid var(--np-border);
  margin-top: 56px;
}

.np-visit__shot-wrap {
  padding-top: 36px;
}

.np-visit__shot {
  height: 170px;
  border-radius: 6px;
  overflow: hidden;
}

/* top-aligned: the interesting content (shelving, the NP logo on the back wall)
   sits in the upper part of the shop photos */
.np-visit__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  display: block;
}

/* crop-right: for ultra-wide panoramas (np-shop-wide-2 has a stitch seam dead
   centre) whose right-hand section is the shot; renders the image at double
   width so cover crops to that section instead of showing the seam.
   The band takes the right half's own aspect ratio (953x372 for np-shop-wide-2)
   so the full half shows - a fixed height was chopping off its bottom.
   Doubled class beats the 140px mobile height override on specificity. */
.np-visit__shot.np-visit__shot--crop-right {
  height: auto;
  aspect-ratio: 953 / 372;
}

.np-visit__shot--crop-right img {
  width: 200%;
  max-width: none;
  margin-left: -100%;
  object-position: 100% 0%;
}

.np-visit__cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 48px;
  padding-top: 30px;
  padding-bottom: 40px;
}

.np-visit h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  color: var(--np-charcoal);
}

.np-visit p,
.np-visit li {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--np-ink-soft);
}

.np-visit p {
  margin: 0;
}

.np-visit p + p {
  margin-top: 10px;
}

.np-visit ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.np-visit__hrs li {
  display: flex;
  justify-content: space-between;
  max-width: 300px;
}

.np-visit__hrs .d {
  font-weight: 600;
  color: var(--np-charcoal);
}

.np-visit a {
  color: var(--np-navy);
  font-weight: 600;
  text-decoration: none;
}

.np-visit a:hover {
  text-decoration: underline;
}

/* ---------- steps ---------- */
@media (max-width: 1299.98px) {
  .np-visit__cols {
    gap: 32px;
  }
}

@media (max-width: 999.98px) {
  .np-visit__cols {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .np-visit__shot {
    height: 140px;
  }
}