/* =========================================================
   Vega — Instagram grid
   Inherits the site palette (--vg-primary etc.) when present,
   with fallbacks so the widget also works standalone.
   ========================================================= */

/* ---------- section ----------
   The block sits directly after whatever precedes it in the content
   flow, which left it flush against the element above. */
.vg-ig{ margin:3.5rem 0 0; }
.vg-ig:first-child{ margin-top:0; }

/* ---------- section heading ----------
   Matches the level-2 sub-section treatment used on the rest of the
   site: centred, gold rule underneath. */
.vg-ig-title{
  font-size:clamp(1.4rem,2.2vw,1.8rem); line-height:1.2; font-weight:800;
  letter-spacing:-.01em; text-transform:none;
  color:var(--vg-primary,#1f1d1a);
  text-align:center; max-width:24ch; margin:0 auto;
}
.vg-ig-title::after{
  content:""; display:block; width:40px; height:3px; border-radius:2px;
  background:var(--vg-accent,#c9932a); margin:.85rem auto 0;
}
/* 64ch ≈ 606px — the default lead needs 544px on one line, so this
   leaves room for a slightly longer sentence without wrapping, while
   staying inside the readable 60–75 character band.
   text-wrap:balance evens the lines out when it does wrap on narrow
   screens, instead of stranding a single word on line two. */
.vg-ig-lead{
  text-align:center; max-width:64ch; margin:1.1rem auto 0;
  color:var(--vg-body,#57534a); font-size:1.0625rem; line-height:1.7;
  text-wrap:balance;
}
.vg-ig-title + .vg-ig-grid,
.vg-ig-lead + .vg-ig-grid{ margin-top:2.2rem; }

.vg-ig-grid{
  display:grid;
  grid-template-columns:repeat(var(--vg-ig-cols,6),1fr);
  gap:12px;
}

/* ---------- carousel layout ----------
   Horizontal scroll-snap strip. Swipe and trackpad work with no
   JavaScript; the arrows are progressive enhancement. */
.vg-ig-strip{ position:relative; }

.vg-ig-grid--carousel{
  display:flex; gap:12px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  /* room for the hover glow — overflow-y:hidden would otherwise slice
     it flat along the bottom edge */
  padding:20px 6px 24px;
  scrollbar-width:thin;
  scrollbar-color:rgba(31,29,26,.28) transparent;
}
.vg-ig-grid--carousel::-webkit-scrollbar{ height:6px; }
.vg-ig-grid--carousel::-webkit-scrollbar-track{ background:transparent; }
.vg-ig-grid--carousel::-webkit-scrollbar-thumb{
  background:rgba(31,29,26,.25); border-radius:3px;
}
.vg-ig-grid--carousel .vg-ig-card{
  flex:0 0 auto;
  width:clamp(148px,17vw,196px);
  scroll-snap-align:start;
}

/* arrows
   Themes style bare <button> elements — Twenty Seventeen applies
   padding:0.7em 2em, and with box-sizing:border-box a padding wider
   than the declared width wins, which blew these up to 88x44. Reset
   the button defaults explicitly rather than relying on the width. */
.vg-ig-nav{
  -webkit-appearance:none; appearance:none;
  padding:0; margin:0; min-width:0; min-height:0;
  font-weight:400; letter-spacing:normal; text-transform:none;
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center; font-size:22px; line-height:1;
  background:var(--vg-primary,#1f1d1a); color:#fff;
  box-shadow:0 4px 14px rgba(31,29,26,.28);
  transition:background .18s, opacity .18s;
}
.vg-ig-nav:hover{ background:var(--vg-primary-d,#000); }
.vg-ig-nav:focus-visible{ outline:3px solid var(--vg-cta,#9a6516); outline-offset:2px; }
.vg-ig-nav[disabled]{ opacity:.25; cursor:default; }
.vg-ig-nav-prev{ left:-14px; }
.vg-ig-nav-next{ right:-14px; }
.vg-ig-strip.is-static .vg-ig-nav{ display:none; }

@media (max-width:760px){
  /* on touch the swipe is the interaction — arrows just take up room */
  .vg-ig-nav{ display:none; }
  .vg-ig-grid--carousel .vg-ig-card{ width:clamp(132px,42vw,168px); }
}
@media (prefers-reduced-motion:reduce){
  .vg-ig-grid--carousel{ scroll-behavior:auto; }
}
@media (max-width:1000px){ .vg-ig-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:700px){  .vg-ig-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){  .vg-ig-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }

/* border-box matters: aspect-ratio is applied to the border box, so
   without it the padded "see more" tile comes out shorter than the
   image cards (142 x 16/9 = 252px instead of 302px). */
.vg-ig-card{
  box-sizing:border-box;
  position:relative; display:block; aspect-ratio:9/16; overflow:hidden;
  border-radius:14px; background:#eceae5; border-bottom:0!important;
  text-decoration:none!important;
  transition:transform .22s ease, box-shadow .22s ease;
}
.vg-ig-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease;
}
.vg-ig-card:focus-visible{ outline:3px solid var(--vg-cta,#9a6516); outline-offset:3px; }

/* ---------- hover: a glow, not a lift ----------
   The old effect moved the card up 4px with a drop shadow. Two problems:
   the theme's `.entry-content a { transition: … }` is (0,2,0) and beat the
   plain `.vg-ig-card` rule, so `transform` was never animated and the card
   snapped; and in the carousel the scroller clipped the shadow's bottom
   flat, so it did not read as a shadow at all.
   A glow needs no movement and stays inside the card's own footprint. */
.vg-ig a.vg-ig-card{
  --vg-glow:201,147,42;                  /* accent, as RGB channels */
  transition:box-shadow .28s ease;
}
.vg-ig a.vg-ig-card:hover,
.vg-ig a.vg-ig-card:focus-visible{
  transform:none;
  box-shadow:
    0 0 0 3px rgba(var(--vg-glow),.55),
    0 0 16px 3px rgba(var(--vg-glow),.32);
}
.vg-ig a.vg-ig-card:hover img{ transform:scale(1.04); }

/* corner badges — glyphs are SVG (see Vega_Instagram_Widget::badge_icon)
   so they sit centred inside the circle at any size */
.vg-ig-badge{
  position:absolute; top:9px; right:9px; width:24px; height:24px;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(20,18,15,.55); color:#fff; pointer-events:none;
}
.vg-ig-badge-i{ width:13px; height:13px; display:block; }

/* ---------- trailing "see more" tile ----------
   Frosted glass over the first post that did not fit, so the tile
   reads as an item still hidden behind it. Falls back to a plain
   tint when every post is already visible. */
.vg-ig-more{
  display:grid; place-items:center; text-align:center; padding:14px;
  background:rgba(31,29,26,.05);
  border:1px solid rgba(31,29,26,.10);
  color:var(--vg-primary,#1f1d1a)!important;
  text-decoration:none!important;
}
/* the hidden post, blurred — a real <img>, not a background-image.
   Selector has to out-specify `.vg-ig-card img` above (0,1,1), which
   would otherwise reset width/height to 100% and kill the bleed. */
.vg-ig-more img.vg-ig-peek{
  position:absolute; inset:-12px;                 /* bleed, so the blur has no soft edge */
  width:calc(100% + 24px); height:calc(100% + 24px);
  max-width:none; object-fit:cover; display:block;
  filter:blur(9px) saturate(.85);
  transform:scale(1.06);
}
/* and keep it put on hover, where `.vg-ig-card:hover img` would scale it */
.vg-ig-more:hover img.vg-ig-peek{ transform:scale(1.06); }
/* the glass itself */
.vg-ig-veil{
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.55));
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.vg-ig-more-inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
}
.vg-ig-more-inner span{ font-size:.78rem; font-weight:700; line-height:1.3; letter-spacing:.02em; }
.vg-ig-more .vg-ig-glyph{ width:26px; height:26px; }
.vg-ig-more:hover .vg-ig-veil{
  background:linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.44));
}
/* no hidden post to show → keep it light rather than a dark block */
.vg-ig-more:not(.has-peek){ background:rgba(31,29,26,.06); }

/* Instagram mark — Bootstrap Icons (MIT), inlined as SVG.
   fill="currentColor", so it follows the surrounding text colour. */
.vg-ig-glyph{
  display:inline-block; width:18px; height:18px; flex:0 0 auto;
  vertical-align:-3px;
}

/* follow button */
.vg-ig-foot{ text-align:center; margin:1.9rem 0 0; }
.vg-ig-follow{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:13px 30px; border-radius:9999px;
  border:2px solid var(--vg-primary,#1f1d1a);
  color:var(--vg-primary,#1f1d1a)!important;
  font-weight:700; font-size:1rem; text-decoration:none!important;
  background:transparent;
  transition:background .18s, color .18s, transform .18s;
}
.vg-ig-follow:hover{
  background:var(--vg-primary,#1f1d1a); color:#fff!important; transform:translateY(-2px);
}

@media (prefers-reduced-motion:reduce){
  /* keep the glow — it is a colour change, not motion — but drop the
     zoom and any easing */
  .vg-ig-card, .vg-ig-card img, .vg-ig-follow{ transition:none; }
  .vg-ig a.vg-ig-card{ transition:none; }
  .vg-ig-follow:hover{ transform:none; }
  .vg-ig a.vg-ig-card:hover img{ transform:none; }
}