/* ── Root ─────────────────────────────────────────── */
.gaia-point-box {
  box-sizing: border-box;
  position: relative;
  margin-top: 3rem; /* room for the ribbon label poking above the box */
  margin-bottom: 1.5rem;
}

/* ── Width (relative to the parent column) ─────────── */
.gaia-point-box--w-25 {
  width: 25%;
}
.gaia-point-box--w-50 {
  width: 50%;
}
.gaia-point-box--w-75 {
  width: 75%;
}
.gaia-point-box--w-100 {
  width: 100%;
}
/* Figma auto-layout-style "hug contents" — shrinks to the body's own
   content width instead of a fixed % of the column. `fit-content` is
   already self-clamping to the available width on its own (per spec:
   min(max-content, available-space)), so a short label-like box (e.g.
   one line of text) hugs tightly, and a genuinely long paragraph just
   converges to full width and wraps normally — no separate max-width
   safety net needed, added anyway for explicitness. Deliberately NOT
   forced to 100% in the mobile media query below: a hugged box is
   already exactly as wide as it needs to be, not "cramped" the way a
   fixed 25/50/75% box is next to nothing else in a single column, so
   there's nothing to override on mobile. */
.gaia-point-box--w-hug {
  width: fit-content;
  max-width: 100%;
}

/* ── Block position (only visible when width < 100%) ── */
.gaia-point-box--block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.gaia-point-box--block-align-center {
  margin-left: auto;
  margin-right: auto;
}
.gaia-point-box--block-align-right {
  margin-left: auto;
  margin-right: 0;
}

