/* =====================================================
   ALL-WAYS CAREERS – HEADER BRAND ANIMATION
   Targets provided HTML exactly
   ===================================================== */

/* ===============================
   Keyframes
   =============================== */

@keyframes fadeSlideRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeSlideLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===============================
   Brand wrapper
   =============================== */

a.brand.has-logo-image {
  display: inline-flex;
  align-items: center;
}

/* ===============================
   Logo (slides down)
   =============================== */

a.brand.has-logo-image img.custom-logo {
  opacity: 0;
  animation: fadeSlideDown 0.9s ease-out forwards;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

/* ===============================
   Site title (slides in from right)
   =============================== */

a.brand.has-logo-image .site-title {
  opacity: 0;
  animation: fadeSlideRight 0.9s ease-out forwards;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

/* ===============================
   Tagline container
   =============================== */

a.brand.has-logo-image .site-description {
  display: block;
}

/* ===============================
   Tagline: first half
   "Life Design" (from left)
   =============================== */

a.brand.has-logo-image .tagline-part-1 {
  display: inline-block;
  opacity: 0;
  animation-name: fadeSlideLeft;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-delay: 1.2s;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

/* ===============================
   Tagline: second half
   "and Career Consulting" (from below)
   =============================== */

a.brand.has-logo-image .tagline-part-2 {
  display: inline-block;
  opacity: 0;
  animation-name: fadeSlideUp;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-delay: 1.9s;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

/* ===============================
   Accessibility: Reduced Motion
   =============================== */

@media (prefers-reduced-motion: reduce) {
  a.brand.has-logo-image img.custom-logo,
  a.brand.has-logo-image .site-title,
  a.brand.has-logo-image .site-description span {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =====================================================
   ALL-WAYS BANNER – SCROLL ANIMATION
   Using: slide-from-left / slide-from-bottom
   ===================================================== */


/* --- KEYFRAMES --- */

@keyframes fadeSlideRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeSlideLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* --- INITIAL STATE --- */

/* Whole block hidden */
.animate-block {
  opacity: 0;
}

/* Tagline hidden */
.animate-block .slide-from-left,
.animate-block .slide-from-bottom {
  opacity: 0;
  display: inline-block;
}


/* --- TRIGGERED (scroll into view) --- */

/* Container animation */
.animate-block.in-view {
  animation: fadeSlideRight 0.9s ease-out forwards;
}

/* First line */
.animate-block.in-view .slide-from-left {
  animation: fadeSlideLeft 0.8s ease-out forwards;
  animation-delay: 0.7s;
}

/* Second line */
.animate-block.in-view .slide-from-bottom {
  animation: fadeSlideUp 0.8s ease-out forwards;
  animation-delay: 1.2s;
}


/* --- ACCESSIBILITY --- */

@media (prefers-reduced-motion: reduce) {
  .animate-block,
  .animate-block .slide-from-left,
  .animate-block .slide-from-bottom {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Container */
.tile {
  position: relative;
  overflow: hidden;
  height: 100%;
}

/* --- Bottom-right image (TARGET THE IMG, NOT WRAPPER) --- */

.tile .tile-bg img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: auto;
  max-width: 65%;
  max-height: 75%;
  z-index: 1;
}

/* Kill any wrapper interference */
.tile .tile-bg {
  position: static !important;
}

.tile .tile-bg figure {
  margin: 0 !important;
  float: none !important;
}

/* --- Top-left icon --- */

.tile .tile-icon img {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 90px; /* tweak */
  height: auto;
  z-index: 3;
}

/* --- Text above image --- */

.tile h4,
.tile p,
.tile ul {
  position: relative;
  z-index: 5;
}

/* Optional spacing control */
.tile ul {
  max-width: 56%;
}

@media (max-width: 782px) {
  #qr, #qr_img, #allways-banner {
    display: none;
  }
}

@media ( (max-width: 1160px) and (min-width: 782px) ) or (max-width:610px) {
  .tile ul {
    max-width: 100%;
  }
  
  .tile .tile-bg img {
  /*  filter: brightness(1.2) contrast(0.9) opacity(0.5); */
    top:0;
    height: 150px;
    margin-top: 5px;
  }

  .tile .wp-block-columns.is-layout-flex {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  .tile .wp-block-column {
    width: 100% !important;
    flex-basis: auto !important;
  }

  /* Fix icon positioning */
  .tile .tile-icon img {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block;
  }

  /* Centre text */
  .tile h4,
  .tile p {
    text-align: left;
    padding: 0 7px;
    margin-top: 0 !important;
  }
  
}

@media (max-width: 782px) and (min-width: 610px) {

  /* DO NOT break layout */
  .tile .wp-block-columns.is-layout-flex {
    display: block !important;
  }

  /* 🔥 THIS is the key */
  .tile .wp-block-column:last-child {
    margin-left: 140px; /* match icon width + gap */
    margin-top:0;
    display:block !important;
  }

}

#bundles .wp-block-column {
  transition: transform 0.15s ease-out;
}

#bundles > .wp-block-columns > .wp-block-column:hover {
  transform: translateY(-4px);
}

#bundles > .wp-block-columns > .wp-block-column:active {
  transform: translateY(-4px) scale(0.98);
}

#bundles .bundle-link {
  position: absolute;
  inset: 0;
  z-index: 10;
  text-indent: -9999px; /* hide any text */
}
/*  */