/* =========================
   ページ全体の Card Layout
   public/assets/css/page-shell.css
   ========================= */

/*
  目視調整用。
  Fixするまでは主にここだけ触る。
*/
:root {
  --page-shell-card-width: 760px;
  --page-shell-card-bg: rgba(255, 253, 248, 0.72);
  --page-shell-card-shadow: 0 0 28px rgba(80, 55, 30, 0.06);
  --page-shell-card-padding-x: 18px;
}

/* page-shell専用 */
body.page-shell-body {
  background: var(--color-bg);
}

/*
  スマホでは全幅。
  PCでは適度な幅で中央止まり。
  上下は境目を作らないので margin-top/bottom や border-radius は付けない。
*/
.page-shell-page-card {
  width: 100%;
  max-width: var(--page-shell-card-width);
  min-height: 100dvh;
  margin: 0 auto;

  background: var(--page-shell-card-bg);
  box-shadow: var(--page-shell-card-shadow);

  position: relative;
}

/*
  style.css の fixed header は画面全幅なので、
  page-shellページだけカード幅に揃える。
*/
.page-shell-body .content-header {
  left: 50%;
  right: auto;
  width: 100%;
  max-width: var(--page-shell-card-width);
  transform: translateX(-50%);

  background: var(--page-shell-card-bg);
}

/*
  本文幅はページカードに任せる。
  content-wrapper 自体の max-width は外す。
*/
.page-shell-body .content-wrapper {
  width: 100%;
  max-width: none;

  padding-left: var(--page-shell-card-padding-x);
  padding-right: var(--page-shell-card-padding-x);
}

/*
  今まで各セクションに置いていたカード感を弱める。
  ページ全体がカードになるので、内側カードは透明寄りにする。
*/
.page-shell-body .content-card {
  background: transparent;
  box-shadow: none;
  border-radius: 0;

  padding: 18px 0;
  margin-bottom: 0;

  border-bottom: 1px solid rgba(228, 216, 200, 0.75);
}

.page-shell-body .content-card:last-child {
  border-bottom: none;
}

/*
  ヒーロー部分もページカード内の余白に合わせる。
*/
.page-shell-body .hero-area {
  padding: 4px 0 18px;
}

/*
  リンク群の余白調整。
*/
.page-shell-body .hero-actions {
  margin-top: 18px;
}

.page-shell-body .hero-actions p {
  margin-bottom: 8px;
}

/*
  店内画像。
*/
.page-shell-body .content-card img {
  display: block;
  width: 100%;
  border-radius: 14px;
}

/*
  footer も fixed なのでカード幅に揃える。
*/
.page-shell-body .footer-wrapper {
  left: 50%;
  width: 100%;
  max-width: var(--page-shell-card-width);
  transform: translateX(-50%);
}

/*
  PCでは左右にカード感を出す。
*/
@media (min-width: 761px) {
  .page-shell-page-card {
    box-shadow: var(--page-shell-card-shadow);
  }
}

/*
  スマホでは完全に全幅に見せる。
*/
@media (max-width: 760px) {
  :root {
    --page-shell-card-width: 100%;
    --page-shell-card-shadow: none;
    --page-shell-card-padding-x: 16px;
  }

  .page-shell-page-card {
    box-shadow: none;
  }
}