/* Discovery cards and Home rows — the web twin of the app's compact Home
   card (home_screen.dart _buildCompactProviderCard), ProviderShowcaseCard and
   ProviderRatingBlock. Markup comes from js/discovery.js only. Mono; the
   accent appears once, on "Open now", as in the app (CQ.accentFor). */

/* ---------- Home rows ---------- */
.cq-home-section { padding: 12px 0 0; }
.cq-home-section[hidden] { display: none; }
#home-nearby { padding-bottom: 16px; }
.cq-home-head {
  display: flex; justify-content: space-between; align-items: center;
  margin: 12px 0 12px;
}
.cq-home-head h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.2px; margin: 0; color: #111111; }
.cq-home-head a { padding: 12px 0 12px 16px; min-width: 0; font-size: 14px; font-weight: 500; color: #111111; text-decoration: none; }
.cq-home-note { font-size: 13px; line-height: 1.4; color: #555555; margin: -6px 0 12px; }

.cq-row {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* Reserve the row's height before the cards arrive, so the page below does
     not jump when they paint (app: _compactCardRowHeight = 224). */
  min-height: 190px;
}
.cq-row::-webkit-scrollbar { display: none; }
.cq-row > * { scroll-snap-align: start; }

/* Placeholder cards while the one query is in flight — the app's
   ProviderCardSkeleton: same footprint as a card, no text. */
.cq-skel {
  flex: 0 0 220px; height: 186px; border-radius: 12px; border: 1px solid #E5E5E5;
  background: linear-gradient(#F5F5F5 0 124px, #FFFFFF 124px);
}
.cq-empty { font-size: 14px; color: #555555; padding: 24px 0; }

.cq-nearby-list { display: flex; flex-direction: column; gap: 22px; }
/* Wider than a phone, Nearby takes Discover's grid instead of a full-width
   poster per salon (the app flattens its image past 700 pt for the same
   reason). */
@media (min-width: 700px) {
  .cq-nearby-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .cq-nearby-list .cq-showcase-media { aspect-ratio: 16 / 9; }
}
@media (min-width: 1100px) { .cq-nearby-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Compact card (Recommended, New to CutQ) ---------- */
/* a./button. prefixes: mobile-fixes.css gives every a and button 8px 16px
   padding and a 44px minimum at (0,1,1); these cards and the heart set
   their own geometry. */
a.cq-compact-card {
  padding: 0; min-height: 0; min-width: 0;
  flex: 0 0 220px; width: 220px; align-self: flex-start;
  display: block; text-decoration: none; color: inherit;
  background: #FFFFFF; border: 1px solid #E5E5E5; border-radius: 12px; overflow: hidden;
}
.cq-compact-media {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 124px; background: #FFFFFF; color: #555555;
}
.cq-compact-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cq-compact-body { display: block; padding: 12px; }
.cq-compact-name {
  display: block; font-size: 15px; font-weight: 600; color: #111111;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cq-compact-area {
  display: block; margin-top: 3px; font-size: 12px; color: #555555;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1em;
}

/* ---------- Rating on the photo (ProviderRatingBlock) ---------- */
.cq-rating-block {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  display: flex; flex-direction: column; padding: 6px 10px; border-radius: 12px;
  background: rgba(17, 17, 17, 0.88); color: #FFFFFF;
}
.cq-rating-block strong { font-size: 16px; font-weight: 700; line-height: 1.1; letter-spacing: -0.3px; }
.cq-rating-block span { font-size: 11px; line-height: 1.3; color: rgba(255, 255, 255, 0.85); }

/* ---------- Showcase card (Nearby, Discover results, Saved) ---------- */
a.cq-showcase { padding: 0; min-height: 0; min-width: 0; display: block; text-decoration: none; color: inherit; min-width: 0; }
.cq-showcase-media {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden;
  background: #F5F5F5; color: #555555;
}
@media (min-width: 700px) { .cq-showcase-media { aspect-ratio: 2.6 / 1; } }
.cq-showcase-grid .cq-showcase-media { aspect-ratio: 16 / 9; }
.cq-showcase-track {
  position: absolute; inset: 0; display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.cq-showcase-track::-webkit-scrollbar { display: none; }
.cq-showcase-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.cq-dots {
  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2;
  display: flex; justify-content: center; gap: 5px; pointer-events: none;
}
.cq-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
.cq-dots i.on { background: #FFFFFF; }

button.cq-heart {
  min-height: 32px; min-width: 32px;
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
}
.cq-heart path { fill: none; stroke: #111111; stroke-width: 2; }
.cq-heart.active path { fill: #3441B5; stroke: #3441B5; }
.cq-heart:focus-visible { outline: 2px solid #111111; outline-offset: 2px; }

.cq-showcase-name {
  display: flex; align-items: center; gap: 4px; margin-top: 10px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.2px; color: #111111;
}
.cq-showcase-where {
  display: block; margin-top: 3px; font-size: 13px; color: #555555;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cq-showcase-line { display: block; margin-top: 3px; font-size: 13px; }
.cq-avail { font-weight: 600; color: #111111; }
.cq-avail.is-open { color: #3441B5; }
.cq-sep, .cq-from { color: #555555; }

.cq-card-fallback { color: #555555; }

/* Discover: one column on a phone, the app's list; more where there is room. */
.cq-showcase-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 700px) { .cq-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } }
@media (min-width: 1100px) { .cq-showcase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Loading placeholder with a showcase card's footprint (ShowcaseCardSkeleton). */
.cq-showcase-skel { display: block; }
.cq-showcase-skel::before {
  content: ''; display: block; aspect-ratio: 16 / 9; border-radius: 16px; background: #F5F5F5;
}
.cq-showcase-skel::after {
  content: ''; display: block; height: 52px; margin-top: 10px;
  background: linear-gradient(#F5F5F5 0 18px, transparent 18px 26px, #F5F5F5 26px 40px, transparent 40px) left / 60% 100% no-repeat;
}