/* The component styles the Nuxt app inlined into the medialoot.com browse pages (category.vue, TopFilter.vue,
   SideFilter.vue, ItemGrid.vue, FilterTags.vue), without their scoping attributes. Rules for parts not ported are left out. */

/* The Nuxt page base: Bulma's body type, and the Bulma buttons new-combined.css leaves out. */
.category-header, .main-category { color: #4a4a4a; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.5; }
.category-header .button, .main-category .button { appearance: none; align-items: center; border: 1px solid #dbdbdb; border-radius: 3px; box-shadow: none; display: inline-flex; font: inherit; font-size: 1rem; height: 2.25em; justify-content: center; line-height: 1.5; padding: calc(.375em - 1px) .75em; position: relative; vertical-align: top; user-select: none; background-color: #fff; color: #363636; cursor: pointer; text-align: center; white-space: nowrap; }
.top-filter .button:hover { border-color: #b5b5b5; color: #363636; }
.main-category .button.is-medium { font-size: 1.25rem; }
.main-category .button.is-text { background-color: transparent; border-color: transparent; color: #4a4a4a; text-decoration: underline; }

/* The hero */
.container.is-flex { display: flex; justify-content: space-between; }
.container.is-flex .content { width: 70%; display: flex; flex-direction: column; justify-content: center; margin-bottom: 0; }
.hero-svg { position: absolute; top: 0; left: 0; right: 0; width: 1400px; color: #fff; opacity: .06; margin: 0 auto; }
.section.is-dark { background: linear-gradient(45deg, #2d5c98, #549bdc); background-size: cover; padding: 3em 1.5em 4em; margin-top: 0; position: relative; overflow: hidden; }
.section.is-dark h1 { color: hsla(0, 0%, 100%, .9); text-shadow: 0 2px 35px rgba(0, 0, 0, .1); font-weight: 700; margin-bottom: .5rem; padding: 0; }
.section.has-featured { margin-bottom: 0; }
.category-desc { font-size: 120%; color: hsla(0, 0%, 100%, .8); text-align: left; margin: 0 0 40px; padding: 0; }
.featured-items { width: 25%; min-width: 200px; }
.featured-items .item-grid.is-small .item-box { width: 100%; }
/* The Nuxt app cropped the featured preview to 350 × 210; the card crop is a little taller. */
.featured-items img { aspect-ratio: 5 / 3; object-fit: cover; }
.item-grid.is-small { color: #ccc; }

@media (max-width: 800px) {
  .container.is-flex { flex-direction: column; }
  .container.is-flex .content { width: 100%; text-align: center; }
  .container.is-flex .content .category-desc { text-align: center; }
  .container.is-flex .featured-items { width: 80%; margin-left: 10%; }
}

/* The top filter bar */
.main-category { background-color: #fafafa; position: relative; padding-bottom: 110px; }
.top-filter { padding: 30px 50px 30px 60px; margin-top: -100px; margin-bottom: 1.5rem; background-color: #fff; max-width: 100vw; box-shadow: 0 1px 6px rgba(0, 0, 0, .1); position: relative; width: 100%; z-index: 10; }
.top-filter div { margin-right: 5px; }
.top-filter .search { flex-grow: 1; margin: 0; }
.top-filter .search .control { padding: 0; }
.top-filter .dropdown { z-index: 50; }
.top-filter .dropdown .dropdown-menu { z-index: 1000; }
.top-filter .filter .dropdown-content { padding: 20px; display: flex; justify-content: space-between; }
.top-filter .filter .dropdown-content hr { margin: 5px 0; background-color: #eee; }
.top-filter .filter .right { padding-left: 20px; width: 150px; float: right; border-left: 1px solid #eee; }
.top-filter .filter .left { width: 150px; padding-right: 10px; }
.top-filter .filter .field { margin-bottom: 0; color: #777; font-size: .85em; }
.top-filter .filter p { margin: 0; padding: 0; }
.top-filter .is-filtered::after { content: ""; position: absolute; width: 16px; height: 16px; background-color: #31b5eb; border-radius: 20px; overflow: hidden; top: -5px; right: 0; border: 4px solid #fff; }

@media (min-width: 1100px) {
  .top-filter { max-width: 96vw; width: calc(100% + 110px); transform: translateX(-50%); left: 50%; }
}

.top-filter[hidden] { display: none; }

/* The "Switch to Side Filter" handle at the bar's left edge; its button resets stand in for the legacy <div>. */
.top-filter .switch-filter, .side-filter .switch-filter { appearance: none; padding: 0; font: inherit; position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; color: #ddd; cursor: pointer; }
.top-filter .switch-filter { height: 105px; width: 24px; left: 0; top: 0; background-color: #fafafa; border: 0; border-right: 1px solid #f0f0f0; }
.switch-filter i { line-height: 100%; }

/* The side filter (SideFilter.vue): BrowseFilters sets body.has-side-filter and renders the column in place of the bar;
   .browse-columns then works as Bulma's .columns, with the grid as the second column. */
.has-side-filter .has-featured { padding-bottom: 1em; }
.has-side-filter .browse-columns { margin: -.75rem -.75rem 0; }
.has-side-filter #browse-static, .has-side-filter .browse-results { padding: .75rem; }
.has-side-filter .main-category .item-grid { margin-top: 1.5em; }
.has-side-filter .main-category .item-box { width: 47%; margin-right: 3%; }

@media screen and (min-width: 769px) {
  .has-side-filter .browse-columns { display: flex; }
  .has-side-filter #browse-static, .has-side-filter .browse-results { flex: 1; min-width: 0; }
}

.side-filter { margin-top: 0; }
.side-filter p { padding: 0; }
.side-filter .switch-filter { height: 35px; width: 35px; left: -45px; top: 13px; background-color: transparent; border: 1px solid #f0f0f0; }
.side-filter .search { font-size: 1em; border-radius: 0; margin-bottom: 15px; }
.side-filter .menu-list { margin-bottom: 1.5em; }
.side-filter .menu-list a { padding: .4em .3em; font-size: .95em; }
.side-filter .field { margin-bottom: 0; }
.top-filter .button .icon { color: #ccc; width: 1.5em; height: 1.5em; margin-left: .1875em; margin-right: calc(-.375em - 1px); }
.top-filter .search .icon { color: #dbdbdb; }

.filter-tags .button { font-size: 90%; background-color: hsla(0, 0%, 100%, .3); color: #333; margin: .75em 5px .75em 0; }

/* Font Awesome 4 is not loaded on medialoot.com pages; these draw the glyphs the legacy markup asked it for. */
.main-category .fa { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.fa-angle-down { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fa-sliders { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 3.5h14M1 8h14M1 12.5h14' stroke='%23000' stroke-width='1.2'/%3E%3Crect x='9' y='1.5' width='3' height='4' rx='.5'/%3E%3Crect x='3.5' y='6' width='3' height='4' rx='.5'/%3E%3Crect x='10.5' y='10.5' width='3' height='4' rx='.5'/%3E%3C/svg%3E"); }
.fa-search { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.75' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M10 10l4.5 4.5' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fa-angle-double-down { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l4 4 4-4M4 8.5l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fa-angle-double-up { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12l4-4 4 4M4 7.5l4-4 4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* The item grid */
/* The Nuxt grid sat 72 px under the bar (the bar's 24 px margin and an empty 48 px filter tags row), 24 px under the
   tags; on a phone that row's second, empty column stacked under the tags and added 48 px. */
.main-category .item-grid { margin-top: 4.5rem; }
.main-category .filter-tags + .item-grid { margin-top: 1.5rem; }

@media (max-width: 768px) {
  .main-category .item-grid { margin-top: 6rem; }
  .main-category .filter-tags + .item-grid { margin-top: 4.5rem; }
}
.item-grid { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-right: -3%; }
.item-box .item-link:hover { text-decoration: none; }
.item-box { margin-bottom: 3%; width: 47%; position: relative; margin-right: 3%; background-color: #fff; border-radius: 6px; padding: 0; }
.item-box::before { content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 100%; border-radius: 6px; height: 100%; box-shadow: 0 1px 7px rgba(70, 70, 70, .2); transition: opacity .3s ease; opacity: .5; }
.item-box:hover::before { box-shadow: 0 2px 12px rgba(70, 70, 70, .2); opacity: 1; }
.item-box .item-link .button { float: right; margin-right: 15px; margin-top: 10px; margin-bottom: 15px; font-size: 90%; background-color: #eee; border: none; letter-spacing: 0; font-weight: 500; color: rgba(0, 0, 0, .6); opacity: .7; padding: 0 15px; position: absolute; bottom: 5px; right: 5px; }
.item-box.resources .item-link .button { background-color: #00aeef; color: #fff; font-weight: 700; }
.item-box.resources.free .item-link .button { background-color: #15d15d; }
/* Signed in, the Nuxt card dropped the price ("Download"); here a member (body.subscriber, from AuthNav) gets that. */
.item-box .item-link .button.show-subscriber { display: none; }
.subscriber .item-box .item-link .button.show-subscriber { display: inline-flex; }
.item-box.blog { padding: 22px; padding-bottom: 0; }
.item-box.blog p { padding-left: 1px; padding-right: 1px; }
.item-box.blog img { border-radius: 0; }
.item-box p.meta { font-size: .85em; color: #888; padding-top: 1em; padding-bottom: 0; margin-bottom: -8px; margin-left: 1px; opacity: .9; }
.item-box p.meta a { color: #555; font-weight: 500; }
.item-box img { width: 100%; height: auto; transform: translateZ(0); border-top-left-radius: 6px; border-top-right-radius: 6px; }
.item-box p { color: #444; padding: 5px 20px; }
.item-box p.title { margin: 8px 0 0; padding-bottom: 1px; font-size: 1.4em; font-weight: 400; letter-spacing: .1px; }
.item-box p.description { color: #999; font-size: 16px; letter-spacing: .1px; margin-bottom: 65px; }
.is-small .item-box { width: 23%; margin-right: 1.6666%; box-shadow: none; border: none; background-color: transparent; border-radius: 5px; overflow: hidden; }
.is-small .item-box .item-link { padding-bottom: 10px; }
.is-small .item-box p.title { color: hsla(0, 0%, 100%, .6); font-size: .9em; margin: 3px 0 10px; padding: 0; text-align: center; }
.is-small .item-box img { width: 100%; padding-bottom: 0; margin-bottom: 0; transition: transform .2s ease; border-radius: 5px; }

@media (min-width: 1216px) {
  .main-category .item-box { width: 30.333%; margin-right: 3%; }
}

@media (max-width: 800px) {
  .main-category .item-box { width: 100%; margin-right: 0; }
}