/* Per-section styling driven by the visual editor.
 *
 * Every declaration here is a no-op until the client sets something: each rule
 * reads a CSS custom property with the theme's own value as the fallback, so a
 * section the client has never touched renders exactly as it did before this
 * file existed. That is what lets the editor offer full styling control without
 * a flag day for the existing design.
 *
 * The properties are set inline on the <section> by cms/public/_edit.php, and
 * re-declared inside a max-width:768px block for phone overrides.
 */

[data-mmt-sec]{
  /* spacing */
  padding-top: var(--sec-pt, inherit);
  padding-bottom: var(--sec-pb, inherit);
}

/* Background: colour, image and a darkening veil so text stays readable over a
   photo whatever the client uploads. The veil only exists once an overlay value
   is set, so it never dims an untouched section. */
[data-mmt-sec][style*="--sec-bg"]{ background-color: var(--sec-bg); }
[data-mmt-sec][style*="--sec-bgimg"]{
  background-image: var(--sec-bgimg);
  background-size: cover;
  background-position: var(--sec-bgpos, 50% 50%);
  position: relative;
}
[data-mmt-sec][style*="--sec-ov"]::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--sec-ov));
  pointer-events: none;
  z-index: 0;
}
[data-mmt-sec][style*="--sec-ov"] > *{ position: relative; z-index: 1; }

/* Typography. Headings and body scale independently so the client can enlarge a
   title without blowing up the paragraph under it. */
[data-mmt-sec][style*="--sec-txt"],
[data-mmt-sec][style*="--sec-txt"] h1,
[data-mmt-sec][style*="--sec-txt"] h2,
[data-mmt-sec][style*="--sec-txt"] h3,
[data-mmt-sec][style*="--sec-txt"] p,
[data-mmt-sec][style*="--sec-txt"] blockquote,
[data-mmt-sec][style*="--sec-txt"] span{ color: var(--sec-txt); }

[data-mmt-sec][style*="--sec-tt"] h1,
[data-mmt-sec][style*="--sec-tt"] h2,
[data-mmt-sec][style*="--sec-tt"] .hm-brandL,
[data-mmt-sec][style*="--sec-tt"] .hm-sh-t{
  /* clamp() keeps a client-chosen desktop size from overflowing a phone: it
     shrinks proportionally down to 46% and never exceeds what they set. */
  font-size: clamp(calc(var(--sec-tt) * 0.46), calc(var(--sec-tt) * 0.5 + 2.2vw), var(--sec-tt));
}
[data-mmt-sec][style*="--sec-bd"] p,
[data-mmt-sec][style*="--sec-bd"] blockquote,
[data-mmt-sec][style*="--sec-bd"] li{
  font-size: clamp(calc(var(--sec-bd) * 0.86), calc(var(--sec-bd) * 0.8 + 0.5vw), var(--sec-bd));
}

[data-mmt-sec][style*="--sec-weight"] h1,
[data-mmt-sec][style*="--sec-weight"] h2{ font-weight: var(--sec-weight); }
[data-mmt-sec][style*="--sec-lh"] p,
[data-mmt-sec][style*="--sec-lh"] blockquote{ line-height: var(--sec-lh); }
[data-mmt-sec][style*="--sec-ls"]{ letter-spacing: calc(var(--sec-ls) * 1px); }
[data-mmt-sec][style*="--sec-align"]{ text-align: var(--sec-align); }

/* Radius applies to the pictures inside a section, which is what "圆角" means to
   a non-technical client — they are pointing at the photos, not the container. */
[data-mmt-sec][style*="--sec-r"] img,
[data-mmt-sec][style*="--sec-r"] figure,
[data-mmt-sec][style*="--sec-r"] .hm-cat-ph{
  border-radius: var(--sec-r);
  overflow: hidden;
}

/* Content width. "通栏" lets a section run edge to edge; the others narrow it. */
[data-mmt-sec][style*="--sec-maxw"] > *{
  max-width: var(--sec-maxw);
  margin-left: auto;
  margin-right: auto;
}

/* Inner pages gained an optional hero background image (they had none before). */
.blog-hero.has-bg{
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
}
.blog-hero.has-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.52));
  z-index: 0;
}
.blog-hero.has-bg > *{ position: relative; z-index: 1; color: #fff; }

/* Entrance animation. Respects the OS "reduce motion" setting — some viewers
   get motion sick, and the client cannot be expected to know that. */
@media (prefers-reduced-motion: no-preference){
  [data-mmt-sec][style*="--sec-anim"]{
    animation: mmt-sec-in .6s cubic-bezier(.22,.61,.36,1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 42%;
  }
  @keyframes mmt-sec-in{ from{ opacity:0; transform: translateY(18px) } to{ opacity:1; transform:none } }
}