/*
Theme Name:   Seven Stars Child
Theme URI:    https://7star.co.il/
Description:  Child theme for Seven Stars. This is the theme to activate. Keep it thin — site-specific overrides only. All templates, post types, ACF field groups, and the REST layer live in the parent theme.
Author:       Matat
Author URI:   https://matat.io/
Template:     sevenstars
Version:      0.1.0
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  sevenstars-child
Tags:         rtl-language-support, custom-menu, custom-logo, translation-ready
*/

/*
 * Overrides go below this line.
 *
 * This file is enqueued after the parent's compiled main.min.css, so anything
 * here wins on equal specificity. Prefer editing the parent's scss/ sources for
 * design work; reserve this file for genuine site-specific deviations.
 */

/* ---------------------------------------------------------------------------
 * Instagram feed — reshape the Matat Instagram Feed plugin to the comp.
 *
 * The homepage "הכוכבים במדיה" floor renders [matat_instagram_feed] inside
 * .media-feed. The plugin ships its own layout, which the comp does not use:
 * a four-column mosaic that promotes posts 1 and 10 to 2x2 tiles, with no
 * gutters and square crops. The comp is a plain three-up grid of portrait
 * tiles.
 *
 * Every rule below is scoped to .media-feed so the plugin still renders its
 * stock layout anywhere else it is used, and each carries one more class than
 * the plugin rule it replaces — the override holds regardless of which
 * stylesheet the browser loads first.
 *
 * Geometry comes from the design, not from guesswork: .media-holder is capped
 * at 576px, and (576 - 2 * 6px gutters) / 3 = 188px, matching the parent's
 * registered 'sevenstars-media-tile' size of 188x241.
 * ------------------------------------------------------------------------- */

/* The .media-head bar above the grid is already the design's handle treatment.
   The plugin prints a second one, and its own centring rule is scoped to a
   .matat-instagram-section wrapper the theme never renders, so it lands
   unstyled and inherits the page's RTL flow. */
.media-feed .minf-profile-name {
	display: none;
}

/* Plugin default: repeat(4, ...) with grid-gap 0 and a 1400px cap. */
.media-feed .minf-instagram-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-gap: 6px;
	max-width: none;
}

/* Undo the mosaic. The plugin spans posts 1 and 10 across 2x2; the comp keeps
   every tile the same size. */
.media-feed .minf-instagram-grid .minf-insta-col:nth-child(1),
.media-feed .minf-instagram-grid .minf-insta-col:nth-child(10) {
	grid-column: auto / span 1;
	grid-row: auto / span 1;
}

/* The plugin holds tiles square with padding-bottom: 100% on the anchor, and
 * renders the image hard to the edge. The comp keeps the image full-bleed but
 * rounds the corners; overflow clips the plugin's absolutely positioned image
 * to that radius, which border-radius alone would not do. */
.media-feed .minf-insta-item a {
	padding-bottom: 0;
	aspect-ratio: 188 / 241;
	border-radius: 10px;
	overflow: hidden;
}

/* Feed images are served uncropped at their native Instagram ratios (the
   plugin's crop option is off), and the plugin stretches them to 100%/100%
   inside the tile. Cover fills the tile from the centre without distorting. */
.media-feed .minf-insta-item a img {
	object-fit: cover;
	object-position: center;
}

.venue-card-body .btn {
	align-self: flex-end;
	margin-top: 14px;
}

@media (max-width: 767px) {
	.venue-card-image img {
		aspect-ratio: 340 / 255;
		height: auto;
	}
}

.attraction-slide-image img {
	aspect-ratio: 345 / 220;
}

.attraction-slide-caption {
	display: none;
}

.icon-text-listing li .text-wrap p span {
	display: block;
}

@media (min-width: 1024px) {
	.store-card-contact {
		font-size: 15px;
	}
}

