/* ===========================================================
   gallery.css — Material Design 3 inspired styles
   - Admin + Frontend gallery UI
   - Replaces inline CSS from gallery.php
   =========================================================== */

/* -------------------------
   Design tokens (MD3-like)
   ------------------------- */
:root{
  --md-sys-bg: #ffffff;
  --md-sys-surface: #ffffff;
  --md-sys-on-surface: #111827;
  --md-primary: #1e88e5;        /* blue */
  --md-primary-variant: #135e96;
  --md-secondary: #7c4dff;      /* purple */
  --md-outline: #e6e9ee;
  --md-success: #1e7a3a;
  --md-error: #c62828;
  --md-surface-variant: #f6f7f9;
  --md-elevation-1: 0 1px 2px rgba(16,24,40,0.06), 0 1px 3px rgba(16,24,40,0.08);
  --md-elevation-2: 0 6px 18px rgba(16,24,40,0.08);
  --md-radius: 12px;
  --md-radius-sm: 8px;
  --md-gap: 12px;
  --md-font: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --md-transition: 180ms cubic-bezier(.2,.9,.2,1);
}

/* -------------------------
   Base / Typography
   ------------------------- */
*{box-sizing:border-box}
html,body{font-family:var(--md-font); color:var(--md-sys-on-surface); background:transparent}
a{color:var(--md-primary); text-decoration:none}
a:hover{text-decoration:underline}

/* -------------------------
   Admin Panel (card)
   ------------------------- */
.pg-admin-panel{
  background:var(--md-surface);
  border:1px solid var(--md-outline);
  border-radius:var(--md-radius);
  padding:20px;
  box-shadow:var(--md-elevation-1);
  margin-bottom:24px;
  color:var(--md-sys-on-surface);
  line-height:1.4;
}

.pg-admin-panel h3{
  margin:0 0 14px 0;
  font-size:18px;
  font-weight:600;
  color:var(--md-sys-on-surface);
  padding-bottom:6px;
  border-bottom:1px solid var(--md-surface-variant);
}

/* Instruction box */
.pg-instruction{
  background:linear-gradient(180deg, rgba(30,136,229,0.05), rgba(30,136,229,0.02));
  border-left:4px solid var(--md-primary);
  padding:14px;
  border-radius:6px;
  margin-bottom:18px;
  font-size:14px;
  color:var(--md-sys-on-surface);
}

/* -------------------------
   Form rows / inputs
   ------------------------- */
.pg-meta-row{margin-bottom:14px}
.pg-meta-row label{display:block; font-weight:600; margin-bottom:8px; font-size:13px; color:rgba(17,24,39,0.9)}

.pg-select-ratio{
  width:100%;
  max-width:320px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--md-outline);
  background:var(--md-surface);
  font-size:14px;
  color:var(--md-sys-on-surface);
  transition:border-color var(--md-transition);
}
.pg-select-ratio:focus{outline:none; border-color:var(--md-primary); box-shadow:0 0 0 4px rgba(30,136,229,0.06)}

/* Links wrap & rows */
.pg-links-wrap{margin-bottom:12px}
.pg-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}
.pg-row input[type="text"],
.pg-row input[type="url"]{
  flex:1;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--md-outline);
  font-size:14px;
  transition:box-shadow var(--md-transition), border-color var(--md-transition);
  background:linear-gradient(180deg, #fff, #fbfbfd);
}
.pg-row input:focus{
  outline:none;
  border-color:var(--md-primary);
  box-shadow:0 4px 14px rgba(30,136,229,0.08);
}

/* -------------------------
   Buttons (MD3-ish)
   ------------------------- */
.pg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  font-size:13px;
  font-weight:600;
  border-radius:10px;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform 140ms ease, box-shadow var(--md-transition), background var(--md-transition);
  gap:8px;
  text-decoration:none;
  color:var(--md-sys-on-surface);
}

.pg-btn:active{transform:translateY(1px)}

.pg-btn.primary{
  background:var(--md-primary);
  color:#fff;
  border-color:var(--md-primary);
  box-shadow:0 6px 18px rgba(30,136,229,0.12);
}
.pg-btn.primary:hover{background:var(--md-primary-variant)}

