a {
    text-decoration: none;
    color: #FFAA33;
}

a:hover {
    color: #ADD8E6; /* slightly lighter orange */
}

/* Global HR Style */
hr {
    width: 100%;          /* Default to 90% of container width */
    height: clamp(3px, 0.5vw, 10px); /* Responsive height */
    border: none;        /* Remove default border */
}

.pet-wrapper {
    display:grid;
    grid-template-columns: 1fr;
    width: 90vw;
    gap: 2rem;
    padding-inline: clamp(12px,4vw,32px);
    justify-items: center;
}

.pet-row { 
    display: grid; 
    grid-template-columns: 1fr auto;
    gap: 5rem;
    justify-content: center;
    justify-self: center;
    margin: 0 auto;
}

/* Name of Pet */
.pet-row name{ 
    margin: 0 0 .75rem;
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-weight: bold;
    text-align: left;
    /* margin:0 auto */
}

/* Summary Text Under Pets */
.pet-row txt{ 
    margin: 0 0 .75rem;
    font-size: clamp(.5rem, 2vw, 1rem);
    text-align: left;
}

.pair-img-txt {
    display: flex;
    flex-direction: column; /* image above text */
    align-items: flex-start; /* left-align image and text */
    gap: 0.5rem;
}

.pair-img-txt img{
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0 0 .25rem 0; /* small gap below image */
    align-self: stretch;
    /* height: 250px; */
}

/* ensure custom tags behave like blocks and left-align */
.pair-img-txt name,
.pair-img-txt txt {
    display: block;
    text-align: left;
    width: 100%;
}

/* Constrain the pair container to the image width and enable wrapping */
.pair-img-txt {
    box-sizing: border-box;
    max-width: 300px; /* match image max-width */
    width: 100%;
}

.pair-img-txt name,
.pair-img-txt txt {
    white-space: normal;
    overflow-wrap: anywhere; /* allow breaks on long words */
    word-break: break-word;
}

@media(max-width:900px){
    .pet-row{
        grid-template-columns: 1fr;
    }
}