/**
 * Instagram投稿表示システム
 * @description Instagram投稿の横スクロール表示とカードスタイル（Instagram専用）
 * @version 10.0.0 - Instagram専用特化版
 */

/* ==========================================================================
   CSS変数 - Instagram専用
   ========================================================================== */
:root {
  /* Instagram投稿用の基本色 */
  --instagram-primary: #3b82f6;
  --instagram-white: #ffffff;
  --instagram-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --instagram-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
  --instagram-radius: 12px;
  --instagram-transition: all 0.2s ease;

  /* Instagram UI色 */
  --instagram-surface: #ffffff;
  --instagram-border: #e1e8ed;
  --instagram-hover: #f8fafc;
  --instagram-text-primary: #2c3e50;
  --instagram-text-secondary: #7f8c8d;
}

/* ==========================================================================
   Instagram投稿カード専用スタイル - 4:5比率&角丸版
   ========================================================================== */
.news-card.instagram-item {
  min-width: 320px;
  max-width: 400px;
  width: 340px;
  /* 4:5のアスペクト比を設定 */
  aspect-ratio: 4 / 5;
  height: auto;
  flex-shrink: 0;
  /* UIに馴染む角丸と軽い影を追加 */
  background: var(--instagram-white);
  border: none;
  border-radius: var(--instagram-radius);
  box-shadow: var(--instagram-shadow);
  /* ホバーエフェクト用のトランジション */
  transition: var(--instagram-transition);
  position: relative;
  cursor: pointer;
  /* タッチデバイス対応 */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* Instagram埋め込みを適切に表示 */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* パディングを削除してInstagram投稿をフルサイズ表示 */
  padding: 0;
  margin: 0;
  /* クリック領域を確実に設定 */
  pointer-events: auto;
  z-index: 1;
  /* Instagram投稿を角丸に合わせて切り取り */
  overflow: hidden;
}

/* PC版専用 - Instagram投稿カードの最適化 */
@media (min-width: 1024px) {
  .news-card.instagram-item {
    min-width: 340px;
    max-width: 400px;
    width: 360px;
    /* PC版でも4:5比率を維持 */
    aspect-ratio: 4 / 5;
    height: auto;
    /* 埋め込み要素を角丸に合わせて切り取り */
    overflow: hidden;
    /* ホバーエフェクトのトランジション */
    transition: var(--instagram-transition);
  }
}

/* ==========================================================================
   Instagram埋め込みコンテンツ - 統合版（4:5比率対応）
   ========================================================================== */

/* Instagram埋め込みコンテンツの基本設定 */
.news-card.instagram-item .post-embed {
  flex: 1;
  display: block;
  width: 100% !important;
  height: 100% !important;
  background: transparent;
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
  min-height: 100%;
  max-height: 100%;
  /* 4:5比率を確実に保持 */
  aspect-ratio: 4 / 5 !important;
}

/* Instagram埋め込み要素の統合設定 */
.news-card.instagram-item .post-embed .instagram-media {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  position: relative;
  top: 0;
  transform: none;
  border-radius: var(--instagram-radius) !important;
  overflow: hidden !important;
  /* 4:5比率を強制適用 */
  aspect-ratio: 4 / 5 !important;
}

/* Instagram blockquoteの統合設定 */
.news-card.instagram-item .post-embed .instagram-media blockquote {
  background: var(--instagram-white) !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  border-radius: var(--instagram-radius) !important;
  overflow: hidden !important;
  /* 4:5比率を強制適用 */
  aspect-ratio: 4 / 5 !important;
  /* フォントのリセット */
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  /* 表示を確実にする */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Instagram投稿ホバー・タッチエフェクト */
.news-card.instagram-item:hover,
.news-card.instagram-item:active {
  transform: translateY(-4px);
  box-shadow: var(--instagram-shadow-hover);
}

/* Instagram投稿オーバーレイ */
.news-card.instagram-item .instagram-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--instagram-transition);
  z-index: 10;
  border-radius: var(--instagram-radius);
}

@media (hover: hover) and (pointer: fine) {
  .news-card.instagram-item:hover .instagram-overlay {
    opacity: 1;
  }
}

