/* =============================================
   SGSSIN – Golden Frame System
   Apply to all image cards across site
   ============================================= */

/* ── BASE FRAME ── */
.sgs-frame {
  position: relative;
  overflow: hidden;
  border: 2.5px solid #c9a84c;
  border-radius: 5px;
  background: #0f1a3e;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  display: block;
}
.sgs-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.sgs-frame:hover img { transform: scale(1.05); }

/* Corner accents */
.sgs-frame .c {
  position: absolute;
  width: 13px; height: 13px;
  border-color: #c9a84c;
  border-style: solid;
  z-index: 3;
  pointer-events: none;
}
.sgs-frame .c.tl { top:6px;    left:6px;   border-width: 2px 0 0 2px; }
.sgs-frame .c.tr { top:6px;    right:6px;  border-width: 2px 2px 0 0; }
.sgs-frame .c.bl { bottom:6px; left:6px;   border-width: 0 0 2px 2px; }
.sgs-frame .c.br { bottom:6px; right:6px;  border-width: 0 2px 2px 0; }

/* Name badge — gradient overlay at bottom */
.sgs-frame .f-badge {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(15,26,62,0.92) 0%, transparent 100%);
  padding: 24px 10px 10px;
  text-align: center;
  pointer-events: none;
}
.sgs-frame .f-badge span {
  display: block; font-size: 11.5px; font-weight: 700;
  color: #fff; line-height: 1.35;
  font-family: 'Poppins', sans-serif;
}
.sgs-frame .f-badge em {
  display: block; font-size: 10px; font-style: normal;
  color: #c9a84c; font-weight: 700; margin-top: 3px;
  font-family: 'Poppins', sans-serif;
}

/* ── ASPECT RATIOS ── */
.sgs-portrait  { aspect-ratio: 3 / 4; }  /* Gurus, people */
.sgs-landscape { aspect-ratio: 4 / 3; }  /* Gurdwaras, places */
.sgs-square    { aspect-ratio: 1 / 1; }  /* Kakaar items */
.sgs-wide      { aspect-ratio: 16 / 9; } /* Wide scene */

/* ── CARDS WITH CAPTION BELOW ── */
.sgs-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.sgs-card .f-caption {
  margin-top: 8px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}
.sgs-card .f-caption strong {
  display: block; font-size: 13px; font-weight: 700;
  color: #1a2a5e; line-height: 1.35;
}
.sgs-card .f-caption span {
  display: block; font-size: 11px;
  color: #555; margin-top: 2px;
}
.sgs-card .f-caption em {
  display: block; font-size: 10.5px; font-style: normal;
  color: #c9a84c; font-weight: 700; margin-top: 2px;
}

/* ── OFFICE BEARER CARD ── */
.ob-frame-card {
  text-align: center;
  background: #f8f5ef;
  border-radius: 8px;
  padding: 18px 14px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
  transition: transform .2s;
}
.ob-frame-card:hover { transform: translateY(-3px); }
.ob-frame-wrap {
  width: 100px; height: 100px;
  margin: 0 auto 12px;
  position: relative;
  border: 2.5px solid #c9a84c;
  border-radius: 50%;
  overflow: hidden;
  background: #0f1a3e;
}
.ob-frame-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
}
/* Corner accents for circular — small diamonds at 4 points */
.ob-frame-wrap::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(201,168,76,0.4);
  z-index: 2;
}
.ob-frame-card h3 { font-size: 13px; color: #1a2a5e; font-weight: 700; margin-bottom: 5px; line-height: 1.4; }
.ob-frame-card p  { font-size: 11px; color: #e07b30; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; line-height: 1.4; }

/* ── GRIDS ── */
.sgs-grid-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 18px; }
.sgs-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.sgs-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.sgs-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .sgs-grid-5 { grid-template-columns: repeat(4,1fr); }
  .sgs-grid-4 { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 768px) {
  .sgs-grid-5 { grid-template-columns: repeat(3,1fr); gap: 12px; }
  .sgs-grid-4 { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .sgs-grid-3 { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .ob-frame-wrap { width: 80px; height: 80px; }
}
@media (max-width: 480px) {
  .sgs-grid-5 { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .sgs-grid-4 { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .sgs-grid-3 { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .ob-frame-wrap { width: 70px; height: 70px; }
  .sgs-frame .c { width:10px; height:10px; }
}