/*
 * This file did not exist before Phase 7's follow-up audit. It is the
 * theme's new home for styleguide/components/04-layouts/* and
 * styleguide/components/05-mobile/* -- Fractal source that isn't tied to
 * any one SDC "piece"/"section" (each of which got its own real component
 * conversion task) but also isn't part of 00-base's html/body-level
 * foundation (css/base/reset.css, typography.css, elements.css,
 * customizations.css). Because nothing forced a "this layout file → this
 * CSS file" mapping the way SDC conversion did, this whole layer was
 * silently skipped by every phase of this migration -- found via a
 * systematic audit dispatched after a user found the missing h1-h6
 * typography and asked "what else that isn't a component didn't get
 * transferred? That's the pattern." Every rule below is confirmed real in
 * styleguide/public/css/global.css and has a confirmed live template
 * consumer, unless individually noted otherwise.
 */

/*
 * Translated from
 * styleguide/components/04-layouts/13-shells/01-master/master.scss.
 * Real call site: college_of_business.theme sets $shell =
 * 'shell-wrapper' for pages with sidebar content; templates/layout/
 * page.html.twig prints <div class="{{ shell }}"> and, when shell ==
 * 'shell-wrapper', lays the sidebar and ".main-content" out side by side
 * inside it (the "main" selector below is that same page.html.twig
 * <main>). Without this rule, every sidebar page lost its wrapper padding
 * and the desktop two-column layout entirely.
 */
.shell-wrapper {
  padding: var(--space-double);
  background-color: var(--color-white);
}

@media only screen and (min-width: 769px) {
  .shell-wrapper {
    padding: var(--space) var(--space-triple) var(--space-triple) var(--space-triple);
  }
}

.shell-wrapper main {
  display: flex;
  flex-direction: column;
  margin: var(--space-double) 0 0 0;
}

@media only screen and (min-width: 769px) {
  .shell-wrapper main {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin: var(--space-quadruple) 0 0 0;
  }
}

.shell-wrapper main .subnav-select {
  margin: 0 0 var(--space) 0;
}

/*
 * Translated from
 * styleguide/components/04-layouts/13-shells/02-directory/directory.scss
 * (the ".directory-wrapper" portion only -- ".directory-profile"/
 * ".directory-details" are each their own SDC and get their own CSS file:
 * components/directory-profile/directory-profile.css and
 * components/directory-details/directory-details.css). Real call site:
 * templates/content/node--profile--full.html.twig wraps both of those
 * SDCs in "<div class="directory-wrapper">". Without this rule, all 147
 * published profile nodes' two-column directory layout was entirely
 * unstyled.
 */
.directory-wrapper {
  display: flex;
  flex-direction: column;
  padding: var(--space-double);
}

@media only screen and (min-width: 500px) {
  .directory-wrapper {
    padding: 0;
  }
}

@media only screen and (min-width: 769px) {
  .directory-wrapper {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    padding: 0;
  }
}

/*
 * Translated from
 * styleguide/components/04-layouts/13-shells/03-story_profile/story_profile.scss.
 * Real call site: college_of_business.theme sets $shell =
 * 'shell-wrapper-nonav' for Stories, Webforms, the /news listing, and any
 * page with an empty sidebar; page.html.twig prints
 * <div class="{{ shell }}">. Without this rule those pages lost their
 * wrapper padding and centered content margins.
 */
.shell-wrapper-nonav {
  padding: var(--space-double);
  background-color: var(--color-white);
}

@media only screen and (min-width: 769px) {
  .shell-wrapper-nonav {
    padding: var(--space) var(--space-triple) var(--space-triple) var(--space-triple);
  }
}

.shell-wrapper-nonav main {
  margin: var(--space-quadruple) 0 0 0;
}

.shell-wrapper-nonav main .shell-nonav {
  margin: 0;
}

@media only screen and (min-width: 769px) {
  .shell-wrapper-nonav main .shell-nonav {
    margin: 0 var(--space-sextuple);
  }
}

/*
 * Translated from
 * styleguide/components/04-layouts/13-shells/04-blog_post/blog_post.scss
 * (the ".blog--podcast::before" rule already lives in
 * components/media-box/media-box.css -- these are the remaining,
 * un-ported rules from the same source file). Real call site:
 * college_of_business.theme sets $shell = 'shell-wrapper-nonav-blog' for
 * ilLUminate blog posts; page.html.twig prints
 * <div class="{{ shell }}">. Without this rule, all 188 published
 * illuminate_blog_post nodes lost their wrapper padding/margins.
 */
.shell-wrapper-nonav-blog {
  padding: var(--space-double);
  background-color: var(--color-white);
}