.news-card.instagram-item.touch-active .instagram-overlay,
.news-card.instagram-item:active .instagram-overlay {
  opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
  .news-card.instagram-item.touch-active .instagram-overlay,
  .news-card.instagram-item:active .instagram-overlay {
    opacity: 1;
  }
  
  .news-card.instagram-item.touch-active .instagram-overlay-content,
  .news-card.instagram-item:active .instagram-overlay-content {
    transform: scale(1);
    opacity: 1;
  }
  
  .news-card.instagram-item.touch-active .instagram-overlay-icon,
  .news-card.instagram-item:active .instagram-overlay-icon {
    transform: scale(1);
  }
  
  .news-card.instagram-item.touch-active .instagram-overlay-text,
  .news-card.instagram-item:active .instagram-overlay-text {
    opacity: 1;
  }
  
  .news-card.instagram-item.touch-active .instagram-overlay-subtext,
  .news-card.instagram-item:active .instagram-overlay-subtext {
    opacity: 1;
  }
}

/* Instagram iframe の統合設定 */
.news-card.instagram-item .post-embed .instagram-media iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--instagram-radius) !important;
  background: var(--instagram-white);
  overflow: hidden;
  display: block;
  position: relative;
  z-index: 1;
  /* 4:5比率を強制適用 */
  aspect-ratio: 4 / 5 !important;
}

/* タッチアクティブ時のiframe調整 */
.news-card.instagram-item.touch-active .post-embed .instagram-media iframe,
.news-card.instagram-item:active .post-embed .instagram-media iframe {
  opacity: 0.8;
}

/* Instagram オーバーレイコンテンツ */
.news-card.instagram-item .instagram-overlay-content {
  text-align: center;
  color: var(--instagram-white);
  padding: 20px;
  transform: scale(0.9);
  transition: var(--instagram-transition);
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .news-card.instagram-item:hover .instagram-overlay-content {
    opacity: 1;
    transform: scale(1);
  }
}

.news-card.instagram-item.touch-active .instagram-overlay-content,
.news-card.instagram-item:active .instagram-overlay-content {
  opacity: 1;
  transform: scale(1);
}

.news-card.instagram-item .instagram-overlay-icon {
  font-size: 3rem;
  margin-bottom: 8px;
  display: block;
  transform: scale(0.8);
  transition: var(--instagram-transition);
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .news-card.instagram-item:hover .instagram-overlay-icon {
    transform: scale(1);
    opacity: 1;
  }
}

.news-card.instagram-item.touch-active .instagram-overlay-icon,
.news-card.instagram-item:active .instagram-overlay-icon {
  transform: scale(1);
  opacity: 1;
}

.news-card.instagram-item .instagram-overlay-text {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 4px;
  opacity: 0;
  transition: var(--instagram-transition);
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.5px;
}

@media (hover: hover) and (pointer: fine) {
  .news-card.instagram-item:hover .instagram-overlay-text {
    opacity: 1;
  }
}

.news-card.instagram-item.touch-active .instagram-overlay-text,
.news-card.instagram-item:active .instagram-overlay-text {
  opacity: 1;
}

.news-card.instagram-item .instagram-overlay-subtext {
  font-size: 0.9rem;
  opacity: 0;
  transition: var(--instagram-transition);
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.3px;
}

@media (hover: hover) and (pointer: fine) {
  .news-card.instagram-item:hover .instagram-overlay-subtext {
    opacity: 1;
  }
}

.news-card.instagram-item.touch-active .instagram-overlay-subtext,
.news-card.instagram-item:active .instagram-overlay-subtext {
  opacity: 1;
}

/* ==========================================================================
   Instagram横スクロール表示システム
   ========================================================================== */

.instagram-display {
  width: 100%;
  /* Instagram専用：横スクロールを許可 */
  overflow: visible !important;
  position: relative;
}

.instagram-display--scroll,
.instagram-posts-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 20px 0 30px 0;
  margin: 0 -10px;
  padding-left: 10px;
  padding-right: 10px;
}

