/* The Social Wall block (resources/views/home-design/partials/social-wall.blade.php).
   Self-contained: it is drawn on the live home page and on home design 1. */
.sw-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 24px;
  align-items: stretch
}

.sw-split>* {
  min-width: 0
}

.sw-left {
  display: flex;
  flex-direction: column;
  gap: 24px
}

/* Both cards fill their column, so Get In Touch and the Social Wall end level. */
.sw-left>.git,
.sw-split>.sw-left+*>.sw {
  flex: 1 1 auto
}

.sw-split>.sw-left+* {
  display: flex;
  flex-direction: column
}

.sw-split>.sw-left+*>.sw {
  flex: 1 1 auto
}

.sw {
  --sw-blue: #2d448c;
  --sw-orange: #e98703;
  --sw-ink: #16204a;
  --sw-tx: #4c5470;
  font-family: Montserrat, system-ui, sans-serif;
  background: #fff;
  border: 1px solid #e6e8ef;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(20, 30, 70, .05);
  color: var(--sw-ink)
}

.sw * {
  box-sizing: border-box
}

.sw-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start
}

.sw-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sw-orange);
  margin-bottom: 6px
}

.sw-title {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--sw-ink);
  margin: 0
}

.sw-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--sw-tx);
  margin: 8px 0 0
}

.sw-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex: none
}

.sw-hash {
  font-size: 13px;
  font-weight: 800;
  color: var(--sw-blue)
}

.sw-all {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--sw-ink);
  border: 1px solid #d9dce6;
  border-radius: 999px;
  padding: 9px 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s
}

.sw-all:hover {
  background: #f4f6fb
}

.sw-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: #eef1f7;
  border-radius: 14px;
  padding: 5px;
  margin: 22px 0 18px;
  width: max-content;
  max-width: 100%
}

.sw-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 11px 20px;
  font: 600 14px Montserrat, system-ui, sans-serif;
  color: var(--sw-ink);
  cursor: pointer;
  transition: background .2s, color .2s
}

.sw-tab i {
  font-size: 18px
}

.sw-tab:hover {
  background: rgba(255, 255, 255, .7)
}

.sw-tab.is-on {
  background: #0a66c2;
  color: #fff
}

.sw-tab.sw-x.is-on {
  background: #111
}

.sw-tab.sw-instagram.is-on {
  background: linear-gradient(45deg, #f09433, #dc2743 55%, #bc1888)
}

.sw-tab.sw-youtube.is-on {
  background: #e00
}

/* Cards sit in an even grid: every card in a row is as tall as the tallest, pictures line up along the bottom. */
.sw-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch
}

.sw-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid #e6e8ef;
  border-radius: 16px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(20, 30, 70, .04);
  transition: transform .25s, box-shadow .25s
}

.sw-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(20, 30, 70, .1)
}

.sw-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px
}

.sw-ava {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 18px;
  flex: none;
  background: #0a66c2
}

.sw-ava.sw-x {
  background: #111
}

.sw-ava.sw-instagram {
  background: linear-gradient(45deg, #f09433, #dc2743 55%, #bc1888)
}

.sw-ava.sw-youtube {
  background: #e00
}

.sw-who {
  display: flex;
  flex-direction: column;
  min-width: 0
}

.sw-who b {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.sw-who small {
  font-size: 12px;
  color: var(--sw-tx)
}

.sw-text {
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 12px;
  color: #1d2340;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.sw-tag {
  color: #1d5bd6
}

.sw-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin: auto 0 12px;
  background: #eef1f7
}

/* YouTube serves a 4:3 thumbnail with black bars top and bottom; a 16:9 crop removes them. */
.sw-thumb {
  position: relative;
  display: block;
  margin: auto 0 12px;
  border-radius: 10px;
  overflow: hidden;
  background: #111;
  flex: 1 1 auto;
  min-height: 340px
}

.sw-thumb .sw-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0
}

.sw-thumb::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 32px;
  margin: -16px 0 0 -23px;
  border-radius: 9px;
  background: rgba(238, 0, 0, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.5 7.5v9l7.5-4.5z'/%3E%3C/svg%3E") center/26px no-repeat;
  transition: transform .25s
}

.sw-card:hover .sw-thumb::after {
  transform: scale(1.1)
}

.sw-foot {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #7b819a;
  margin-top: auto
}

.sw-empty {
  font-size: 14px;
  color: var(--sw-tx);
  padding: 18px 4px
}

.sw-empty a {
  color: var(--sw-blue);
  font-weight: 700
}

/* Embeds from the networks draw their own card, so ours adds no border, padding or shadow. */
.sw-embed {
  display: block;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  overflow: hidden;
  border-radius: 12px
}

.sw-embed:hover {
  transform: none;
  box-shadow: none
}

.sw-embed iframe {
  display: block;
  width: 100%;
  height: 640px;
  border: 0
}

/* Each channel is a carousel: the grid becomes a snapping row, 3 cards to a view (2 for the Instagram and
   LinkedIn embeds, 1 on a phone). Arrows sit on the sides, dots underneath. */
.sw-car {
  position: relative
}

