/* =============================================================
   reviews.css  -  Shared structural styles for review pages
   Loaded only on /reviews/* pages (via extra_css in reviews.cgi).

   RESPONSIBILITY SPLIT:
     reviews.css     layout, sizing, spacing, float/flex structure,
                     positioning, breakpoints, clearfixes.
     site CSS        colours, backgrounds, gradients, borders,
                     shadows, border-radius, font colours,
                     brand-specific decoration.

   SECTIONS:
     1.  Review list: card layout
     2.  Review detail: header & hero image
     3.  Review detail: body image floats (inline in body_html)
     4.  Review detail: article typography helpers
     5.  Pagination
     6.  Product-page review card widget
   =============================================================

   NOTE on .product__reviews-card::before (accent bar):
     gadgets.css  uses inset: 0 0 auto 0  (top bar)
     wyw.css      uses inset: 0 auto 0 0  (left bar)
   These express different design intent so are intentionally
   kept in each site's CSS rather than unified here.

   NOTE on .product__reviews-heading::after (accent line):
     gadgets.css  uses width: 100%  (full-width underline)
     wyw.css      uses width: 56px  (short accent dash)
   Only the shared structural properties are set here.
   ============================================================= */


/* ============================================================
   1.  Review list: card layout
   ============================================================ */

/* Page heading on the review index */
.reviews-heading {
	margin: 0 0 1.25rem;
	font-size: 1.6rem;
	line-height: 1.2;
}

/* Individual card — works with or without an image column */
.review-card {
	display: flex;
	flex-direction: row-reverse; /* image right, text left when image present */
	align-items: flex-start;
	gap: 1.25rem;
	margin-bottom: 1.25rem;
	padding: 1.1rem 1.15rem 1rem;
	border-radius: 18px;
}

.review-card-image-link {
	flex: 0 0 35%;
	max-width: 35%;
	display: block;
}

.review-card-image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.review-card-content {
	flex: 1 1 0;
}

.review-card-title {
	font-size: 1.2rem;
	margin: 0 0 0.35rem 0;
	font-weight: 600;
	line-height: 1.35;
}

.review-card-title a {
	text-decoration: none;
}

.review-card-title a:hover {
	text-decoration: underline;
}

.review-card-subtitle {
	margin: 0 0 0.4rem;
	font-size: 0.97rem;
	line-height: 1.6;
}

.review-card-meta {
	margin: 0;
	font-size: 0.88rem;
}

@media (max-width: 640px) {
	.review-card {
		flex-direction: column;
		padding: 1rem 0.95rem 0.95rem;
		border-radius: 14px;
	}

	.review-card-image-link {
		flex: 0 0 auto;
		max-width: 100%;
	}
}


/* ============================================================
   2.  Review detail: header & hero image
   ============================================================ */

.review-header {
	position: relative;
	margin-bottom: 1.5rem;
}

/* Float right so text wraps around it */
.review-hero-image {
	float: right;
	max-width: 400px;
	margin: 0 0 1rem 1rem;
}

.review-hero-img {
	display: block;
	width: 100%;
	height: auto;
}

.review-title,
.review-subtitle,
.review-meta-card {
	max-width: 100%;
}

@media (max-width: 640px) {
	.review-header {
		padding-right: 0;
	}

	.review-hero-image {
		float: none;
		max-width: 100%;
		margin: 1rem 0;
	}
}


/* ============================================================
   3.  Review detail: body image floats (inline in body_html)
   ============================================================ */

.reviews_img_src {
	max-width: 250px;
	max-height: 300px;
	width: auto;
	height: auto;
	display: block;
}

.reviews_img_left {
	float: left;
	margin: 0 1.5rem 1rem 0;
}

.reviews_img_right {
	float: right;
	margin: 0 0 1rem 1.5rem;
}

/* Clearfix so the review section clears floated body images */
.review-body::after {
	content: '';
	display: table;
	clear: both;
}

/* Prevent list/paragraph content wrapping into left-floated images.
   display:flow-root creates a new block formatting context on each element
   so it sits fully beside the float rather than wrapping underneath it. */
.review-body p,
.review-body ul {
	display: flow-root;
}

@media (max-width: 640px) {
	.reviews_img_left,
	.reviews_img_right {
		float: none;
		margin: 0 0 1rem 0;
		max-width: 100%;
	}
}


/* ============================================================
   4.  Review detail: article typography helpers
   ============================================================ */

/* Ensure long links in review body do not overflow their container */
.review-body a {
	overflow-wrap: break-word;
	word-break: break-word;
}


/* ============================================================
   5.  Pagination
   Site CSS supplies: border-top colour, link border/colour,
   link hover background/colour, p text colour.
   ============================================================ */

.reviews-pagination {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 2rem 0;
	padding: 0.75rem 0;
	border-top: 1px solid; /* colour supplied by site CSS */
}

.reviews-pagination p {
	margin: 0;
	font-size: 0.9rem;
}

.reviews-page-link {
	display: inline-block;
	padding: 0.2rem 0.4rem;
	border-radius: 4px;
	border: 1px solid; /* colour supplied by site CSS */
	text-decoration: none;
	font-size: 0.9rem;
	transition: background 0.15s, color 0.15s;
}


/* ============================================================
   6.  Product-page review card widget
   Site CSS supplies: all colours, backgrounds, gradients,
   shadows, border colours, and the ::before accent bar
   position/direction (top vs left differs per site).
   ============================================================ */

.product__reviews {
	margin-top: 1.5rem;
}

.product__reviews-heading {
	display: inline-block;
	position: relative;
	margin: 0 0 0.8rem;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.25;
	letter-spacing: 0.01em;
}

/* Structural base for the accent line beneath the heading.
   Width and background are intentionally left to site CSS
   (gadgets: full-width; wyw: 56px fixed dash). */
.product__reviews-heading::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 0.5rem;
	border-radius: 999px;
}

.product__reviews-card {
	position: relative;
	padding: 1.1rem 1.15rem;
	border-radius: 18px;
	overflow: hidden;
}

.product__reviews-card::before {
	content: "";
	position: absolute;
}

.product__reviews-title {
	margin: 0 0 0.45rem;
	font-size: 1.08rem;
	font-weight: bold;
	line-height: 1.35;
}

.product__reviews-subtitle {
	margin: 0;
	font-size: 0.97rem;
	line-height: 1.65;
	max-width: none;
}

.product__reviews-cta {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.product__reviews-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1rem;
	border-radius: 999px;
	border: 1px solid;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.product__reviews-link:hover,
.product__reviews-link:focus {
	transform: translateY(-1px);
	text-decoration: none;
}

@media (max-width: 640px) {
	.product__reviews-heading {
		font-size: 1.05rem;
		margin-bottom: 0.75rem;
	}

	.product__reviews-card {
		padding: 0.95rem;
		border-radius: 14px;
	}

	.product__reviews-title {
		font-size: 1rem;
	}

	.product__reviews-subtitle {
		font-size: 0.93rem;
		line-height: 1.58;
	}

	.product__reviews-link {
		width: 100%;
	}
}