/* ==========================================================================
   Component classes.

   The compiled bundle (assets/css/paaaaws.css) is generated from a Tailwind
   source that is not in this repository, so it cannot be rebuilt. That leaves
   two ways to describe a card: ten utility classes, or one class that means
   "card". This file is the second one.

   Every class here replaces a utility chain that was repeated across templates
   with small variations -- eight spellings of the container, three of the
   card, twenty two of the button. The markup now says what the thing is, and
   the variations live in one place instead of being retyped.

   Loaded after the bundle, so a rule of equal specificity wins.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

/* The site measure. Was "max-w-[1240px] mx-auto px-gutter-mobile lg:px-margin
   md:px-gutter", retyped with the padding order shuffled in three places. */
.pw-container {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--spacing-gutter-mobile);
}

@media (min-width: 768px) {
	.pw-container {
		padding-inline: var(--spacing-gutter);
	}
}

@media (min-width: 1024px) {
	.pw-container {
		padding-inline: var(--spacing-margin);
	}
}

/* Vertical rhythm for a full width band. */
.pw-section {
	padding-block: var(--spacing-2xl);
}

.pw-section--tight {
	padding-block: var(--spacing-xl);
}

/* The band that opens a page. */
.pw-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--spacing-2xl);
	background: var(--color-surface);
}

/* Every page starts at the same distance from Astra's header. Templates used
   either a full section scale or the component fallback, which created a
   visible 10px-to-75px range between otherwise related pages. */
#contenido > header.pw-hero,
#contenido > section:first-child,
#contenido > article > header:first-child {
	padding-top: 2rem;
}

@media (min-width: 768px) {
	#contenido > header.pw-hero,
	#contenido > section:first-child,
	#contenido > article > header:first-child {
		padding-top: 2.5rem;
	}
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

/* Was "flex flex-col rounded-xl overflow-hidden bg-surface-container-lowest
   ring-1 ring-secondary/20 hover:shadow-md transition-all", with an "h-full"
   variant that differed by one class. */
.pw-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--color-surface-container-lowest);
	box-shadow: 0 0 0 1px rgb(140 78 45 / .2);
	transition: box-shadow .2s ease;
}

.pw-card:hover {
	box-shadow: 0 4px 14px rgb(23 14 10 / .14);
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */

/* The pill. Variants only change the fill, never the shape. */
.pw-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-xs) var(--spacing-md);
	border-radius: 9999px;
	border: 0;
	background: var(--color-surface-container-high);
	color: var(--color-on-surface-variant);
	font-family: var(--font-label-caps);
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .02em;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.pw-btn:hover {
	background: var(--color-surface-container-highest);
}

.pw-btn--primary {
	background: var(--color-secondary);
	color: var(--color-on-secondary);
}

.pw-btn--primary:hover {
	background: var(--color-secondary-fixed-dim);
	color: var(--color-on-secondary-fixed);
}

/* --------------------------------------------------------------------------
   Language switch
   -------------------------------------------------------------------------- */

/*
   The bundle styles .paaaaws-announce__lang-off as inactive text: reduced
   opacity and `cursor: default`, which is right while it was a <span> that
   promised nothing. It is an <a> to the translated page now, so it needs a
   pointer and a hover, and the underline browsers put on links has to come off
   or the bar grows a second visual language next to the current one.

   Specificity matches the bundle's single class, and this file loads after it.
 */
.paaaaws-announce__lang-off {
	cursor: pointer;
	text-decoration: none;
	transition: opacity .2s ease;
}

.paaaaws-announce__lang-off:hover,
.paaaaws-announce__lang-off:focus-visible {
	opacity: 1;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Eyebrow
   -------------------------------------------------------------------------- */

/* The small caps label above a heading. Was "uppercase font-label-caps
   text-label-caps text-secondary" plus, in one template, an extra
   "tracking-widest". */
.pw-eyebrow {
	font-family: var(--font-label-caps);
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--color-secondary);
}