.sw-car .sw-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch
}

.sw-car .sw-grid::-webkit-scrollbar {
  display: none
}

.sw-car .sw-grid>.sw-card {
  flex: 0 0 calc((100% - 32px) / 3);
  scroll-snap-align: start
}

.sw-car .sw-grid-wide>.sw-card {
  flex-basis: calc((100% - 16px) / 2)
}

.sw-car .sw-grid>.sw-card {
  min-height: 640px
}

.sw-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  border-radius: 50%;
  border: 1px solid #d9dce6;
  background: #fff;
  color: var(--sw-ink);
  box-shadow: 0 4px 12px rgba(20, 30, 70, .18);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 14px;
  transition: background .2s, color .2s, opacity .2s
}

.sw-arrow:hover:not(:disabled) {
  background: var(--sw-orange);
  border-color: var(--sw-orange);
  color: #fff
}

.sw-arrow:disabled {
  opacity: .35;
  cursor: default
}

.sw-prev {
  left: -8px
}

.sw-next {
  right: -8px
}

.sw-dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 14px;
  min-height: 12px
}

.sw-dot {
  width: 22px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center
}

.sw-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #c9d3e4;
  transition: width .25s, background-color .25s
}

.sw-dot.is-on::before {
  width: 22px;
  background: var(--sw-orange)
}

.sw-car.is-single .sw-arrow,
.sw-car.is-single .sw-dots {
  display: none
}

@media (max-width:1100px) {
  .sw-split {
    grid-template-columns: 1fr
  }

  .sw-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .sw-car .sw-grid>.sw-card {
    flex-basis: calc((100% - 16px) / 2)
  }
}

@media (max-width:640px) {
  .sw {
    padding: 20px 16px;
    border-radius: 18px
  }

  .sw-top {
    flex-direction: column
  }

  .sw-side {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%
  }

  .sw-title {
    font-size: 22px
  }

  /* the four channel tabs stay on one row and swipe sideways */
  .sw-tabs {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
  }

  .sw-tabs::-webkit-scrollbar {
    display: none
  }

  .sw-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    padding: 10px 16px
  }

  .sw-grid {
    grid-template-columns: 1fr
  }

  .sw-car .sw-grid>.sw-card,
  .sw-car .sw-grid-wide>.sw-card {
    flex-basis: 100%
  }

  .sw-prev {
    left: -4px
  }

  .sw-next {
    right: -4px
  }
}

/* Get In Touch card (resources/views/home-design/partials/get-in-touch.blade.php) */
.git {
  font-family: Montserrat, system-ui, sans-serif;
  background: #fff;
  border: 1px solid #e6e8ef;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(20, 30, 70, .05);
  color: #16204a
}

.git * {
  box-sizing: border-box
}

.git-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #e98703;
  margin-bottom: 6px
}

.git-title {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0
}

.git-sub {
  font-size: 14.5px;
  line-height: 1.6;
  color: #4c5470;
  margin: 12px 0 0
}

.git-contact {
  list-style: none;
  margin: 18px 0 22px;
  padding: 0;
  display: grid;
  gap: 12px
}

.git-contact li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: #4c5470
}

.git-contact svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  fill: none;
  stroke: #1d9270;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.git-contact a {
  color: inherit;
  text-decoration: none
}

.git-contact a:hover {
  color: #1d9270
}

.git-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.git-form label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #16204a;
  align-content: start;
  min-width: 0
}

.git-form .git-full {
  grid-column: 1/-1
}

.git-form input,
.git-form select,
.git-form textarea {
  width: 100%;
  font: 400 14px Montserrat, system-ui, sans-serif;
  color: #16204a;
  background: #fff;
  border: 1px solid #d9dce6;
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s
}

.git-form textarea {
  resize: vertical;
  min-height: 110px
}

.git-form input::placeholder,
.git-form textarea::placeholder {
  color: #9aa0b2
}

.git-form input:focus,
.git-form select:focus,
.git-form textarea:focus {
  outline: none;
  border-color: #1d9270;
  box-shadow: 0 0 0 3px rgba(29, 146, 112, .15)
}

.git-err {
  grid-column: 1/-1;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 12.5px
}

.git-err ul {
  margin: 0;
  padding-left: 18px
}

.git-err.hidden,
.git-field-err.hidden {
  display: none
}

.git-field-err {
  font-size: 12px;
  font-weight: 500;
  color: #dc2626
}

.git-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: auto;
  border: 0;
  border-radius: 999px;
  background: #1d9270;
  color: #fff;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  color: rgb(255, 255, 255);
  gap: 12px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .2s, transform .2s
}

.git-submit:hover {
  background: #177a5c
}

.git-submit:disabled {
  opacity: .6;
  cursor: not-allowed
}

.git-submit span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #fff;
  color: #1d9270;
  display: grid;
  place-items: center;
  font-size: 13px;
}

@media (max-width:640px) {
  .git {
    padding: 20px 16px;
    border-radius: 18px
  }

  .git-title {
    font-size: 24px
  }

  .git-form {
    grid-template-columns: 1fr
  }
}