/* ai.syr.edu — academics.html only.
   Reproduces syracuse.edu/academics/ai using the exact rules from the source
   bundles (dds, flagship_kit, main), transcribed by hand. Scoped under .acad
   on <main>, so nothing else on the site is affected.

   Source breakpoints (min-width): 544, 768, 1012, 1280, 1366, 1640.
   Signature gradient is always the same 3-stop declaration; never a 2-stop.
   Nothing has border-radius. Shadows appear only on cards.
   Underlines are never the text colour: #CD3E00, offset .3125rem.            */

.acad{
  --su-orange:        #F76900;   /* section h2 on white, stat numerals, hero highlight */
  --su-orange-dark:   #CD3E00;   /* link underline, arrows, link-cta hover */
  --su-blue:          #000E54;   /* link text, buttons, h3, card titles */
  --su-blue-medium:   #203299;   /* gradient end */
  --su-blue-light:    #2B72D7;   /* stat divider, testimonial arrow */
  --su-gray-dark:     #333333;   /* body copy */
  --su-gray-medium:   #8C939B;   /* callout rule */
  --su-gray-light-5:  #FAFAFA;   /* promo banner bg */
  --su-line:          #E4E4E4;   /* all 1px rules */
  --su-gradient: linear-gradient(118deg, #000E54, 30.08%, #203299 98.9%);
  --su-shadow-1: 0 1px 4px 1px rgba(0,0,0,.1);
  --block: "SyracuseBlockCndVF", "OswaldVF", sans-serif;
  color:var(--su-gray-dark);
}

/* ---------- base type: body 18/1.5 mobile, 20/1.8 desktop ---------- */
.acad p{ font-family:var(--sans); font-size:1.125rem; line-height:1.5; color:var(--su-gray-dark); }
@media (min-width:1012px){ .acad p{ font-size:1.25rem; line-height:1.8; } }

/* links inside content: blue text, orange-dark underline, 5px offset */
.acad-content a:not(.acad-btn):not(.acad-cta){
  color:var(--su-blue); text-decoration:underline;
  text-decoration-color:var(--su-orange-dark); text-underline-offset:.3125rem;
}

/* section h2: orange on white. 2.25 -> 2.5 -> 2.75rem */
.acad .section-title{
  font-family:var(--sans); font-weight:700; color:var(--su-orange);
  font-size:2.25rem; line-height:1.2; letter-spacing:normal; margin-bottom:10px;
}
@media (min-width:768px){  .acad .section-title{ font-size:2.5rem; } }
@media (min-width:1012px){ .acad .section-title{ font-size:2.75rem; } }
.acad .section--navy .section-title{ color:#fff; }
.acad .section-lead{ margin-top:0; font-size:1.25rem; line-height:1.6; color:var(--su-gray-dark); max-width:none; }
@media (min-width:1012px){ .acad .section-lead{ font-size:1.5rem; } }

/* content container: their two-column blocks sit in a 1366px container */
.acad .container{ max-width:1366px; }
.acad .section{ padding:1.25rem 0 1.88rem; }
@media (min-width:768px){  .acad .section{ padding:3.12rem 0; } }
@media (min-width:1012px){ .acad .section{ padding:5rem 0 7.5rem; } }
.acad .section__head{ margin-bottom:2.5rem; }
@media (min-width:768px){ .acad .section__head{ margin-bottom:3.12rem; } }

/* full-bleed helper (source: .full-screen-width) */
.acad-bleed{ width:100vw; margin-left:calc(50% - 50vw); }

/* navy sections use the signature gradient, not flat navy */
.acad .section--navy{ background:var(--su-gradient); color:#fff; }


/* ---------- hero (.flagshiplandingpage-hero-block) ----------
   column-reverse on mobile (image on top), row from 768. Both halves 50%.
   The copy panel carries margin-bottom 1.88rem from 768, so the gradient
   stops short of the image's bottom edge, exactly as on the source.       */
.acad-hero{ display:flex; flex-direction:column-reverse; background:#fff; }
@media (min-width:768px){ .acad-hero{ flex-direction:row; } }
.acad-hero__copy{
  flex:0 0 50%; min-width:0; position:relative;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--su-gradient); color:#fff;
  padding:1.88rem 1.25rem 3.12rem;
}
@media (min-width:768px){  .acad-hero__copy{ order:1; margin-bottom:1.88rem; padding:3.75rem 2.5rem 3.75rem 3.75rem; } }
@media (min-width:1280px){ .acad-hero__copy{ padding:8.75rem 5rem 6.25rem 8.75rem; } }
.acad-hero__media{ flex:0 0 50%; min-width:0; min-height:350px; align-self:stretch; background:#000; }
@media (min-width:544px){ .acad-hero__media{ min-height:400px; } }
@media (min-width:768px){ .acad-hero__media{ order:2; } }
.acad-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.acad-hero__text{ display:flex; flex-direction:column; gap:10px; max-width:100%; }
.acad-hero h1{
  font-family:var(--block); font-weight:500; text-transform:uppercase;
  font-size:4.5rem; line-height:.9; letter-spacing:.03rem;
  color:#fff; margin:1.25rem 0 1.88rem;
}
@media (min-width:768px){  .acad-hero h1{ font-size:5.625rem; line-height:.85; margin-top:1.88rem; } }
@media (min-width:1012px){ .acad-hero h1{ font-size:8.125rem; margin-top:2.5rem; } }
.acad-hero h1 span{ color:var(--su-orange); font-weight:500; }
/* .acad prefix required: `.acad p` otherwise out-specifies this and paints the lead --gray-dark on navy */
.acad .acad-hero__lead{ font-family:var(--sans); font-size:1.25rem; line-height:1.6; color:#fff; margin:0; }
@media (min-width:768px){  .acad .acad-hero__lead{ font-size:1.5rem; } }
@media (min-width:1012px){ .acad .acad-hero__lead{ font-size:1.75rem; } }
.acad-hero .crumbs{ padding:0; color:#fff; }
.acad-hero .crumbs a{ color:#fff; }

/* ---------- intro: wysiwyg + optional callout ----------
   Callout sits right with a 1px gray-medium left rule from 1028px.        */
.acad-intro{ display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:start; }
@media (min-width:1028px){ .acad-intro{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:0; } }
.acad-intro > div:first-child .section-title{ margin-bottom:20px; }
.acad-touch{ padding:1.88rem 0; border-top:1px solid var(--su-gray-medium); }
@media (min-width:1028px){ .acad-touch{ padding:20px 0 20px 40px; border-top:0; border-left:1px solid var(--su-gray-medium); } }
.acad-touch h2{ font-family:var(--sans); font-weight:700; color:var(--su-gray-dark); font-size:1.375rem; line-height:1.3; margin-bottom:10px; }
.acad .acad-touch p{ font-size:1rem; line-height:1.6; margin-bottom:1rem; }

/* ---------- .button.button-primary ---------- */
.acad-btn{
  display:inline-flex; align-items:center; justify-content:space-between;
  font-family:var(--sans); font-weight:700; font-size:1rem; line-height:1.4rem; letter-spacing:.05rem;
  color:#fff; background:var(--su-blue); border:2px solid var(--su-blue); border-radius:0;
  padding:18px; text-decoration:none; max-width:100%; transition:all .25s;
}
@media (min-width:768px){ .acad-btn{ font-size:1.125rem; padding:24.3px; } }
.acad-btn:hover{ background:#fff; color:var(--su-blue); border-color:var(--su-orange); text-decoration:none; }
.acad-btn:focus-visible{ background:var(--su-blue); color:var(--su-orange); border:2px dashed var(--su-orange); outline:none; }
.acad-btn:active{ color:var(--su-orange); }

/* ---------- .link-cta + .animated-arrow ---------- */
.acad-cta{
  display:inline-flex; align-items:center; font-family:var(--sans); font-weight:700;
  font-size:1rem; line-height:1.8; color:var(--su-blue); text-decoration:none;
}
.acad-cta:hover,.acad-cta:focus-visible{ color:var(--su-orange-dark); text-decoration:underline; }
.acad-arrow{
  position:relative; display:inline-flex; align-self:center; vertical-align:middle;
  width:24px; margin-left:10px; transition:.5s;
}
.acad-arrow::before{ content:""; width:100%; height:2px; align-self:center; background:var(--su-orange-dark); }
.acad-arrow::after{
  content:""; width:8px; height:8px; position:absolute; right:1px; align-self:center;
  border-top:2px solid var(--su-orange-dark); border-right:2px solid var(--su-orange-dark); transform:rotate(45deg);
}
.acad-cta:hover .acad-arrow,.acad-cta:focus-visible .acad-arrow{ width:24px; }
@media (min-width:768px){ .acad-cta:hover .acad-arrow,.acad-cta:focus-visible .acad-arrow{ width:40px; } }
.acad-arrow--light::before{ background:var(--su-blue-light); }
.acad-arrow--light::after{ border-color:var(--su-blue-light); }
@media (prefers-reduced-motion:reduce){ .acad-arrow,.acad-btn{ transition:none; } }

/* ---------- two-column list (AI Programs, Coursework) ---------- */
.acad-collist{ list-style:none; margin:0; padding:0; width:100%; display:grid; grid-template-columns:1fr; column-gap:3.75rem; }
@media (min-width:768px){ .acad-collist{ grid-template-columns:1fr 1fr; } }
.acad-collist li{
  width:100%; font-family:var(--sans); font-weight:700; font-size:1.5rem; line-height:1.2;
  margin-bottom:1.25rem; padding:0 0 1.25rem .6rem; border-bottom:1px solid var(--su-line); color:var(--su-gray-dark);
}
@media (min-width:768px){  .acad-collist li{ font-size:1.625rem; line-height:1.3; } }
@media (min-width:1012px){ .acad-collist li{ font-size:1.875rem; } }
.acad-collist a{
  color:var(--su-blue); text-decoration:underline;
  text-decoration-color:var(--su-orange-dark); text-underline-offset:.3125rem;
}
.acad-collist a:hover{ color:var(--su-orange-dark); }
.acad-collist + p{ margin-top:20px; }

/* ---------- faculty cards (.flagship-cards) ----------
   The source lets this block run to 1640px, wider than the 1366px content
   container, which is what makes the cards read large (~525px each). */
.acad .acad-wide{ max-width:1640px; }
.acad-cards{ display:grid; grid-template-columns:1fr; gap:30.08px 40px; max-width:1640px; margin:0 auto; }
@media (min-width:768px){  .acad-cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1012px){ .acad-cards{ grid-template-columns:repeat(3,1fr); } }
.acad .card{ background:#fff; border:0; border-radius:0; box-shadow:var(--su-shadow-1); }
.acad .card__media{ aspect-ratio:1300/866; background:#000; }
.acad .card__body{ padding:1.5rem; }
@media (min-width:1012px){ .acad .card__body{ padding:clamp(1.5rem,3.7vw,60px); } }
.acad .card__title{ font-family:var(--sans); font-weight:700; color:var(--su-blue); font-size:1.5rem; line-height:1.3; margin-bottom:10px; }
@media (min-width:768px){  .acad .card__title{ font-size:1.625rem; } }
@media (min-width:1012px){ .acad .card__title{ font-size:1.875rem; } }
.acad .card__desc{ margin-bottom:20px; }

/* ---------- stats (.differentiators) ----------
   Gradient band. Each card: numeral + suffix, a 1px blue-light rule, label. */
.acad-stats{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:center; gap:2.5rem; }
@media (min-width:768px){  .acad-stats{ flex-flow:row wrap; } }
.acad-stat{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; width:100%; background:transparent; }
@media (min-width:768px){  .acad-stat{ padding:0 32px; flex-flow:row; } }
@media (min-width:1012px){ .acad-stat{ padding:0; width:48%; flex-wrap:nowrap; } }
.acad-stat__figure{ display:flex; align-items:center; flex:0 0 auto; }
.acad-stat__num{
  font-family:var(--block); font-weight:500; color:var(--su-orange);
  font-size:clamp(4.5rem,9vw,10rem); line-height:1;
}
.acad-stat__sym{ font-family:var(--block); font-weight:500; color:var(--su-orange); line-height:1; margin-left:16px; }
/* rem, not px, so these follow a reader's browser text-size setting (source used 90/120/140px) */
.acad-stat__sym--pct{ font-size:5.625rem; align-self:baseline; margin-bottom:1rem; }
@media (min-width:768px){  .acad-stat__sym--pct{ font-size:7.5rem; } }
@media (min-width:1012px){ .acad-stat__sym--pct{ font-size:8.75rem; } }
.acad-stat__sym--plus{ font-size:5.625rem; align-self:center; }
.acad-stat__rule{ flex:1 1 auto; width:80%; max-width:46px; height:1px; border-top:1px solid var(--su-blue-light); margin-left:20px; align-self:center; }
.acad-stat__label{ display:flex; flex-direction:column; text-align:left; width:100%; font-family:var(--sans); font-size:1.125rem; line-height:1.8; color:#fff; }
@media (min-width:768px){ .acad-stat__label{ width:50%; margin-left:10px; align-self:center; } }
.acad .section--navy .section__head{ padding-bottom:0; margin-bottom:2.5rem; }
@media (min-width:1012px){ .acad .section--navy .section__head{ margin-bottom:3.75rem; } }

/* ---------- promo banner (.promo-banner) ----------
   #FAFAFA band, copy left, 5:4 photo right, navy (not orange) h2.          */
.acad-promo{ background:var(--su-gray-light-5); padding:0 1.25rem 3.12rem; position:relative; }
@media (min-width:768px){  .acad-promo{ padding:3.75rem 2.5rem; } }
@media (min-width:1012px){ .acad-promo{ padding:7.5rem 8.75rem 6.25rem; margin-bottom:calc(30px + 3.75rem); } }
.acad-promo__inner{ display:flex; flex-direction:column-reverse; align-items:center; max-width:1640px; margin:0 auto; }
@media (min-width:768px){ .acad-promo__inner{ flex-direction:row-reverse; } }
.acad-promo__media{ width:100%; }
@media (min-width:768px){  .acad-promo__media{ max-width:35%; } }
@media (min-width:1012px){ .acad-promo__media{ max-width:66%; } }
.acad-promo__media img{ width:100%; height:auto; aspect-ratio:5/4; object-fit:cover; display:block; }
@media (min-width:768px){ .acad-promo__media img{ width:auto; margin-left:auto; } }
.acad-promo__copy{ padding:1.88rem 1.25rem 0; }
@media (min-width:768px){  .acad-promo__copy{ padding:0 2.5rem 0 60px; max-width:50%; } }
@media (min-width:1012px){ .acad-promo__copy{ padding:0 0 0 5rem; max-width:50%; } }
.acad .acad-promo__title{ color:var(--su-blue); font-size:1.5rem; line-height:1.2; margin-bottom:1.25rem; }
@media (min-width:768px){  .acad .acad-promo__title{ font-size:1.625rem; line-height:1.3; } }
@media (min-width:1012px){ .acad .acad-promo__title{ font-size:1.875rem; } }
.acad-promo__copy .acad-btn{ margin-top:1rem; }

/* ---------- checkerboard (.media-split-block) ---------- */
.acad-checker{ padding:2.5rem 0; }
.acad-checker .section__head{ margin-bottom:2.5rem; padding:0 1.25rem; }
.acad-split{ display:flex; flex-direction:column; gap:8px; max-width:2048px; margin:0 auto; }
@media (min-width:768px){ .acad-split{ flex-direction:row; } }
.acad-split + .acad-split{ margin-top:2.5rem; }
.acad-split__media{ flex:0 1 50%; min-width:0; }
.acad-split__media img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block; }
@media (min-width:768px){ .acad-split__media img{ aspect-ratio:3/2; height:100%; } }
.acad-split__body{ flex:0 1 50%; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:1.88rem 1.25rem 0; }
@media (min-width:768px){  .acad-split__body{ padding:0 2.5rem; } }
@media (min-width:1280px){ .acad-split__body{ padding:0 8.75rem; } }
.acad-split__body h3{ font-family:var(--sans); font-weight:700; color:var(--su-blue); font-size:1.5rem; line-height:1.1; margin-bottom:10px; }
@media (min-width:768px){  .acad-split__body h3{ font-size:1.625rem; line-height:1.3; margin-bottom:15px; } }
@media (min-width:1280px){ .acad-split__body h3{ font-size:2.5rem; } }
.acad .acad-split__body p{ font-size:1.125rem; line-height:1.8; margin-bottom:1.25rem; }
.acad-split__body .acad-btn{ margin-bottom:1.25rem; align-self:flex-start; }
/* even rows: image on the right */
@media (min-width:768px){ .acad-split--flip{ flex-direction:row-reverse; } }

/* ---------- testimonial ---------- */
.acad-quote-row{ display:flex; flex-direction:column; align-items:flex-start; background:var(--su-gradient); color:#fff; }
@media (min-width:1012px){ .acad-quote-row{ flex-direction:row; align-items:center; justify-content:space-between; } }
.acad-quote-row__body{ flex:1 1 auto; min-width:0; padding:3.12rem 1.25rem; }
@media (min-width:1012px){ .acad-quote-row__body{ padding:clamp(2.5rem,4vw,5rem) clamp(2.5rem,6vw,8.75rem); } }
/* the photo is a square at 30% of the viewport (432px at 1440, 768px at 2560),
   flush right, and it sets the band's height; the copy centres against it */
.acad-quote-row__media{ flex:0 0 auto; width:100%; }
@media (min-width:1012px){ .acad-quote-row__media{ flex:0 0 30%; width:30%; } }
.acad-quote-row__media img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block; }
.acad .acad-quote{ margin:0; padding-bottom:16px; }
@media (min-width:1366px){ .acad .acad-quote{ padding-bottom:1.5rem; } }
.acad .acad-quote p{
  font-family:var(--serif); font-weight:400; color:#fff; margin:0;
  font-size:2rem; line-height:1.6;
}
@media (min-width:1366px){ .acad .acad-quote p{ font-size:3rem; } }
.acad .acad-quote p::before{ content:"\201C"; }
.acad .acad-quote p::after{ content:"\201D"; }
.acad .acad-quote cite{ display:block; margin-top:1rem; font-family:var(--sans); font-style:normal; color:#fff; font-size:1rem; font-weight:700; line-height:1.3; }
@media (min-width:544px){  .acad .acad-quote cite{ font-size:1.0625rem; } }
@media (min-width:1366px){ .acad .acad-quote cite{ font-size:1.375rem; } }
.acad .acad-quote cite span{ display:block; margin-top:.25rem; font-size:.75rem; font-weight:400; line-height:1.6; color:#fff; }
@media (min-width:544px){  .acad .acad-quote cite span{ font-size:.875rem; } }
@media (min-width:1366px){ .acad .acad-quote cite span{ font-size:1rem; } }
.acad .acad-quote-link{
  display:inline-flex; align-items:center; margin-top:1rem; padding-right:16px;
  font-family:var(--sans); font-weight:700; font-size:1.5rem; line-height:1.8; color:#fff; text-decoration:none;
}
.acad .acad-quote-link:hover,.acad .acad-quote-link:focus-visible{ color:var(--su-orange); text-decoration:underline; }