.store-card-contact:after {
	content: '';
	background: linear-gradient(to top, rgba(17, 23, 41, 1) 30%, rgba(17, 23, 41, 0.4) 100%);
	height: 20px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.store-card-contact .store-card-in-wrap {
	padding: 10px 0;
	overflow-y: auto;
	scrollbar-width: none;
	display: flex;
	flex-direction: column;
	text-align: center;
}

/*
 * Centre with auto margins, not justify-content: center. When the content is
 * taller than the box, justify-content pushes the overflow above the top edge,
 * where the scroll container cannot reach it. Auto margins collapse to 0
 * instead, so the text starts at the top and scrolls normally.
 */
.store-card-contact .store-card-in-wrap > :first-child {
	margin-top: auto;
}

.store-card-contact .store-card-in-wrap > :last-child {
	margin-bottom: auto;
}

.store-card-contact .store-card-in-wrap::-webkit-scrollbar {
	display: none;
}

@media (min-width: 1024px) {
	.attraction-slide-image img {
		aspect-ratio: 200 / 113;
	}

	.icon-text-listing li:nth-child(2n) {
		width: 31%;
	}
}

@media (min-width: 1024px) and (max-width: 1266px) {
	.icon-text-listing li {
		width: 60%;
	}

	.icon-text-listing li:nth-child(2n) {
		width: 40%;
	}
}

@media (max-width: 767px) {
	.minf-instagram-grid .minf-insta-col:nth-child(4),
	.minf-instagram-grid .minf-insta-col:nth-child(5) {
		display: block;
	}
}

.coupon-card-media:after {
	display: none;
}

/*
 * Coupon terms: same scrollable panel as .store-card-contact. The wrapper is
 * centred by the panel's align-items and capped at its height, so short terms
 * stay centred and long ones scroll from the top.
 */
.coupon-card-terms {
	padding-top: 0;
	padding-bottom: 0;
}

.coupon-card-terms:after {
	content: '';
	background: linear-gradient(to top, rgba(17, 23, 41, 1) 30%, rgba(17, 23, 41, 0.4) 100%);
	height: 20px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	pointer-events: none;
}

.coupon-card-terms .coupon-card-in-wrap {
	width: 100%;
	max-height: 100%;
	padding: 10px 0 14px;
	overflow-y: auto;
	scrollbar-width: none;
	overscroll-behavior: contain;
}

.coupon-card-terms .coupon-card-in-wrap::-webkit-scrollbar {
	display: none;
}

.coupon-card-terms .coupon-card-in-wrap > :first-child {
	margin-top: 0;
}

.coupon-card-terms .coupon-card-in-wrap > :last-child {
	margin-bottom: 0;
}

/* drop the full-card toggle under the visible terms so wheel / touch scroll reaches them */
.coupon-card:hover .coupon-card-toggle,
.coupon-card.is-terms-visible .coupon-card-toggle {
	z-index: 3;
}


/*
 * Featured event: the body now lives inside each slide, so the copy slides
 * with its image. The slider fills the card and every slide stretches to the
 * tallest one, keeping the date / CTA on the same line between slides.
 */
.event-card-slider {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.event-card-slider .slick-list {
	display: flex;
	flex-grow: 1;
}

.event-card-slider .slick-track {
	display: flex;
}

.event-card-slider .slick-slide,
.event-card-slider.slick-initialized .event-card-slide + .event-card-slide {
	display: flex;
	flex-direction: column;
	height: auto;
}

.event-card-slide .event-card-body {
	display: flex;
	flex-direction: column;
}

.event-card-slide .event-card-foot {
	margin-top: auto;
	padding-top: 16px;
}

/* arrows stay over the photo (72% of its height) rather than the whole slide */
.event-card-slider .slick-arrow {
	top: 144px;
}

@media (min-width: 768px) {
	.event-card-slider .slick-arrow {
		top: 186px;
	}
}


/* store without a link: plain tile, no "clickable" lift on hover */
.store-card-static {
	cursor: default;
}

.store-card-static:hover .store-card-logo {
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}