/**
 * HONOKO Core · portable Builder presentation for third-party themes.
 *
 * Only structural/layout rules live here. Typography and the surrounding
 * header/footer remain owned by the active theme.
 */
:root{
  --honoko-core-content:860px;
  --honoko-core-wide:1200px;
  --honoko-border:#e6e6e6;
  --honoko-muted:#666;
  --honoko-soft:#f7f7f7;
  --honoko-surface:#fff;
  --honoko-accent:#1769e0;
  --honoko-global-padding:20px;
  --honoko-full-gap-default:0px;
}
.honoko-builder-row,
.honoko-builder-row *,
.honoko-compose,
.honoko-shortcode,
.honoko-layout-width{box-sizing:border-box}

/* The portable row/column model must work even when the active theme knows
   nothing about HONOKO. */
.honoko-builder-row{
  display:grid;
  grid-template-columns:var(--honoko-row-cols,1fr);
  gap:var(--honoko-row-gap,24px);
  align-items:var(--honoko-row-align,start);
  width:min(100%,var(--honoko-core-content));
  max-width:var(--honoko-core-content);
  min-width:0;
  margin-left:auto;
  margin-right:auto;
}
.honoko-builder-row__col{min-width:0;max-width:100%}
/* Nested Builder rows already live inside a column and must use the whole
   available column instead of creating a second centered content canvas. */
.honoko-builder-row__col .honoko-builder-row,
.honoko-inner-columns__col .honoko-builder-row{
  width:100%;
  max-width:100%;
  margin-left:0;
  margin-right:0;
}
.honoko-builder-row__col>.honoko-compose,
.honoko-builder-row__col>.honoko-layout-width>.honoko-compose,
.honoko-inner-columns__col>.honoko-compose,
.honoko-inner-columns__col>.honoko-layout-width>.honoko-compose{margin-top:0;margin-bottom:0}

/* Free visual blocks stay centered inside whatever content canvas the theme
   provides. Long URLs/IDs/unbroken strings may not push the right edge out. */
.honoko-compose,.honoko-shortcode{width:100%;max-width:var(--honoko-core-content);margin:38px auto}
.honoko-text-block,.honoko-text-block *{overflow-wrap:anywhere;word-break:normal}
.honoko-text-block>:first-child{margin-top:0}
.honoko-text-block>:last-child{margin-bottom:0}

/* HONOKO width controls remain meaningful with third-party themes. */
.honoko-layout-width{position:relative;max-width:100%}
.honoko-layout-width--content{width:min(100%,var(--honoko-core-content));max-width:var(--honoko-core-content);margin-left:auto;margin-right:auto}
.honoko-layout-width--wide{
  width:min(var(--honoko-core-wide),calc(100vw - 40px));
  max-width:none;
  margin-left:50%;
  transform:translateX(-50%);
}
.honoko-layout-width--full{
  --honoko-full-gap:var(--honoko-full-gap-default,0px);
  width:calc(100vw - (2 * var(--honoko-full-gap)));
  max-width:none;
  margin-left:50%;
  transform:translateX(-50%);
}
.honoko-layout-width--full>.honoko-compose,
.honoko-layout-width--full>.honoko-shortcode{max-width:none;margin-left:0;margin-right:0}
.honoko-builder-row__col>.honoko-layout-width--wide,
.honoko-builder-row__col>.honoko-layout-width--full,
.honoko-inner-columns__col>.honoko-layout-width--wide,
.honoko-inner-columns__col>.honoko-layout-width--full{
  width:100%;max-width:100%;margin-left:0!important;margin-right:0!important;transform:none!important
}

/* Free block structure. Visual details deliberately inherit from the theme. */
.honoko-image-block{display:flex;flex-direction:column;width:100%;max-width:100%}
.honoko-image-block__media{display:block;width:var(--honoko-image-width,100%);max-width:var(--honoko-image-max-width,100%);overflow:hidden;line-height:0}
.honoko-image-block--left .honoko-image-block__media{margin-right:auto}
.honoko-image-block--center .honoko-image-block__media{margin-left:auto;margin-right:auto}
.honoko-image-block--right .honoko-image-block__media{margin-left:auto}
.honoko-image-block__img{display:block;width:100%;height:auto;max-width:100%}
.honoko-image-block--ratio .honoko-image-block__media{aspect-ratio:var(--honoko-image-ratio,16 / 9)}
.honoko-image-block--ratio .honoko-image-block__img{width:100%;height:100%;object-fit:var(--honoko-image-fit,cover)}
.honoko-image-block__caption{width:var(--honoko-image-width,100%);max-width:var(--honoko-image-max-width,100%);margin-top:9px;color:var(--honoko-muted);font-size:.9em;line-height:1.45}
.honoko-image-block--center .honoko-image-block__caption{margin-left:auto;margin-right:auto;text-align:center}
.honoko-image-block--right .honoko-image-block__caption{margin-left:auto;text-align:right}

.honoko-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px;align-items:center;max-width:100%}
.honoko-split--reverse .honoko-split__media{order:2}
.honoko-split__media img{display:block;width:100%;max-width:100%;height:auto}

.honoko-content-grid,.honoko-term-grid,.honoko-feature-grid{
  display:grid;
  grid-template-columns:repeat(var(--honoko-grid-cols,3),minmax(0,1fr));
  gap:var(--honoko-grid-gap,22px)
}
.post-card__media{display:block;overflow:hidden;aspect-ratio:var(--honoko-card-ratio,16 / 9);background:var(--honoko-soft)}
.post-card__media img{display:block;width:100%;height:100%;object-fit:cover}
.honoko-toc{max-width:100%}

/* Builder spacing/design attributes are generated by Core and therefore need
   a small portable CSS layer too. */
.honoko-has-custom-spacing.honoko-space-mt{margin-top:var(--honoko-space-mt)!important}
.honoko-has-custom-spacing.honoko-space-mr.honoko-layout-width--content{margin-right:var(--honoko-space-mr)!important}
.honoko-has-custom-spacing.honoko-space-mb{margin-bottom:var(--honoko-space-mb)!important}
.honoko-has-custom-spacing.honoko-space-ml.honoko-layout-width--content{margin-left:var(--honoko-space-ml)!important}
.honoko-has-custom-spacing.honoko-space-pt{padding-top:var(--honoko-space-pt)!important}
.honoko-has-custom-spacing.honoko-space-pr{padding-right:var(--honoko-space-pr)!important}
.honoko-has-custom-spacing.honoko-space-pb{padding-bottom:var(--honoko-space-pb)!important}
.honoko-has-custom-spacing.honoko-space-pl{padding-left:var(--honoko-space-pl)!important}
.honoko-design-has-background>.honoko-compose,
.honoko-design-has-background>.honoko-shortcode,
.honoko-design-has-background>.honoko-builder-row{background:transparent!important}

@media(max-width:900px){
  .honoko-content-grid,.honoko-term-grid,.honoko-feature-grid{grid-template-columns:repeat(min(var(--honoko-grid-cols,3),2),minmax(0,1fr))}
  .honoko-split{grid-template-columns:1fr}
  .honoko-split--reverse .honoko-split__media{order:0}
}
@media(max-width:767px){.honoko-builder-row{grid-template-columns:1fr!important}}
@media(max-width:620px){
  .honoko-layout-width--wide{width:calc(100vw - 20px)}
  .honoko-content-grid,.honoko-term-grid,.honoko-feature-grid{grid-template-columns:1fr}
}