/* Della’s Beauty — small additions on top of dellas-base.css
   Utilities the brows page needs that the original compiled CSS did not include,
   written with the same values Tailwind would generate.                      */
.flex-col{flex-direction:column}
.mt-auto{margin-top:auto}
.self-center{align-self:center}
.mb-1{margin-bottom:.25rem}
.mb-4{margin-bottom:1rem}
.pb-4{padding-bottom:1rem}
.pt-6{padding-top:1.5rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.h-11{height:2.75rem}.w-11{width:2.75rem}
.aspect-\[4\/3\]{aspect-ratio:4/3}
.grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}
@media (min-width:640px){.sm\:w-auto{width:auto}}
@media (min-width:768px){.md\:max-w-none{max-width:none}}

/* Expandable curriculum inside each course card */
.db-details>summary{list-style:none;min-height:44px}
.db-details>summary::-webkit-details-marker{display:none}
.db-details[open] .db-plus{transform:rotate(45deg)}
.db-plus{display:inline-block;font-size:1.25rem;line-height:1;transition:transform .2s}
@media (prefers-reduced-motion:reduce){.db-plus{transition:none}}

/* Photo buttons (tap/click to enlarge) */
.db-zoom{cursor:zoom-in;padding:0;border:0;background:none;overflow:hidden}
.db-zoom img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.db-zoom:hover img{transform:scale(1.03)}}

/* Lightbox image: fits the screen, never upscaled beyond its file size */
.db-lb-img{max-width:100%;max-height:calc(100vh - 11rem);max-height:calc(100dvh - 11rem);width:auto;height:auto;object-fit:contain}

/* No horizontal page scroll on small screens */
html,body{overflow-x:clip}
@media (min-width:1024px){.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}