/* ==========================
   OD1 Gallery Grid (Albums)
   ========================== */

.od1-album-grid{
  --gap: 14px;
  --radius: var(--radius-md, 18px);
  --pad: 10px;
  --card-bg: var(--surface);
  --card-border: var(--border);
  --shadow: var(--shadow-md);
  --lift-hover: -1px;
  --shadow-hover: var(--shadow-md);

  display: grid;
  gap: var(--od1-gallery-gap, var(--gap));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

/* Tablets */
@media (min-width: 768px){
  .od1-album-grid{
    --gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Desktop */
@media (min-width: 1024px){
  .od1-album-grid{
    --gap: 18px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Optional flex layout controlled by shortcode */
.od1-gallery-flex{
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--od1-gallery-gap, 18px);
}

.od1-gallery-flex .od1-album-card{
  flex: 0 1 var(--od1-card-width, 320px);
  max-width: var(--od1-card-width, 320px);
  width: 100%;
}

.od1-album-card{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: var(--pad);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
}

.od1-album-card a{
  color: inherit;
  text-decoration: none;
  display: block;
}

.od1-album-card img{
  width: 100%;
  aspect-ratio: var(--od1-gallery-ratio, 1 / 1);
  height: auto;
  object-fit: cover;
  border-radius: calc(var(--radius) - 6px);
  display: block;
  background: rgba(255,255,255,.04);
}

.od1-album-title{
  margin-top: 10px;
  padding: 0 2px 2px;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.2;
  opacity: .95;
  color: var(--on-surface, var(--text));
  text-align: center;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (hover:hover){
  .od1-album-card{
    transition:
      transform .18s ease,
      border-color .18s ease,
      background-color .18s ease,
      box-shadow .18s ease;
  }

  .od1-album-card:hover{
    transform: translateY(var(--lift-hover, -2px));
    border-color: var(--border-hover, var(--border-2));
    background: var(--surface-hover, var(--surface-2));
    box-shadow: var(--shadow-hover, var(--shadow));
  }
}

.od1-empty{
  grid-column: 1 / -1;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.18);
  opacity: .9;
  text-align: center;
}

/* ==========================
   Optional Hover Title Overlay
   ========================== */

.od1-title-overlay .od1-album-card{
  overflow: hidden;
}

.od1-title-overlay .od1-album-title{
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 12px;
  margin: 0;

  background: linear-gradient(
    to top,
    rgba(0,0,0,.85),
    rgba(0,0,0,.45),
    rgba(0,0,0,0)
  );

  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;

  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;

  border-radius: 0 0 16px 16px;
  pointer-events: none;
}

.od1-title-overlay .od1-album-card img{
  display: block;
}

@media (hover:hover){
  .od1-title-overlay .od1-album-card:hover .od1-album-title{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (hover:none){
  .od1-title-overlay .od1-album-title{
    opacity: 1;
    transform: none;
  }
}

/* ==========================
   Individual Album Button
   ========================== */

.od1-album-button{
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px;

  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2, rgba(255,255,255,.08));
  color: var(--on-surface, var(--text));

  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

@media (hover:hover){
  .od1-album-button:hover{
    background: var(--surface-hover, rgba(255,255,255,.14));
    border-color: var(--border-hover, var(--border-2));
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }
}

/* Do not use overlay mode with buttons unless you want the title over image */
.od1-title-overlay .od1-album-button{
  position: relative;
  z-index: 2;
}

/* ==========================
   Gallery Expand Button
   ========================== */

.od1-gallery__actions{
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}

.od1-gallery__toggle{
  --btn-bg: var(--surface-2, rgba(255,255,255,.06));
  --btn-bg-hover: var(--surface-hover, rgba(255,255,255,.1));
  --btn-border: var(--border);
  --btn-text: var(--on-surface, var(--text));
  --btn-radius: 999px;

  appearance: none;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);

  padding: 10px 18px;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .25px;

  border-radius: var(--btn-radius);
  cursor: pointer;

  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition:
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

@media (hover:hover){
  .od1-gallery__toggle:hover{
    background: var(--btn-bg-hover);
    border-color: var(--border-hover, var(--border-2));
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
}

.od1-gallery__toggle:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent, #fff) 30%, transparent),
    var(--shadow-md);
}

.od1-gallery__toggle:active{
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}