/* Brand 513 Collective — demo bar + shared placeholder system
   Shared across every mockup template. */

:root{
  --b513-red:#ED1C24;
  --b513-charcoal:#2B2F33;
}

/* ---------- Demo bar ---------- */
.b513-bar{
  position:relative;
  z-index:1000;
  background:var(--b513-charcoal);
  color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  font-size:13px;
  line-height:1.3;
  letter-spacing:.01em;
}
.b513-bar__in{
  max-width:1240px;
  margin:0 auto;
  padding:9px 24px;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.b513-bar__tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:11px;
  color:#fff;
}
.b513-bar__dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--b513-red);
  box-shadow:0 0 0 3px rgba(237,28,36,.25);
  flex:0 0 auto;
}
.b513-bar__text{color:rgba(255,255,255,.72);}
.b513-bar__text strong{color:#fff;font-weight:600;}
.b513-bar__spacer{flex:1 1 auto;}
.b513-bar a{color:#fff;text-decoration:none;}
.b513-bar__phone{
  font-weight:600;
  color:rgba(255,255,255,.85);
  white-space:nowrap;
}
.b513-bar__phone:hover{color:#fff;}
.b513-bar__cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--b513-red);
  color:#fff;
  font-weight:700;
  font-size:12px;
  padding:7px 14px;
  border-radius:999px;
  white-space:nowrap;
  transition:filter .15s ease, transform .15s ease;
}
.b513-bar__cta:hover{filter:brightness(1.1);transform:translateY(-1px);}
@media (max-width:760px){
  .b513-bar__in{padding:8px 16px;gap:10px;}
  .b513-bar__text{display:none;}
}

/* ---------- Placeholder image system ---------- */
/* .ph = a photo slot. Add .ph--wide / .ph--tall / .ph--square for ratio. */
.ph{
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  background-color:var(--ph-bg,#e9ebee);
  color:var(--ph-ink,#6b7280);
  isolation:isolate;
}
.ph::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(135deg,var(--ph-tint,rgba(0,0,0,.05)) 0%,transparent 55%),
    radial-gradient(circle at 1px 1px,var(--ph-dot,rgba(0,0,0,.09)) 1px,transparent 1.6px);
  background-size:100% 100%,15px 15px;
  z-index:-1;
}
.ph__label{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  padding:8px 13px;
  border-radius:999px;
  background:var(--ph-chip,rgba(255,255,255,.82));
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  text-align:center;
  max-width:88%;
}
.ph__label::before{
  content:"";
  width:14px;height:14px;
  flex:0 0 auto;
  background-color:currentColor;
  -webkit-mask:var(--ph-icon) center/contain no-repeat;
  mask:var(--ph-icon) center/contain no-repeat;
  --ph-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.8'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
}
.ph--video .ph__label::before{
  --ph-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.5v7l6-3.5z'/%3E%3C/svg%3E");
}
.ph--logo .ph__label::before{
  --ph-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6.1.8-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6L3.3 9.4l6.1-.8z'/%3E%3C/svg%3E");
}
.ph--map .ph__label::before{
  --ph-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.1 7-11a7 7 0 1 0-14 0c0 4.9 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}
.ph--wide{aspect-ratio:16/9;}
.ph--square{aspect-ratio:1/1;}
.ph--tall{aspect-ratio:4/5;}
.ph--map{aspect-ratio:16/7;}

/* Editable-text hint: marks copy the client swaps out */
.swap{
  border-bottom:1px dashed currentColor;
  opacity:.99;
}