/* =========================================
   TuCuatro Songs – Boxes + Songbooks Shelf
   Refactor 2026 (dedupe + better mobile)
   ========================================= */

:root{
  --tc-accent: #ff9c00;
  --tc-border-dark: #3d3d3d;
  --tc-radius: 14px;
  --tc-shadow: 0 10px 26px rgba(0,0,0,.08);
  --tc-shadow-hover: 0 14px 30px rgba(0,0,0,.12);
}

/* Song boxes list */
div.songboxes.songs.list{
  margin: 0 auto;
  text-align: center;
}

/* Square card (deduped) */
div.box.square,
div.list div.box.square{
  width: 160px;
  height: 160px;
  padding: 0;
  margin: 10px 8px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--tc-border-dark);
  background: #000;
  display: inline-block;
  vertical-align: top;
}

.box.square.song.draft{
  opacity: .8;
  background-color: #515151;
}

div.box.square:hover,
div.list div.box.square:hover{
  opacity: .88;
  transition: .2s all;
}

div.box.square a,
div.list div.box.square a{
  margin:0;
  padding:0;
}

/* Background image */
div.box.square a div.background,
div.list div.box.square a div.background{
  padding:0;
  margin:0;
  opacity:.7;
  margin-left:-50%;
  margin-top:0;
  width:200%;
  height:100%;
  background-repeat:no-repeat;
  background-position:center;
  background-size:180%;
}

/* Gradient overlay */
div.box.square a div.background,
div.list div.box.square a .background:after{
  content:"";
  position:absolute;
  inset:0;
  background-image: linear-gradient(120deg, #fea02f, #003F5A);
  opacity:.7;
}

div.box.square a div.background.micuatro{ background: red; }

div.box.square a:hover div.background,
div.list div.box.square a:hover div.background{
  opacity:.8;
}

div.box.square a div.background img,
div.list div.box.square a div.background img{
  width: 300px;
  max-width: 1000%;
  height:auto;
}

/* TuCuatro badge */
div.list div.box.square a div.background.tucuatro{
  margin-left: 0 !important;
  margin-top: 0 !important;
  width: 100% !important;
}
div.box.square a div.background.tucuatro img,
div.list div.box.square a div.background.tucuatro img{
  position:absolute;
  bottom:10px;
  right:10px;
  width:24px !important;
}

/* Title */
div.box.square a h3,
div.list div.box.square a h3{
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-70px;
  margin-top:-20px;
  width:140px;
  padding:0;
  display:inline-table;
  text-align:center;
  font-size:16px;
  color:#fff;
}
div.box.square a h3 span.subtitle,
div.list div.box.square a h3 span.subtitle{
  font-size:11px;
  display:block;
}
div.box.square a .content,
div.list div.box.square a .content{
  display:none;
}

/* Mobile: remove zoom hacks, use responsive sizing */
@media screen and (max-width:480px){
  section.songs > div.content,
  section.songbook > div.content{
    padding:0;
  }

  div.box.square,
  div.list div.box.square{
    width: calc(50% - 18px) !important;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: none !important;
  }

  div.box.square.rectangular,
  div.box.square.rectangular{
    width: min(360px, 96%) !important;
    aspect-ratio: auto;
    height: auto;
  }

  div.box.square.full,
  div.box.square.full{
    width: 96% !important;
    aspect-ratio: auto;
    height: auto;
  }

  div.box.square a div.background,
  div.box.square a div.background{
    height: 100%;
  }
}

@media screen and (max-width:350px){
  div.box.square,
  div.list div.box.square{
    width: min(160px, 44vw) !important;
  }
}

/* Override Wordpress Themes */
body.page-canciones .gdlr-core-text-box-item-content,
body.page-songs .gdlr-core-text-box-item-content{
  padding:0;
}

/* =========================================
   TuCuatro – Songbooks Shelf UI
   ========================================= */

.tucuatro-songbooks{
  margin: 28px 0;
}

.tucuatro-songbooks-shelf{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* Card */
.songbook-card{
  background:#fff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--tc-shadow);
  overflow:hidden;
  position:relative;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* Subtle “paper stack” feel */
.songbook-card:before,
.songbook-card:after{
  content:"";
  position:absolute;
  inset: 10px 10px auto auto;
  width: 88%;
  height: 88%;
  border-radius: 14px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.05);
  transform: rotate(1.2deg);
  z-index:0;
  pointer-events:none;
}
.songbook-card:after{
  inset: 14px 14px auto auto;
  transform: rotate(-1.2deg);
  opacity:.65;
}

/* Clickable cover area */
.songbook-cover{
  display:block;
  position:relative;
  z-index:1;
  padding: 26px 22px 18px;
  text-decoration:none !important;
  color: inherit;
  background: linear-gradient(180deg, rgba(255,156,0,.16), rgba(255,156,0,.02));
}

/* “Spine” accent */
.songbook-cover:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:10px;
  background: var(--tc-accent);
  opacity:.95;
}

.songbook-cover:after{
  content:"SONGBOOK";
  position:absolute;
  left:-34px;
  top:24px;
  transform: rotate(-90deg);
  font-weight:900;
  font-size:12px;
  letter-spacing:.12em;
  color: rgba(0,0,0,.55);
}

/* Title */
.songbook-title{
  margin:0 0 10px;
  font-size:30px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-0.02em;
  color: var(--tc-accent);
}

/* Meta */
.songbook-meta{
  font-size:14px;
  font-weight:800;
  color: rgba(0,0,0,.62);
  margin: 0 0 10px;
}

/* CTA */
.songbook-open{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  font-weight:900;
  font-size:14px;
  color: rgba(0,0,0,.72);
  border-bottom: 1px dashed rgba(0,0,0,.25);
  padding-bottom:2px;
}

/* Description sits under cover */
.songbook-desc{
  position:relative;
  z-index:1;
  padding: 16px 22px 20px;
  color: rgba(0,0,0,.68);
  line-height:1.45;
  font-size:15px;
}

/* Hover feels like picking up a folder */
.songbook-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,156,0,.35);
  box-shadow: var(--tc-shadow-hover);
}
.songbook-card:hover .songbook-open{
  color: rgba(0,0,0,.92);
  border-bottom-color: rgba(0,0,0,.45);
}

/* Mobile tightening */
@media (max-width:520px){
  .songbook-title{ font-size:26px; }
  .songbook-cover{ padding: 22px 18px 14px; }
  .songbook-desc{ padding: 14px 18px 18px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .songbook-card{ transition:none !important; }
}

/* -----------------------------------------
   Songbook actions (archive sidebar)
----------------------------------------- */
.tucuatro-songbook-actions{
  margin-top:12px;
  padding-top:8px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.tucuatro-songbook-actions__count{
  font-size:14px;
  color:#666;
  margin-bottom:10px;
}

/* Start Playing = primary */
.tucuatro-songbook-actions__start{
  display:block;
  margin-bottom:8px;
  font-weight:700;
  font-size:16px;
  text-decoration:none !important;
  color: var(--tc-accent);
}
.tucuatro-songbook-actions__start:hover{
  text-decoration: underline !important;
}
.tucuatro-songbook-actions__start.is-disabled{
  opacity:.4;
  cursor: default;
  pointer-events:none;
}

/* Print = secondary */
.tucuatro-songbook-actions__print{
  display:block;
  font-size:14px;
  color:#555;
  text-decoration:none !important;
}
.tucuatro-songbook-actions__print:hover{
  text-decoration: underline !important;
}