/* Scoped Instagram templates; the surrounding Works grid stays unchanged. */
.l-instagram-strip { --strip-columns: 6; --strip-gap: 12px; min-width: 0; width: 100%; box-sizing: border-box; overflow: hidden; margin: 12px 0; padding: clamp(16px,2.5vw,40px) 0 0; background: #f2e9e6; border-radius: var(--card-radius,20px); color: #0a0a0a; }
.l-case-block .l-instagram-strip { margin: 0; }
.l-instagram-strip__gallery { position: relative; margin: 0 clamp(12px,2.5vw,40px); }
.l-instagram-strip__track { display: flex; gap: var(--strip-gap); overflow-x: auto; min-width: 0; width: 100%; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.l-instagram-strip__track::-webkit-scrollbar { display: none; }
.l-instagram-strip__card { display: block; position: relative; flex: 0 0 calc((100% - (var(--strip-columns) - 1)*var(--strip-gap))/var(--strip-columns)); aspect-ratio: 3 / 4; min-width: 0; overflow: hidden; border-radius: 14px; scroll-snap-align: start; background: #fff; color: #111; }
.l-instagram-strip__card .l-instagram-preview { background: #fff; }
.l-instagram-strip__gallery > button { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.93); color: #111; font: 30px/1 Arial,sans-serif; cursor: pointer; box-shadow: 0 1px 8px #0002; }
.l-instagram-strip__prev { left: 12px; }
.l-instagram-strip__next { right: 12px; }
.l-instagram-strip__gallery > button:disabled { opacity: .3; cursor: default; }
.l-instagram-strip__follow { margin-top: clamp(24px,4vw,64px); padding: 0 0 28px; overflow: hidden; }
.l-instagram-strip__marquee { display: flex; width: max-content; animation: instagram-follow 32s linear infinite; }
.l-instagram-strip__follow-group { display: flex; flex-shrink: 0; gap: 28px; padding-right: 28px; }
.l-instagram-strip__follow a { white-space: nowrap; font-size: clamp(13px,1.2vw,18px); }
.l-instagram-strip:has(.l-instagram-strip__gallery:last-child) { padding-bottom: clamp(16px,2.5vw,40px); }
.l-instagram-strip:hover .l-instagram-strip__marquee, .l-instagram-strip:focus-within .l-instagram-strip__marquee { animation-play-state: paused; }
.l-instagram-strip a:focus-visible, .l-instagram-strip button:focus-visible, .l-instagram-strip__track:focus-visible { outline: 2px solid #ef7400; outline-offset: -3px; }
@keyframes instagram-follow { to { transform: translateX(-50%); } }
@media (max-width:1200px) { .l-instagram-strip { --strip-columns: 4; } }
@media (max-width:768px) { .l-instagram-strip { --strip-columns: 2; --strip-gap: 10px; } .l-instagram-strip__gallery > button { width: 32px; height: 32px; } }
@media (prefers-reduced-motion:reduce) { .l-instagram-strip__marquee { animation: none; } }
.l-instagram-preview { position: relative; width: 100%; height: 100%; overflow: hidden; background: #f2f2f2; }
.l-instagram-preview iframe { position: absolute; top: 0; left: 0; width: 540px; height: 1000px; border: 0; transform: scale(var(--instagram-scale, 1)); transform-origin: top left; pointer-events: none; }
.l-instagram-preview__fallback { display: grid; place-items: center; width: 100%; height: 100%; color: #555; font-size: 14px; }
.l-instagram-preview__badge { position: absolute; bottom: 10px; right: 10px; padding: 5px 9px; border-radius: 20px; background: #0a0a0a; color: #fff; font-size: 10px; }
.l-instagram-work { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--grid-gap,12px); padding: clamp(24px,4vw,60px) 0; }
.work-page .l-instagram-work { padding-top: calc(var(--nav-h,72px) + 12px + clamp(24px,4vw,60px)); }
.l-instagram-work__intro { grid-column: 1 / -1; min-width: 0; padding: 0 var(--gutter,24px) 24px; text-align: center; }
.l-instagram-work__intro h1 { margin: 16px 0; font-size: clamp(24px,3.5vw,54px); line-height: 1.15; overflow-wrap: anywhere; }
.l-instagram-work__intro p { max-width: 65ch; margin: 12px auto; line-height: 1.6; }
.l-instagram-work__source { display: inline-block; margin-top: 8px; padding: 12px 20px; border-radius: 28px; background: #0a0a0a; color: #fff; font-size: 14px; }
.l-instagram-work__intro .l-instagram-work__notice { color: #777; font-size: 12px; }
.l-instagram-work__stage { grid-column: 1 / -1; min-width: 0; }
.l-instagram-posts { display: grid; gap: 24px var(--grid-gap,12px); align-items: start; min-width: 0; }
.l-instagram-post { min-width: 0; margin: 0; }
.l-instagram-post__source { display: block; width: fit-content; max-width: 100%; margin: 12px auto 0; padding: 8px 12px; color: inherit; font-size: 12px; text-align: center; }
.l-instagram-work--grid .l-instagram-posts { grid-template-columns: repeat(2,minmax(0,1fr)); }
.l-instagram-work--grid-four .l-instagram-posts { grid-template-columns: repeat(4,minmax(0,1fr)); }
.l-instagram-work--slider .l-instagram-posts { display: flex; max-width: 540px; margin: auto; gap: var(--grid-gap,12px); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 12px; }
.l-instagram-work--slider .l-instagram-post { flex: 0 0 min(540px,100%); scroll-snap-align: start; }
.l-instagram-slider__controls { display: flex; justify-content: center; align-items: center; gap: 24px; margin-bottom: 24px; }
.l-instagram-slider__controls button { width: 44px; height: 44px; border: 0; border-radius: 50%; color: #fff; background: #0a0a0a; cursor: pointer; }
.l-instagram-slider__controls button:disabled { opacity: .3; cursor: default; }
.l-instagram-slider__controls span { font-size: 13px; font-variant-numeric: tabular-nums; }
.l-instagram-posts:focus-visible, .l-instagram-slider__controls button:focus-visible { outline: 2px solid #ef7400; outline-offset: 3px; }
@media (max-width:1399px) { .l-instagram-work--grid-four .l-instagram-posts { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) {
  .l-instagram-work--grid .l-instagram-posts, .l-instagram-work--grid-four .l-instagram-posts { grid-template-columns: minmax(0,1fr); }
}
.l-instagram-live { position: relative; width: 100%; max-width: 540px; margin: 0 auto; overflow: hidden; }
.l-instagram-live__canvas { width: 100%; transform-origin: top left; }
.l-instagram-live .instagram-media { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 540px !important; margin: 0 !important; }
.l-instagram-live blockquote { min-height: 340px; display: grid; place-items: center; background: #f2f2f2; border-radius: 12px; }
.l-instagram-work--showcase .l-instagram-work__stage { padding: clamp(16px,4vw,64px); border-radius: var(--card-radius,20px); background: #f2f2f2; }
.l-instagram-work--split .l-instagram-work__intro { grid-column: 3 / span 2; grid-row: 1; text-align: left; align-self: center; }
.l-instagram-work--split .l-instagram-work__intro p { margin-left: 0; }
.l-instagram-work--split.l-instagram-work--multiple .l-instagram-work__intro { align-self: start; }
.l-instagram-work--split .l-instagram-work__stage { grid-column: 1 / span 2; grid-row: 1; }
@media (max-width:768px) {
  .l-instagram-work--split .l-instagram-work__intro,
  .l-instagram-work--split .l-instagram-work__stage { grid-column: 1 / -1; grid-row: auto; }
  .l-instagram-work--split .l-instagram-work__intro { text-align: center; }
  .l-instagram-work--split .l-instagram-work__intro p { margin-left: auto; }
}
/* Admin controls share the existing panel spacing and typography. */
.a-instagram-layouts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 0; margin: 24px 0; border: 0; }
.a-instagram-layouts legend { margin-bottom: 12px; font-weight: 700; }
.a-instagram-layout { display: flex; align-items: flex-start; gap: 8px; padding: 16px; border: 1px solid var(--border,#ddd); border-radius: 12px; cursor: pointer; }
.a-instagram-layout:has(input:checked) { border-color: var(--orange,#ef7400); background: rgba(239,116,0,.06); }
.a-instagram-layout input { margin-top: 4px; flex: 0 0 auto; }
.a-instagram-layout > span { flex: 1; min-width: 0; }
.a-instagram-layout strong { display: block; line-height: 1.3; }
.a-instagram-layout small { display: block; margin-top: 8px; color: var(--gray,#777); line-height: 1.5; }
.a-instagram-caption { display: flex; align-items: center; gap: 10px; margin: 16px 0; font-size: .85rem; }
.a-instagram-preview { background: #fff; color: #0a0a0a; border-radius: 12px; overflow: hidden; padding: 16px; }
.a-instagram-preview .l-instagram-work { padding: 8px 0; }
.a-instagram-preview .l-instagram-work__intro h1 { font-size: clamp(22px,2.4vw,36px); }
@media (max-width:1000px) { .a-instagram-layouts { grid-template-columns: 1fr; } }
.a-instagram-url-rows { display: grid; gap: 16px; margin: 20px 0; }
.a-instagram-url-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; min-width: 0; }
.a-instagram-url-row label { grid-column: 1 / -1; font-size: 12px; font-weight: 700; }
.a-instagram-url-row input { width: 100%; min-width: 0; }
.a-instagram-url-actions { display: flex; gap: 6px; }
.a-social-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.a-social-gallery__card { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; }
.a-social-gallery__card h2 { font-size: 22px; margin: 0; }
.a-social-gallery__card p { color: var(--gray,#777); line-height: 1.6; margin: 0; }
.a-social-gallery__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.a-social-diagram { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows: 25px; gap: 7px; background: #e9e9e9; border-radius: 10px; padding: 18px; overflow: hidden; margin-bottom: 12px; }
.a-social-diagram i { display: block; background: #ef7400; border-radius: 5px; min-height: 25px; }
.a-social-diagram--compact i, .a-social-diagram--showcase i { grid-column: 2 / 4; }
.a-social-diagram--showcase { border: 10px solid #d7d7d7; padding: 8px; }
.a-social-diagram--split i { grid-column: 1 / 3; }
.a-social-diagram--split { position: relative; }
.a-social-diagram--split::after { content: ''; position: absolute; top: 40%; right: 10%; width: 28%; height: 25px; border-top: 7px solid #aaa; border-bottom: 7px solid #aaa; }
.a-social-diagram--grid i { grid-column: span 2; min-height: 52px; }
.a-social-diagram--grid { grid-auto-rows: 52px; }
.a-social-diagram--grid-four i { min-height: 112px; }
.a-social-diagram--grid-four { grid-auto-rows: 112px; }
.a-social-diagram--slider { display: flex; }
.a-social-diagram--slider i { flex: 0 0 38%; height: 112px; }
@media (max-width:1100px) { .a-social-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:650px) {
  .a-social-gallery { grid-template-columns: minmax(0,1fr); }
  .a-instagram-url-row { grid-template-columns: minmax(0,1fr); }
}