@media (min-width: 1024px) {
  .instagram-display--scroll,
  .instagram-posts-scroll {
    gap: 24px;
    padding: 24px 0 32px 0;
  }

  .news-card.instagram-item .post-embed .instagram-media {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
  }

  .news-card.instagram-item .post-embed .instagram-media blockquote {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: var(--instagram-white) !important;
  }

  /* デスクトップ版はiframe統合設定を継承 */

  .news-card.instagram-item {
    min-width: 360px;
    width: 380px;
    max-width: 420px;
  }

  .news-card.instagram-item .post-embed .instagram-media,
  .news-card.instagram-item .post-embed .instagram-media blockquote {
    border-radius: var(--instagram-radius) !important;
    overflow: hidden !important;
  }

  .news-card.instagram-item .post-embed .instagram-media blockquote:not(:empty) {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

@media (max-width: 768px) {
  .instagram-display--scroll,
  .instagram-posts-scroll {
    gap: 18px;
    padding: 16px 0 24px 0;
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .instagram-display--scroll .news-card.instagram-item,
  .instagram-posts-scroll .news-card.instagram-item {
    /* タブレットでも大きめに表示 */
    min-width: 320px;
    width: 350px;
    max-width: 380px;
    /* 4:5のアスペクト比を確実に保持 */
    aspect-ratio: 4 / 5 !important;
    height: auto;
  }
}

@media (max-width: 480px) {
  .instagram-display--scroll,
  .instagram-posts-scroll {
    gap: 20px;
    padding: 16px 0 24px 0;
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .instagram-display--scroll .news-card.instagram-item,
  .instagram-posts-scroll .news-card.instagram-item {
    /* モバイルで1個表示サイズ - 画面幅のほぼ全体を使用 */
    min-width: calc(100vw - 60px);
    width: calc(100vw - 60px);
    max-width: calc(100vw - 60px);
    /* 4:5のアスペクト比を確実に保持 */
    aspect-ratio: 4 / 5 !important;
    height: auto;
    /* より目立つシャドウ */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  }

  /* モバイル版は基本設定を継承（統合済み） */
}

/* 小さなモバイル画面（360px以下）での最適化 */
@media (max-width: 360px) {
  .instagram-display--scroll,
  .instagram-posts-scroll {
    gap: 16px;
    padding: 12px 0 20px 0;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .instagram-display--scroll .news-card.instagram-item,
  .instagram-posts-scroll .news-card.instagram-item {
    /* 小さな画面でも1個表示サイズ */
    min-width: calc(100vw - 40px);
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    /* 4:5のアスペクト比を確実に保持 */
    aspect-ratio: 4 / 5 !important;
    height: auto;
    /* よりコンパクトなシャドウ */
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  }
}



/* ==========================================================================
   Instagram専用エラー・ローディング状態
   ========================================================================== */

.instagram-embed-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  background: #f8f9fa;
  border-radius: var(--instagram-radius);
  color: var(--instagram-text-secondary);
  text-align: center;
  padding: 20px;
}

.embed-error-content {
  text-align: center;
}

.embed-error-content i {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.6;
}

.embed-error-content p {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
}

.embed-error-content small {
  opacity: 0.7;
  font-size: 0.8rem;
}

/* Instagram認証エラー */
.instagram-auth-error {
  background: #fee;
  border: 1px solid #fcc;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  text-align: center;
}

.instagram-auth-error .error-content {
  max-width: 400px;
  margin: 0 auto;
}

.instagram-auth-error .error-icon {
  font-size: 3rem;
  color: #d32f2f;
  margin-bottom: 16px;
}

.instagram-auth-error h3 {
  color: #d32f2f;
  margin: 0 0 12px 0;
}

.instagram-auth-error p {
  color: #666;
  margin: 0 0 16px 0;
}

.instagram-auth-error .error-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.instagram-auth-error button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: var(--instagram-transition);
}

.instagram-auth-error .btn-primary {
  background: #1976d2;
  color: var(--instagram-white);
}

.instagram-auth-error .btn-outline {
  background: transparent;
  color: #1976d2;
  border: 1px solid #1976d2;
}

.instagram-auth-error button:hover {
  transform: translateY(-1px);
}

/* Instagram初期化エラー */
.instagram-init-error {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  text-align: center;
  color: #856404;
}

.instagram-init-error .error-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.8;
}

.instagram-init-error h3 {
  margin: 0 0 8px 0;
  font-size: 1.2rem;
}

.instagram-init-error p {
  margin: 0 0 16px 0;
  opacity: 0.9;
}

.instagram-init-error .error-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.instagram-init-error button {
  padding: 8px 16px;
  border: 1px solid #856404;
  background: transparent;
  color: #856404;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: var(--instagram-transition);
}

.instagram-init-error button:hover {
  background: #856404;
  color: var(--instagram-white);
}