/* =========================================================
   Pano360 — Embed + Grid + Cards (Kuula-style)
   File: assets/css/pano360-embed.css
   ======================================================= */

/* ---------- EMBED (iframe wrapper) ---------- */
.p360-embed {
  background:#000;
  border-radius:10px;
  overflow:hidden;
}
.p360-embed iframe {
  display:block;
  width:100%;
  height:100%;
  border:0;
}

/* --- Kuula-like thumbs (no letterboxing) --- */
.p360-grid { display:grid; gap:24px; }
.p360-grid.cols-2 { grid-template-columns: repeat(2,1fr); }
.p360-grid.cols-3 { grid-template-columns: repeat(3,1fr); }
.p360-grid.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width:1024px){ .p360-grid.cols-4{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:768px){ .p360-grid.cols-3,.p360-grid.cols-4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .p360-grid{ grid-template-columns:1fr; gap:16px; } }

.p360-card{
  display:block; text-decoration:none; color:inherit;
  border-radius:12px; overflow:hidden; background:transparent;
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
  transition:transform .18s ease, box-shadow .18s ease;
}
.p360-card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.08); }

/* Aspect ratio via CSS (no padding hack) */
.p360-thumb{
  position:relative;
  width:100%;
  aspect-ratio:16/9;            /* default; overridden by ratio class below */
  border-radius:12px;
  overflow:hidden;
  background:#111;              /* safe bg before image loads */
}

/* Switch ratios from shortcode */
.p360-grid.ratio-1x1  .p360-thumb{ aspect-ratio:1/1; }
.p360-grid.ratio-16x9 .p360-thumb{ aspect-ratio:16/9; }

/* Actual image fills & centers */
.p360-thumb img{
  position:absolute; inset:0;
  width:100%; height:100% !important;
  object-fit:cover; object-position:center; display:block;
  transition:transform .25s ease;
}
.p360-card:hover .p360-thumb img{ transform:scale(1.03); }

/* Badge + caption (as you had) */
.p360-badge{
  position:absolute; top:8px; right:8px;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; font:700 12px/1 system-ui, sans-serif;
  color:#fff; background:rgba(0,0,0,.72); border-radius:999px;
  backdrop-filter:blur(2px);
}
.p360-badge--image{ background:rgba(34,197,94,.85); }
.p360-badge--video{ background:rgba(29,78,216,.9); }

.p360-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 12px; font-weight:600; font-size:14px; color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));
}

/* ---------- OPTIONAL META (if you use a text block under the image) ---------- */
.p360-meta { padding:12px 12px 14px; }
.p360-title { margin:0 0 6px; font-size:15px; line-height:1.3; }
.p360-date  { font-size:12px; color:#6b7280; }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .p360-card, .p360-thumb img { transition:none; }
  .p360-card:hover { transform:none; }
}

/* Flat video badge (play icon) */
.p360-badge--flatvideo {
  background: #7c3aed; /* purple – pick any brand color you prefer */
  color: #fff;
}

/* --- Stack title (row 1) and meta (row 2) in the caption overlay --- */
.p360-caption{
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 4px;
  padding: 12px;
  /* you already have the gradient + positioning in this rule */
}

.p360-caption__title{
  grid-column: 1 / -1;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}

/* views + date on their own line, compact + tidy */
.p360-meta-mini{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  opacity: .95;
  white-space: nowrap;          /* keep each chip together */
}

.p360-meta-mini > span{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.p360-meta-mini svg{ opacity:.85; }

@media (max-width: 420px){
  .p360-meta-mini{ font-size:11px; gap:10px; }
}
@media (max-width: 360px){
  .p360-meta-mini{ display:none; }
}

/* Search bar */
.p360-searchbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin:0 0 14px; padding:10px;
  background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px;
}
.p360-searchbar input[type="search"]{
  flex:1 1 280px; padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px;
}
.p360-searchbar select{ padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px; }
.p360-searchbar button{
  padding:10px 14px; border:0; border-radius:8px; font-weight:600;
  background:#111827; color:#fff; cursor:pointer;
}

/* Pager */
.p360-pager{
  display:flex; justify-content:space-between; align-items:center;
  margin:14px 0 4px;
}
.p360-pager__links a{
  display:inline-block; padding:8px 12px; border:1px solid #e5e7eb; border-radius:8px; text-decoration:none;
  color:#111827; margin-left:8px; background:#fff;
}

.p360-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 18px}
.p360-chip{padding:8px 12px;border:1px solid #e5e7eb;border-radius:9999px;background:#fff}
.p360-chip--active{background:#111827;color:#fff;border-color:#111827}

/* ---------------------------------------
   Pano360: shared pill nav (service + topic)
---------------------------------------- */
.p360-tax-filters{
  display:flex;
  flex-wrap:wrap;
  /* nicer breathing room than default */
  gap: .75rem 1rem;                  /* row gap, column gap */
  margin: 0 0 1.25rem;
}

.p360-pill{
  display:inline-flex;
  align-items:center;
  padding:.60rem 1rem;               /* more padding = less crowded */
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#0f172a;                     /* same ink tone site-wide */
  font-weight:600;
  line-height:1;
  text-decoration:none;
  box-shadow:0 1px 0 rgba(17,24,39,.04);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

.p360-pill:hover{
  border-color:#cbd5e1;
  box-shadow:0 1px 0 rgba(17,24,39,.08);
}

.p360-pill.is-current{
  background:#0f172a;                /* exact match to media-type */
  border-color:#0f172a;
  color:#fff;
}

.p360-pill.is-current:hover{
  color:#fff;
}

/* tighten slightly on small screens */
@media (max-width: 680px){
  .p360-tax-filters{ gap:.5rem .65rem; }
  .p360-pill{ padding:.5rem .85rem; font-size:.95rem; }
}

/* --- Pano360: unify active state + spacing + a11y --- */

/* Some templates used .is-active, others .is-current; also support aria-current */
.p360-pill.is-current,
.p360-pill.is-active,
.p360-pill[aria-current="page"]{
  background:#0f172a;
  border-color:#0f172a;
  color:#fff;
}

/* Prevent label wrap inside a pill and give them a touch more air */
.p360-pill{ white-space:nowrap; }
.p360-tax-filters{ gap:.85rem 1.1rem; } /* row gap, column gap */

/* Keyboard focus ring (nice + accessible) */
.p360-pill:focus-visible{
  outline:2px solid #0f172a;
  outline-offset:2px;
}