/* Socials page (template-socials.php) — Instagram feed. Scoped by body class. */

.page-template-template-socials-php{ --maxw:1448px; } /* wide enough for five 280px tiles + four 12px gaps = 1448px */

/* ---- Hero: same full-bleed photo-behind-text treatment as the other pages ---- */
.page-template-template-socials-php .hero{
	position:relative; overflow:hidden; display:flex; align-items:center; min-height:505px;
	max-width:none; margin-left:0; margin-right:0; padding-top:0; padding-bottom:0;
	padding-left:max(var(--gutter), calc((100% - var(--maxw))/2));
	padding-right:max(var(--gutter), calc((100% - var(--maxw))/2));
}
.page-template-template-socials-php .hero > div:first-child{ position:relative; z-index:1; width:100%; max-width:610px; padding-block:50px; }
.page-template-template-socials-php .hero > .hero-art{
	position:absolute; top:0; right:0; bottom:0; z-index:0; width:60%;
	aspect-ratio:auto; max-width:none; border-radius:0; border:0; background:none;
}
.page-template-template-socials-php .hero > .hero-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-template-template-socials-php .hero:after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(90deg, #000 0%, #000 42%, rgba(13,26,31,.15) 65%, rgba(13,26,31,.45) 100%);
}
.page-template-template-socials-php .hero h1 b{ color:var(--accent); }
.page-template-template-socials-php .hero .hero-cta{ margin-top:20px; }
@media (max-width:900px){
	.page-template-template-socials-php .hero > div:first-child{ max-width:90%; padding-block:50px; }
	.page-template-template-socials-php .hero > .hero-art{ width:100%; }
	.page-template-template-socials-php .hero:after{ background:linear-gradient(180deg, rgba(13,26,31,.92), rgba(13,26,31,.6) 75%, rgba(13,26,31,.87)); }
}

/* ---- Sections: 1440 content width, 30px top/bottom, 15px eyebrows, 38.4px headings ---- */
.bm-socials, .bm-socials-follow{ padding-top:30px; padding-bottom:30px; }
.bm-socials .eyebrow, .bm-socials-follow .eyebrow{ font-size:15px; }
.bm-socials h2, .bm-socials-follow h2{ font-size:38.4px; font-weight:300; line-height:.9; color:var(--ink); }
.bm-socials h2 b, .bm-socials-follow h2 b{ font-size:inherit; color:var(--accent); font-weight:700; }
.bm-socials__head{ margin-bottom:24px; }