/* ── Ribbon label ─────────────────────────────────────
   Two pieces, not one stretched SVG mask (the earlier
   approach): a masked shape scaled to 100%/100% of the box
   makes the SVG's own decorative regions (the rounded left
   corner, the curved point) grow proportionally with the
   box — for a long label, the point's own taper widens right
   along with the text, until it's wide enough to visually
   swallow the start/end of the text. Fixed-size decorative
   ends that don't scale with content are exactly what real
   9-slice/border-image techniques exist for; the simplest
   version of that idea here is two pieces:

   1. The rect itself: plain `border-radius` on the left
      corners only (an EXACT match for this SVG's left side —
      it's already just a plain 8px-radius rounded rectangle
      there, confirmed from the path data, not a complex
      shape). Grows/shrinks freely with any label length.
   2. `::after`: a fixed-width end-cap glued to the right
      edge, showing a crop of the real SVG's curved point at
      its true native proportions — `mask-size: auto 100%`
      renders the whole 114×48 artwork at its own real aspect
      ratio (not stretched to fit an arbitrary box), and
      `mask-position: right` + the cap's own small fixed
      width crops that rendering down to just the point.
      Width is in `em` so it scales with the mobile font-size
      breakpoint automatically, without a separate override.
──────────────────────────────────────────────────── */
.gaia-point-box__label {
  position: absolute;
  top: -16px;
  left: -10px;
  z-index: 1;
  display: inline-block;
  padding: 12px 8px 12px 20px;
  font-size: 1.05rem;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: 0.05em;
  color: var(--color-text-inverse, #ffffff);
  background-color: var(
    --gaia-point-box-color,
    var(--color-brand-primary, #49352d)
  );
  border-radius: 8px 0 0 8px;
  transform: rotate(-6deg);
}
.gaia-point-box__label::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* 1px overlap, not a flush 100% seam — two adjacent elements butted exactly
     together can round to different device pixels and leave a hairline gap
     showing the background through; overlapping by 1px is imperceptible on
     a solid-color shape but guarantees no gap regardless of rounding. */
  left: calc(100% - 1px);
  width: calc(1.4em + 1px);
  background-color: var(
    --gaia-point-box-color,
    var(--color-brand-primary, #49352d)
  );
  -webkit-mask-image: url("assets/label-shape.svg");
  mask-image: url("assets/label-shape.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: right center;
  mask-position: right center;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
}

/* Same 8 tokens as gaia/color-text and gaia/highlight-chip.
   white/grey-light no longer get an outline border here — a
   rectangular border can't follow a masked irregular shape,
   it would just draw around the element's unmasked box edges
   and look disconnected from the visible silhouette. */
.gaia-point-box--primary .gaia-point-box__label {
  --gaia-point-box-color: var(--color-brand-primary, #49352d);
}
.gaia-point-box--accent-solid .gaia-point-box__label {
  --gaia-point-box-color: var(--color-brand-accent-solid, #f0701c);
}
.gaia-point-box--accent-light .gaia-point-box__label {
  --gaia-point-box-color: var(--color-brand-accent-light, #f7941d);
}
.gaia-point-box--accent-dark .gaia-point-box__label {
  --gaia-point-box-color: var(--color-brand-accent-dark, #e8501e);
}
.gaia-point-box--black .gaia-point-box__label {
  --gaia-point-box-color: var(--color-text-heading, #000000);
}
.gaia-point-box--grey .gaia-point-box__label {
  --gaia-point-box-color: var(--color-text-muted, #999999);
}
.gaia-point-box--grey-light .gaia-point-box__label {
  --gaia-point-box-color: var(--color-text-muted-light, #bbbbbb);
  color: var(--color-text-body, #1a1a1a);
}
.gaia-point-box--white .gaia-point-box__label {
  --gaia-point-box-color: var(--color-text-inverse, #ffffff);
  color: var(--color-text-body, #1a1a1a);
}

/* ── Body — clipped, patterned background ─────────── */
.gaia-point-box__body {
  box-sizing: border-box;
  position: relative;
  border-radius: var(--radius-12, 12px);
  overflow: hidden;
  padding-top: 40px;
  padding-right: var(--gaia-point-box-padding-x, 1.5rem);
  padding-bottom: 24px;
  padding-left: var(--gaia-point-box-padding-x, 1.5rem);
  background-color: #ffffff;
}

/* The 40px/24px top/bottom split exists to leave room for the ribbon
   label poking up over the top-left corner — with the label hidden
   (showLabel:false) there's nothing there to reserve that extra 16px
   for, so it just reads as an oversized gap above the content. Match
   top to bottom in that case instead. */
.gaia-point-box--no-label .gaia-point-box__body {
  padding-top: 24px;
}

/* ── Background — ONE selection: either a texture (stripe/origami/wave,
   background-image rules further below) or a subtle solid tint (this
   block), never both — a texture and a flat tint are mutually exclusive
   looks for the same area, so they share the single "pattern" attribute/
   class-suffix instead of two independent controls (tried as two
   separate controls first, reverted per explicit feedback). "none"
   needs no rule of its own — the base rule above already leaves the
   body plain white, which is exactly what "no texture, no tint" means.
   Tint alpha 0.12 reuses this same file's own
   --color-brand-primary-wash-hover value, already established elsewhere
   as "visible but still subtle" rather than inventing a new number. */
.gaia-point-box__body--primary {
  background-color: rgba(73, 53, 45, 0.12);
}
.gaia-point-box__body--accent-solid {
  background-color: rgba(240, 112, 28, 0.12);
}
.gaia-point-box__body--accent-light {
  background-color: rgba(247, 148, 29, 0.12);
}
.gaia-point-box__body--accent-dark {
  background-color: rgba(232, 80, 30, 0.12);
}
.gaia-point-box__body--black {
  background-color: rgba(0, 0, 0, 0.12);
}
.gaia-point-box__body--grey {
  background-color: rgba(153, 153, 153, 0.12);
}
.gaia-point-box__body--grey-light {
  background-color: rgba(187, 187, 187, 0.12);
}

/* ── No-label variant ── margin-top above exists solely to leave room
   for the ribbon poking above the box; with the label hidden there's
   nothing poking up, so collapse to a normal block margin instead. The
   mobile media query's own margin-top override further below still
   wins at that breakpoint regardless of this. */
.gaia-point-box--no-label {
  margin-top: 1.5rem;
}

/* Two spacing leaks into a nested gaia/list, scoped to this block only —
   neither is this block's own fault, both are generic rules meant for
   other contexts:
   1. .post_content li,dt,dd { line-height: 2.2 } — the PARENT theme's
      global post-content typography reset. It overrides the list's own
      intended 1.8 (set on the <ul> itself, inherited by <li> until this
      more specific rule steps in) — same class of "aggressive base
      stylesheet" leak documented elsewhere in this project. Specificity
      here (2 classes + element) beats it outright, no !important needed.
   2. .gaia-list > li { margin-bottom: 0.5em } — this theme's OWN default
      spacing for every gaia/list site-wide; too loose for this compact
      card, but list-item's own file shouldn't change for every other use
      of gaia/list just to suit this one block. */
.gaia-point-box__body .gaia-list > li {
  line-height: 1.8;
  margin-bottom: 0;
}

/* ── Text align (content area only, ribbon label unaffected) ── */
.gaia-point-box--align-left .gaia-point-box__body {
  text-align: left;
}
.gaia-point-box--align-center .gaia-point-box__body {
  text-align: center;
}
.gaia-point-box--align-right .gaia-point-box__body {
  text-align: right;
}

/* gaia/list-item's editor layout assumes always-left text: its marker
   (.gaia-list-item__content, a flex row) and its label
   (.gaia-list-item__text, flex:1 so it always fills the remaining row
   width) were built before any ancestor ever set text-align on list
   content. Under center/right, the inherited text-align only centers/
   right-aligns the label INSIDE that already-full-width flex item —
   the marker stays put at the row's start, visually stranding it far
   from the text. Fix: when point-box's own align isn't "left", let the
   row's own width hug its content and justify the whole row (marker +
   text together) instead, so they move as one unit like a real bullet. */
.gaia-point-box--align-center .gaia-list-item__content {
  justify-content: center;
}
.gaia-point-box--align-center .gaia-list-item__text {
  flex: 0 1 auto;
}
.gaia-point-box--align-right .gaia-list-item__content {
  justify-content: flex-end;
}
.gaia-point-box--align-right .gaia-list-item__text {
  flex: 0 1 auto;
}

/* Frontend equivalent of the fix above — a SEPARATE bug, not the same one.
   The saved/published markup for a middle-dot list is completely different
   from the editor's: a real <ul>/<li> with the marker as a FLOATED ::before
   (ul.gaia-list--middle-dot > li::before, in blocks/list/style.css), not a
   flex row. A float's own position is anchored to its container's edge and
   never responds to text-align at all — centering the <li>'s inline text
   only moves the text, leaving the float pinned left, same visual bug as
   the editor one but from a completely different CSS mechanism. Fix: make
   the <li> itself a flex row so the marker (still generated via ::before,
   now a flex item instead of a float) and the label move together. Scoped
   to the middle-dot type specifically — the other marker types (native
   list-style dot/circle/decimal/alpha, circle-number's own float) would
   each need their own equivalent fix if centering them is ever needed. */
.gaia-point-box--align-center .gaia-list--middle-dot > li,
.gaia-point-box--align-right .gaia-list--middle-dot > li {
  display: flex;
  align-items: baseline;
  padding-left: 0;
}
.gaia-point-box--align-center .gaia-list--middle-dot > li {
  justify-content: center;
}
.gaia-point-box--align-right .gaia-list--middle-dot > li {
  justify-content: flex-end;
}
.gaia-point-box--align-center .gaia-list--middle-dot > li::before,
.gaia-point-box--align-right .gaia-list--middle-dot > li::before {
  float: none;
  width: auto;
  margin-left: 0;
  margin-right: 0.4em;
}

/* Same float-doesn't-respond-to-text-align bug, same fix, for the
   checkbox marker type — it uses the identical float+BFC technique as
   middle-dot on the frontend (blocks/list/style.css). Centering/right-
   aligning trades away the multi-line "wrapped text stays indented"
   behavior in exchange for the marker and (now likely short) text
   moving together as one unit — same accepted trade-off as middle-dot. */
.gaia-point-box--align-center .gaia-list--checkbox > li,
.gaia-point-box--align-right .gaia-list--checkbox > li {
  display: flex;
  align-items: center;
  padding-left: 0;
}
.gaia-point-box--align-center .gaia-list--checkbox > li {
  justify-content: center;
}
.gaia-point-box--align-right .gaia-list--checkbox > li {
  justify-content: flex-end;
}
.gaia-point-box--align-center .gaia-list--checkbox > li::before,
.gaia-point-box--align-right .gaia-list--checkbox > li::before {
  float: none;
  margin-top: 0;
  margin-right: 0.4em;
}

.gaia-point-box__body--stripe {
  background-image: url("assets/pattern-stripe.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.gaia-point-box__body--origami {
  background-image: url("assets/pattern-origami.svg");
  background-repeat: repeat;
  background-size: 30px 30px;
}
.gaia-point-box__body--wave {
  background-image: url("assets/pattern-wave.svg");
  background-repeat: repeat;
  background-size: 499px 59.9px;
}

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 600px) {
  /* 幅 (width) is a PC/tablet-only variation — a 25/50/75% box next to
     nothing else in a single-column mobile layout just looks cramped, so
     force full width regardless of what's selected in the editor. */
  .gaia-point-box--w-25,
  .gaia-point-box--w-50,
  .gaia-point-box--w-75,
  .gaia-point-box--w-100 {
    width: 100%;
  }

  .gaia-point-box {
    margin-top: 16px;
  }
  .gaia-point-box__label {
    top: -12px;
    left: -8px;
    padding: 10px 22px 10px 16px;
    font-size: 0.9rem;
  }
  .gaia-point-box__body {
    padding-top: 32px;
    padding-bottom: 16px;
  }
  /* Same reasoning as the desktop rule above — match top to bottom once
     there's no ribbon poking up to reserve the extra space for. */
  .gaia-point-box--no-label .gaia-point-box__body {
    padding-top: 16px;
  }
}