/* Student Magazine / Newspaper — October 22, 2026.
   Shared family/hero/publication visuals load through student-canvas.css. */
@import url("../components/unique-family.css");

.student-publication .student-publication__intro {
  padding-block: var(--sc-space);
  background: var(--color-white);
}
.student-publication .student-publication__intro .content-prose {
  max-width: 76ch;
  margin-inline: auto;
}
.student-publication .publication-collection {
  padding-block: var(--sc-space);
  border-block-start: 1px solid var(--color-border);
  background: var(--sc-soft);
}
.student-publication :is(.publication-collection__header h2, .publication-collection__section-title, .student-publication__involved h2) {
  color: var(--color-primary-dark);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -.025em;
}
.student-publication .publication-collection__section-title {
  font-size: 1.375rem;
}
.student-publication .publication-collection__tools {
  padding: 1.25rem;
  border-block-start: 1px solid var(--color-border);
}
.student-publication .publication-collection__field {
  min-width: 0;
}
.student-publication .publication-collection__field :is(input, select) {
  min-width: 0;
  border-color: var(--color-border);
  border-radius: .25rem;
  color: var(--color-text);
  font: inherit;
}
.student-publication .publication-collection__clear {
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
}
.student-publication .publication-collection__clear:hover,
.student-publication .publication-collection__clear:focus-visible {
  border-color: var(--color-primary-dark);
  background: var(--color-primary-dark);
  color: var(--color-white);
}
.student-publication :is(.publication-collection__empty, .student-publication__configuration-message) {
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-inline-start: .1875rem solid var(--color-gold);
  border-radius: .25rem;
  background: var(--color-white);
  color: var(--color-text);
}
.student-publication .student-publication__involved {
  padding-block: var(--sc-space);
  border-block-start: .1875rem solid var(--color-gold);
  background: var(--color-white);
  color: var(--color-text);
}
.student-publication .student-publication__involved .content-prose {
  max-width: 72ch;
}
.student-publication .student-publication__involved .publication-button {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}
.student-publication .student-publication__involved .publication-button:hover,
.student-publication .student-publication__involved .publication-button:focus-visible {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}
.student-publication .publication-collection__pagination button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--color-border);
  border-radius: .25rem;
  background: var(--color-white);
  color: var(--color-primary-dark);
}
.student-publication .publication-collection__pagination [aria-current="page"] {
  background: var(--color-primary-dark);
  color: var(--color-white);
}
@media (max-width: 47.999rem) {
  .student-publication .publication-collection__tools {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* October 26 publication updates. The existing theme palette and normal
   publication cards remain in place. This option belongs to Publication Hero. */
.student-publication {
  --sp-figure-overhang:clamp(2rem,4vw,3rem);
  --sc-soft:var(--color-surface);
}
.student-publication .student-canvas-hero--figure_bleed {
  display:block;
  position:relative;
  isolation:isolate;
  min-height:clamp(31rem,48vw,43rem);
  overflow:visible;
  margin-block-end:var(--sp-figure-overhang);
  border-block-end:0;
  border-radius:0 0 var(--radius-xl,1.2rem) var(--radius-xl,1.2rem);
  background:var(--color-primary-dark);
  color:var(--color-white);
}
.student-publication .student-canvas-hero--figure_bleed::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  border-block-end:.25rem solid var(--color-gold);
  background:linear-gradient(118deg,transparent 0 67%,var(--color-primary) 67% 100%);
}
.student-publication .student-canvas-hero--figure_bleed::after {
  content:"";
  position:absolute;
  inset-block-start:12%;
  inset-inline-end:8%;
  z-index:0;
  inline-size:clamp(12rem,27vw,24rem);
  aspect-ratio:1;
  border:.125rem solid var(--color-gold);
  border-radius:50%;
  opacity:.25;
  pointer-events:none;
}
.student-publication .student-canvas-hero--figure_bleed .student-canvas-hero__content {
  position:relative;
  z-index:2;
  padding:clamp(3rem,6vw,6rem) var(--sc-gutter);
  min-height:inherit;
  display:grid;
  align-items:center;
}
.student-publication .student-canvas-hero--figure_bleed .student-canvas-hero__content .student-canvas-shell {
  width:100%;
  max-width:var(--sc-width);
  margin-inline:auto;
}
.student-publication .student-canvas-hero--figure_bleed .student-canvas-hero__content :is(h1,.student-canvas-hero__intro,.student-canvas-hero__eyebrow) {
  width:52%;
  max-width:36rem;
}
.student-publication .student-canvas-hero--figure_bleed h1 {
  font-size:clamp(3rem,6.75vw,6.5rem);
  font-weight:var(--fw-black,800);
  line-height:1.02;
  letter-spacing:-.045em;
}
.student-publication .student-canvas-hero--figure_bleed .student-canvas-hero__intro {
  font-size:clamp(1.0625rem,1.45vw,1.25rem);
  line-height:1.75;
}
.student-publication .student-canvas-hero--figure_bleed .student-canvas-hero__media {
  position:absolute;
  z-index:1;
  inset-block-start:0;
  inset-block-end:calc(-1 * var(--sp-figure-overhang));
  inset-inline-end:max(.5rem,calc((100% - var(--sc-width))/2));
  width:46%;
  max-width:42rem;
  max-height:none;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  pointer-events:none;
}
.student-publication .student-canvas-hero--figure_bleed .student-canvas-hero__media img {
  display:block;
  width:100%;
  height:100%;
  max-height:none;
  border:0;
  border-radius:0;
  background:transparent;
  object-fit:contain;
  object-position:center bottom;
}
.student-publication .student-canvas-hero--figure-left .student-canvas-hero__media {
  inset-inline-start:max(.5rem,calc((100% - var(--sc-width))/2));
  inset-inline-end:auto;
}
.student-publication .student-canvas-hero--figure-left .student-canvas-hero__content :is(h1,.student-canvas-hero__intro,.student-canvas-hero__eyebrow) {
  margin-inline-start:48%;
}
.student-publication .student-canvas-hero--figure-left::before {
  background:linear-gradient(62deg,var(--color-primary) 0 33%,transparent 33% 100%);
}
.student-publication .student-canvas-hero--figure-left::after {inset-inline-start:8%;inset-inline-end:auto}
.student-publication .student-publication__intro .content-prose > * + * {margin-block-start:1rem}
.student-publication .student-publication__involved .publication-button {border-radius:var(--radius-pill)}

@media(max-width:59.999rem) {
  .student-publication .student-canvas-hero--figure_bleed {
    display:flex;
    flex-direction:column;
    min-height:0;
    margin-block-end:1.5rem;
    --sp-figure-overhang:1.5rem;
  }
  .student-publication .student-canvas-hero--figure_bleed .student-canvas-hero__content {
    order:0;
    display:block;
    min-height:0;
    padding-block:2.75rem 1.5rem;
  }
  .student-publication .student-canvas-hero--figure_bleed .student-canvas-hero__content :is(h1,.student-canvas-hero__intro,.student-canvas-hero__eyebrow) {
    width:100%;
    max-width:42rem;
    margin-inline:0;
  }
  .student-publication .student-canvas-hero--figure_bleed .student-canvas-hero__media {
    order:1;
    position:relative;
    inset:auto;
    margin:0 auto calc(-1 * var(--sp-figure-overhang));
    width:min(100% - 2rem,30rem);
    height:clamp(22rem,75vw,30rem);
    max-width:none;
  }
  .student-publication .student-canvas-hero--figure_bleed::before {
    background:linear-gradient(158deg,transparent 0 61%,var(--color-primary) 61% 100%);
  }
  .student-publication .student-canvas-hero--figure_bleed::after {inset:45% 12% auto auto}
}
@media(prefers-reduced-motion:reduce) {
  .student-publication .student-canvas-hero--figure_bleed * {animation:none;transition:none}
}
@media print {
  .student-publication .student-canvas-hero--figure_bleed {min-height:0;margin:0;background:var(--color-white);color:var(--color-text)}
  .student-publication .student-canvas-hero--figure_bleed::before,
  .student-publication .student-canvas-hero--figure_bleed::after {display:none}
  .student-publication .student-canvas-hero--figure_bleed .student-canvas-hero__media {display:none}
  .student-publication .student-canvas-hero--figure_bleed .student-canvas-hero__content {min-height:0;padding:1rem}
  .student-publication .student-canvas-hero--figure_bleed .student-canvas-hero__content :is(h1,.student-canvas-hero__intro,.student-canvas-hero__eyebrow) {width:100%;max-width:none;margin-inline:0}
}