/* Producer Social Club — component styles. Every value is a token from tokens.css. */

/* Italic: always the real italic file, never a synthesized slant of the regular. */
.psc-i, .psc-post__title em, .psc-tile__title em, .psc-hero__title em {
  font-family: var(--font-display-italic); font-style: normal; font-synthesis: none;
}

.psc-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* Button */
.psc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.005em;
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
.psc-btn:focus-visible { outline: 2px solid var(--racing-text); outline-offset: 2px; }
.psc-btn--primary { background: var(--espresso); color: var(--on-espresso); border-color: var(--espresso); }
.psc-btn--secondary { background: transparent; color: var(--espresso); border-color: var(--espresso); }
.psc-btn--racing { background: var(--racing); color: var(--on-racing); border-color: var(--racing); }
.psc-btn--link { background: transparent; color: var(--espresso); padding-inline: 0; border-radius: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.psc-btn--sm { font-size: 12px; line-height: 16px; padding: var(--space-2) var(--space-4); }
.psc-btn__arrow { font-family: var(--font-display); font-size: 18px; line-height: 1; }

/* Tag */
.psc-tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-sans); font-size: 10px; line-height: 14px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--espresso); color: var(--espresso); background: transparent;
}
.psc-tag--soft { box-shadow: none; background: var(--oat); }
.psc-tag--gold { box-shadow: none; background: var(--gold); color: var(--on-gold); }
.psc-tag--racing { box-shadow: none; background: var(--racing); color: var(--on-racing); }

/* PostCard */
.psc-post { display: flex; flex-direction: column; max-width: 400px; background: var(--milk-raised); border: 1px solid var(--line); color: var(--espresso); }
.psc-post__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--oat); }
.psc-post__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.psc-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.psc-post__time { font-family: var(--font-sans); font-size: 12px; line-height: 16px; color: var(--espresso-muted); margin-left: auto; }
.psc-post__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 30px; letter-spacing: -0.02em; text-wrap: balance; }
.psc-post__hook { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 22px; }
.psc-post__hook span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--espresso-muted); margin-right: var(--space-2); }
.psc-post__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

/* WeekPlan */
.psc-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--espresso); color: var(--espresso); }
.psc-week__day { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-3) var(--space-6); border-left: 1px solid var(--line); min-width: 0; }
.psc-week__day:first-child { border-left: 0; }
.psc-week__day--today { background: var(--oat); }
.psc-week__name { font-family: var(--font-sans); font-size: 10px; line-height: 14px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--espresso-muted); }
.psc-week__day--today .psc-week__name { color: var(--racing-text); }
.psc-week__title { font-family: var(--font-display); font-size: 22px; line-height: 22px; letter-spacing: -0.015em; margin: 0; font-weight: 400; }
.psc-week__fmt { font-family: var(--font-sans); font-size: 12px; line-height: 16px; color: var(--espresso-muted); }

/* SocialTile: a 4:5 post graphic */
.psc-tile { position: relative; width: 320px; max-width: 100%; aspect-ratio: 4 / 5; overflow: hidden; color: var(--on-racing); background: var(--racing); }
.psc-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.psc-tile__top, .psc-tile__bottom { position: absolute; left: var(--space-4); right: var(--space-4); font-family: var(--font-sans); font-size: 9px; line-height: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; display: flex; justify-content: space-between; }
.psc-tile__top { top: var(--space-4); }
.psc-tile__bottom { bottom: var(--space-4); }
.psc-tile__title { position: absolute; left: var(--space-4); right: var(--space-4); bottom: 40px; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 40px; letter-spacing: -0.035em; text-wrap: balance; }
.psc-tile--photo .psc-tile__title, .psc-tile--photo .psc-tile__top, .psc-tile--photo .psc-tile__bottom { color: var(--photo-ink); }
.psc-tile--walnut { background: var(--walnut); }

/* Additions documented in the source READMEs (not in the original bundle) */
.psc-btn--link:hover { text-decoration-thickness: 2px; }
@media (max-width: 560px) { .psc-week { grid-template-columns: 1fr; border-top: 0; } .psc-week__day { border-left: 0; border-top: 1px solid var(--espresso); } }