/* ==========================================
   FeelFlow Theme - Common Styles
   ========================================== */

/* ==========================================
   Blog Section Styles
   ========================================== */
/* ブログ一覧の画像トリミング */
#blog .aspect-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

#blog .aspect-video img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* ==========================================
   About Section Styles
   ========================================== */
#about .w-24.h-1 {
    background: linear-gradient(to right, #ff6b35, #ff8c42, #ffa726) !important;
}

/* Feel Flowの説明文を強制的に左揃え */
#about .space-y-8 p {
    text-align: left !important;
}

/* カード内のレイアウトを調整 */
#about .value-card .card-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}
#about .value-card .description {
    width: 100% !important;
}
#about .value-card .description p {
    text-align: left !important;
}

/* ==========================================
   Values Grid Styles
   ========================================== */
@media (max-width: 768px) {
    .values-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    .values-grid .value-card {
        margin-bottom: 0 !important;
    }
    .values-grid .card-content {
        padding: 1.5rem !important;
    }
    .values-grid h4 {
        font-size: 1rem !important;
    }
    .values-grid p {
        font-size: 0.75rem !important;
    }
    .values-grid .w-16 {
        width: 3rem !important;
        height: 3rem !important;
    }
    .values-grid svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .values-grid {
        gap: 0.5rem !important;
    }
    .values-grid .card-content {
        padding: 1rem !important;
    }
    .values-grid p {
        font-size: 0.7rem !important;
    }
}

/* ==========================================
   Mission & Vision Cards Styles
   ========================================== */
/* カードの高さを統一 */
.mission-vision-cards > div {
    height: 100% !important;
}
.mission-vision-cards > div > div {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
.mission-vision-cards > div > div > div:last-child {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}
.mission-vision-cards .space-y-3 {
    margin-top: auto !important;
}
.mission-vision-cards .p-8,
.mission-vision-cards .lg\:p-10 {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

@media (max-width: 768px) {
    .mission-vision-cards {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }
    .mission-vision-cards .p-8,
    .mission-vision-cards .lg\:p-10 {
        padding: 1.5rem !important;
    }
    .mission-vision-cards .flex.items-center.gap-4 {
        flex-direction: column !important;
        gap: 0.5rem !important;
        text-align: center !important;
    }
    .mission-vision-cards h3 {
        font-size: 1.125rem !important;
    }
    .mission-vision-cards blockquote {
        font-size: 0.875rem !important;
        padding-left: 1rem !important;
        border-left-width: 3px !important;
    }
    .mission-vision-cards .space-y-3 {
        space-y: 0.5rem !important;
        margin-top: auto !important;
        padding-top: 1rem !important;
    }
    .mission-vision-cards .space-y-3 .flex {
        list-style: none !important;
    }
    .mission-vision-cards .space-y-3 .w-2 {
        display: none !important;
    }
    .mission-vision-cards .space-y-3 span {
        font-size: 0.75rem !important;
    }
    .mission-vision-cards .w-16 {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }
    .mission-vision-cards svg {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }
}

@media (max-width: 480px) {
    .mission-vision-cards {
        gap: 0.5rem !important;
    }
    .mission-vision-cards .p-8,
    .mission-vision-cards .lg\:p-10 {
        padding: 1rem !important;
    }
    .mission-vision-cards h3 {
        font-size: 1rem !important;
    }
    .mission-vision-cards p.text-sm {
        font-size: 0.65rem !important;
    }
    .mission-vision-cards blockquote {
        font-size: 0.7rem !important;
        margin-bottom: 0.75rem !important;
    }
    .mission-vision-cards .space-y-3 span {
        font-size: 0.65rem !important;
    }
    .mission-vision-cards .space-y-3 .w-2 {
        display: none !important;
    }
    .mission-vision-cards .w-16 {
        width: 3rem !important;
        height: 3rem !important;
    }
    .mission-vision-cards svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
}

/* ミッション・ビジョンカードのホバーエフェクトを完全に無効化 */
#mission-vision .relative.overflow-hidden,
#mission-vision .relative.overflow-hidden:hover,
#mission-vision .relative.overflow-hidden:active,
#mission-vision .relative.overflow-hidden:focus,
#mission-vision .rounded-xl,
#mission-vision .rounded-xl:hover,
#mission-vision .rounded-xl:active,
#mission-vision .rounded-xl:focus {
    transition: none !important;
    transform: none !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    background: rgba(255, 255, 255, 0.8) !important;
}

/* JavaScript効果も無効化 */
#mission-vision * {
    pointer-events: auto !important;
}

