@charset "UTF-8";
/* 
Theme Name:		 Twenty Twenty-Five Child
Theme URI:		 http://childtheme-generator.com/
Description:	 Dot & Friends is a child theme of Twenty Twenty-Five
Author:			 dotfriends
Author URI:		 http://childtheme-generator.com/
Template:		 twentytwentyfive
Version:		 1.0.0
Text Domain:	 dotfriends
*/


/*
    Add your custom styles here
*/
/* 让内容区居中并且为动效做准备 */
.hover-reveal-card .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  text-align: center;
}

/* 统一缓动曲线：更丝滑 */
.hover-reveal-card {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 标题：默认状态（一直显示） */
.hover-reveal-card h2 {
  margin: 0;
  transform: translateY(0);
  transition: transform 520ms var(--ease);
  will-change: transform;
}

/* 详细介绍：默认隐藏 */
.hover-reveal-card p {
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  max-height: 0;
  overflow: hidden;
  transition:
    opacity 520ms var(--ease),
    transform 520ms var(--ease),
    filter 520ms var(--ease),
    max-height 520ms var(--ease);
  will-change: opacity, transform, filter;
}

/* Hover：标题微微上移（更高级，但不消失） */
.hover-reveal-card:hover h2 {
  transform: translateY(-10px);
}

/* Hover：详细介绍出现（增加显示） */
.hover-reveal-card:hover p {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  max-height: 500px;
}

/* Hover：背景稍微加深，让文字更清晰 */
.hover-reveal-card .wp-block-cover__background {
  transition: opacity 520ms var(--ease);
}

.hover-reveal-card:hover .wp-block-cover__background {
  opacity: 0.6;
}

/*image hover*/
/* 图片舞台：锁定比例 + 裁切 */
.artist-card-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

/* 去掉 figure 默认外边距，填满容器 */
.artist-card-media .wp-block-image {
  margin: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 图片铺满裁切 */
.artist-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 默认图显示、hover 图隐藏 */
.artist-card-media .default-img {
  opacity: 1;
  transition: opacity .35s ease;
}

.artist-card-media .hover-img {
  opacity: 0;
  transition: opacity .35s ease;
}

/* 悬停切换 */
.artist-card-media:hover .default-img {
  opacity: 0;
}

.artist-card-media:hover .hover-img {
  opacity: 1;
}


/* 兼容键盘聚焦（可选但推荐） */
.artist-card-media:focus-within .default-img {
  opacity: 0;
}

.artist-card-media:focus-within .hover-img {
  opacity: 1;
}

.wp-block-group.artist-card-media>figure.hover-img {
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.wp-block-group.artist-card-media:hover>figure.hover-img {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease;
}

/*hover hide title*/
/* 标题默认显示 */
.wp-block-cover.hover-hide-title .wp-block-heading {
  opacity: 1;
  transition: opacity .35s ease;
}

/* 遮罩默认：沿用系统 0.5，但加上过渡 */
.wp-block-cover.hover-hide-title .wp-block-cover__background {
  transition: opacity .35s ease;
}

/* 悬停：标题消失 + 遮罩消失（图片更清晰） */
.wp-block-cover.hover-hide-title:hover .wp-block-heading {
  opacity: 0;
}

.wp-block-cover.hover-hide-title:hover .wp-block-cover__background {
  opacity: 0;
}

/* Mobile: collapse submenus by default in the overlay menu */
@media (max-width: 768px){

  /* =========================
     0) 容器整体：右对齐列
     ========================= */
  header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__container{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }

  /* 顶级每项占满一行，确保右边缘统一 */
  header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__container > li{
    width: 100%;
  }

  /* 普通顶级链接：右对齐 */
  header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__container > li > a.wp-block-navigation-item__content{
    display: block;
    width: 100%;
    text-align: right;
    padding: 10px 0;
  }

  /* =========================
     1) has-child（关闭 open-on-click 的结构）
     结构：
     <li class="has-child open-on-hover-click ...">
        <a class="wp-block-navigation-item__content">Info</a>
        <button class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle">...</button>
        <ul class="wp-block-navigation__submenu-container ...">...</ul>
     </li>
     ========================= */

  header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  li.wp-block-navigation-item.has-child.open-on-hover-click{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 24px; /* 左：文字 右：箭头 */
    align-items: center;
    column-gap: 10px;
  }

  /* Info 文本（a）左列：右对齐 */
  header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  li.wp-block-navigation-item.has-child.open-on-hover-click
  > a.wp-block-navigation-item__content{
    grid-column: 1 / 2;
    display: block;
    width: 100%;
    text-align: right;
    padding: 10px 0;
  }

  /* 箭头按钮（button）右列：固定不换行 */
  header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  li.wp-block-navigation-item.has-child.open-on-hover-click
  > button.wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle{
    grid-column: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;

    cursor: pointer;
    outline: none;
    box-shadow: none;
  }

  /* =========================
     2) 子菜单：移动端点击控制显示
     ========================= */

  /* 默认隐藏（移动端 hover 不可靠） */
  header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  li.wp-block-navigation-item.has-child
  > ul.wp-block-navigation__submenu-container{
    display: none;
  }

  /* 点击后加 ddl-active 显示 */
  header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  li.wp-block-navigation-item.has-child.ddl-active
  > ul.wp-block-navigation__submenu-container{
    display: block;
  }

  /* 子菜单 ul 占下一行（grid 全宽），右对齐 + 层级缩进 */
  header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  li.wp-block-navigation-item.has-child.open-on-hover-click
  > ul.wp-block-navigation__submenu-container{
    grid-column: 1 / -1;
    width: 100%;
    margin: 6px 0 0;
    padding: 0 18px 0 0; /* ✅ 右侧缩进，形成层级 */
    box-sizing: border-box;
    text-align: right;
  }

  /* 子菜单项：不要 100% 宽 */
  header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  li.wp-block-navigation-item.has-child
  > ul.wp-block-navigation__submenu-container > li{
    width: auto;
  }

  /* 子菜单链接：更紧凑 */
  header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  li.wp-block-navigation-item.has-child
  > ul.wp-block-navigation__submenu-container > li > a{
    display: inline-block;
    width: auto;
    padding: 8px 0;
    text-align: right;
  }

  /* =========================
     3) 去掉移动端点击产生的 focus 蓝框（li:focus-within / button focus）
     ========================= */

  header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  li.wp-block-navigation-item:focus-within{
    outline: none !important;
    box-shadow: none !important;
  }

  header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  button.wp-block-navigation-submenu__toggle:focus,
  header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  button.wp-block-navigation-submenu__toggle:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }

  /* =========================
     4) 箭头旋转：支持 aria-expanded 或 ddl-active
     ========================= */
  header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  li.wp-block-navigation-item.has-child.ddl-active
  > button.wp-block-navigation-submenu__toggle svg{
    transform: rotate(180deg);
  }
}
/*Slider CSS*/



@media (max-width: 781px) {
  .is-mobile-keen.keen-slider {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important; /* spacing 交给 Keen */
    position: relative; /* 给箭头定位 */
    align-items: flex-start !important; /* 避免 stretch 拉高/压扁 */
  }


  .is-mobile-keen.keen-slider > * {
    flex: 0 0 auto;
    height: auto;
  }

  /* Slider 内的 wp-block-cover 使用固定宽高比 */
  .is-mobile-keen.keen-slider > .wp-block-cover {
    min-height: 0 !important; /* 移除 wp-block-cover 的默认 min-height */
    aspect-ratio: 16 / 9; /* 默认 16:9 比例 */
    position: relative;
    overflow: hidden;
  }

  /* 确保背景图片填充整个容器并裁剪 */
  .is-mobile-keen.keen-slider > .wp-block-cover .wp-block-cover__background,
  .is-mobile-keen.keen-slider > .wp-block-cover .wp-block-cover__image-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 裁剪图片以适应比例 */
  }

  /* 内容容器保持原有布局 */


  /* 可选的其他比例 class */
  .aspect-ratio-4-3 > .wp-block-cover {
    aspect-ratio: 4 / 3 !important;
  }

  .aspect-ratio-square > .wp-block-cover {
    aspect-ratio: 1 / 1 !important;
  }

  .aspect-ratio-21-9 > .wp-block-cover {
    aspect-ratio: 21 / 9 !important;
  }

  /* 箭头 20px */
  .is-mobile-keen .keen-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;

    border: 0;
    /* background: transparent; */
    padding: 0;
    line-height: 1;
    cursor: pointer;
    border-radius: 999px;
    font-size: 20px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
  }

  .is-mobile-keen .keen-arrow--left { left: 8px; }
  .is-mobile-keen .keen-arrow--right { right: 8px; }

  .is-mobile-keen .keen-arrow:disabled {
    opacity: 0.35;
    cursor: default;
  }
}

