Improve park detail page layout and ride display

Adds responsive grid column classes to Tailwind CSS and updates the park detail template to use a new custom component for displaying rides, removing direct links for property owner names.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0bdea3fb-49ea-4863-b501-fa6f5af0cbf0
Replit-Commit-Checkpoint-Type: intermediate_checkpoint

.replit

@@ -54,6 +54,10 @@ outputType = "webview"
 localPort = 5000
 externalPort = 80
 
+[[ports]]
+localPort = 35687
+externalPort = 3002
+
 [[ports]]
 localPort = 41923
 externalPort = 3000

static/css/tailwind.css

@@ -3228,6 +3228,11 @@
       flex: 1;
     }
   }
+  .sm\:grid-cols-1 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+  }
   .sm\:grid-cols-2 {
     @media (width >= 40rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3474,6 +3479,11 @@
       max-width: var(--container-2xl);
     }
   }
+  .lg\:grid-cols-1 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+  }
   .lg\:grid-cols-2 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3610,6 +3620,11 @@
       max-height: calc(100vh - 2rem);
     }
   }
+  .xl\:grid-cols-2 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .xl\:grid-cols-3 {
     @media (width >= 80rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));

templates/parks/park_detail.html

@@ -1,6 +1,7 @@
 {% extends "base/base.html" %}
 {% load static %}
 {% load park_tags %}
+{% load cotton %}
 
 {% block title %}{{ park.name }} - ThrillWiki{% endblock %}
 
@@ -77,10 +78,9 @@
             <div class="text-center">
                 <dt class="text-sm font-semibold text-gray-900 dark:text-white">Property Owner</dt>
                 <dd class="mt-1">
-                    <a href="{% url 'property_owners:property_owner_detail' park.property_owner.slug %}"
+                    <span class="text-sm font-bold text-sky-900 dark:text-sky-400">
-                       class="text-sm font-bold text-sky-900 dark:text-sky-400 hover:text-sky-800 dark:hover:text-sky-300">
                         {{ park.property_owner.name }}
-                    </a>
+                    </span>
                 </dd>
             </div>
         </div>
@@ -169,22 +169,9 @@
                     </a>
                 </div>
                 {% if park.rides.exists %}
-                    <div class="grid gap-4 md:grid-cols-2">
+                    <div class="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
                         {% for ride in park.rides.all|slice:":6" %}
-                            <div class="p-4 transition-colors rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
+                            <c-ride_card ride=ride url_variant="park" />
-                                <a href="{% url 'parks:rides:ride_detail' park.slug ride.slug %}" class="block">
-                                    <h3 class="mb-1 font-semibold text-gray-900 dark:text-white">{{ ride.name }}</h3>
-                                    <span class="text-blue-800 bg-blue-100 status-badge dark:bg-blue-700 dark:text-blue-50">
-                                        {{ ride.get_category_display }}
-                                    </span>
-                                    {% if ride.average_rating %}
-                                        <span class="flex items-center text-yellow-800 bg-yellow-100 status-badge dark:bg-yellow-600 dark:text-yellow-50">
-                                            <span class="mr-1 text-yellow-500 dark:text-yellow-200">★</span>
-                                            {{ ride.average_rating|floatformat:1 }}/10
-                                        </span>
-                                    {% endif %}
-                                </a>
-                            </div>
                         {% endfor %}
                     </div>
                 {% else %}