/**
 * specialized-workbench ad slot styles — reusable industry workbench layout.
 *
 * Task: restaurant-workspace-ad-slot-parity-001
 *
 * Visual norms match General `.ad-rail` / `.ad-rail-card` and `.mobile-ad-slot`
 * (dashed gold border, cream fill, padding, “广告” label). No third-party ads.
 *
 * Desktop (≥901px): main column + fixed 300px sticky right rail.
 * Mobile (≤900px): rail hidden; single post-03 banner with page content margins.
 */

.specialized-workbench-layout {
  align-items: start;
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) 300px;
  margin: 0 auto;
  max-width: 1400px;
  width: 100%;
}

.specialized-workbench-main {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.specialized-workbench-ad-rail {
  display: block;
  position: sticky;
  top: 24px;
  z-index: 1;
}

.specialized-workbench-ad-rail-card {
  align-items: center;
  background: rgba(255, 253, 252, 0.72);
  border: 1px dashed rgba(199, 161, 90, 0.58);
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--muted, #64716b);
  display: flex;
  font-size: 13px;
  font-weight: 800;
  justify-content: center;
  letter-spacing: 0;
  min-height: 280px;
  padding: 18px;
}

/* Mobile banner — zero footprint until active; never shown on desktop. */
.specialized-workbench-mobile-ad {
  background: transparent;
  border: 0;
  box-sizing: border-box;
  display: none;
  height: 0;
  margin: 0;
  max-height: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  visibility: hidden;
}

.specialized-workbench-mobile-ad[hidden] {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  max-height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.specialized-workbench-mobile-ad__label {
  color: #6a6358;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  text-align: center;
}

.specialized-workbench-mobile-ad__frame {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100%;
}

.specialized-workbench-mobile-ad__content {
  box-sizing: border-box;
  min-height: 0;
  width: 100%;
}

@media (max-width: 900px) {
  .specialized-workbench-layout {
    display: block;
    max-width: 100%;
  }

  .specialized-workbench-ad-rail {
    display: none !important;
  }

  .specialized-workbench-mobile-ad.is-active:not([hidden]) {
    --specialized-workbench-mobile-ad-min-height: 3.5rem;
    display: block;
    height: auto;
    /* Match Restaurant / General content side margins on phone. */
    margin: 0.75rem max(8px, env(safe-area-inset-left)) 0.75rem max(8px, env(safe-area-inset-right));
    max-height: none;
    max-width: 100%;
    min-height: 0;
    overflow: visible;
    padding: 0;
    pointer-events: auto;
    visibility: visible;
    width: auto;
  }

  .specialized-workbench-mobile-ad.is-active:not([hidden]) .specialized-workbench-mobile-ad__label:not([hidden]) {
    display: block;
    margin: 0 0 0.35rem;
  }

  .specialized-workbench-mobile-ad.is-active:not([hidden]) .specialized-workbench-mobile-ad__frame {
    align-items: center;
    background: rgba(255, 253, 252, 0.55);
    border: 1px dashed rgba(199, 161, 90, 0.45);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    min-height: var(--specialized-workbench-mobile-ad-min-height);
    padding: 0.45rem 0.75rem;
    width: 100%;
  }

  .specialized-workbench-mobile-ad.is-active:not([hidden]) .specialized-workbench-mobile-ad__content {
    align-items: center;
    color: #4a453c;
    display: flex;
    font-size: 0.8125rem;
    justify-content: center;
    line-height: 1.35;
    min-height: var(--specialized-workbench-mobile-ad-min-height);
    text-align: center;
    width: 100%;
  }
}

@media (min-width: 901px) {
  .specialized-workbench-mobile-ad,
  .specialized-workbench-mobile-ad.is-active,
  .specialized-workbench-mobile-ad.is-active:not([hidden]) {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
}