.pg-btn.secondary{
  background:linear-gradient(180deg,#f6f8fb,#ffffff);
  color:var(--md-primary);
  border:1px solid rgba(30,136,229,0.12);
}
.pg-btn.secondary:hover{background:#f2f6fb}

.pg-btn.danger{
  background:#fff;
  color:var(--md-error);
  border:1px solid rgba(198,40,40,0.12);
}
.pg-btn.danger:hover{background:var(--md-error); color:#fff; border-color:var(--md-error)}

.pg-btn.remove{
  width:40px; height:40px; padding:0; border-radius:10px; font-size:16px; display:inline-grid; place-items:center;
  background:#fff; color:var(--md-error); border:1px solid rgba(198,40,40,0.12);
}
.pg-btn.remove:hover{background:var(--md-error); color:#fff}

/* -------------------------
   Group box & header
   ------------------------- */
.pg-group-box{
  background:var(--md-surface);
  border:1px solid var(--md-outline);
  border-radius:10px;
  padding:14px;
  margin-bottom:12px;
  box-shadow:var(--md-elevation-1);
}
.pg-group-header{display:flex; justify-content:space-between; align-items:center}
.pg-hidden{display:none}

/* -------------------------
   Admin thumbnail preview (in edit rows)
   ------------------------- */
.pg-row img{ max-width:100%; height:auto; display:block; border-radius:6px; object-fit:cover; }

/* -------------------------
   Messages (success / error)
   ------------------------- */
.pg-message{
  padding:12px 14px;
  border-radius:10px;
  font-weight:600;
  margin-bottom:16px;
  box-shadow:var(--md-elevation-1);
}
.pg-success{ background:linear-gradient(180deg,#e8f8ef,#effff6); color:var(--md-success); border:1px solid rgba(30,122,58,0.12) }
.pg-error{ background:linear-gradient(180deg,#fff1f1,#fff6f6); color:var(--md-error); border:1px solid rgba(198,40,40,0.08) }

/* -------------------------
   Frontend carousel
   ------------------------- */
.pg-wrapper{ width:100%; margin:18px 0; }
.pg-carousel-frame{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:var(--md-radius);
  background:#000;
  box-shadow:var(--md-elevation-2);
}
.pg-carousel-track{
  display:flex;
  transition:transform .36s cubic-bezier(.2,.9,.2,1);
  width:100%;
  will-change:transform;
}
.pg-slide{
  min-width:100%;
  position:relative;
  background:#000;
  display:block;
}

/* desktop 16:9 constraint: iframe fills absolute area */
@media (min-width:768px){
  .pg-slide{ padding-top:56.25% !important; } /* 16:9 */
}

/* mobile aspect ratios remain controlled by inline padding classes from PHP; ensure content fills container */
.pg-content{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.pg-content iframe, .pg-content img{ width:100%; height:100%; object-fit:cover; border:0; display:block; position:absolute; top:0; left:0; }

/* Card for non-embed items (kept for completeness) */
.pg-media-card{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column;
  background:linear-gradient(180deg,#f8fafc,#f0f4f8); color:#111827; border-radius:var(--md-radius);
  text-decoration:none;
}
.pg-card-icon{ font-size:36px; margin-bottom:8px; opacity:0.9; }
.pg-card-btn{
  padding:8px 14px; border-radius:10px; background:#fff; border:1px solid var(--md-outline);
  font-weight:700; font-size:12px; color:var(--md-primary);
}

/* -------------------------
   Nav buttons (prev / next)
   ------------------------- */
.pg-nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:40;
  background:linear-gradient(180deg, rgba(0,0,0,0.24), rgba(0,0,0,0.14));
  color:#fff;
  border:none;
  padding:12px 14px;
  cursor:pointer;
  font-size:20px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
  transition:transform 120ms ease, background var(--md-transition);
}
.pg-nav-btn:hover{ transform:translateY(-50%) scale(1.03); background:rgba(0,0,0,0.5) }
.pg-prev{ left:12px }
.pg-next{ right:12px }

/* -------------------------
   Responsive adjustments
   ------------------------- */
@media (max-width:767px){
  .pg-admin-panel{ padding:16px }
  .pg-btn{ padding:9px 12px; font-size:13px }
  .pg-row input{ padding:10px }
  .pg-group-box{ padding:12px }
}

/* -------------------------
   Accessibility tweaks
   ------------------------- */
.pg-btn:focus, .pg-row input:focus, .pg-select-ratio:focus { outline: none; box-shadow:0 6px 18px rgba(30,136,229,0.08) }

/* -------------------------
   Utility helpers
   ------------------------- */
.flex-center{ display:flex; align-items:center; justify-content:center }
.mb-8{ margin-bottom:8px }
.hidden{ display:none !important }