/* Art Collections overview (/collections/) — from design/Collections.dc.html */

/* ---------- Intro + filter tabs ---------- */
.cols-intro {
  padding: clamp(64px, 7vw, 110px) var(--gutter) clamp(40px, 4vw, 56px);
  background: radial-gradient(ellipse 70% 100% at 50% 0%, var(--cobalt-1) 0%, var(--cobalt-2) 40%, var(--navy) 100%);
}
.cols-intro__inner { max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.cols-intro__title { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(46px, 6vw, 88px); line-height: 1; }
.cols-intro .lede { max-width: 560px; }

.cols-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.cols-tabs[hidden] { display: none; }
.cols-tab {
  min-height: 46px; padding: 0 24px; border-radius: 23px;
  border: 1px solid rgba(212, 178, 106, 0.5); background: rgba(6, 20, 58, 0.35); color: var(--cream);
  font-family: var(--sans); font-size: 14px; letter-spacing: 0.06em; cursor: pointer;
  transition: background-color .3s ease-out, color .3s ease-out, border-color .3s ease-out;
}
.cols-tab:hover { border-color: var(--gold); background: rgba(227, 192, 137, 0.12); }
.cols-tab[aria-pressed="true"] { background: var(--cream); color: var(--navy); border-color: var(--cream); }

/* ---------- Group sections ---------- */
.cols-group { padding: clamp(40px, 5vw, 72px) var(--gutter) clamp(64px, 7vw, 100px); }
.cols-group[hidden] { display: none; }
.cols-group--limited { padding-top: clamp(64px, 7vw, 100px); background: var(--black); }
.cols-group__inner { max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.cols-group__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 30px;
  padding-bottom: 18px; border-bottom: 1px solid rgba(212, 178, 106, 0.24);
}
.cols-group__title { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 3.6vw, 50px); line-height: 1.05; }
.cols-group__note { font-size: 14px; letter-spacing: 0.08em; color: var(--gold); }
.cols-row-label { margin: 0 0 -18px; font-size: 13px; font-weight: 400; letter-spacing: 0.26em; text-transform: uppercase; color: var(--blue-muted); }
.cols-row-label + .carousel { margin-top: 0; }
.cols-row-label--sea { margin-top: 20px; }

/* ---------- Collection carousels ---------- */
.cols-row .carousel__track { gap: clamp(20px, 2.4vw, 32px); padding-bottom: 0; }
.cols-row--3 .carousel__track > * { flex-basis: calc((100% - 2 * clamp(20px, 2.4vw, 32px)) / 3); }
.cols-row--2 .carousel__track > * { flex-basis: calc((100% - clamp(20px, 2.4vw, 32px)) / 2); }
.cols-row .arrow { top: 38%; }
@media (max-width: 900px) {
  .cols-row--3 .carousel__track > * { flex-basis: 46%; }
  .cols-row--2 .carousel__track > * { flex-basis: 80%; }
}
@media (max-width: 560px) {
  .cols-row--3 .carousel__track > *, .cols-row--2 .carousel__track > * { flex-basis: 84%; }
}

.col-card { display: flex; flex-direction: column; gap: 14px; color: var(--cream); text-decoration: none; }
.col-card__img { display: block; overflow: hidden; border-radius: 14px; background: var(--cobalt-2); }
.col-card__img--tall { aspect-ratio: 4 / 5; }
.col-card__img--wide { aspect-ratio: 3 / 2; }
.col-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.col-card__text { display: flex; flex-direction: column; gap: 2px; }
.col-card__kicker { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 19px; color: var(--gold); }
.col-card__name { font-family: var(--serif); font-weight: 300; font-size: 32px; line-height: 1.1; transition: color .25s ease-out; }
.col-card__cta { margin-top: 6px; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-soft); transition: color .25s ease-out; }
.col-card:hover .col-card__cta, .col-card:focus-visible .col-card__cta { color: var(--gold); }
.col-card:focus-visible { outline-offset: 6px; border-radius: 14px; }

/* Cover crops from the catalog (`cover.position`) */
.obj-68-50 { object-position: 68% 50%; }
.obj-60-50 { object-position: 60% 50%; }

/* ---------- Limited Edition: coming soon ---------- */
.cols-soon { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.soon-tile { display: flex; flex-direction: column; gap: 14px; }
.soon-tile__frame {
  display: flex; aspect-ratio: 3 / 2; padding: 1px; border-radius: 14px;
  background: linear-gradient(150deg, rgba(241, 216, 166, 0.8) 0%, rgba(241, 216, 166, 0) 35%, rgba(241, 216, 166, 0) 70%, rgba(241, 216, 166, 0.5) 100%);
}
.soon-tile__inner {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  border-radius: 13px; background: radial-gradient(ellipse 70% 80% at 50% 40%, #0E1C3F 0%, #070D1E 60%, var(--black) 100%);
}
.soon-tile__inner img { display: block; width: 48px; height: 48px; }
.soon-tile__word { font-family: var(--serif); font-style: italic; font-size: 26px; }
.soon-tile__name { font-family: var(--serif); font-weight: 300; font-size: 32px; line-height: 1.1; }

/* ---------- New Releases tab ---------- */
.cols-new { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px; }
.new-card { display: flex; flex-direction: column; gap: 12px; color: var(--cream); text-decoration: none; }
.new-card__img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: var(--cobalt-2); }
.new-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.new-card__img .tag-new { position: absolute; top: 14px; left: 14px; background: rgba(6, 20, 58, 0.75); }
.new-card__title { font-family: var(--serif); font-size: 25px; line-height: 1.15; transition: color .25s ease-out; }
.new-card__col { font-size: 14px; color: var(--blue-muted); }
.new-card:hover .new-card__title { color: var(--gold); }
.cols-new-more { align-self: flex-start; }

/* ---------- More from Brandon ---------- */
.cols-more {
  padding: clamp(64px, 7vw, 100px) var(--gutter);
  background: radial-gradient(ellipse 80% 90% at 85% 50%, var(--cobalt-1) 0%, var(--cobalt-2) 45%, var(--navy) 100%);
}
.cols-more__grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.more-card {
  display: flex; flex-direction: column; gap: 12px; padding: clamp(28px, 3.4vw, 48px); border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(191, 230, 238, 0.3); color: var(--cream); text-decoration: none;
  transition: border-color .3s ease-out, background-color .3s ease-out;
}
.more-card[hidden] { display: none; }
.more-card--gold { border-color: rgba(212, 178, 106, 0.4); background: linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%); }
.more-card:hover { border-color: var(--gold); background-color: rgba(227, 192, 137, 0.06); }
.more-card__kicker { font-size: 12px; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.more-card__title { font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 3.4vw, 46px); line-height: 1.05; }
.more-card__text { font-size: 16px; color: var(--blue-soft); }
.more-card__cta { margin-top: 8px; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; transition: color .25s ease-out; }
.more-card:hover .more-card__cta { color: var(--gold); }