/* =========================================================
   sections/x.css
   ---------------------------------------------------------
   X POST : X Mosaic Wall
   ========================================================= */


/* =========================================================
   Section
   ========================================================= */
.xpost{
  padding-bottom: 96px;
}

/* =========================================================
   Mosaic Grid
   ========================================================= */
.xpost-mosaic{

  width:100%;
  margin-inline:auto;

  display:grid;

  grid-template-columns:repeat(24,1fr);
  grid-auto-rows:85px;

  gap:14px;
  grid-auto-flow:dense;
}




/* =========================================================
   Tile
   ========================================================= */
.xpost-tile{
  position:relative;
  display:block;
  overflow:hidden;

  border-radius:10px;
  background:#111;

  transform:none;
  transition:box-shadow .22s ease;
}

.xpost-tile img{
  width:100%;
  height:100%;
  object-fit:cover;

  transform:scale(1.02);
  transition:transform .45s ease, filter .45s ease;

  will-change:transform;
}


/* =========================================================
   Fallback
   ========================================================= */
.xpost-fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;

  background:
  radial-gradient(circle at 30% 30%, rgba(0,200,255,.25), transparent 60%),
  #111;

  color:#00d4ff;
  font-size:28px;

  text-shadow:0 10px 24px rgba(0,0,0,.22);
}


/* =========================================================
   Cyan Film
   ========================================================= */
.xpost-tile::before{
  content:"";
  position:absolute;
  inset:0;

  background:rgba(0,212,255,.45);

  mix-blend-mode:screen;

  opacity:.75;
  z-index:1;

  pointer-events:none;

  transition:opacity .25s ease;
}


/* =========================================================
   Shadow Film
   ========================================================= */
.xpost-tile::after{
  content:"";
  position:absolute;
  inset:0;

  background:
  linear-gradient(
  180deg,
  rgba(0,0,0,.05),
  rgba(0,0,0,.55)
  );

  z-index:2;
  opacity:.65;
}


/* =========================================================
   Layer order
   ========================================================= */
.xpost-tile img,
.xpost-fallback{
  position:relative;
  z-index:0;
}


/* =========================================================
   Name Label
   ========================================================= */
.xpost-name{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;

  font-size:calc(10px * var(--official-font-scale, 1));
  letter-spacing:.18em;
  text-align:center;

  color:#fff;
  border: 1px solid rgba(255, 255, 255, .7);
  background: linear-gradient(180deg, rgba(17, 188, 222, .5), rgba(17, 188, 222, .75)) !important;

  padding:6px 10px;

  border-radius:999px;

  z-index:3;

}


/* =========================================================
   PC Mosaic Layout
   ========================================================= */

/* 主役 */
.xpost-tile:nth-child(1){ grid-column:1/span 8; grid-row:1/span 8; }

/* 左中央 */
.xpost-tile:nth-child(2){ grid-column:9/span 4; grid-row:1/span 3; }
.xpost-tile:nth-child(3){ grid-column:9/span 4; grid-row:4/span 3; }
.xpost-tile:nth-child(4){ grid-column:9/span 4; grid-row:7/span 2; }

/* 縦 */
.xpost-tile:nth-child(5){ grid-column:13/span 6; grid-row:1/span 11; }

/* 右 */
.xpost-tile:nth-child(6){ grid-column:19/span 6; grid-row:1/span 5; }
.xpost-tile:nth-child(7){ grid-column:19/span 6; grid-row:6/span 4; }

/* 下段 */
.xpost-tile:nth-child(8){ grid-column:1/span 3; grid-row:9/span 3; }
.xpost-tile:nth-child(9){ grid-column:4/span 6; grid-row:9/span 3; }
.xpost-tile:nth-child(10){ grid-column:10/span 3; grid-row:9/span 3; }

.xpost-tile:nth-child(11){ grid-column:19/span 3; grid-row:10/span 2; }
.xpost-tile:nth-child(12){ grid-column:22/span 3; grid-row:10/span 2; }


/* =========================================================
   Hover
   ========================================================= */
@media (hover:hover){

.xpost-tile:hover{

box-shadow:
0 0 0 2px rgba(255,255,255,.35),
0 18px 40px rgba(141,197,227,.22);

}

.xpost-tile:hover img{

transform:scale(1.08);
filter:saturate(1.06) contrast(1.05);

}

.xpost-tile:hover::after{ opacity:.75; }
.xpost-tile:hover::before{ opacity:.72; }

}





/* =========================================================
   Tablet Layout
   ---------------------------------------------------------
   モザイク解除
   ========================================================= */
