/*
 Theme Name:   Rife Child
 Theme URI:    https://yourdomain.com/
 Description:  Child theme of Rife Free.
 Author:       Your Name
 Author URI:   https://yourdomain.com/
 Template:     rife-free
 Version:      1.0.0
*/

/* --- Container for the three columns --- */
.three-column-links {
  display: flex;
  width: 100%;
  height: 600px; /* tall & dramatic */
  margin: 0;
  gap: 0; /* no gaps */
  background: transparent !important; /* No background behind images */
}

/* --- Each column link --- */
.column-link {
  flex: 1;
  position: relative;
  text-decoration: none;
  border-radius: 0; /* sharp edges */
  overflow: hidden;
  transition: transform 0.5s ease;
  cursor: pointer;

  background-color: transparent !important; /* No background color behind image */

  /* Background image fills the block fully */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- Hover zoom effect --- */
.column-link:hover {
  transform: scale(1.05);
  z-index: 2;
}

/* --- Button overlay on bottom center --- */
.column-link > button {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff6f61;
  color: white;
  border: none;
  padding: 16px 48px;
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow: 0 6px 12px rgba(255, 111, 97, 0.6);
  transition: background 0.3s ease, box-shadow 0.3s ease;
  user-select: none;
  z-index: 10; /* Above the image */
}

/* --- Button hover --- */
.column-link > button:hover {
  background: #ff856f;
  box-shadow: 0 8px 18px rgba(255, 133, 111, 0.9);
}

/* --- Responsive: stack columns vertically --- */
@media (max-width: 768px) {
  .three-column-links {
    flex-direction: column;
    height: auto;
  }

  .column-link {
    height: 350px;
  }

  .column-link > button {
    bottom: 20px;
    padding: 14px 36px;
    font-size: 1rem;
  }
}