@media only screen and (min-width: 769px) {
  .shell-wrapper-nonav-blog {
    padding: var(--space) var(--space-triple) var(--space-triple) var(--space-triple);
  }
}

.shell-wrapper-nonav-blog main {
  margin: var(--space-quadruple) 0 0 0;
}

.shell-wrapper-nonav-blog main .shell-nonav {
  margin: 0;
}

@media only screen and (min-width: 769px) {
  .shell-wrapper-nonav-blog main .shell-nonav {
    margin: 0 var(--space-sextuple);
  }
}

@media only screen and (max-width: 500px) {
  .media-section.shell .media-box {
    display: none;
  }

  .media-section.shell .media-box:first-of-type {
    display: block;
  }
}

/*
 * Translated from
 * styleguide/components/04-layouts/13-shells/05-webforms/webforms.scss
 * (the ".webform.filter .form--inline .form-type-select
 * .chosen-container-multi" fragment of this concern already lives in
 * css/base/elements.css, ported from a different source file --
 * _04-base.scss -- that happens to share the same selector prefix; not a
 * duplicate). Real call site: <section class="webform filter"> is emitted
 * by templates/views/views-view--directory.html.twig,
 * views-view--news-listing.html.twig, and
 * views-view--spotlight-listing--block.html.twig. Without these rules,
 * the exposed filter/search UI on the directory (147 profiles), news
 * listing (218 news), and spotlight (43) listing pages rendered
 * unstyled, with a broken layout.
 */
.webform {
  background-color: var(--color-grey-lightest);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-double) var(--space);
}

@media only screen and (min-width: 769px) {
  .webform {
    padding: var(--space-triple) var(--space-octuple);
  }
}

.webform form {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}

.webform form [type="submit"] {
  margin: var(--space) 0 0 0;
  background-color: var(--color-night-sky);
  color: var(--color-white);
  width: 250px;
}

.webform form [type="submit"]:hover,
.webform form [type="submit"]:focus {
  background-color: var(--color-white);
  color: var(--color-night-sky);
}

.webform.filter .form--inline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.webform.filter .form--inline div,
.webform.filter .form--inline details,
.webform.filter .form--inline fieldset {
  float: unset;
  margin: 0 var(--space);
  position: relative;
}

.webform.filter .form--inline input[name="name"],
.webform.filter .form--inline summary {
  background-color: var(--color-white);
  width: 275px;
}

.webform.filter .form--inline label {
  font-weight: bold;
}

.webform.filter .form--inline fieldset div {
  margin: 0 var(--space-one-fourth);
}

.webform.filter .form--inline fieldset label {
  display: inline;
}

.webform.filter .form--inline fieldset legend {
  display: none;
}

