/* ============================================================
   Sol Home – Instagram Integration
   Prefix: sol-ig-
   ============================================================ */

:root {
  --ig-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --ig-pink: #e1306c;
  --ig-purple: #833ab4;
}

/* ── Shared icon ─────────────────────────────────────────── */
.sol-ig-icon-wrap,
.sol-ig-cta__icon-wrap,
.sol-ig-bar__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ig-gradient);
  border-radius: 22px;
  flex-shrink: 0;
}
.sol-ig-icon-wrap svg,
.sol-ig-cta__icon-wrap svg,
.sol-ig-bar__icon-wrap svg { fill: #fff; }

/* ── Instagram follow button ─────────────────────────────── */
.sol-ig-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.8rem;
  border-radius: 999px;
  background: var(--ig-gradient);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 12px 32px rgba(188, 24, 136, .3);
}
.sol-ig-btn svg { width: 20px; height: 20px; fill: #fff; }
.sol-ig-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(188, 24, 136, .4); }
.sol-ig-btn--lg { padding: 1.1rem 2.2rem; font-size: 1.05rem; }


/* ============================================================
   Instagram CTA – Banner (page-sekoujirei)
   ============================================================ */
.sol-ig-cta--banner {
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, .06);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  padding: 3rem 1.5rem;
}

.sol-ig-cta--banner .sol-ig-cta__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.sol-ig-cta--banner .sol-ig-cta__icon-wrap {
  width: 72px;
  height: 72px;
}
.sol-ig-cta--banner .sol-ig-cta__icon-wrap svg { width: 44px; height: 44px; }

.sol-ig-cta__text { flex: 1; }

.sol-ig-cta__label {
  font-size: .85rem;
  font-weight: 700;
  color: var(--ig-pink);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 .4rem;
}
.sol-ig-cta__title {
  font-size: 1.5rem;
  font-weight: 900;
  margin: 0 0 .5rem;
}
.sol-ig-cta__desc {
  margin: 0;
  font-size: .95rem;
  color: #4a5568;
  line-height: 1.8;
}


/* ============================================================
   Instagram CTA – Before Footer (front-page)
   ============================================================ */
.sol-ig-cta--before-footer {
  background: linear-gradient(135deg, #1a0830 0%, #2d1257 50%, #1a0830 100%);
  color: #fff;
  padding: 5rem 1.5rem;
  text-align: center;
}

.sol-ig-cta--before-footer .sol-ig-cta__inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.sol-ig-cta--before-footer .sol-ig-cta__icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 24px;
}
.sol-ig-cta--before-footer .sol-ig-cta__icon-wrap svg { width: 50px; height: 50px; }

.sol-ig-cta--before-footer .sol-ig-cta__label { color: rgba(255, 255, 255, .7); }

.sol-ig-cta--before-footer .sol-ig-cta__title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: #fff;
}
.sol-ig-cta--before-footer .sol-ig-cta__title strong { color: #fcaf45; }

.sol-ig-cta--before-footer .sol-ig-cta__desc { color: rgba(255, 255, 255, .82); max-width: 680px; }

.sol-ig-br-pc { display: none; }

@media (min-width: 769px) {
  .sol-ig-br-pc { display: inline; }
}


/* ============================================================
   Instagram Feed Section (front-page)
   ============================================================ */
.sol-ig-feed {
  background: #f8f9fc;
  padding: 5rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.sol-ig-feed__container { max-width: 1100px; margin: 0 auto; }

.sol-ig-feed__header { text-align: center; margin-bottom: 2.5rem; }

.sol-ig-feed__eyebrow {
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--ig-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 .75rem;
}

.sol-ig-feed__title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  margin: 0 0 .75rem;
  color: #111;
}
.sol-ig-feed__title strong { color: var(--ig-pink); }

.sol-ig-feed__subtitle {
  font-size: 1rem;
  color: #4a5568;
  margin: 0 0 1.25rem;
  line-height: 1.8;
}

.sol-ig-feed__handle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .95rem;
  font-weight: 800;
  color: var(--ig-purple);
  text-decoration: none;
}
.sol-ig-feed__handle svg { width: 18px; height: 18px; fill: var(--ig-purple); }
.sol-ig-feed__handle:hover { text-decoration: underline; }

