/* Portfolio page — body.portfolio-page */

body.business.portfolio-page {
  background: var(--inftdes-bg);
  color: var(--inftdes-foreground);
}

body.business.portfolio-page .instagram-embed {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.business.portfolio-page .portfolio-section,
body.business.portfolio-page .content-section.portfolio-section {
  background: transparent !important;
}

/* 每行一條大橫條（圖左、文字右） */
body.business.portfolio-page #instafeed {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(1rem, 2.5vw, 1.5rem) !important;
  width: 100%;
  margin: 0;
  padding: 0 !important;
  align-items: stretch;
}

body.business.portfolio-page .insta-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: clamp(180px, 28vw, 240px) !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  text-decoration: none;
  color: inherit;
  background: var(--inftdes-surface) !important;
  border: 1px solid var(--inftdes-border) !important;
  border-radius: var(--radius-md, 10px) !important;
  overflow: hidden;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

body.business.portfolio-page .insta-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--inftdes-accent-rgb), 0.35) !important;
  box-shadow: var(--shadow-hover, 0 12px 28px rgba(0, 0, 0, 0.12)) !important;
}

body.business.portfolio-page .insta-card img {
  width: clamp(200px, 38%, 420px) !important;
  min-width: 200px !important;
  max-width: 420px !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 100% !important;
  align-self: stretch;
  aspect-ratio: auto !important;
  object-fit: cover;
  display: block;
}

body.business.portfolio-page .insta-card .insta-caption {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  font-size: var(--inftdes-text-body, 1.0625rem);
  line-height: 1.6;
  color: var(--inftdes-muted);
  padding: clamp(1rem, 3vw, 1.5rem) clamp(1.25rem, 4vw, 2rem) !important;
  border-top: none !important;
  border-left: 1px solid var(--inftdes-border) !important;
  white-space: normal;
  word-break: break-word;
}

body.business.portfolio-page .insta-video-badge {
  z-index: 3;
}

body.business.portfolio-page .instagram-more {
  margin-top: calc(var(--inftdes-grid-gap, 1.5rem) * 1.5);
  text-align: center;
}

body.business.portfolio-page .instagram-more a {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inftdes-accent);
}

body.business.portfolio-page .insta-loading,
body.business.portfolio-page .insta-error {
  width: 100%;
}

@media (max-width: 640px) {
  body.business.portfolio-page .insta-card {
    flex-direction: column !important;
    min-height: 0 !important;
  }

  body.business.portfolio-page .insta-card img {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
  }

  body.business.portfolio-page .insta-card .insta-caption {
    border-left: none !important;
    border-top: 1px solid var(--inftdes-border) !important;
    align-items: flex-start !important;
  }
}