.webform.filter .form--inline fieldset .form-radios {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.webform.filter .form--inline details label {
  display: inline;
  margin: 0;
}

.webform.filter .form--inline details .details-wrapper {
  padding: 0 var(--space);
  position: absolute;
  background-color: var(--color-white);
  width: 275px;
  left: -15px;
  border: 1px solid var(--color-grey-dark);
  border-top: 1px solid var(--color-grey-lightest);
  z-index: 10;
}

.webform.filter .form--inline details .details-wrapper div {
  margin: 0;
}

.webform.filter .form--inline details .details-wrapper ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.webform.filter .form--inline details .details-wrapper ul li {
  margin: var(--space-one-half) 0;
}

.webform.filter .form--inline details .details-wrapper ul li label {
  font-weight: 600;
}

.webform.filter .form--inline details .details-wrapper ul li .form-checkbox {
  margin: 0 var(--space-one-half) 0 0;
}

.webform.filter .form--inline details .details-wrapper ul li ul {
  padding: 0 0 var(--space-one-fourth) var(--space-one-half);
  border-left: 3px solid var(--color-golden-hour);
}

.webform.filter .form--inline details .details-wrapper ul li ul label {
  font-weight: 400;
}

.webform.filter .form--inline div {
  display: flex;
  flex-direction: column;
  margin: var(--space-one-half) 0;
}

@media only screen and (min-width: 769px) {
  .webform.filter .form--inline div {
    margin: 0 var(--space);
  }
}

.form-item-category select {
  max-width: 85%;
}

@media only screen and (min-width: 769px) {
  .form-item-category select {
    max-width: 100%;
  }
}

.form-type-radio {
  align-items: center;
}

/*
 * Translated from
 * styleguide/components/04-layouts/09-news_insights_listing/news_insights_listing.scss.
 * (The source's own ".webform.filter [type="submit"] { //display: none; }"
 * is a Sass comment -- it compiles to no real CSS and is correctly not
 * reproduced here, the same "empty ruleset" precedent used elsewhere in
 * this migration.) Real call site: views-view--news-listing.html.twig
 * adds "view-id-news_listing"/"view-display-id-block_1" classes to its
 * root element and a ".view-header" wrapper. Without this rule the news
 * listing page lost its filter pull-up positioning and header image
 * sizing.
 */
.view-id-news_listing.view-display-id-block_1 {
  margin-top: -5em;
}

.view-id-news_listing.view-display-id-block_1 .webform.filter {
  margin-left: -3em;
  margin-right: -3em;
}

@media only screen and (max-width: 769px) {
  .view-id-news_listing.view-display-id-block_1 .webform.filter {
    margin-left: -2em;
    margin-right: -2em;
  }
}

.view-id-news_listing.view-display-id-block_1 .view-header {
  display: flex;
  justify-content: flex-end;
}

.view-id-news_listing.view-display-id-block_1 .view-header img {
  height: 150px;
  width: auto !important;
}

/*
 * Translated from styleguide/components/04-layouts/12-magazine/magazine.scss.
 * The bare "blockquote" element rule below is a genuinely unscoped,
 * sitewide selector in the Fractal source (not actually magazine-specific
 * despite living in this file) -- it stays unscoped here too, matching
 * the source exactly. Real call sites for the rest:
 * templates/content/node--magazine--full.html.twig (".mag-main-about",
 * ".mag-main-layout"), node--magazine-article--full.html.twig
 * (".mag-article-main-layout", ".mag-article-main-about",
 * ".mag-article-listing"), and
 * node--magazine-article--magazine-article-listing.html.twig
 * (".magazine_section", nested inside both layouts above). Without these
 * rules, all 5 published magazine nodes and 167 published
 * magazine_article nodes lost their responsive flex column/row layouts.
 * (The source's own ".view-eva.view-magazine-article-article-listing",
 * ".page-node-type-magazine-article .main-content", and
 * ".page-node-type-magazine .main-content" rulesets are empty in the
 * Fractal source -- Sass compiles an empty ruleset to nothing, so they
 * produce no real CSS and are not reproduced here.)
 */
blockquote {
  background: var(--color-lehigh-brown-10);
  border-left: 10px solid var(--color-golden-hour);
  margin: 1.5em 10px;
  padding: 0.5em 10px;
}

blockquote p,
blockquote h2 {
  display: inline;
  font-size: 1.9rem;
}

.view-id-magazine_listing {
  margin-top: 4em;
}

.mag-main-about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 50em;
}

@media screen and (min-width: 500px) {
  .mag-main-about {
    flex-direction: row;
  }
}

.mag-main-about img {
  margin-right: 1em;
  align-self: center;
}

@media screen and (min-width: 500px) {
  .mag-main-about img {
    max-width: 140px;
    align-self: unset;
  }
}

