@charset "UTF-8";

/* =========================================================
   01-layout.css
   Layout Asset：幅・余白・分割・断ち切り・ブロック余白調整

   Site:
   日本料理 あふひ

   方針：
   ・細かすぎるルールは作らない
   ・制作中に迷いやすい「幅」「上下余白」「フルブリード」を整える
   ・カスタムHTMLブロックを分けても余白が暴走しないようにする
   ・l- = layout
   ・u- = utility
   ・あふひ独自デザインは c-afuhi〇〇 側に書く
========================================================= */


/* =========================
   幅レール（コンテンツ幅）

   目的：
   ・左右の余白をそろえる
   ・本文、写真、カード、下層ページの横幅を統一する

   使い方：
   <div class="l-wrap-md">...</div>
========================= */

.l-wrap-sm {
  width: min(100% - 40px, 880px);
  margin-inline: auto;
}

.l-wrap-md {
  width: min(100% - 40px, 1080px);
  margin-inline: auto;
}

.l-wrap-lg {
  width: min(100% - 48px, 1280px);
  margin-inline: auto;
}

.l-wrap-xl {
  width: min(100% - 56px, 1440px);
  margin-inline: auto;
}

.l-wrap-full {
  width: 100%;
}

@media (max-width: 767px) {
  .l-wrap-sm,
  .l-wrap-md,
  .l-wrap-lg,
  .l-wrap-xl {
    width: min(100% - 44px, 100%);
  }
}


/* =========================
   セクション余白

   目的：
   ・各セクションの上下余白を統一する
   ・ブロック間の余白ではなく、セクション自身が余白を持つ

   基本：
   .l-section       標準
   .l-section--sm   少し狭い
   .l-section--lg   広め
   .l-section--none 余白なし
========================= */

.l-section {
  padding-block: 88px;
}

.l-section--sm {
  padding-block: 56px;
}

.l-section--lg {
  padding-block: 120px;
}

.l-section--xl {
  padding-block: 160px;
}

.l-section--none {
  padding-block: 0;
}

@media (max-width: 767px) {
  .l-section {
    padding-block: 64px;
  }

  .l-section--sm {
    padding-block: 40px;
  }

  .l-section--lg {
    padding-block: 88px;
  }

  .l-section--xl {
    padding-block: 112px;
  }

  .l-section--none {
    padding-block: 0;
  }
}


/* =========================
   SWELL：カスタムHTMLブロック余白調整

   目的：
   ・カスタムHTMLブロックを複数に分けても、間の余白が広がりすぎないようにする
   ・セクション間の余白は .l-section 側で管理する

   方針：
   ・ブロック自体の上下余白は消す
   ・必要な余白は section / component 側で持たせる
========================= */

.post_content > .wp-block-html,
.entry-content > .wp-block-html {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.post_content > .wp-block-html + .wp-block-html,
.entry-content > .wp-block-html + .wp-block-html {
  margin-top: 0 !important;
}


/* =========================
   分割レイアウト（2カラム）

   目的：
   ・写真＋テキスト
   ・説明＋画像
   ・アクセス情報＋地図
   などの基本2カラムに使う

   使い方：
   <div class="l-split">
     <div>...</div>
     <div>...</div>
   </div>
========================= */

.l-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.l-split--center {
  align-items: center;
}

.l-split--wideLeft {
  grid-template-columns: 1.2fr 0.8fr;
}

.l-split--wideRight {
  grid-template-columns: 0.8fr 1.2fr;
}

.l-split--reverse {
  direction: rtl;
}

.l-split--reverse > * {
  direction: ltr;
}

@media (max-width: 767px) {
  .l-split,
  .l-split--wideLeft,
  .l-split--wideRight {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}


/* =========================
   フルブリード（画面幅いっぱい）

   目的：
   ・写真や動画を画面幅いっぱいに見せる
   ・SWELL本文幅の内側から抜け出す

   使い方：
   <section class="c-afuhiHero u-fullbleed">...</section>
========================= */

.u-fullbleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

.u-fullbleed img,
.u-fullbleed video {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================
   片側ブリード

   目的：
   ・写真だけ右端、または左端に逃がす
   ・和食サイトらしい余白と動きを出す

   使い方：
   <div class="c-afuhiPhoto u-bleedRight">...</div>
========================= */

.u-bleedRight {
  margin-right: calc(50% - 50vw);
}

.u-bleedLeft {
  margin-left: calc(50% - 50vw);
}

.u-bleedBoth {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* =========================
   片側断ち切りレール

   目的：
   ・要素の幅も含めて、画面端に寄せたい時に使う
   ・単なる margin 調整ではなく、写真枠そのものを片側に寄せる

   注意：
   ・u-bleedRight / u-bleedLeft とは同時に使わない
========================= */

.u-edge-right {
  position: relative;
  width: 40%;
  max-width: 520px;
  margin-left: auto;
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

.u-edge-left {
  position: relative;
  width: 40%;
  max-width: 520px;
  margin-right: auto;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .u-edge-right,
  .u-edge-left {
    width: 72vw;
    max-width: none;
  }
}


/* =========================
   基本ユーティリティ：余白

   目的：
   ・どうしても少しだけ調整したい時の補助
   ・多用しすぎない
========================= */

.u-mt-0 {
  margin-top: 0 !important;
}

.u-mt-1 {
  margin-top: 16px !important;
}

.u-mt-2 {
  margin-top: 32px !important;
}

.u-mt-3 {
  margin-top: 56px !important;
}

.u-mb-0 {
  margin-bottom: 0 !important;
}

.u-mb-1 {
  margin-bottom: 16px !important;
}

.u-mb-2 {
  margin-bottom: 32px !important;
}

.u-mb-3 {
  margin-bottom: 56px !important;
}


/* =========================
   基本ユーティリティ：配置
========================= */

.u-center {
  margin-left: auto;
  margin-right: auto;
}

.u-text-center {
  text-align: center;
}

.u-text-left {
  text-align: left;
}

.u-text-right {
  text-align: right;
}


/* =========================
   基本ユーティリティ：表示制御
========================= */

.u-pc-only {
  display: block;
}

.u-sp-only {
  display: none;
}

@media (max-width: 767px) {
  .u-pc-only {
    display: none !important;
  }

  .u-sp-only {
    display: block !important;
  }
}