/* ═══════════════════════════════════════════════════════════════
   CG Restaurant Aside · Reusable Metaphor Component
   ─────────────────────────────────────────────────────────────
   Use this anywhere the Context Grammar story leans on the
   "restaurant" metaphor. The icon is a single SVG (restaurant.svg)
   placed inside a circular badge so the metaphor is visually
   consistent across all concept pages and case studies.

   USAGE:

     <link rel="stylesheet" href="[rel]/assets/css/cg-restaurant-aside.css">

     <aside class="cg-restaurant-aside">
       <div class="cg-restaurant-aside__icon" aria-hidden="true">
         <img src="[rel]/assets/img/cg-icons/restaurant.svg" alt="">
       </div>
       <div class="cg-restaurant-aside__content">
         <p class="cg-restaurant-aside__label">In restaurant terms</p>
         <div class="cg-restaurant-aside__body">
           <p>...metaphor body...</p>
         </div>
       </div>
     </aside>

   LOCALISATION:
     EN: <p class="cg-restaurant-aside__label">In restaurant terms</p>
     JP: <p class="cg-restaurant-aside__label">レストランに例えると</p>

   The label is rendered as a small uppercase eyebrow above the body.
   Variants: add `.cg-restaurant-aside--inline` to render compact
   single-line on narrow widths.

   NOTE (2026-05): The previous CSS-mask approach (`::after` with
   `mask-image`) silently fails under `file:///` protocol due to
   browser security restrictions. This version shows the <img>
   directly — zero external dependencies, works everywhere.
   ═══════════════════════════════════════════════════════════════ */

.cg-restaurant-aside {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 28px 26px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 14px;
  background: var(--bg-2, rgba(0,0,0,0.025));
  margin: 32px 0;
}

.cg-restaurant-aside__icon {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Show the <img> directly — NO mask, NO pseudo-element.
   This is the bulletproof approach that works on file://,
   http://, https://, and every browser. */
.cg-restaurant-aside__icon img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: contain;
  pointer-events: none;
}

/* If someone inlines an <svg> instead of <img>, style it too */
.cg-restaurant-aside__icon svg {
  display: block;
  width: 88px;
  height: 88px;
}

/* Dark-section variant */
.sec-dark .cg-restaurant-aside,
.section--dark .cg-restaurant-aside,
[data-theme="dark"] .cg-restaurant-aside {
  border-color: rgba(240,236,228,0.16);
  background: rgba(240,236,228,0.04);
}
.sec-dark .cg-restaurant-aside__icon,
.section--dark .cg-restaurant-aside__icon,
[data-theme="dark"] .cg-restaurant-aside__icon {
  /* no override needed — icon SVG handles its own appearance */
}
.cg-restaurant-aside__content {
  flex: 1 1 auto;
  min-width: 0;
}

.cg-restaurant-aside__label {
  display: inline-block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
  background: #111;
  padding: 3px 10px 3px;
  border-radius: 999px;
  margin: 4px 0 12px 0;
  line-height: 1.6;
}

.cg-restaurant-aside__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text, #0a0a0a);
}

.cg-restaurant-aside__body p {
  margin: 0 0 12px 0;
}

.cg-restaurant-aside__body p:last-child {
  margin-bottom: 0;
}

.cg-restaurant-aside__body strong {
  font-weight: 600;
}

.cg-restaurant-aside__body em {
  font-style: italic;
  color: var(--text-2, #525252);
}

/* ── Compact inline variant ─────────────────────────────────── */
.cg-restaurant-aside--inline {
  padding: 16px 20px;
  gap: 16px;
}
.cg-restaurant-aside--inline .cg-restaurant-aside__icon {
  width: 56px;
  height: 56px;
}
.cg-restaurant-aside--inline .cg-restaurant-aside__icon img,
.cg-restaurant-aside--inline .cg-restaurant-aside__icon svg {
  width: 56px;
  height: 56px;
}
.cg-restaurant-aside--inline .cg-restaurant-aside__label {
  margin-bottom: 6px;
}
.cg-restaurant-aside--inline .cg-restaurant-aside__body {
  font-size: 14px;
  line-height: 1.6;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .cg-restaurant-aside {
    flex-direction: column;
    gap: 16px;
    padding: 22px 22px 20px;
  }
  .cg-restaurant-aside__icon {
    width: 64px;
    height: 64px;
  }
  .cg-restaurant-aside__icon img,
  .cg-restaurant-aside__icon svg {
    width: 64px;
    height: 64px;
  }
}