.mag-main-layout {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 920px) {
  .mag-main-layout {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media screen and (min-width: 920px) {
  .mag-main-layout .magazine_section {
    padding-right: 2em;
  }
}

.mag-main-layout .magazine-article-listing {
  margin-top: 2em;
}

@media screen and (min-width: 920px) {
  .mag-main-layout .magazine-article-listing {
    margin-top: 0;
  }
}

.mag-article-main-layout {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 1224px) {
  .mag-article-main-layout {
    flex-direction: row;
  }
}

@media screen and (min-width: 1224px) {
  .mag-article-main-layout .mag-article-main-about {
    padding-right: 2em;
  }
}

.mag-article-main-layout .mag-article-listing {
  min-width: 300px;
}

.mag-article-main-layout .mag-article-listing .magazine-article-listing {
  margin-top: 2em;
}

@media screen and (min-width: 920px) {
  .mag-article-main-layout .mag-article-listing .magazine-article-listing {
    margin-top: 0;
  }
}

/*
 * Translated from styleguide/components/05-mobile/_05-mobile.scss.
 * Real call site: templates/navigation/header.twig's root element carries
 * class="lehigh-nav desktop flex". Without ".desktop" (which hides an
 * element below 769px), and with header.css's own ".lehigh-nav {
 * display: flex }" applying unconditionally, the secondary/utility nav
 * was showing on mobile instead of being hidden as intended.
 */
.desktop {
  display: none !important;
}

@media only screen and (min-width: 769px) {
  .desktop {
    display: block !important;
  }
}

@media only screen and (min-width: 769px) {
  .desktop.flex {
    display: flex !important;
  }
}

.mobile {
  display: block !important;
}

@media only screen and (min-width: 769px) {
  .mobile {
    display: none !important;
  }
}

/*
 * Translated from
 * styleguide/components/03-sections/28-magazine_section/magazine_section.scss.
 * Unlike everything else in this file, this is NOT a 04-layouts/05-mobile
 * source -- it's a real Fractal 03-section that, unlike every other
 * section/piece in this migration, never received its own SDC conversion
 * at all (found via live Playwright verification of the magazine.scss fix
 * above: comparing a real magazine article page against production showed
 * the article-listing rows stacking full-width locally instead of
 * production's compact image+text row layout). Both real call sites still
 * use the exact raw class names from the Fractal source directly (no SDC
 * embed for this specific markup), so the CSS is ported here rather than
 * inventing a new SDC the templates don't call: ".magazine_section" is used
 * by templates/content/node--magazine-article--magazine-article-listing.html.twig
 * (167 magazine_article nodes' listing rows); ".magazine-listing-item" is
 * used by templates/content/node--magazine--magazine-listing.html.twig (5
 * magazine nodes' listing rows).
 */
.magazine_section {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--space-double) 0;
}

@media screen and (min-width: 769px) {
  .magazine_section {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
}

.magazine_section .hover_box_image {
  margin: 0 0 var(--space) 0;
  width: 140px;
}

@media screen and (min-width: 769px) {
  .magazine_section .hover_box_image {
    margin: 0 var(--space-one-half) 0 0;
  }
}

.magazine_section .magazine_text h3 a {
  color: var(--color-grey-darkest);
  text-decoration: underline;
}

.magazine_section .magazine_text h3 a:hover,
.magazine_section .magazine_text h3 a:focus {
  text-decoration: none;
}

.magazine-listing-item {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--space-double) 0;
}

@media screen and (min-width: 769px) {
  .magazine-listing-item {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
}

.magazine-listing-item--cover {
  max-width: 140px;
  margin-right: 1em;
}

.magazine-listing-item--title {
  align-self: center;
}

/*
 * Translated from
 * styleguide/components/02-pieces/15-profile_list/profile_list.scss.
 * Unlike everything else in this file, this is a real Fractal 02-piece --
 * found via a systematic follow-up audit of all 51 Fractal pieces/sections
 * against theme SDCs (dispatched after a user asked "what other remaining
 * stuff didn't get ported?"), the same "never received an SDC conversion,
 * but its real template already uses the raw classes directly" pattern as
 * ".magazine_section" above. Real call site:
 * templates/views/views-view-unformatted--directory.html.twig hardcodes
 * `<div class="az-index-group">`/`<ul class="profile-list">` directly (no
 * SDC embed) for the directory/A-Z index listing. The "az-index" SDC's own
 * CSS only styles the inner ".az-profile" rows it's embedded into by that
 * same template; the containing group/list wrapper was entirely unstyled.
 * Without this rule, the directory listing's alphabetical group divider/
 * spacing and 3-column profile grid were lost, with profiles instead
 * stacking full-width.
 */
.az-index-group {
  border-bottom: 1px solid var(--color-grey-light);
  padding: var(--space-double) var(--space-double) 0 var(--space-double);
}

@media only screen and (min-width: 769px) {
  .az-index-group {
    margin: 0 0 var(--space-triple) 0;
    border: 0;
    padding: 0;
  }

  .az-index-group:last-of-type {
    margin: 0;
  }
}

.az-index-group h2 {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-grey-dark);
}

.az-index-group .profile-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.az-index-group .profile-list li {
  width: inherit;
  height: inherit;
  margin: var(--space) var(--space-double);
}

@media only screen and (min-width: 769px) {
  .az-index-group .profile-list li {
    max-width: calc(100% / 3);
    min-width: calc(100% / 3);
    margin: var(--space) 0;
  }
}

/*
 * Translated from
 * styleguide/components/03-sections/16-az_index_section/az_index_section.scss.
 * Found missing by a user directly comparing /directory against production
 * (visible as missing outer padding around the whole A-Z listing at
 * desktop width): this is a SEPARATE Fractal directory from the
 * "az_index" piece (styleguide/components/02-pieces/13-profile/01-az_index/),
 * which the earlier full piece/section coverage audit had marked
 * "COVERED" by fuzzy-matching against the theme's "az-index" SDC name --
 * that SDC covers the az_index PIECE (the inner ".az-profile" rows) but
 * not this distinct, separately-nested SECTION's own single wrapper rule,
 * which the audit's fast-path matching didn't dig into. Real call site:
 * templates/views/views-view--directory.html.twig hardcodes
 * `<section class="az-index-section">` directly around the view's rows
 * (no SDC embed) -- the same raw-template pattern as ".az-index-group"
 * above, just one level further out.
 */
@media only screen and (min-width: 769px) {
  .az-index-section {
    padding: var(--space-quadruple);
  }
}