@media (max-width: 767px){

.xpost-mosaic{

grid-template-columns:repeat(4,1fr);
grid-auto-rows:180px;

gap:12px;

grid-auto-flow:row;

}

/* PCモザイク解除 */
.xpost-tile:nth-child(n){

grid-column:auto;
grid-row:auto;

}

.xpost-tile{

border-radius:12px;

}

}


/* =========================================================
   Mobile Layout
   ========================================================= */
@media (max-width:767px){

.xpost-mosaic{

width:min(96%,960px);

grid-template-columns:repeat(2,1fr);
grid-auto-rows:150px;

gap:10px;

}

.xpost-name{

left:8px;
right:8px;
bottom:8px;

font-size:calc(9px * var(--official-font-scale, 1));
padding:5px 8px;

}

}


/* =========================================================
   X Modal
========================================================= */
.x-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.x-modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.x-overlay{
  position: absolute;
  inset: 0;
  background: rgba(10,18,24,.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .22s ease;
}
.x-modal.is-open .x-overlay{ opacity: 1; }

.x-panel{
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vw, 760px);
  height: 100vh;
  transform: translate(-50%, -48%) scale(.985);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2,.9,.2,1.12), opacity .22s ease;

  display: flex;
  flex-direction: column;
  overflow: hidden;

  background-color: #00000047;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
}

.x-modal.is-open .x-panel{
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.x-close{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.9);
  cursor: pointer;
  font-size: calc(18px * var(--official-font-scale, 1));
  line-height: 1;
  z-index: 2;
}

.x-inner{
  flex: 1;
  min-height: 0;
  overflow: hidden;        /* ←スクロール無し */
  display: grid;
  place-items: center;
  padding: 56px 10px 12px;
}

.x-inner img{
  width: 90%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.x-actions{
  flex: 0 0 auto;
  padding: 12px;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.x-open,
.x-profile{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(
    180deg,
    rgba(17,188,222,.5),
    rgba(17,188,222,.75)
  ) !important;
  border: 1px solid rgba(255,255,255,.7);
  text-decoration: none;
  font-size: calc(11px * var(--official-font-scale, 1));
  letter-spacing: .08em;
}

@media (max-width: 767px){

  .x-actions{
    margin-top:0;
    width: 100%;
    display: block;
    padding: 0 5%;
    position: static;
  }

  .x-open,
  .x-profile{
    display: flex;
    width: 100%;
    height: 32px !important;
    line-height: 32px !important;
    padding: 6px 0 !important;
    font-size: calc(11px * var(--official-font-scale, 1));
    letter-spacing: .06em;
    gap: 0;
  }

  .x-open + .x-profile{
    margin-top: 10px;
  }

  .x-inner{
    padding: 12px 10px;
  }

  .x-panel{
    display: inline;
    place-items: center;
    padding: 12px 10px;
    height: auto;
  }

  /* close */
  .x-close{
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    border-radius: 0;
  }

}

/* 共通 */
/* ===== 共通 ===== */
.is-big::after,
.is-wide::after,
.is-tall::after,
.is-midw::after,
.is-midt::after,
.is-bgm::after,
.is-bgmt::after,
.is-b_gm::after,
.is-b_gmt::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

.is-big::after{
    background: linear-gradient(
        180deg,
        rgba(0,0,0,.85),
        rgba(0,0,0,1)
    );
}

.is-wide::after{
    background: linear-gradient(
        180deg,
        rgba(0,0,0,.75),
        rgba(0,0,0,.95)
    );
}

.is-tall::after{
    background: linear-gradient(
        180deg,
        rgba(0,0,0,.65),
        rgba(0,0,0,.9)
    );
}

.is-midw::after{
    background: linear-gradient(
        180deg,
        rgba(0,0,0,.55),
        rgba(0,0,0,.8)
    );
}

.is-midt::after{
    background: linear-gradient(
        180deg,
        rgba(0,0,0,.5),
        rgba(0,0,0,.75)
    );
}

.is-bgm::after{
    background: linear-gradient(
        180deg,
        rgba(0,0,0,.45),
        rgba(0,0,0,.7)
    );
}

.is-bgmt::after{
    background: linear-gradient(
        180deg,
        rgba(0,0,0,.4),
        rgba(0,0,0,.65)
    );
}

.is-b_gm::after{
    background: linear-gradient(
        180deg,
        rgba(0,0,0,.35),
        rgba(0,0,0,.6)
    );
}

.is-b_gmt::after{
    background: linear-gradient(
        180deg,
        rgba(0,0,0,.3),
        rgba(0,0,0,.55)
    );
}

.profile_x {
  padding-bottom: 96px;
}