/* FONTS */
@font-face {
  font-family: 'Aktifo-B';
  src: url('https://explore-frontend-dev.s3.us-west-2.amazonaws.com/static/media/Aktifo-B-Black.f04c5126b84a58823a55.woff2') format('woff2'),
      url('https://explore-frontend-dev.s3.us-west-2.amazonaws.com/static/media/Aktifo-B-Black.cdd5c68ce635ce0c69ef.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aktifo-B';
  src: url('https://explore-frontend-dev.s3.us-west-2.amazonaws.com/static/media/Aktifo-B-ExtraBold.067bb2a3e033f319cc15.woff2') format('woff2'),
      url('https://explore-frontend-dev.s3.us-west-2.amazonaws.com/static/media/Aktifo-B-ExtraBold.a6cace908d0a713f0298.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aktifo-B';
  src: url('https://explore-frontend-dev.s3.us-west-2.amazonaws.com/static/media/Aktifo-B-Bold.c8a70cbbf8dd5485aa68.woff2') format('woff2'),
      url('https://explore-frontend-dev.s3.us-west-2.amazonaws.com/static/media/Aktifo-B-Bold.b2867f19282d5d73beca.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aktifo-B';
  src: url('https://explore-frontend-dev.s3.us-west-2.amazonaws.com/static/media/Aktifo-B-SemiBold.59c8f5cfd9235c756983.woff2') format('woff2'),
      url('https://explore-frontend-dev.s3.us-west-2.amazonaws.com/static/media/Aktifo-B-SemiBold.071129e374f077c22da6.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aktifo-B';
  src: url('https://explore-frontend-dev.s3.us-west-2.amazonaws.com/static/media/Aktifo-B-Medium.02987303d2ce0c99cb8b.woff2') format('woff2'),
      url('https://explore-frontend-dev.s3.us-west-2.amazonaws.com/static/media/Aktifo-B-Medium.d3550e1fff34bf18c8b5.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aktifo-B';
  src: url('https://explore-frontend-dev.s3.us-west-2.amazonaws.com/static/media/Aktifo-B-Book.adb071b6a82121ccb416.woff2') format('woff2'),
      url('https://explore-frontend-dev.s3.us-west-2.amazonaws.com/static/media/Aktifo-B-Book.c3f427c572042d3f3998.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aktifo-B';
  src: url('https://explore-frontend-dev.s3.us-west-2.amazonaws.com/static/media/Aktifo-B-Light.cf92770b1c02d9a1474a.woff2') format('woff2'),
      url('https://explore-frontend-dev.s3.us-west-2.amazonaws.com/static/media/Aktifo-B-Light.03bd3106b99700bd3578.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Apply font to elements */
body, h1, h2, h3, h4, h5, h6, p,
body .header-site-name,
body .portal__header__content__intro--heading,
body .portal__header__content__intro--intro,
body .portal__content__heading h2,
body .space-overview__hero__header__content__intro--heading,
body .space-overview__hero__header__content__intro--intro,
body .space-overview__content__heading h2,
body .tile__headline {
  font-family: 'Aktifo-B', sans-serif;
}

/* GLOBAL STYLES */
body {
  background-color: #F3F3F5;
}

:root {
  --K15t-foreground: #344145;
  --K15t-foreground-subtle: #5E7E8B;
  --K15t-link: #1D5DC3;
  --K15t-border-neutral: #D5E5EC;
  --K15t-border-brand: #A7C6CD;
}

.portal__content__items {
  padding: 0 !important;
}

/* Heading font weights and line heights */
h1 {
  font-weight: 600;
  line-height: 150%;
}

h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 150%;
}

/* HIDE SEARCH BAR */
.banner search-bar {
  display: none;
}

/* BANNER */
.banner hgroup {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* BANNER TEXT */
.banner hgroup p {
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
  max-width: 600px;
}

/* SECTIONS */
.spaces h2 {
    margin-block-end: 16px;
}

.spaces:not(:last-child) {
  border-block-end: none;
}

.content {
  padding-bottom: 100px !important;
  padding-top: 80px !important;
}

.content > .spaces {
  display: none !important;
}

#hubGroup-general hr {
  display: none !important;
}

hr {
  display: none !important;
}

.cs-portal-tiles__category {
  margin-bottom: 40px;
}

/* TILES */
.items.tiles [data-component="tile"] {
  display: flex;
  flex-direction: row;
  height: 104px;
  padding: 16px;
  align-items: flex-start;
  gap: 16px;
  border-radius: 10px;
  background-color: #FFF;
  border: none;
}

.items.tiles [data-component="tile"]:hover {
  box-shadow: 0 4px 6px 0 rgba(16, 24, 40, 0.15), 
              0 2px 4px 0 rgba(16, 24, 40, 0.08);
  transition: box-shadow 0.2s ease-in-out;
}

.tile {
  display: flex;
  flex-direction: row-reverse;
  height: 104px;
  padding: 16px;
  align-items: flex-start;
  gap: 16px;
  border-radius: 10px;
  background-color: #FFF;
  border: none;
  transition: box-shadow 0.2s ease-in-out;
}

.tile:hover {
  box-shadow: 0 4px 6px 0 rgba(16, 24, 40, 0.15), 0 2px 4px 0 rgba(16, 24, 40, 0.08);
}

/* TILE IMAGES */
.tile-image {
  display: flex;
  width: 42px;
  height: 42px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  flex: 0 0 auto;
}

.tile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* TILE BODY */
.tile-body {
  display: flex;
  padding-top: 6px;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;
  flex-direction: row;
  line-height: 30px; /* 150% */
  text-align: left;
}

/* TAILWIND CLASSES REPLACEMENTS */
/* Flex utilities */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-flow {
  flex-flow: row wrap;
}

.auto-rows-fr {
  grid-auto-rows: 1fr;
}

/* Width utilities */
.w-full {
  width: 100%;
}

/* Grid utilities */
.grid {
  display: grid;
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Gap utilities */
.gap-y-4 {
  row-gap: 1rem; /* 16px */
}

.gap-x-3 {
  column-gap: 0.75rem; /* 12px */
}

/* List utilities */
.list-none {
  list-style: none;
}

/* Column span utilities */
.col-span-12 {
  grid-column: span 12 / span 12;
}

/* Responsive utilities (md breakpoint = 768px) */
@media (min-width: 768px) {
  .md\:gap-y-8 {
    row-gap: 2rem; /* 32px */
  }

  .md\:gap-x-8 {
    column-gap: 2rem; /* 32px */
  }

  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }
}