/*
 * Login wall (public/js/login-wall.js): the modal 「登入後才能繼續閱讀」 and
 * the locked placeholder that stands where gated content would be. Used by
 * the activity, profile and model-course pages. Needs site.css v2 (.modal,
 * .btn, .skeleton, tokens).
 */

/* Locked placeholder: ghost skeleton + message panel (never real content) */
.ex-locked { position: relative; margin-top: var(--sp-6); min-height: 380px; border-radius: var(--r-lg); overflow: hidden; background: var(--c-snow, #fff); border: 1px solid var(--c-line); }
.ex-locked__ghost { display: grid; gap: var(--sp-4); padding: var(--sp-5); opacity: .7; }
.ex-locked__ghost .skeleton { animation: none; }
.ex-locked__ghost .g-chart { height: 140px; border-radius: var(--r-md); }
.ex-locked__ghost .g-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.ex-locked__ghost .g-photos span { aspect-ratio: 1; border-radius: var(--r-sm); }
.ex-locked__panel { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--sp-3); padding: var(--sp-5); text-align: center; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .96) 45%); }
.ex-locked__panel .icon { width: 36px; height: 36px; color: var(--c-forest-700); }
.ex-locked__panel p { margin: 0; max-width: 28em; font-size: var(--fs-base); font-weight: 700; color: var(--c-text); }
.ex-locked__actions, .wall-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.ex-locked__actions .btn, .wall-actions .btn { min-height: 44px; min-width: 132px; justify-content: center; }

/* Blurred teaser cover */
.wall-cover { position: relative; overflow: hidden; }
.wall-cover img { filter: blur(14px) saturate(1.1); transform: scale(1.12); }
.wall-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 46, 34, 0) 40%, rgba(11, 46, 34, .45)); pointer-events: none; }

/* Modal */
#loginWall .modal__panel { text-align: center; }
#loginWall .modal__title { margin: var(--sp-2) 40px var(--sp-3); }
#loginWall .wall-mark { width: 44px; height: 44px; color: var(--c-forest-700); }
#loginWall .wall-text { margin: 0; color: var(--c-text-2); }
#loginWall .wall-actions { margin-top: var(--sp-5); }
#loginWall .modal__close:focus-visible, #loginWall .btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
@media (max-width: 599px) {
  #loginWall { align-items: flex-end; }
  #loginWall .modal__panel { border-radius: var(--r-lg) var(--r-lg) 0 0; }
}