/* ---- Feed grid: three equal square tiles per row (two on phones) ---- */
.bm-socials__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.bm-socials__tile{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:var(--bg-panel); color:var(--ink); text-decoration:none; }
.bm-socials__tile > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.bm-socials__tile:hover > img, .bm-socials__tile:focus-visible > img{ transform:scale(1.05); }
.bm-socials__tile:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.bm-socials__badge{
	position:absolute; top:10px; right:10px; z-index:2; padding:3px 8px;
	font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
	background:rgba(13,26,31,.8); color:var(--ink);
}
/* Caption: revealed on hover/focus, fades up from the bottom over a dark gradient. */
.bm-socials__cap{
	position:absolute; left:0; right:0; bottom:0; z-index:1; display:flex; flex-direction:column; gap:6px; padding:44px 18px 16px;
	background:linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.6) 60%, rgba(0,0,0,0) 100%);
	opacity:0; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease;
}
.bm-socials__tile:hover .bm-socials__cap, .bm-socials__tile:focus-visible .bm-socials__cap{ opacity:1; transform:none; }
.bm-socials__date{ font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.bm-socials__text{ font-size:14px; line-height:1.38; color:var(--ink); }
@media (hover:none){ .bm-socials__cap{ opacity:1; transform:none; } }
@media (max-width:700px){ .bm-socials__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .bm-socials__text{ display:none; } }

.bm-socials__empty{ margin:0; }
.bm-socials__admin{ margin:12px 0 0; padding:10px 14px; border:1px dashed var(--rule); color:var(--ink-muted); font-size:14px; }

/* ---- Follow band: heading left, text + button right (50/50) ---- */
.bm-socials-follow{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
.bm-socials-follow__action p{ margin:0 0 16px; }
@media (max-width:820px){ .bm-socials-follow{ grid-template-columns:minmax(0,1fr); gap:20px; } }

/* Emoji in captions: WordPress swaps them for small <img class="emoji">; keep them inline and text-sized, not stretched over the tile. */
.bm-socials__cap img.emoji{ position:static; display:inline !important; width:1em !important; height:1em !important; margin:0 .08em; vertical-align:-.1em; transform:none !important; }

/* ---- Post viewer (lightbox): large picture or playing video on the left, full caption on the right ---- */
html.bm-lb-open{ overflow:hidden; }
.bm-lb[hidden]{ display:none; }
.bm-lb{
	position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; gap:12px;
	padding:56px 64px; background:rgba(13,26,31,.95);
}
.bm-lb__close, .bm-lb__nav{
	background:none; border:0; color:var(--ink); cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center; transition:color .15s ease;
}
.bm-lb__close:hover, .bm-lb__nav:hover, .bm-lb__close:focus-visible, .bm-lb__nav:focus-visible{ color:var(--accent); }
.bm-lb__close{ position:absolute; top:14px; right:18px; width:44px; height:44px; font-size:2.2rem; }
.bm-lb__nav{ flex:0 0 auto; width:48px; height:64px; font-size:2.6rem; }
.bm-lb__fig{
	margin:0; width:min(1100px,100%); max-height:100%; display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:28px; align-items:center;
}
.bm-lb__media{ display:flex; align-items:center; justify-content:center; min-width:0; background:#000; }
.bm-lb__media img, .bm-lb__media video{ display:block; max-width:100%; max-height:calc(100vh - 140px); width:auto; height:auto; object-fit:contain; }
.bm-lb__text{ min-width:0; max-height:calc(100vh - 140px); overflow-y:auto; padding-right:6px; }
.bm-lb__date{ display:block; margin-bottom:12px; font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.bm-lb__cap{ margin:0 0 20px; white-space:pre-line; color:var(--ink); font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
.bm-lb__link{ font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
.bm-lb__link:hover{ color:var(--ink); }
@media (max-width:820px){
	.bm-lb{ padding:52px 12px 12px; gap:0; align-items:flex-start; overflow-y:auto; }
	.bm-lb__fig{ grid-template-columns:minmax(0,1fr); gap:16px; }
	.bm-lb__media img, .bm-lb__media video{ max-height:60vh; }
	.bm-lb__text{ max-height:none; }
	.bm-lb__nav{ position:fixed; top:50%; transform:translateY(-50%); width:40px; height:56px; z-index:2; background:rgba(13,26,31,.6); }
	.bm-lb__prev{ left:0; } .bm-lb__next{ right:0; }
}

/* Every picture tile is 280 x 374px (3:4). As many as fit sit in a row (4 at the 1440px content width), left-aligned with the same 12px gap; on phones they flex to two across, keeping the same 280:374 shape. */
.bm-socials__grid{ grid-template-columns:repeat(auto-fill,280px); justify-content:start; }
.bm-socials__tile{ width:280px; aspect-ratio:280 / 374; }
@media (max-width:700px){
	.bm-socials__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.bm-socials__tile{ width:auto; }
}

/* A reel whose video file Instagram does not provide: the cover picture with a "Watch this reel on Instagram" button over it. */
.bm-lb__watch{ position:relative; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.bm-lb__watch img{ display:block; max-width:100%; max-height:calc(100vh - 140px); width:auto; height:auto; object-fit:contain; }
.bm-lb__watch-btn{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); display:inline-block; padding:12px 24px; background:var(--accent); color:var(--bg); font-family:'Oswald',sans-serif; font-size:15px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.bm-lb__watch:hover .bm-lb__watch-btn, .bm-lb__watch:focus-visible .bm-lb__watch-btn{ background:var(--ink); }
@media (max-width:900px){ .bm-lb__watch img{ max-height:60vh; } .bm-lb__watch-btn{ bottom:14px; padding:10px 16px; font-size:14px; } }