/* 全体的なカードホバー効果をミッション・ビジョンから除外 */
.card:hover {
    transition: all 0.3s ease;
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

#mission-vision .card,
#mission-vision .card:hover,
#mission-vision .card:active,
#mission-vision .card:focus {
    transition: none !important;
    transform: none !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* value-cardのホバーエフェクトを完全に無効化 */
.value-card,
.value-card:hover,
.value-card:active,
.value-card:focus {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
    background: white !important;
    border: 1px solid rgb(219 234 254) !important;
}

/* ==========================================
   Key Values Grid Styles
   ========================================== */
@media (max-width: 768px) {
    .key-values-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    .key-values-grid > div > div:first-child {
        width: 60px !important;
        height: 60px !important;
    }
    .key-values-grid svg {
        width: 2rem !important;
        height: 2rem !important;
    }
    .key-values-grid h4 {
        font-size: 1rem !important;
    }
    .key-values-grid p {
        font-size: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    .key-values-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    .key-values-grid > div > div:first-child {
        width: 50px !important;
        height: 50px !important;
    }
    .key-values-grid svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
}

/* ==========================================
   Services Section Styles
   ========================================== */
/* サービスセクションの光のエフェクト */
#services .light-sweep-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

#services .light-sweep-btn:hover::before {
    left: 100%;
}

/* ==========================================
   Services Grid Styles
   ========================================== */
/* 最高優先度でモバイルスタイルを適用 */
#services .feelflow-services-grid,
.feelflow-services-grid.grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
}

/* スマートフォンサイズで確実に1列 */
@media screen and (max-width: 767px) {
    #services .feelflow-services-grid,
    .feelflow-services-grid.grid,
    .feelflow-services-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* タブレット以上で2列 */
@media screen and (min-width: 768px) {
    #services .feelflow-services-grid,
    .feelflow-services-grid.grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }
}

/* デスクトップで3列 */
@media screen and (min-width: 1024px) {
    #services .feelflow-services-grid,
    .feelflow-services-grid.grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ==========================================
   Team Grid Styles
   ========================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: stretch;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
}

.team-card,
.team-card:hover,
.team-card:active,
.team-card:focus {
  background: rgba(255,255,255,0.97) !important;
  border: 1px solid #e0e7ef !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
  min-height: 450px !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 4px 16px -2px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04) !important;
  position: relative !important;
  transition: none !important;
  transform: none !important;
  cursor: default !important;
}

.team-card *,
.team-card:hover *,
.team-card:active *,
.team-card:focus * {
  transition: none !important;
  transform: none !important;
}

.team-avatar {
  width: 5rem; height: 5rem;
  border-radius: 50%;
  margin: 0 auto 0.5rem auto;
  object-fit: cover;
  background: #e5e7eb;
  display: block;
  position: relative;
  box-shadow: 0 2px 8px rgba(59,130,246,0.08);
}

.team-status-dot {
  position: absolute;
  bottom: 0.3rem;
  right: 0.3rem;
  width: 1rem;
  height: 1rem;
  background: #10b981;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.team-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: auto;
  margin-left: -2rem;
  margin-right: -2rem;
  padding: 1rem 3rem 0 3rem;
  position: relative;
}

.team-badges::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1rem;
  right: 1rem;
  height: 1px;
  background: #e5e7eb;
  width: calc(100% - 2rem);
}

.team-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  background: #f3f4f6;
  color: #374151;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  font-weight: 500;
}