/* Callout boxes (tip / hack / must-have / warning) + prose whitespace rules.
   Shared across blog, hub, pSEO, roomstyle body content. Colors are
   hardcoded (not var(--brand)) because each layout defines its own :root
   inline and load order isn't guaranteed relative to this shared file. */

.callout{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px 22px;
  margin:28px 0;
  border-radius:0 12px 12px 0;
  border-left:4px solid;
}
.callout__icon{font-size:1.4rem;line-height:1;flex-shrink:0}
.callout__label{
  display:block;
  font-size:.75rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:4px;
}
.callout__body{line-height:1.65}
.callout__body p{margin:0 0 8px;line-height:1.65}
.callout__body p:last-child{margin-bottom:0}
.callout__body ul,.callout__body ol{margin:8px 0 0;padding-left:20px}
.callout__body li{margin-bottom:6px;line-height:1.6}

.callout--tip{background:rgba(126,8,130,0.07);border-color:#7e0882}
.callout--tip .callout__label{color:#5a0660}

.callout--hack{background:#fff8e1;border-color:#f9a825}
.callout--hack .callout__label{color:#e65100}

.callout--musthave{background:#fce4ec;border-color:#c2185b}
.callout--musthave .callout__label{color:#ad1457}

.callout--warning{background:#ffebee;border-color:#e53935}
.callout--warning .callout__label{color:#c62828}

/* Prose whitespace — sentence-per-paragraph authoring convention gets real
   breathing room instead of reading as a dense block. */
.content-body p,
.hub-intro p,
.pseo-section p,
.content-row__text p,
.roomstyle-body p{
  margin:0 0 20px;
  line-height:1.75;
}
.content-body ul,
.content-body ol,
.hub-intro ul,
.hub-intro ol,
.pseo-section ul,
.pseo-section ol,
.content-row__text ul,
.content-row__text ol,
.roomstyle-body ul,
.roomstyle-body ol{
  margin:0 0 24px;
  padding-left:22px;
}
.content-body li,
.hub-intro li,
.pseo-section li,
.content-row__text li,
.roomstyle-body li{
  margin-bottom:8px;
  line-height:1.65;
}