/* Grid – PC 3列 */
.sol-ig-feed__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}

/* Actual embed items */
.sol-ig-feed__grid--embeds .sol-ig-feed__item {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}
.sol-ig-feed__item .instagram-media {
  width: 100% !important;
  min-width: unset !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Placeholder items */
.sol-ig-feed__placeholder-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  gap: .65rem;
  padding: 1.25rem;
  border-radius: 16px;
  background: #fff;
  border: 2px dashed rgba(188, 24, 136, .22);
  text-decoration: none;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
}
.sol-ig-feed__placeholder-link:hover {
  transform: scale(1.03);
  border-color: rgba(188, 24, 136, .55);
  background: linear-gradient(135deg, rgba(188,24,136,.04) 0%, rgba(247,119,55,.04) 100%);
}

.sol-ig-feed__placeholder-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--ig-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease;
}
.sol-ig-feed__placeholder-link:hover .sol-ig-feed__placeholder-icon { transform: scale(1.1); }
.sol-ig-feed__placeholder-icon svg { width: 30px; height: 30px; fill: #fff; }

.sol-ig-feed__placeholder-label {
  font-size: .9rem;
  font-weight: 800;
  color: var(--ig-purple);
  text-align: center;
}
.sol-ig-feed__placeholder-sub {
  font-size: .78rem;
  color: #888;
  text-align: center;
}

/* Footer link */
.sol-ig-feed__footer { text-align: center; }
.sol-ig-feed__all-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 2rem;
  border-radius: 999px;
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
              var(--ig-gradient) border-box;
  color: var(--ig-purple);
  font-weight: 800;
  font-size: .95rem;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.sol-ig-feed__all-link svg { width: 20px; height: 20px; fill: var(--ig-purple); transition: fill .25s ease; }
.sol-ig-feed__all-link:hover {
  background: var(--ig-gradient) padding-box,
              var(--ig-gradient) border-box;
  color: #fff;
  transform: translateY(-2px);
}
.sol-ig-feed__all-link:hover svg { fill: #fff; }


/* ============================================================
   Instagram Bar (single-sekoujirei)
   ============================================================ */
.sol-ig-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: linear-gradient(135deg, #fdf0ff 0%, #fff0f8 100%);
  border: 1.5px solid rgba(188, 24, 136, .18);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  margin: 2.5rem auto;
}

.sol-ig-bar__icon-wrap {
  width: 54px;
  height: 54px;
  border-radius: 16px;
}
.sol-ig-bar__icon-wrap svg { width: 32px; height: 32px; }

.sol-ig-bar__text { flex: 1; }
.sol-ig-bar__label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ig-pink);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 .3rem;
}
.sol-ig-bar__title { font-size: 1.05rem; font-weight: 800; margin: 0 0 .25rem; }
.sol-ig-bar__desc { font-size: .88rem; color: #4a5568; margin: 0; line-height: 1.7; }

.sol-ig-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .75rem 1.4rem;
  border-radius: 999px;
  background: var(--ig-gradient);
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(188, 24, 136, .28);
}
.sol-ig-bar__btn svg { width: 18px; height: 18px; fill: #fff; }
.sol-ig-bar__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(188, 24, 136, .4); }


/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .sol-ig-cta--banner .sol-ig-cta__inner {
    flex-direction: column;
    text-align: center;
  }
  .sol-ig-btn { justify-content: center; }
}

@media (max-width: 768px) {
  .sol-ig-feed__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .sol-ig-bar { flex-direction: column; text-align: center; }
  .sol-ig-bar__btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .sol-ig-feed { padding: 3.5rem 1rem; }
  .sol-ig-cta--banner { padding: 2.5rem 1rem; }
  .sol-ig-feed__grid { gap: .5rem; }
  .sol-ig-feed__placeholder-label { font-size: .8rem; }
  .sol-ig-feed__placeholder-sub { display: none; }
}