/*contact 页面 oder*/
@media (max-width: 781px) {
  .contact-wrap {
    flex-direction: column;
  }

  .contact-wrap .wp-block-column:has(.is-style-default) {
    order: 2;
  }

  .contact-wrap .wp-block-column:not(:has(.is-style-default)) {
    order: 1;
  }
}

/* ===== Project grid: PC 3 cols, mobile 2 cols ===== */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Gutenberg 常用移动端断点（你也可以用 768px） */
@media (max-width: 781px) {
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== Force each Cover to be 1:1 square (all breakpoints) ===== */
.project-grid > .wp-block-cover {
  aspect-ratio: 1 / 1;
  min-height: 0;     /* 覆盖 cover 默认 min-height */
  padding: 0;        /* 防止 padding 影响高度 */
  overflow: hidden;  /* 防止内容溢出破坏方形 */
}

/* 让封面背景图真正铺满正方形 */
.project-grid > .wp-block-cover .wp-block-cover__image-background {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 让标题容器覆盖整个方形，居中显示（不撑开高度） */
.project-grid > .wp-block-cover .wp-block-cover__inner-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* PC 默认：仍然走 Columns（flex），不做任何改动 */
/* 这里只写移动端切换为 grid */

@media (max-width: 781px) {
  /* 让这一组 Columns 在手机端变成 grid */
  .wp-block-columns.project-grid-4 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--30);
  }

  /* 取消 column 在 flex 下的宽度/伸缩干扰 */
  .wp-block-columns.project-grid-4 > .wp-block-column {
    width: auto;
    flex: none;
    margin: 0;
  }

  /* 确保 cover 在手机端保持 1:1 */
  .wp-block-columns.project-grid-4 .wp-block-cover {
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .wp-block-columns.project-grid-4 .wp-block-cover__image-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .wp-block-columns.project-grid-4 .wp-block-cover__inner-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}