/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
  --penguin-timeline-green: #75c842;
  --penguin-timeline-green-soft: #eaf7e5;
  --penguin-timeline-text: #0b0b0b;
}

@keyframes penguinTimelineLineGrow {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.penguin-timeline {
  --slide-min-height: clamp(520px, 56vw, 760px);
  --timeline-dot-x: clamp(58px, 5.6vw, 116px);
  background: #fff;
  color: var(--penguin-timeline-text);
  overflow: hidden;
  position: relative;
  width: 100%;

  .penguin-timeline__viewport {
    overflow: hidden;
    width: 100%;
  }

  .penguin-timeline__track {
    display: flex;
    transition: transform 420ms ease;
    will-change: transform;
  }

  .penguin-timeline__slide {
    flex: 0 0 100%;
    min-height: var(--slide-min-height);
    overflow: hidden;
    padding: clamp(72px, 9vw, 132px) clamp(24px, 5vw, 88px)
      clamp(104px, 8vw, 132px);
    position: relative;
  }

  .penguin-timeline__content {
    align-items: center;
    display: grid;
    gap: clamp(32px, 8vw, 128px);
    grid-template-columns: minmax(220px, 0.82fr) minmax(260px, 1fr);
    margin-inline: auto;
    max-width: 1600px;
    min-height: calc(var(--slide-min-height) - clamp(176px, 17vw, 264px));
    position: relative;
    z-index: 2;
  }

  .penguin-timeline__copy {
    max-width: 460px;
    position: relative;
    z-index: 3;
  }

  .penguin-timeline__year {
    font-size: clamp(1.5rem, 2vw, 2.65rem);
    font-weight: 800;
    line-height: 1;
    margin: clamp(0px, 8vw, 160px) 0 clamp(72px, 8vw, 120px);
  }

  .penguin-timeline__date {
    color: var(--penguin-timeline-green);
    font-size: clamp(4.5rem, 6.6vw, 8.5rem);
    line-height: 0.9;
    margin: 0 0 18px;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .penguin-timeline__description {
    font-size: clamp(1.35rem, 2.05vw, 2.6rem);
    line-height: 1.18;
    max-width: 620px;

    p {
      margin: 0;
    }
  }

  .penguin-timeline__media {
    aspect-ratio: 1;
    background: var(--penguin-timeline-green-soft);
    border: 9px solid var(--penguin-timeline-green);
    border-radius: 50%;
    box-sizing: border-box;
    max-width: 400px;
    min-width: 0;
    overflow: hidden;
    position: relative;
    width: min(40vw, 400px);
    z-index: 4;
  }

  .penguin-timeline__image {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .penguin-timeline__line {
    height: 4px;
    inset: 50% 0 auto;
    position: absolute;
    transform: translateY(-50%);
    z-index: 1;

    &::before {
      background: var(--penguin-timeline-green);
      content: "";
      height: 100%;
      left: var(--timeline-dot-x);
      position: absolute;
      right: 0;
      transform: scaleX(0);
      transform-origin: left center;
    }
  }

  .penguin-timeline__slide.is-active {
    .penguin-timeline__line::before {
      animation: penguinTimelineLineGrow 1200ms cubic-bezier(0.16, 0.74, 0.32, 1)
        120ms both;
    }
  }

  .penguin-timeline__node {
    align-items: center;
    background: var(--penguin-timeline-green);
    border-radius: 50%;
    display: flex;
    height: clamp(24px, 2.2vw, 36px);
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(24px, 2.2vw, 36px);
    z-index: 2;
  }

  .penguin-timeline__node--active {
    background: #fff;
    border: 3px solid var(--penguin-timeline-green);
    height: clamp(54px, 5.5vw, 64px);
    left: var(--timeline-dot-x);
    width: clamp(54px, 5.5vw, 64px);

    &::after {
      background: var(--penguin-timeline-green);
      border-radius: 50%;
      content: "";
      height: 38%;
      width: 38%;
    }
  }

  .penguin-timeline__node--next {
    left: 84%;
  }

  .penguin-timeline__ghost-day {
    color: var(--penguin-timeline-green-soft);
    font-size: clamp(26rem, 46vw, 74rem);
    line-height: 0.8;
    position: absolute;
    right: 24px;
    top: 50%;
    z-index: 0;
    transform: translateY(-50%);
  }

  .penguin-timeline__controls {
    align-items: center;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    left: clamp(24px, 5vw, 88px);
    position: absolute;
    right: clamp(24px, 5vw, 88px);
    z-index: 5;
  }

  .penguin-timeline__dots {
    display: flex;
    gap: clamp(14px, 1.3vw, 24px);
    grid-column: 2;
  }

  .penguin-timeline__dot,
  .penguin-timeline__arrow {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    font: inherit;
    padding: 0;

    &:focus-visible {
      outline: 3px solid var(--penguin-timeline-text);
      outline-offset: 6px;
    }
  }

  .penguin-timeline__dot {
    border: 3px solid var(--penguin-timeline-green);
    border-radius: 50%;
    height: clamp(17px, 1.2vw, 24px);
    width: clamp(17px, 1.2vw, 24px);

    &.is-active {
      background: var(--penguin-timeline-green);
    }
  }

  .penguin-timeline__arrows {
    display: flex;
    gap: clamp(22px, 2vw, 34px);
    grid-column: 3;
    justify-self: end;
  }

  .penguin-timeline__arrow {
    height: clamp(40px, 3vw, 56px);
    position: relative;
    width: clamp(28px, 2vw, 42px);

    span {
      border-color: var(--penguin-timeline-green);
      border-style: solid;
      border-width: 0 5px 5px 0;
      display: block;
      height: clamp(26px, 2vw, 42px);
      transform: rotate(135deg);
      width: clamp(26px, 2vw, 42px);
    }
  }

  .penguin-timeline__arrow--next {
    span {
      transform: rotate(-45deg);
    }
  }

  @media (max-width: 900px) {
    & {
      --slide-min-height: 740px;
      --timeline-dot-x: 100px;
    }

    .penguin-timeline__slide {
      padding: 56px 24px 112px;
    }

    .penguin-timeline__content {
      align-content: center;
      gap: 36px;
      grid-template-columns: 1fr;
      min-height: calc(var(--slide-min-height) - 168px);
    }

    .penguin-timeline__copy {
      max-width: min(100%, 560px);
    }

    .penguin-timeline__year {
      margin-bottom: 64px;
    }

    .penguin-timeline__media {
      width: min(78vw, 420px);
    }

    .penguin-timeline__line {
      top: 12%;
    }

    .penguin-timeline__node--next {
      left: auto;
      right: 40px;
    }

    .penguin-timeline__ghost-day {
      font-size: clamp(18rem, 68vw, 32rem);
      right: -24px;
      top: 22%;
    }

    .penguin-timeline__controls {
      grid-template-columns: 1fr auto;
      left: 24px;
      right: 24px;
    }

    .penguin-timeline__dots {
      grid-column: 1;
      justify-self: start;
    }

    .penguin-timeline__arrows {
      grid-column: 2;
    }
  }

  @media (max-width: 560px) {
    & {
      --slide-min-height: 680px;
    }

    .penguin-timeline__ghost-day {
      display: none;
    }

    .penguin-timeline__slide {
      padding-inline: 18px;
    }

    .penguin-timeline__date {
      font-size: clamp(3.5rem, 17vw, 5.2rem);
    }

    .penguin-timeline__description {
      font-size: 1.25rem;
    }

    .penguin-timeline__year {
      font-size: 1.35rem;
      margin-bottom: 52px;
    }

    .penguin-timeline__media {
      width: min(84vw, 340px);
    }

    .penguin-timeline__controls {
      align-items: end;
      gap: 24px;
      grid-template-columns: 1fr;
    }

    .penguin-timeline__dots {
      display: none;
    }

    .penguin-timeline__arrows {
      grid-column: 1;
      justify-self: center;
      margin-top: 26px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .penguin-timeline__track {
      transition: none;
    }

    .penguin-timeline__slide.is-active {
      .penguin-timeline__line::before {
        animation: none;
        transform: scaleX(1);
      }
    }
  }
}

@media (min-width: 768px) {
  #brx-content .bricks-shape-divider-inner {
    width: 100% !important;
    height: 162px !important;
    left: 0 !important;
  }
  
}