/* Tarot promptgen styles */


/* Holds all tarot spread elements; visible as lighter area */
.prompt-container {
    display: block;
    gap: 0.5em; 
    margin: 0 auto; 
    justify-items: center; 
    max-width: 600px;
    background-color: var(--tableau);
    border-radius: 6px;
}

/* Aligns each row of labels or cards*/
.prompt-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;
    text-align: center;
    justify-self: center;
    align-items: center;
    width: 100%;
}
.prompt-row > * { 
    justify-self: center; /* Center-align all elements in the row */
}

/* Labels for "Character" and "Subject" */
.card-category {
    min-height: 1em; /* Prevent collapse when empty */
	line-height: clamp(1.2em, 1.4, 1.6em);
	font-size: 1.8em; 
	font-size: clamp(24px,3vw,32px);
	font-family: var(--serif-font);
	font-style: normal;
	font-weight: normal;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

/* Writing prompts generated for each card */
.card-prompt {
    min-height: 1em; /* Prevent collapse when empty */
    font-size: 1.4em; 
    font-size: clamp(16px,2vw,20px);
    font-style: italic;
}

/* Picture of the card drawn */
.card-image {
    max-height: 320px;
    max-width: 100%;
    height: auto;
    width: auto;
    margin: 0.5em;
}
.card-image.reversed {
  transform: rotate(180deg);
}

/* Name of the card drawn */
.card-name {
    min-height: 2em; /* Prevent collapse when empty */
    font-family: var(--serif-font);
    padding-bottom: 2em;
}

/* Button position */
.button-row {
  display: flex;
  gap: 0.5em; /* space between buttons */
  margin-bottom: 0.5em; /* space below row */
  justify-content: center;
}




/* Only apply justify-self to label buttons */
.label-button {
  all: unset; /* Resets everything: font, padding, borders, etc. */
  font-family: var(--sans-serif-font);
  font-style: italic;
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.label-button:hover {
	color: var(--link-hover);
	text-decoration: underline;
	text-shadow: 0 0 10px var(--hover-shadow);
}