/*
Theme Name: Drew Custom Twenty Twenty-Four Child
Theme URI: https://wordpress.org/themes/twentytwentyfour-child/
Author: the WordPress team
Author URI: https://wordpress.org
Template: twentytwentyfour
Description: Drew Custom Child Theme based on Twenty Twenty-Four

Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.0
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* Style the ACF image links */
.acf-image-post-link {
    display: block;
    text-decoration: none;
    overflow: hidden;
    border-radius: 4px;
}

.acf-image-post-link img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.acf-image-post-link:hover img {
    transform: scale(1.05);
}

.drew-link-pop figure {
    transition: transform 0.3s ease;	
}

.drew-link-pop:hover figure {
	transform: scale(1.05);
}

.drew-link-pop img {
  transform: scale(1); 
  transition: transform 0.3s ease; 
  will-change: transform; 
  width: 100%;
  display: block;
}

.drew-link-pop:hover img {
  transform: scale(1.05); 
}

.drew-link-pop {
  overflow: hidden;
  margin: 0;
}

.drew-quote {
  font-style: italic;
	line-height: 1.3;
	margin: 2em;
}

.drew-closer {
	font-size: 150%;
}

.drew-cover-transparency {opacity: 0.5}

.drew-series-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px;
}

.drew-series-card{
  display:block;
  text-decoration:none;
}

.drew-series-card__media{
  border-radius: 10px;
  overflow:hidden;
}

.drew-series-card__cover{
  display:block;
  width:33%;
  height:auto;
}

.drew-series-card__title{
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.25;
}

/* Make the injected link fill the whole column */
.retailer-column-link{
  display:block;
  height:100%;
  width:100%;
  color:inherit;
  text-decoration:none;
}

/* Optional niceties */
.wp-block-column[class*="retailer-"]{
  cursor:pointer;
}

.retailer-column-link:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.truncate-multi-line {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6; /* number of lines to show */
  -webkit-box-orient: vertical;
  /* text-overflow: ellipsis; is sometimes also used here, though -webkit-line-clamp handles the ellipsis generation */
}