/* interests.css — Select Interests + Interested Events */

/* Interests page */
.interests-page{padding-block:var(--sp-8) var(--sp-16);max-width:780px;margin-inline:auto}
.interests-page__back{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--text-sm);font-weight:500;
  color:var(--text-secondary);margin-bottom:var(--sp-4);
  transition:color var(--t-fast);
}
.interests-page__back:hover{color:var(--text-primary)}
.interests-page__title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:800;margin-bottom:var(--sp-2)}
.interests-page__sub{font-size:var(--text-base);color:var(--text-muted);margin-bottom:var(--sp-8)}

/* Account Settings › Interests intro line */
.account-interests__intro{color:var(--text-muted);font-size:var(--text-sm);margin-bottom:var(--sp-6);max-width:60ch}

.interest-group{padding-bottom:var(--sp-8);border-bottom:1px solid var(--border);margin-bottom:var(--sp-8)}
.interest-group:last-of-type{border-bottom:none}
.interest-group__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;margin-bottom:var(--sp-4)}
.interest-tags-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* Interest chips — mirror the theme's pill pattern (.tab-pill): white pill that
   fills navy when selected. Without this the selected state is invisible. */
.interest-tag{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--white);
  color:var(--text-secondary);
  border:1.5px solid var(--border);
  border-radius:var(--r-full);
  padding:9px 16px;
  font-family:inherit;
  font-size:var(--text-sm);
  font-weight:600;
  line-height:1.4;
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.interest-tag:hover{border-color:var(--navy);color:var(--navy);background:var(--grey-50)}
.interest-tag.selected{background:var(--navy);color:var(--white);border-color:var(--navy)}
.interest-tag.selected:hover{background:var(--navy-mid,#2a2a42);color:var(--white)}
.interest-tag:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

/* Category chips carry an EM-category icon (inherits the chip's text colour) */
.interest-tag--cat svg{width:15px;height:15px;flex-shrink:0}

/* Save action — in-flow at the end of the interests, aligned to the column */
.interests-save-wrap{
  display:flex;justify-content:flex-end;
  margin-top:var(--sp-8);
  padding-top:var(--sp-6);
  border-top:1px solid var(--border);
}

/* Interested Events */
.interested-page{padding-block:var(--sp-8) var(--sp-16)}
.interested-page__head{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-8)}
.interested-page__head a{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--r-full);
  border:1.5px solid var(--border);color:var(--text-secondary);
  transition:all var(--t-fast);flex-shrink:0;
}
.interested-page__head a:hover{border-color:var(--navy);color:var(--navy)}
.interested-page__title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:800}
.interested-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.interested-empty{
  grid-column:1/-1;text-align:center;padding:var(--sp-16) 0;
}
.interested-empty p{font-size:var(--text-lg);color:var(--text-muted);margin-bottom:var(--sp-6)}

/* notice */
.js-interests-notice:not(:empty){
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);
  background:var(--green-bg);color:#196f3d;font-size:var(--text-sm);
  margin-bottom:var(--sp-5);
}

@media(max-width:1024px){.interested-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .interests-page{max-width:100%}
  .interests-page__title{font-size:var(--text-2xl)}
  .interests-save-wrap{justify-content:stretch}
  .interests-save-wrap .btn{width:100%}
}
@media(max-width:480px){.interested-grid{grid-template-columns:1fr}}